/*
 * Header bar and Big Menu overlay.
 *
 * Figma: `Menu` desktop (1:1070) and mobile (1:1373); `Big Menu` (1:4727) with
 * its Destinations state (1:4539); the 375 menu frames (1:4772, 1:4798).
 *
 * Enqueued after bootstrap.min.css, so these rules win ties without
 * !important - see the cascade note at the top of style.css.
 *
 * Fonts follow the frames: Lyon for the nav items, Geologica for everything
 * small - the MENU and CLOSE labels, Book Now, the destination groups, the
 * phone number and the language switcher. Geologica ships as one variable face
 * covering 100-900, so the design's 200 and 300 are real weights rather than
 * the nearest Lyon has. Issue #7 had built these roles in Lyon 400; issue #28
 * puts them back.
 *
 * Breakpoint: the design supplies 375 and 1440 only. The desktop layout takes
 * over at 992 rather than at the theme's xxl (1400), which left every laptop
 * narrower than 1400 on the 375 layout - 32px items, no MENU label, no image.
 *
 * Between 992 and 1440 the desktop values interpolate on vw and land exactly
 * on the frame's numbers at 1440: 48px items are 3.334vw and a 56px gap is
 * 3.889vw. Above 1440 the overlay's body stops growing and centres its
 * contents - the background still runs the full width, only the contents are
 * capped, which is what --menu-content-width does. Neither bar is in that: the
 * header bar and the overlay's own bar both run full width at every size, and
 * they have to, because one opens directly over the other.
 *
 * The Destinations state departs from node 1:4539 on issue #28: no photograph,
 * three columns rather than two, and 16px destination names rather than 12.
 */

:root {
    /* Figma NEW/Shark and Off-White. Distinct from --color-black (#171717). */
    --color-shark: #212529;
    --color-offwhite: #fffcfc;
    /*
     * The 1440 frame less its own 32 of padding either side. Past that width
     * the Big Menu overlay keeps its contents at this width and centres them,
     * rather than letting the nav and the image drift apart. The header bar
     * does not use it - that one runs full width at every size.
     */
    --menu-content-width: 1376px;
    /*
     * The header row's real height, which is the Book Now button's - 24 of
     * line box inside 12 (18 on desktop) of padding. The overlay's bar has no
     * button in it, so left alone it would be shorter than the bar it opens
     * over and the logo would step up. Both bars carry it as a min-height.
     */
    --menu-row-height: 48px;
}

/*------------------------------------------------------------

#HEADER BAR

--------------------------------------------------------------*/

.header-wrapper {
    /* Figma px 16 / py 24 mobile, px 32 / py 24 desktop. */
    padding: 24px 16px;
    background: var(--color-offwhite);
}

.menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--menu-row-height);
}

.header-logo .logo {
    /* 123 x 36.743 mobile, 180 x 53.77 desktop. */
    width: 123px;
    height: auto;
    display: block;
}

