/* ============================================================================
 * Trilogy Mind Body Soul — Smart header (site-wide)
 * Sticky, glassy header that hides on scroll-down and reappears on scroll-up,
 * with a solid + shadowed state once the page is scrolled. Same palette.
 * Header markup: <header id="masthead"> > .elementor-365 > .elementor-element-6d36ec2
 *   logo 2eef066 · nav .hfe-nav-menu · CTA .elementor-element-5c0a45b
 * ========================================================================== */

#masthead {
    --tri-orange: #ff4500;
    --tri-primary: #1c0e21;
    --tri-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* !important overrides the theme's #masthead { position:relative; z-index:99 } */
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100%;
    transform: translateY(0);
    transition: transform 0.45s var(--tri-ease);
    will-change: transform;
}

/* Hidden state — slides up out of view (set by JS while scrolling down). */
#masthead.tri-header--hidden {
    transform: translateY(-100%);
}

/* The painted bar: translucent glass that turns solid + shadowed on scroll. */
#masthead .elementor-element-6d36ec2 {
    background-color: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(28, 14, 33, 0.06);
    transition: background-color 0.3s ease, box-shadow 0.3s ease,
        padding-top 0.3s var(--tri-ease), padding-bottom 0.3s var(--tri-ease);
}

#masthead.tri-header--scrolled .elementor-element-6d36ec2 {
    background-color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 10px 34px -14px rgba(28, 14, 33, 0.22);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Logo: constrain the wordmark to a clean height (don't clip the wide logo). */
#masthead .elementor-element-2eef066 { width: auto !important; max-width: none !important; }
#masthead .elementor-element-2eef066 img {
    height: 48px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
}
#masthead .elementor-element-2eef066 img,
#masthead .elementor-element-2eef066 {
    transition: transform 0.3s var(--tri-ease);
}
#masthead.tri-header--scrolled .elementor-element-2eef066 img {
    transform: scale(0.92);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
 * Navigation links — animated orange underline + hover colour.
 * ------------------------------------------------------------------------ */
#masthead .hfe-nav-menu .menu-item > a.hfe-menu-item {
    position: relative;
    transition: color 0.2s ease;
}
#masthead .hfe-nav-menu .menu-item > a.hfe-menu-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--tri-orange);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--tri-ease);
}
#masthead .hfe-nav-menu .menu-item:hover > a.hfe-menu-item,
#masthead .hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item {
    color: var(--tri-orange);
}
#masthead .hfe-nav-menu .menu-item:hover > a.hfe-menu-item::after,
#masthead .hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item::after {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
 * CTA — "Sign in" stays a link, "Sign up" becomes a solid orange pill.
 * The bare "/" separator is collapsed with font-size:0 on the wrapper.
 * ------------------------------------------------------------------------ */
#masthead .elementor-element-5c0a45b .elementor-shortcode {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0;
}
#masthead .elementor-element-5c0a45b .elementor-shortcode a {
    font-size: 15px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s var(--tri-ease),
        box-shadow 0.2s var(--tri-ease), background-color 0.2s ease;
}
/* Sign in (login) */
#masthead .elementor-element-5c0a45b .elementor-shortcode a:first-child {
    color: var(--tri-primary) !important;
    padding: 8px 4px;
}
#masthead .elementor-element-5c0a45b .elementor-shortcode a:first-child:hover {
    color: var(--tri-orange) !important;
}
/* Sign up (register) → pill button */
#masthead .elementor-element-5c0a45b .elementor-shortcode a:last-child {
    background: var(--tri-orange);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 80px;
    box-shadow: 0 8px 18px -6px rgba(255, 69, 0, 0.5);
}
#masthead .elementor-element-5c0a45b .elementor-shortcode a:last-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -6px rgba(255, 69, 0, 0.62);
}

/* --------------------------------------------------------------------------
 * Respect reduced-motion.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    #masthead,
    #masthead .elementor-element-6d36ec2,
    #masthead .elementor-element-2eef066 img,
    #masthead .hfe-nav-menu .menu-item > a.hfe-menu-item::after,
    #masthead .elementor-element-5c0a45b .elementor-shortcode a {
        transition: none !important;
    }
    #masthead.tri-header--hidden {
        transform: none !important;
    }
}