/* BAQ header, primary nav (up to 3 levels) and footer. */

.baq-header {
    background: var(--baq-ink);
    color: var(--baq-paper);
    border-bottom: 1px solid #333;
}

.baq-header .baq-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 84px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 34px;
}

.baq-logo img {
    /* Removes the few px of inline-image baseline gap so the mark sits
       flush in the flex row the way the old text baseline did. */
    display: block;
}

.baq-reserve-btn {
    display: inline-block;
    flex: none;
    background: var(--baq-paper);
    color: var(--baq-ink);
    padding: 13px 16px;
    font-size: var(--baq-text-label-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--baq-paper);
    white-space: nowrap;
}

.baq-reserve-btn:hover,
.baq-reserve-btn:focus-visible {
    background: transparent;
    color: var(--baq-paper);
}

/*
 * Primary nav, rendered by the Autonav block's main_nav template as hidden
 * checkboxes paired with <label for="">, one per disclosure point (mobile
 * hamburger, level-2 dropdown, level-3 flyout) — not <details>/<summary>.
 * Chrome forces display:none on closed <details> content in a way author
 * CSS cannot override regardless of specificity, which broke "always
 * visible on desktop" outright. A checkbox has no such enforced hiding: it
 * is a normal, always-focusable form control, and :checked ~ sibling
 * selectors are plain CSS with no browser-owned behavior fighting them.
 * Desktop hover is layered on top as a convenience; the checkbox itself
 * still gives keyboard users native Tab/Space toggling at any width.
 */

.baq-main-nav {
    flex: 1 1 auto;
}

.baq-nav-check {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.baq-nav-check:focus-visible + label {
    outline: 2px solid var(--baq-gold);
    outline-offset: 2px;
}

.baq-nav-toggle-label {
    display: none;
}

.baq-main-nav .navbar-nav {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.baq-nav-check-main:checked ~ .navbar-nav {
    display: block;
}

.baq-main-nav .nav-link {
    display: block;
    font-family: var(--baq-font-body);
    font-size: var(--baq-text-label-size);
    letter-spacing: 0.045em;
    color: var(--baq-paper);
    background: none;
    border: 0;
    cursor: pointer;
}

.baq-main-nav a.nav-link:hover,
.baq-main-nav a.nav-link:focus-visible,
.baq-main-nav a.nav-link.active,
.baq-main-nav a.nav-link.nav-path-selected {
    color: var(--baq-taupe);
}

.baq-main-nav .nav-item {
    position: relative;
}

/* level 2 */
.baq-main-nav .dropdown-menu {
    display: none;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: var(--baq-paper);
    color: var(--baq-ink);
    border-top: 2px solid var(--baq-gold);
}

.baq-main-nav .baq-nav-check:checked ~ .dropdown-menu {
    display: block;
}

.baq-main-nav .dropdown-menu .dropdown-item {
    display: block;
    padding: 9px 20px;
    font-size: var(--baq-text-label-size);
    letter-spacing: 0.02em;
    color: var(--baq-ink);
    cursor: pointer;
}

.baq-main-nav .dropdown-menu a.dropdown-item:hover,
.baq-main-nav .dropdown-menu a.dropdown-item:focus-visible {
    background: var(--baq-bone);
}

.baq-main-nav .dropdown-submenu > label.dropdown-item::after {
    content: '›';
    float: right;
    margin-left: 12px;
    color: var(--baq-gold);
}

@media (min-width: 992px) {
    .baq-header .baq-header-inner {
        flex-wrap: nowrap;
    }

    .baq-main-nav .navbar-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 26px;
    }

    .baq-main-nav .nav-link {
        padding: 30px 0;
    }

    /* level 2/3 become absolute flyouts, opened by hover/focus OR :checked */
    .baq-main-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
        z-index: 40;
    }

    .baq-main-nav .dropdown-menu .dropdown-menu {
        top: -10px;
        left: 100%;
    }

    /* flip a level-3 flyout to the left when it's the last two nav items,
       so it doesn't run off the right edge of the viewport */
    .baq-main-nav .nav-item:nth-last-child(-n+2) .dropdown-menu .dropdown-menu {
        left: auto;
        right: 100%;
    }

    .baq-main-nav .nav-item:hover > .dropdown-menu,
    .baq-main-nav .nav-item:focus-within > .dropdown-menu,
    .baq-main-nav li:hover > .dropdown-menu,
    .baq-main-nav li:focus-within > .dropdown-menu {
        display: block;
    }
}

@media (max-width: 991.98px) {
    .baq-header .baq-header-inner {
        flex-wrap: wrap;
    }

    .baq-nav-toggle-label {
        display: inline-block;
        background: none;
        border: 1px solid var(--baq-paper);
        color: var(--baq-paper);
        padding: 8px 12px;
        font-size: var(--baq-text-label-size);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .baq-main-nav {
        flex-basis: 100%;
        order: 3;
    }

    .baq-main-nav .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        border-top: 1px solid #333;
        padding-top: 6px;
        margin-top: 6px;
    }

    .baq-main-nav .nav-link {
        padding: 14px 0;
        width: 100%;
    }

    .baq-main-nav .dropdown-menu {
        position: static;
        padding-left: 16px;
        background: transparent;
        border-top: 0;
    }

    .baq-main-nav .dropdown-menu .dropdown-item {
        color: var(--baq-paper);
    }

    .baq-main-nav .dropdown-menu a.dropdown-item:hover {
        color: var(--baq-taupe);
    }
}