.header-actions {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

/* Figma `Button CTA`: Geologica Regular 16/24. */
.book-now-btn,
.book-now-btn:hover,
.book-now-btn:focus {
    display: inline-block;
    padding: 12px 32px;
    background: var(--color-shark);
    color: var(--color-offwhite);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
}

.menu-toggle,
.menu-close {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 0;
    border: 0;
    background: none;
    color: var(--color-shark);
    cursor: pointer;
}

.menu-toggle .icon,
.menu-close .icon {
    display: block;
    flex: none;
}

.menu-toggle-label,
.menu-close-label {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
}

/*
 * Labels are desktop-only; the 375 frames show both icons alone. CLOSE was
 * keeping its label on mobile where MENU hid its own, which put the two icons
 * a label's width apart - the overlay's icon at the left of a wide button, the
 * header's on its own at the right edge.
 */
.menu-toggle-label,
.menu-close-label {
    display: none;
}

/*
 * The two icons animate on hover, using the shape each one already has rather
 * than a decoration laid over it.
 *
 * The hamburger is three rules of decreasing length. They even up to the top
 * one's width, shortest first, and fall back on the way out. scaleX from the
 * left cap: the stroke is horizontal, so scaling across it leaves its 1px
 * thickness alone and only stretches the round cap. transform-box: view-box
 * because a zero-height path has no usable fill-box to take an origin from.
 *
 * The close icon is symmetric, so it turns instead - a quarter turn leaves it
 * looking identical, which is the point: the motion reads, the icon does not
 * change.
 */
.icon-menu path {
    transform-box: view-box;
    transform-origin: 0.75px center;
    transition: transform 0.3s ease-in-out;
}

.menu-close .icon-close {
    transition: transform 0.3s ease-in-out;
}

@media (hover: hover) {
    /* 14.8 and 7.3 user units long, both reaching the top rule's 22.5. */
    .menu-toggle:hover .icon-menu path:nth-child(2) {
        transform: scaleX(1.5203);
        transition-delay: 0.05s;
    }

    .menu-toggle:hover .icon-menu path:nth-child(3) {
        transform: scaleX(3.0822);
        transition-delay: 0.1s;
    }

    .menu-close:hover .icon-close {
        transform: rotate(90deg);
    }
}

/* Keyboard gets the same, whether or not the device can hover. */
.menu-toggle:focus-visible .icon-menu path:nth-child(2) {
    transform: scaleX(1.5203);
}

.menu-toggle:focus-visible .icon-menu path:nth-child(3) {
    transform: scaleX(3.0822);
}

.menu-close:focus-visible .icon-close {
    transform: rotate(90deg);
}

/*
 * Same selectors, so these win on source order rather than specificity -
 * transition: none alone would only make the movement instant, not remove it.
 */
@media (prefers-reduced-motion: reduce) {
    .icon-menu path,
    .menu-close .icon-close,
    .menu-toggle:hover .icon-menu path:nth-child(2),
    .menu-toggle:hover .icon-menu path:nth-child(3),
    .menu-toggle:focus-visible .icon-menu path:nth-child(2),
    .menu-toggle:focus-visible .icon-menu path:nth-child(3),
    .menu-close:hover .icon-close,
    .menu-close:focus-visible .icon-close {
        transform: none;
        transition: none;
    }
}

.header-wrapper.dark {
    background: var(--color-black);
}

.header-wrapper.dark .menu-toggle {
    color: var(--color-white);
}

.header-wrapper.dark .book-now-btn,
.header-wrapper.dark .book-now-btn:hover,
.header-wrapper.dark .book-now-btn:focus {
    background: var(--color-white);
    color: var(--color-shark);
}

@media (min-width: 992px) {
    .header-wrapper {
        padding: 24px 32px;
    }

    .menu-wrapper,
    .header-actions {
        gap: 32px;
    }

    .header-logo .logo {
        width: 180px;
    }

    /* Book Now grows to 18 of padding either side of its 24 line box. */
    :root {
        --menu-row-height: 60px;
    }

    .book-now-btn,
    .book-now-btn:hover,
    .book-now-btn:focus {
        padding: 18px 32px;
    }

    .menu-toggle-label,
    .menu-close-label {
        display: block;
    }
}

/*------------------------------------------------------------

#BIG MENU OVERLAY

--------------------------------------------------------------*/

.big-menu {
    position: fixed;
    inset: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    overflow: hidden;
}

.big-menu[hidden] {
    display: none;
}

/*
 * As far as position: fixed is concerned the admin bar is not part of the
 * viewport, so for a logged-in editor the overlay covered it and its bar
 * landed 46px above the header bar it is meant to open over. Visitors never
 * saw it; the people checking the work always did. 783 is WordPress's own
 * breakpoint for the bar, where it drops from 46px to 32.
 */
body.admin-bar .big-menu {
    top: 46px;
}

@media (min-width: 783px) {
    body.admin-bar .big-menu {
        top: 32px;
    }
}

/*
 * Off-white at every width. On mobile the Figma has the bar sitting on a plain
 * white panel, so the two are deliberately different; on desktop the panel is
 * off-white too and they match.
 */
.big-menu-bar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 16px;
    /* Matches .menu-wrapper: this bar opens directly over that one. */
    min-height: calc(var(--menu-row-height) + 48px);
    background: var(--color-offwhite);
}

.big-menu-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 32px 16px;
    overflow: hidden;
}

.big-menu-primary {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

/*------------------------------------------------------------

#BIG MENU NAV

--------------------------------------------------------------*/

.big-menu-list {
    display: flex;
    flex-direction: column;
    /* Figma gap 24 mobile, 10 desktop. */
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.big-menu-list > li {
    display: block;
}

.big-menu-list > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-shark);
    /* H1 Mobile 32/1, H1 48/1.1 desktop. */
    font-size: 32px;
    line-height: 1;
    text-decoration: none;
    /* One item, one line. "Villas Management" over two reads as two items. */
    white-space: nowrap;
    transition: color 0.2s ease-in-out;
}

