/* room-finder.css - "Find Your Room" entry points (banners, nav item, phone pill,
   hero button, inline link) plus the /rooms/#slug arrival glow.
   Public pages only; never loaded by the kiosk. Every class is prefixed rf-. */

/* ===== 1. Banner (whole banner is one link; spans only, so body.dark p can't recolour it) ===== */
.rf-cta {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas: "icon text" "btn btn";
    gap: 12px 14px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2f5410, #1a2e09);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(26, 46, 9, .28);
    font-family: 'Open Sans', sans-serif;
}
.rf-cta:hover,
.rf-cta:focus {
    color: #fff;
    text-decoration: none;
}
/* Two-tone ring, readable on the dark homepage and the light rooms / Team
   Building panels alike: a lime band against the banner, a dark edge outside */
.rf-cta:focus-visible {
    outline: 3px solid #1a2e09;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #8fd14f, 0 6px 24px rgba(26, 46, 9, .28);
}
.rf-cta__icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(143, 209, 79, .14);
    color: #8fd14f;
    font-size: 24px;
    line-height: 1;
}
.rf-cta__text {
    grid-area: text;
    min-width: 0;
}
.rf-cta__eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8fd14f;
}
.rf-cta__title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-wrap: balance;
}
.rf-cta__sub {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
    color: #d9e8c8;
}
.rf-cta__btn {
    grid-area: btn;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    background: #72c02c;
    color: #0e1a05;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s ease;
}
.rf-cta__btn .bi {
    transition: transform .2s ease;
}
.rf-cta__go {
    grid-area: go;
    color: #8fd14f;
    font-size: 22px;
    line-height: 1;
}
.rf-cta:active .rf-cta__btn {
    background: #8fd14f;
}
@media (hover: hover) and (pointer: fine) {
    .rf-cta:hover .rf-cta__btn {
        background: #8fd14f;
    }
    .rf-cta:hover .rf-cta__btn .bi,
    .rf-cta:hover .rf-cta__go {
        transform: translateX(3px);
    }
    .rf-cta__go {
        transition: transform .2s ease;
    }
}
@media (min-width: 768px) {
    .rf-cta {
        grid-template-columns: 52px 1fr auto;
        grid-template-areas: "icon text btn";
        gap: 16px 20px;
        padding: 20px 24px;
    }
    .rf-cta__icon {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }
    .rf-cta__title {
        font-size: 20px;
    }
}

/* 1b. Compact banner (top of /rooms/): one row, arrow instead of a button */
.rf-cta--compact {
    grid-template-columns: 40px 1fr 24px;
    grid-template-areas: "icon text go";
    gap: 12px;
    padding: 12px 16px;
}
.rf-cta--compact .rf-cta__icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
}
.rf-cta--compact .rf-cta__title {
    font-size: 16px;
}
@media (min-width: 768px) {
    .rf-cta--compact {
        grid-template-columns: 40px 1fr 24px;
        grid-template-areas: "icon text go";
        padding: 14px 20px;
    }
    .rf-cta--compact .rf-cta__title {
        font-size: 18px;
    }
}

/* 1c. Compact on phones only (homepage, where the hero's own button is in the
   same first screen): one quiet row with an arrow below 768px, the full banner
   with its button from 768px. The markup carries both the button and the arrow. */
@media (max-width: 767.98px) {
    .rf-cta--compact-sm {
        grid-template-columns: 44px 1fr 24px;
        grid-template-areas: "icon text go";
    }
    .rf-cta--compact-sm .rf-cta__btn {
        display: none;
    }
}
@media (min-width: 768px) {
    .rf-cta--compact-sm .rf-cta__go {
        display: none;
    }
}

/* 1d. Stacked on small phones (a long eyebrow + title): the text takes the
   full width, the icon steps aside */
@media (max-width: 399.98px) {
    .rf-cta--stack {
        grid-template-columns: 1fr;
        grid-template-areas: "text" "btn";
    }
    .rf-cta--stack .rf-cta__icon {
        display: none;
    }
}

/* ===== 2. Navbar item ===== */
/* Interior pages (#erNavBar): an outline pill; solid fill only when it is the current page */
#erNavBar .rf-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#erNavBar .rf-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #72c02c;
    border-radius: 999px;
    padding: .3rem .8rem;
    color: #8fd14f;
    white-space: nowrap;
    background: transparent;
}
#erNavBar .rf-nav .nav-link:hover {
    color: #0e1a05;
    background: #72c02c;
}
#erNavBar .rf-nav.active .nav-link {
    color: #0e1a05;
    background: #72c02c;
    border-color: #72c02c;
}
/* Every interior navbar link gets the lime keyboard ring (Bootstrap's faint
   blue glow vanishes on the black bar), not just the Find Your Room pill */
#erNavBar .nav-link:focus-visible,
#erNavBar .rf-nav .nav-link:focus-visible {
    outline: 3px solid #8fd14f;
    outline-offset: 2px;
    box-shadow: none;
}
/* Phone menu: a little air so the pill doesn't touch its neighbours. Where the
   lime header pill (.rf-pill, right before the menu) is already on screen, the
   menu leaves the item out rather than repeat it. */
