:root {
    --navy: #02253d;
    --ink: #02253d;
    --top-gradient: linear-gradient(
  90deg,
  #02BCDD 0%,
  #06D1E5 22%,
  #64EDA8 52%,
  #D0F88D 100%
);
}

/* Primary UI font */
@font-face {
    font-family: "Galano";
    src: url("/-global-assets/fonts/GalanoGrotesque-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    }

/* Thin animated gradient bar fixed at the very top of the page */
.gradient-background {
position: fixed !important;;
top: 0;
left: 0;
z-index: 1001; /* Sits above the header */
width: 100%;
height: 10px;
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 21%,
#64eda8 48%,
#d0f88d 70%,
#64eda8 84%,
#06d1e5 94%,
#02bcdd 100%
);
background-size: 200% 100%; 
animation: gradient-flow 7s linear infinite;
}

/* Moves background position to create a flowing left-to-right effect */
@keyframes gradient-flow {
from {
background-position: -200% 50%;
}
to {
background-position: 0% 50%;
}
}

/* Fixed header — centered, sits below the gradient bar */
.site-header {
position: absolute;
top: 24px; 
left: 0;
z-index: 1000;
display: flex;
width: 100%;
height: 70px;
align-items: center;
justify-content: center;
pointer-events: none; 
}

/* Logo re-enables clicks for itself only */
.site-logo {
display: inline-flex;
pointer-events: auto;
}

.site-logo img {
display: block;
width: 250px;
height: auto;
}

/* Hidden on desktop — shown only on mobile via media query */
.menu-toggle {
display: none;
}

/* Hidden on desktop — shown only on mobile via media query */
.mobile-menu {
display: none;
}

/* ── Tablet & Mobile (≤1024px) ── */
@media (max-width: 1024px) {

/* Prevent page scroll while mobile menu is open */
body.menu-open {
overflow: hidden;
}

/* Hide gradient bar on smaller screens */
.gradient-background {
display: none;
}

/* Solid nav bar replacing the transparent desktop header */
.site-header {
top: 0;
height: 80px;
justify-content: space-between;
padding: 0 22px;
background: var(--navy);
box-shadow: 0 5px 14px rgb(0 0 0 / 35%);
pointer-events: auto; 
}

.site-logo img {
width: 195px;
}

/* Hamburger button layout */
.menu-toggle {
position: relative;
z-index: 1003; 
display: flex;
width: 30px;
/*height: 2px;*/
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border: 0;
background: transparent;
cursor: pointer;
}

/* Individual hamburger lines */
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
border-radius: 10px;
background: #fff;
transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animate top line into top half of X */
body.menu-open .menu-toggle span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

/* Hide middle line when menu is open */
body.menu-open .menu-toggle span:nth-child(2) {
opacity: 0;
}

/* Animate bottom line into bottom half of X */
body.menu-open .menu-toggle span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}

/* Mobile menu — hidden by default, fills space between header and footer */
.mobile-menu {
position: fixed;
inset: 56px 0 42px; 
z-index: 900;
display: block;
visibility: hidden;
background: var(--navy);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Fade in menu when body has menu-open class */
body.menu-open .mobile-menu {
visibility: visible;
opacity: 1;
pointer-events: auto;
}

/* Centered content block inside the menu */
.mobile-menu__content {
width: 260px;
margin: 158px auto 0; 
color: #fff;
font-family: Galano, sans-serif;
}

/* Eyebrow text and social handle — shared base styles */
.mobile-menu__eyebrow{
margin: 0;
color: #fff;
font-size: 16px;
line-height: 1.8;
}
.mobile-menu__handle {
margin: 0;
font-size: 16px;
line-height: 1.8;
background: var(--top-gradient);
background-clip: text;
/*color: transparent;*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}
/* Extra bottom spacing below the handle */
.mobile-menu__handle {
margin-bottom: 18px;
}

/* Decorative divider using a custom image */
.mobile-menu__divider {
display: block;
width: 100%;
height: 1px;
margin: 0 0 18px;
background-image: url("/-global-assets/navigation/social-header/images/divider-line.webp");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 1px;
}

/* Social link rows with icon + label */
.mobile-menu a {
display: flex;
align-items: center;
gap: 25px;
margin-top: 25px;
color: #fff;
font-size: 16px;
transition: color 0.2s ease;
}

/* Fixed-width icon column for consistent alignment */
.mobile-menu i {
width: 12px;
color: #fff;
font-size: 18px;
text-align: center;
transition: color 0.2s ease;
/*margin-top: -5px;*/
padding-top: 5px
}

/* Gradient text effect on link and handle hover/focus */
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a:active {
background: var(--top-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Apply same gradient effect to icons on hover */
.mobile-menu a:hover i,
.mobile-menu a:focus-visible i,
.mobile-menu a:active i {
background: var(--top-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}

/* ── Small mobile (≤640px) ── */
@media (max-width: 640px) {
.site-logo img {
width: 154px;
}
}

/* ── Smaller mobile (≤480px) ── */
@media (max-width: 480px) {
.site-header {
padding: 0 20px;
height: 68px;
}
.site-logo img {
width: 150px;
}
}

/* ── Very small screens (≤360px) ── */
@media (max-width: 360px) {
.site-logo img {
width: 138px;
}
}


@media (max-width: 1024px) {
    .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    
    #header-placeholder {
        height: 0px; 
    }
}