.big-menu-list .sub-menu {
    display: none;
}

.big-menu-list .icon-chevron {
    flex: none;
}

/* Destinations opens a panel rather than navigating, on mobile only. */
.big-menu-list > li:not(.menu-item-destinations) > a .icon-chevron {
    display: none;
}

.big-menu.is-destinations .big-menu-list > li:not(.menu-item-destinations) > a {
    color: rgba(33, 37, 41, 0.2);
}

.big-menu.is-destinations .menu-item-destinations > a {
    font-style: italic;
}

/*
 * Hover previews the active state: the item under the cursor takes the italic
 * and the rest fade back, the same treatment Destinations gets when its panel
 * is open. Only the colour transitions - font-style is not animatable - which
 * is what keeps this subtle rather than a swap.
 *
 * :has() rather than .big-menu-list:hover so the fade fires only over a link,
 * not over the gaps between them. Where :has() is unsupported the rules drop
 * and the menu simply has no hover state.
 *
 * The `.is-destinations` variants are not redundant, and neither is the :has()
 * on the highlight. The rules above are specific - `li:not(.menu-item-
 * destinations)` alone is four classes - so each selector here has to outrank
 * the one it overrides rather than rely on source order:
 *
 *   fade                    (0,2,4)   highlight               (0,3,4)
 *   fade, panel open        (0,4,4)   highlight, panel open   (0,5,4)
 *
 * That ordering is what lets the italic move to whichever item is hovered
 * while the Destinations panel is open. The contact cluster is deliberately
 * left out: fading it on every pass of the cursor reads as noise, not
 * emphasis.
 */
@media (hover: hover) {
    .big-menu-list:has(> li > a:hover) > li > a,
    .big-menu.is-destinations .big-menu-list:has(> li > a:hover) > li > a {
        color: rgba(33, 37, 41, 0.2);
        font-style: normal;
    }

    .big-menu-list:has(> li > a:hover) > li > a:hover,
    .big-menu.is-destinations .big-menu-list:has(> li > a:hover) > li > a:hover {
        color: var(--color-shark);
        font-style: italic;
    }
}

/*------------------------------------------------------------

#BIG MENU CONTACT + LANGUAGE

--------------------------------------------------------------*/

.big-menu-contact {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    transition: opacity 0.2s ease-in-out;
}

/* Figma `Body x-md`: Geologica ExtraLight 16/1.3, phone and language both. */
.big-menu-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-shark);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3;
    text-decoration: none;
}

.big-menu-phone .icon {
    flex: none;
}

