/**
 * TRISESTRI Header Logo Animation
 *
 * GSAP handles all positioning and sizing via inline transforms.
 * CSS only provides base styles and the fade-in reveal.
 */

/* ============================================
   HERO LOGO — base
   ============================================ */
.trisestri-hero-logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;          /* below the Astra header (z-index 99) */
    pointer-events: none;
    opacity: 0;
}

/* When docked in the header, raise above the header bar (z-index: 100000) */
body.hero-header .trisestri-hero-logo {
    z-index: 100001;
    pointer-events: auto;
    cursor: pointer;
}

/* On the front page the header is transparent — invert logo to show it white over the dark hero */
body.home.hero-header .trisestri-hero-logo {
    filter: invert(100%);
}

/* Revealed by JS (GSAP handles the fade-in animation) */
.trisestri-hero-logo.ready {
    /* opacity controlled by GSAP */
}

.trisestri-hero-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Invert the SVG logo when expanded (hero center state)
   and keep it below the header so nav links stay on top */
body.hero-center .trisestri-hero-logo {
    filter: invert(100%);
    z-index: 90;
}

body.home {
    min-height: 1000px !important;
}

/* ============================================
   HIDE ASTRA SITE BRANDING
   The hero logo replaces the default Astra
   site title / logo.  We hide the original to
   avoid double-branding and overlap on mobile.
   Using visibility:hidden keeps the box model
   so the header layout (hamburger, etc.) stays.
   ============================================ */
.ast-site-identity {
    visibility: hidden;
}

/* ============================================
   HEADER BAR — fixed on desktop front page,
   sticky fallback for mobile / other pages.
   z-index keeps it above the hero logo.
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #fff;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* subtle shadow once we leave the very top of the page (non-front pages only) */
body.hero-header:not(.home) .site-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================
   FRONT PAGE — transparent header on all devices,
   fixed so content starts from top:0 and fills
   behind the transparent header.
   ============================================ */
body.home .site-header,
body.home .site-header .ast-primary-header-bar,
body.home .site-header .main-header-bar,
body.home .site-header .main-header-bar-wrap,
body.home #mega-menu-wrap-primary {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.home .site-header .ast-primary-header-bar {
    border-bottom: none !important;
}

body.home .site-header {
    position: fixed !important;
    width: 100%;
}

/* ============================================
   SCROLLING-UP STATE — white header with
   primary-color logo, nav links, hamburger.
   Triggered by JS when user scrolls up from
   a scrolled-down position (but not at top).
   ============================================ */
body.home.header-solid .site-header,
body.home.header-solid .site-header .ast-primary-header-bar,
body.home.header-solid .site-header .main-header-bar,
body.home.header-solid .site-header .main-header-bar-wrap,
body.home.header-solid #mega-menu-wrap-primary {
    background-color: #fff !important;
    background: #fff !important;
}

body.home.header-solid .site-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.home.hero-header.header-solid .trisestri-hero-logo {
    filter: none !important;   /* scrolling up → white header → show original (dark) logo */
}

/* Desktop nav links → primary color */
@media (min-width: 769px) {
    body.home.header-solid .site-header a,
    body.home.header-solid .site-header .ast-header-link,
    body.home.header-solid .site-header .main-navigation a,
    body.home.header-solid .site-header .ast-nav-menu a,
    body.home.header-solid .site-header .menu-item > a {
        color: var(--trisestri-primary) !important;
    }
}

/* Mobile hamburger → primary color */
body.home.header-solid .site-header .ast-mobile-menu-trigger-minimal,
body.home.header-solid .site-header .ast-button-wrap,
body.home.header-solid .site-header .menu-toggle,
body.home.header-solid .site-header .ast-mobile-menu-trigger-minimal .ast-mobile-svg,
body.home.header-solid .site-header .ast-mobile-svg {
    color: var(--trisestri-primary) !important;
    fill: var(--trisestri-primary) !important;
}

/* Desktop: white nav links — header is transparent in both hero-center and hero-header states */
@media (min-width: 769px) {
    body.home .site-header a,
    body.home .site-header .ast-header-link,
    body.home .site-header .main-navigation a,
    body.home .site-header .ast-nav-menu a,
    body.home .site-header .menu-item > a {
        color: #fff !important;
    }

    body.home .site-header .main-navigation a:hover,
    body.home .site-header .ast-nav-menu a:hover,
    body.home .site-header .menu-item > a:hover {
        opacity: 0.75;
    }
}

/* Mobile: white hamburger menu icon */
body.home .site-header .ast-mobile-menu-trigger-minimal,
body.home .site-header .ast-button-wrap,
body.home .site-header .menu-toggle,
body.home .site-header .ast-mobile-menu-trigger-minimal .ast-mobile-svg,
body.home .site-header .ast-mobile-svg {
    color: #fff !important;
    fill: #fff !important;
}


/* ============================================
   SUBMENU / MEGA-MENU DROPDOWN — add breathing
   room at the top so the first item isn't flush
   against the hero image when the header is
   transparent. padding-top keeps the submenu
   background covering the gap.
   ============================================ */
.site-header .sub-menu,
#mega-menu-wrap-primary .mega-sub-menu {
    margin-top: 0 !important;
}

/* account for the WP admin bar when logged-in */
.admin-bar .site-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;          /* mobile admin bar is shorter */
    }
}

/* ============================================
   MOBILE MENU — colour overrides
   Mirrors Astra's generated selectors exactly
   (including the 921 px breakpoint and specificity)
   so !important is sufficient to win.
   ============================================ */
@media (max-width: 921px) {
    /* 1 — All mobile nav links → primary colour */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
        color: var(--trisestri-primary) !important;
    }

    /* 2 — Expand/collapse arrow → primary colour */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .ast-menu-toggle {
        color: var(--trisestri-primary) !important;
    }

    /* 3 — Hover / open state: primary colour, no blue background */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link,
    .ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item:hover > .ast-menu-toggle {
        color: var(--trisestri-primary) !important;
        background: transparent !important;
    }

    /* 4 — Parent items (have sub-menus) → bold instead of blue */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item-has-children > .menu-link {
        font-weight: 700 !important;
    }

    /* 5 — Sub-menu item indentation */
    .ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
        padding-left: 35px;
    }

    /* 6 — Nested sub-sub-menu item indentation */
    .ast-header-break-point .main-navigation .sub-menu .menu-item .menu-item .menu-link {
        padding-left: 60px !important;
    }
}

/* ============================================
   COMPACT MOBILE HEADER
   Astra HFB sets the grid-row min-height via
   the customizer (default 80 px).  On mobile
   we shrink it so the docked logo + hamburger
   sit in a slimmer bar.
   ============================================ */
@media (max-width: 768px) {
    .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-primary-header-bar .site-primary-header-wrap {
        min-height: 50px !important;
    }
}