@media (max-width: 767.98px) {
    #erNavBar .rf-nav {
        padding: 4px 0;
    }
    #erNavBar .rf-nav .nav-link {
        min-height: 44px;
    }
    .rf-pill + #erNavBar .rf-nav {
        display: none;
    }
}
/* 768-1199px: icon-only pill (the title attribute + hidden label keep its name).
   The links' side padding trims from .5rem to .4rem here so the extra item costs
   no extra line: one row from 992px, and below that "Rooms & Pricing" keeps
   the same two lines it always had. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #erNavBar .rf-nav .rf-nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    #erNavBar .nav-link {
        padding-left: .4rem;
        padding-right: .4rem;
    }
    #erNavBar .rf-nav {
        margin: 0 2px 0 4px;
    }
    #erNavBar .rf-nav .nav-link {
        padding: .3rem .5rem;
    }
}
@media (min-width: 1200px) {
    #erNavBar .rf-nav {
        margin: 0 4px;
    }
}

/* Homepage (#mainNav): inherits the existing link colours (white, then dark on
   scroll). 992-1199px: the label would wrap every item onto two lines, so it
   hides there, and the icon gets the interior nav's lime ring so it still
   reads as a button. */
#mainNav .rf-nav .bi {
    margin-right: 2px;
    color: #8fd14f;
}
/* The interior nav's lime keyboard ring (the browser's default dark ring
   vanishes on the black bar) */
#mainNav .rf-nav .nav-link:focus-visible {
    outline: 3px solid #8fd14f;
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: none;
}
/* Phone menu: a full 44px target */
@media (max-width: 991.98px) {
    #mainNav .rf-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #mainNav .rf-nav .rf-nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    #mainNav .rf-nav .bi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: -4px 0;
        border: 1px solid #72c02c;
        border-radius: 50%;
        font-size: 15px;
    }
}

/* ===== 3. Phone header pill (interior pages, <768px; markup carries d-md-none) ===== */
.rf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: #72c02c;
    color: #0e1a05;
    font: 600 14px/1 'Open Sans', sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.rf-pill:hover,
.rf-pill:focus {
    color: #0e1a05;
    text-decoration: none;
}
.rf-pill:active {
    background: #8fd14f;
}
.rf-pill:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ===== 4. Homepage hero button (layout rules live in home.css) ===== */
.rf-hero-btn {
    background: #72c02c !important;
    border-color: #72c02c !important;
    color: #0e1a05 !important;
}
.rf-hero-btn:hover,
.rf-hero-btn:focus-visible {
    background: #8fd14f !important;
    border-color: #8fd14f !important;
    color: #0e1a05 !important;
}
/* Keyboard focus: a white ring that reads on the dark hero photos */
.rf-hero-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: none !important;
}

/* ===== 5. Inline link: light panels (.bg-light) by default, dark variant for dark surfaces ===== */
.rf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-weight: 600;
    color: #2f5410;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.rf-link:hover {
    color: #1a2e09;
}
.rf-link--dark {
    color: #8fd14f;
}
.rf-link--dark:hover {
    color: #b9e58a;
}
.rf-link:focus-visible {
    outline: 3px solid #8fd14f;
    outline-offset: 2px;
    border-radius: 4px;
}
/* The light-panel link (rooms cards, Private Events): a dark green ring
   (lime would all but vanish on #ccc / #f8f9fa) */
.rf-link:not(.rf-link--dark):focus-visible {
    outline-color: #2f5410;
}
/* Inside a sentence: flow and wrap like text (an inline-flex box wraps as a block
   and strands the arrow at the far right). The vertical padding widens the tap
   area without changing the line height; the arrow stays glued to the last word
   via the &nbsp; before it in the markup. Only the words (the inner <span>) are
   underlined, so no underlined gap trails into the arrow. */
.rf-link--inline {
    display: inline;
    padding: 10px 0;
    text-decoration: none;
}
.rf-link--inline > span {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Keyboard focus: drop the tap padding so the ring hugs each line of a wrapped
   link instead of striking through the copy around it (vertical padding on an
   inline box never moves the layout). */
.rf-link--inline:focus-visible {
    padding: 0;
    outline-width: 2px;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ===== 6. /rooms/#slug arrival glow: the room the visitor came for lights up once ===== */
/* Inset ring: on phones the room card runs edge to edge, where an outer ring
   would be off screen; the scroll margin keeps the top edge in view too. */
.room:target {
    border-radius: 12px;
    scroll-margin-top: 8px;
    animation: rf-glow 1.6s ease-out 1;
}
@keyframes rf-glow {
    0% { box-shadow: inset 0 0 0 3px #8fd14f, 0 0 0 4px rgba(143, 209, 79, .35); }
    100% { box-shadow: inset 0 0 0 3px rgba(143, 209, 79, 0), 0 0 0 4px rgba(143, 209, 79, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rf-cta,
    .rf-cta * {
        transition: none !important;
        animation: none !important;
    }
    .room:target {
        animation: none;
        box-shadow: inset 0 0 0 2px #72c02c;
    }
}