.big-menu-languages {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.big-menu-languages a {
    color: var(--color-shark);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3;
    text-decoration: none;
}

/* Figma fades the whole cluster to 20% in the Destinations state. */
.big-menu.is-destinations .big-menu-contact {
    opacity: 0.2;
}

/*------------------------------------------------------------

#BIG MENU DESTINATIONS

--------------------------------------------------------------*/

.big-menu-destinations {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 16px;
    background: var(--color-white);
    overflow-y: auto;
    /*
     * visibility rather than the hidden attribute or display:none: it keeps the
     * panel out of the tab order and the accessibility tree while still letting
     * the transform animate.
     */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.big-menu.is-destinations .big-menu-destinations {
    visibility: visible;
    transform: translateX(0);
}

.big-menu-back {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-shark);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
}

.big-menu-back .icon-chevron {
    transform: scaleX(-1);
}

/*
 * On mobile the Destinations item opens this panel instead of following its
 * link, so the listing needs a way in from here. Desktop has no need of it -
 * the item itself is the link there - and hides it.
 */
.big-menu-all-destinations {
    flex: none;
    color: var(--color-shark);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: underline;
}

/*
 * Multi-column rather than columns rendered by PHP: the group order has to run
 * down one column before the next, as it does in both frames, and the count
 * differs per breakpoint - two at 375, three from 992. `break-inside` is what
 * keeps a group whole; without it a heading can end a column and its
 * destinations start the next.
 */
.big-menu-destinations-columns {
    /*
     * flex: none because the panel scrolls. Left shrinkable, a flex item in a
     * scrolling column container is squashed to fit and a multi-column box
     * answers that by adding columns sideways, not by scrolling.
     */
    flex: none;
    column-count: 2;
    column-gap: 24px;
}

.big-menu-destination-group {
    break-inside: avoid;
    /* Figma gap 44 between groups, as a margin because columns have no gap. */
    margin-bottom: 44px;
}

.big-menu-destination-group:last-child {
    margin-bottom: 0;
}

/* Figma `Body x-sm`: Geologica Light, 12/16 for the heading. */
.big-menu-destination-title {
    margin: 0 0 12px;
    color: var(--Medium-Grey);
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    text-transform: uppercase;
}

.big-menu-destination-group ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `Body x-sm` again, at the 16px issue #28 asks for where the frame has 12. */
.big-menu-destination-group a {
    color: var(--color-shark);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3;
    text-decoration: none;
}

/*------------------------------------------------------------

#BIG MENU IMAGE

--------------------------------------------------------------*/

/* Absent from the 375 frames. */
.big-menu-image {
    display: none;
}

/*
 * Every menu item's photograph is in the markup and stacked; the active one
 * fades up. Opacity rather than display so the swap is a crossfade, and so
 * nothing has to be fetched at the moment the cursor arrives.
 */
.big-menu-image img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.big-menu-image img.is-active {
    opacity: 1;
}

/*------------------------------------------------------------

#BIG MENU DESKTOP

--------------------------------------------------------------*/

@media (min-width: 992px) {
    .big-menu {
        background: var(--color-offwhite);
    }

    /*
     * The bar is not centred with the body. It sits directly over the header
     * bar it replaces, so its gutter has to be the header's 32 at every width
     * or the logo would step sideways at the moment the overlay opens.
     */
    .big-menu-bar {
        padding: 24px 32px;
    }

    /*
     * 32 of gutter until the viewport passes the 1440 frame, then whatever it
     * takes to hold the contents at --menu-content-width and centre them. As
     * padding rather than a max-width on an inner box because the background
     * is on this element and has to keep running edge to edge.
     */
    .big-menu-body {
        padding: 56px max(32px, calc((100% - var(--menu-content-width)) / 2)) 32px;
    }

    /*
     * flex: none so the nav keeps its intrinsic width. Left shrinkable it is
     * squeezed by the destination panel beside it, and since the items no
     * longer wrap they would simply be clipped. The panel gives instead - its
     * columns have far more slack than a 48px word does.
     */
    .big-menu-primary {
        flex: none;
    }

    .big-menu-list {
        gap: 10px;
    }

    .big-menu-list > li > a {
        /* 48px at 1440, easing back to the mobile 32px at the breakpoint. */
        font-size: clamp(32px, 3.334vw, 48px);
        line-height: 1.1;
    }

    /* The chevron is a mobile affordance; desktop uses italic + the panel. */
    .big-menu-list .icon-chevron {
        display: none;
    }

    /*
     * Desktop shows the destination columns beside the nav rather than over it,
     * 56px clear of it as measured off node 1:4539. The panel takes what is
     * left of the row rather than a measured column width: with the photograph
     * gone from this state there is no second claim on that space, and three
     * columns of 16px names need more of it than the frame's 169px each.
     *
     * It is in the layout whether or not it is open, so opening it moves
     * nothing. It scrolls: eleven groups at 16px do not fit the 810 frame.
     */
    .big-menu-destinations {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        gap: 0;
        margin-left: clamp(24px, 3.889vw, 56px);
        padding: 0;
        background: none;
        overflow-y: auto;
        transform: none;
        transition: opacity 0.2s ease-in-out;
        opacity: 0;
        visibility: hidden;
    }

    .big-menu.is-destinations .big-menu-destinations {
        opacity: 1;
        visibility: visible;
    }

    .big-menu-back,
    .big-menu-all-destinations {
        display: none;
    }

    .big-menu-destinations-columns {
        column-count: 3;
        column-gap: clamp(24px, 3.889vw, 56px);
    }

    .big-menu-image {
        display: block;
        position: relative;
        /* Shrinks with the viewport so the nav and panel keep their room. */
        flex: 0 1 auto;
        width: clamp(280px, 29.24vw, 421px);
        margin-left: auto;
        align-self: stretch;
    }

    /* Issue #28 drops the photograph from the Destinations state. */
    .big-menu.is-destinations .big-menu-image {
        display: none;
    }

    .big-menu-image img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
}