/* ---- footer ---- */

/*
 * Atomik's own base CSS sets `div.theme-atomik footer{background:#f3f3f3}`
 * (specificity 0,1,2), which beats a plain `.baq-footer` class rule
 * (0,1,0) outright regardless of source order. Matching that ancestor
 * context here (0,2,1) is what actually wins, not !important.
 */
.theme-atomik footer.baq-footer {
    background: var(--baq-ink);
    color: var(--baq-paper);
    padding: 80px 0 34px;
}

.baq-footer .shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 34px;
}

.baq-footer-main {
    display: grid;
    grid-template-columns: 6fr 3fr 3fr;
    gap: 55px;
    padding-bottom: 60px;
}

.baq-footer h2 {
    font-size: 43px;
    font-weight: var(--baq-weight-display-lg);
    line-height: 1.1;
    max-width: 500px;
    color: var(--baq-paper);
}

.baq-footer h3 {
    /* Real <h3> tag — without its own weight it inherits the base h1-h6
       rule's display-face weight despite being set to DM Sans here. */
    font-family: var(--baq-font-body);
    font-weight: 500;
    font-size: var(--baq-text-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: var(--baq-gold);
}

.baq-footer p,
.baq-footer a {
    font-size: var(--baq-text-meta-size);
    line-height: 1.9;
    color: #cbc4be;
}

/*
 * Same specificity bug as the footer background fix above, just on `a`
 * instead of the footer element itself: Atomik's base skin
 * (css/skins/rustic-elegance.css) ships `div.theme-atomik footer a{color:
 * #6b7075}` at (0,1,3), which beats the `.baq-footer a` half of the rule
 * just above (0,1,1) outright — the `p` half isn't affected, since an
 * inherited color never competes with an explicit same-element rule
 * regardless of specificity, but `a` gets a genuine same-element fight
 * and #6b7075 was winning it. #6b7075 on this footer's ink background is
 * 3.95:1, below the 4.5:1 floor. Matching `.theme-atomik footer.baq-footer`
 * ancestor context (0,2,2) restores the `p`/`a` rule's own intended
 * #cbc4be here (11.47:1), which is what this footer's links were always
 * meant to render as — same color as the surrounding footer paragraph
 * text, secondary to the gold `h3` headings (6.08:1) by being plain
 * body-toned text rather than a competing accent color.
 */
.theme-atomik footer.baq-footer a {
    color: #cbc4be;
}

.theme-atomik footer.baq-footer a:focus-visible {
    outline: 2px solid var(--baq-gold);
    outline-offset: 2px;
}

.baq-footer-logo {
    display: block;
    margin-bottom: 18px;
}

.baq-footer-bottom {
    border-top: 1px solid #333;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    font-size: var(--baq-text-label-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f8983;
}

@media (max-width: 560px) {
    .baq-footer-main {
        grid-template-columns: 1fr;
    }

    .baq-footer-bottom {
        flex-direction: column;
        gap: 20px;
    }
}

/* ---- testimonial box ----
 * Retuned to close a page quietly rather than announce itself: bone
 * background instead of rose (the palette's strongest color), Dancing
 * Script dropped from Bold to Regular (400), a smaller quote size, and
 * shorter vertical padding.
 *
 * Self-hosted Dancing Script, static Regular (400) instance cut from the
 * same canonical variable source as the Bold instance, OFL licensed.
 * The Bold file (dancing-script-bold.woff2) is left on disk, unreferenced,
 * in case the heavier weight is wanted again; only this Regular @font-face
 * is declared now.
 *
 * Contrast, calculated: --baq-ink on --baq-bone is 16.25:1, comfortably
 * clears 4.5:1. --baq-gold on --baq-bone is 2.67:1, and does NOT clear
 * the 3:1 floor for the stars as specified; reported rather than swapped
 * without asking (see report). --baq-gold hairline below the quote is
 * decorative, not text, so it isn't held to the same 3:1 gate.
 */

@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dancing-script-regular.woff2') format('woff2');
}

.baq-testimonial {
    background: var(--baq-bone);
    padding: 64px 0;
}

.baq-testimonial-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.baq-testimonial-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}

.baq-testimonial-stars svg {
    width: 22px;
    height: 22px;
    fill: var(--baq-gold);
}

.baq-testimonial-quote {
    font-family: 'Dancing Script', cursive;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.5;
    color: var(--baq-ink);
    margin: 0 0 28px;
}

/*
 * Hairline edge, placed above the name rather than at the box's outer
 * top edge. This mirrors .baq-signature elsewhere on the site, which
 * already uses a 1px gold rule to tie a quote to its attribution; here
 * that same idea is rotated horizontal and centered to fit a full-bleed,
 * centered box instead of a left-aligned one. Kept as its own element
 * rather than a border on .baq-testimonial-name, since the name's
 * styling itself is only to change by color.
 */
.baq-testimonial-rule {
    width: 40px;
    height: 0;
    margin: 0 auto 22px;
    border: 0;
    border-top: 1px solid var(--baq-gold);
}

.baq-testimonial-name {
    font-family: var(--baq-font-body);
    font-size: var(--baq-text-meta-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--baq-ink);
    margin: 0;
}

@media (max-width: 560px) {
    .baq-testimonial {
        padding: 45px 0;
    }

    .baq-testimonial-quote {
        font-size: 24px;
    }
}