/**
 * World of Ace Custom Header Styles
 * Theme: TGS Design
 * Version: 3.2
 */

/* ===================================
   HEADER STRUCTURE - FORCE STICKY
   Sticky must be on the outermost wrapper (header.wp-block-template-part),
   not on the inner group block — otherwise the wrapper scrolls away
   taking the sticky child with it.
   =================================== */
header.wp-block-template-part {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 999;
    margin-top: 0 !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* WP hides the admin bar on mobile (<600px) but the CSS variable remains
   set (46px), which pushes the sticky header down by 46px. Force top:0. */
@media screen and (max-width: 600px) {
    header.wp-block-template-part {
        top: 0 !important;
    }
}

/* Remove the default WP block-gap margin that creates a gap between
   the header and the first content block (e.g. hero cover). */
header.wp-block-template-part + * {
    margin-top: 0 !important;
}

/* Visual styles on the inner block */
.woa-header,
.header {
    background-color: var(--wp--preset--color--base);
}

header.wp-block-template-part.header-visible {
    transform: translateY(0);
    transition: transform 0.2s ease;
}

header.wp-block-template-part.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}

header.wp-block-template-part.header-scrolled,
.header-scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}


/* Prevent navigation items from wrapping */
.woa-header .wp-block-navigation,
.woa-header .wp-block-navigation .wp-block-navigation__container {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.woa-header .wp-block-navigation-item__content {
    white-space: nowrap !important;
}

/* Match all nav items to submenu button weight */
.woa-header .wp-block-navigation-item__content {
    font-weight: 400 !important;
    font-family: var(--wp--preset--font-family--baloo-bhai-2) !important;
    font-size: var(--wp--preset--font-size--large) !important;
}


/* ===================================
   HERO CTA POSITIONING
   Anchored at left: 200px on desktop;
   centred + transparent on mobile.
   =================================== */

/* Remove inner container as positioning context so the CTA is
   positioned relative to the cover block (position:relative,
   min-height:655px) rather than the zero-height inner container. */
.wp-block-cover:has(.woa-hero-cta) > .wp-block-cover__inner-container {
    position: static;
}

/* DESKTOP: anchored 180px from the left edge of the hero */
.woa-hero-cta {
    position: absolute !important;
    left: 180px;
    right: auto;
    top: 120px;
    transform: none;
    background-color: var(--wp--preset--color--base) !important;
    opacity: 85%;
    transition: background-color 0.5s ease;
    z-index: 2;
}

/* MOBILE (≤640px): centred + transparent.
   At left:200px + CTA width≈350px the CTA clips at ~550px viewport;
   640px gives a comfortable breakpoint with breathing room. */
@media (max-width: 640px) {
    .woa-hero-cta {
        left: 50% !important;
        right: auto !important;
        top: 70% !important;
        transform: translate(-50%, -50%) !important;
        background-color: transparent !important;
        color: var(--wp--preset--color--contrast) !important;
        /* Let the CTA grow to fit the buttons row instead of being
           constrained to half the viewport by WP's layout system */
        width: max-content !important;
        max-width: calc(100vw - 40px) !important;
    }

    .woa-hero-cta p,
    .woa-hero-cta h1,
    .woa-hero-cta h2,
    .woa-hero-cta h3 {
        color: var(--wp--preset--color--contrast) !important;
    }

    /* Keep buttons in a single row — never stack */
    .woa-hero-cta .wp-block-buttons {
        flex-wrap: nowrap !important;
    }

    /* Prevent button label text from wrapping mid-word */
    .woa-hero-cta .wp-block-button__link {
        white-space: nowrap !important;
    }
}

/* ===================================
   FOOTER
   =================================== */
footer.wp-block-template-part {
    margin-top: 0;
}

/* ===================================
   Image Positioning in a Group
   =================================== */
.woa-position-context {
    position: relative !important;
    overflow: visible !important;
}

.woa-image-corner {
    position: absolute !important;
    bottom: 0 !important;
    right: 0px !important;
    margin: 0 !important;
    z-index: 10 !important;
}

/* ===================================
   MOBILE and TABLET HEADER
   =================================== */
@media screen and (max-width: 1024px) {

    header.wp-block-template-part {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Grid layout for perfect centering */
    .woa-header .wp-block-columns {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        flex-wrap: unset !important;
    }

    /* Left column - hamburger */
    .woa-header .wp-block-columns > .wp-block-column:first-child {
        position: unset !important;
        display: flex !important;
        justify-content: flex-start !important;
        width: auto !important;
        flex: unset !important;
        padding-left: 16px !important;
    }

    /* Middle column - logo centered */
    .woa-header .wp-block-columns > .wp-block-column:nth-child(2) {
        position: unset !important;
        left: unset !important;
        transform: unset !important;
        display: flex !important;
        justify-content: center !important;
        flex: unset !important;
        width: auto !important;
    }

    /* Right column - icons right aligned */
    .woa-header .wp-block-columns > .wp-block-column:last-child {
        display: flex !important;
        justify-content: flex-end !important;
        flex: unset !important;
        width: auto !important;
    }

    /* Hide language switcher on mobile */
    .woa-header .wp-block-column:last-child .woa-lang-switcher,
    .woa-header .wp-block-column:last-child .wp-block-lazyblock-woa-language-switcher {
        display: none !important;
    }

    /* Icon spacing */
    .woa-header .wp-block-column:last-child .wp-block-group {
        gap: 8px !important;
    }

    /* Hamburger left align */
    .woa-header .wp-block-column:first-child nav.wp-block-navigation {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .woa-header .wp-block-navigation .wp-block-navigation__responsive-container-open {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

}

/* ===================================
   GLOBAL BUTTON STYLES
   Font: Baloo Bhai 2, Medium (1rem), Semi Bold (600)
   Uses flexbox for perfect vertical centering — font metrics
   in Baloo Bhai 2 are uneven, so padding alone isn't enough.
   =================================== */
.wp-element-button,
.wp-block-button__link {
    font-family: var(--wp--preset--font-family--baloo-bhai-2) !important;
    font-size: var(--wp--preset--font-size--medium) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    min-height: 2.5rem !important;          /* 40px — consistent across site */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1px 2.25rem 0 !important;      /* +1px top compensates Baloo Bhai 2 ascender bias */
    box-sizing: border-box !important;
}

/* ===================================
   HERO COVER — CONSISTENT ASPECT-RATIO
   All full-width cover blocks use 16:9 aspect-ratio so the hero
   scales proportionally with the viewport instead of staying
   locked at 90vh (which crops heavily on narrow windows).
   =================================== */
.wp-block-cover.alignfull {
    aspect-ratio: 16 / 9 !important;
    min-height: unset !important;
}

/* ===================================
   NAV OVERLAY TRANSFORM FIX
   When the overlay is open, strip any transform from the header so the
   overlay's position:fixed renders relative to the viewport, not the
   header's stacking context. Also suppresses the hide transition while
   the menu is open.
   =================================== */
header.wp-block-template-part.nav-overlay-open,
header.wp-block-template-part.nav-overlay-open.header-visible,
header.wp-block-template-part.nav-overlay-open.header-hidden {
    transform: none !important;
    transition: none !important;
}

/* ===================================
   REDUCED MOTION
   Disable transitions for users who
   prefer reduced motion (WCAG 2.1)
   =================================== */
@media (prefers-reduced-motion: reduce) {
    header.wp-block-template-part,
    .woa-header,
    .header {
        transition: none;
    }
}