header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;transition:background-color 0.3s ease,box-shadow 0.4s ease,padding 0.4s ease}
header .container{width:100%;margin:0 auto;padding:0 20px}
header .menu-inner{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:70px}

/* Social links - LEFT */
header .header-socials{display:flex;align-items:center;gap:20px;z-index:10;flex-shrink:0}
header .header-social{display:inline-flex;align-items:center;justify-content:center;color:#980042;text-decoration:none;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),color 0.3s ease}
header .header-social:hover{transform:translateY(-3px) scale(1.15);color:#980042}
header .header-social svg{width:28px;height:28px;display:block}

/* Logo - CENTER (absolutely centred so side items don't shift it) */
header .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;z-index:10;text-decoration:none;flex-shrink:0}
header .logo-img{width:var(--logo-width,160px);max-width:100%;height:auto;object-fit:contain;display:block;transition:filter 0.4s ease}

/* Inline desktop nav - fills space between logo and burger */
header .inline-nav{display:flex;align-items:center;gap:28px;margin-left:auto;margin-right:28px}
header .inline-nav-item{position:relative}
header .inline-nav-label{background:none;border:none;padding:0;cursor:pointer;font-size:16px;font-weight:600;color:var(--parent-color,#fff);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:opacity 0.2s;font-family:inherit}
header .inline-nav-label:hover{opacity:0.75}
header .inline-nav-chevron{transition:transform 0.25s;flex-shrink:0}
header .inline-nav-item.open .inline-nav-chevron{transform:rotate(180deg)}

/* Dropdown panel */
header .inline-nav-dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,0.18);min-width:180px;padding:8px 0;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-6px);transition:opacity 0.2s,transform 0.2s;z-index:200}
header .inline-nav-item.open .inline-nav-dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
header .inline-nav-dropdown-item{display:block;padding:10px 20px;font-size:14px;font-weight:500;color:#233060;text-decoration:none;white-space:nowrap;transition:background 0.15s,color 0.15s}
header .inline-nav-dropdown-item:hover{background:#0082C9;color:#fff}

/* Burger menu icon - RIGHT */
header .menu-icon{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:10px;width:60px;cursor:pointer;z-index:10;box-sizing:border-box;flex-shrink:0;margin-left:auto}
header .menu-icon span{display:block;width:60px;height:9px;background-color:#1C254A;border-radius:50px;transform-origin:right center;transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1),background-color 0.4s ease}
/* Quirky staggered "wave" hover: bars spring to alternating widths with a slight overshoot, one after another */
header .menu-icon:hover span:nth-child(1){width:42px;transition-delay:0s}
header .menu-icon:hover span:nth-child(2){width:60px;transition-delay:0.09s}
header .menu-icon:hover span:nth-child(3){width:30px;transition-delay:0.18s}

/* Menu panel - full-page overlay dropping from top to bottom */
header .main-menu{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:#1C254A;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(-100%);opacity:0;transition:transform 0.45s ease-in-out,opacity 0.45s ease-in-out;z-index:999;padding:24px 0 60px;box-sizing:border-box}
header .main-menu.open{transform:translateY(0);opacity:1}

/* White menu items inside the open panel */
header .main-menu,
header .main-menu a,
header .main-menu h3,
header .main-menu .sub-menu-heading,
header .main-menu button{color:#fff}
header .main-menu a{color:#fff}

/* Menu content container */
header .main-menu .nav-outer,
header .main-menu .menu-outer{width:100%;padding:0;box-sizing:border-box; padding-top: 5rem;}
header .main-menu .menu-outer{text-align:left}
header .main-menu h3,
header .main-menu .sub-menu-heading{padding-left:20px;padding-right:20px}
header .main-menu .menu-children,
header .main-menu .menu-child-list{padding-left:30px;padding-right:20px}
header .main-menu li{list-style:none;margin-bottom:10px}
header .main-menu li a{text-decoration:none;font-weight:600}
header .main-menu h3{margin-bottom: 10px;}

/* Close icon - built from two bars like the burger, crossed into an X */
header .close-icon{position:sticky;top:50px;align-self:flex-end;margin-right:16px;margin-bottom:16px;width:60px;height:60px;opacity:0;pointer-events:none;transition:opacity 0.3s;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;flex-shrink:0}
header .main-menu.open .close-icon{opacity:1;pointer-events:auto}
/* Soft circular backdrop that blooms in on hover */
header .close-icon::before{content:'';position:absolute;top:50%;left:50%;width:76px;height:76px;border-radius:50%;background:#980042;transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.35s ease;z-index:0}
header .close-icon:hover::before{transform:translate(-50%,-50%) scale(1);opacity:1}
header .close-icon span{position:absolute;top:50%;left:50%;z-index:1;width:60px;height:9px;background-color:#fff;border-radius:50px;transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),background-color 0.4s ease}
header .close-icon span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
header .close-icon span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
/* Hover: spring the X open a touch and scale up (matches the burger's playful feel) */
header .close-icon:hover span:nth-child(1){transform:translate(-50%,-50%) rotate(135deg) scale(1.08)}
header .close-icon:hover span:nth-child(2){transform:translate(-50%,-50%) rotate(45deg) scale(1.08)}

/* Socials inside the open menu — hidden on desktop, shown at bottom on mobile */
header .main-menu .menu-socials{display:none;margin-top:auto;padding:24px 20px 0;justify-content:center;gap:28px;align-items:center}
header .main-menu .menu-socials .header-social{color:#fff}
header .main-menu .menu-socials .header-social:hover{color:#75C638}
header .main-menu .menu-socials .header-social svg{width:34px;height:34px}

:root {
    --header-overlay-r: 0;
    --header-overlay-g: 0;
    --header-overlay-b: 0;
    --header-overlay-a: 0.8;
}

.site-header {
    background: linear-gradient( to bottom, rgba(255,255,255,0.8) 2%, transparent 90% );
    padding: 52px 0;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

/* On scroll: tighten padding, shrink the logo, and cast a subtle drop shadow.
   Falls back to a solid navy backing so the shadow reads; a per-page overlay
   colour (.overlay-scroll.scrolled / .overlay-always) has higher specificity and wins. */
.site-header.scrolled {
    background: rgba(255,255,255,0.9);
    padding: 14px 0;
    box-shadow: 0 6px 24px rgba(255,255,255,0.25);
    -webkit-box-shadow: 0 6px 24px rgba(255,255,255,0.25);
    -moz-box-shadow: 0 6px 24px rgba(255,255,255,0.25);
}
.site-header.scrolled .logo-img {
    width: calc(var(--logo-width,160px) * 0.7);
    max-width: 110px;
    transition: width 0.4s ease, filter 0.4s ease;
    background-color: #DE3161;
    transition: 0.3s ease;
}

/* Custom colour — always mode: flat background, no gradient */
.site-header.overlay-always {
    background: rgba(var(--header-overlay-r),var(--header-overlay-g),var(--header-overlay-b),var(--header-overlay-a));
}

/* Custom colour — scroll mode: navy fill + drop shadow on scroll (not the overlay colour) */
.site-header.overlay-scroll.scrolled {
    background: rgba(255,255,255,0.7);
    box-shadow: 0 6px 24px rgba(255,255,255,0.25);
    -webkit-box-shadow: 0 6px 24px rgba(255,255,255,0.25);
    -moz-box-shadow: 0 6px 24px rgba(255,255,255,0.25);
}
/* Hide inline nav on mobile, show burger only */

@media screen and (max-width:800px){
    header .inline-nav{display:none}
    /* Logo sits on the left on mobile */
    header .logo{position:static;left:auto;top:auto;transform:none}
    header .menu-inner{justify-content:space-between}
    header .logo-img{width:calc(var(--logo-width,160px) * 0.75);max-width:120px}
    /* Hide the header-bar socials; they move to the bottom of the open menu */
    header .header-socials{display:none}
    header .main-menu .menu-socials{display:flex}
    header .close-icon span,
    header .menu-icon span{width:50px;height:6px}
    header .main-menu h3{font-size:30px;margin-bottom:6px}
    header .main-menu .nav-outer, header .main-menu .menu-outer {padding-top: 2rem;}
}