:root {
    --navy: #02253d;
    --ink: #02253d;
}

/* Primary UI font */
@font-face {
    font-family: "Galano";
    src: url("../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: 56px;
justify-content: space-between;
padding: 0 22px;
background: var(--navy);
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
pointer-events: auto; 
}

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

/* Hamburger button layout */
.menu-toggle {
position: relative;
z-index: 1003; 
display: flex;
width: 28px;
height: 28px;
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: 22px;
height: 2px;
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(-7px) 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,
.mobile-menu__handle {
margin: 0;
color: #fff;
font-size: 16px;
line-height: 1.8;
}

/* 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("/framework/global/social-header/mobile-header-divider-line-i-smokestack.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: 22px;
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;
}

/* Gradient text effect on link and handle hover/focus */
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a:active,
.mobile-menu__handle:hover {
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;
}
.site-logo img {
width: 150px;
}
}

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


.mobile-menu__content a:active i,
.mobile-menu__content a:focus i,
.mobile-menu__content a:focus-visible i,
.mobile-menu__content a:active span,
.mobile-menu__content a:focus span,
.mobile-menu__content a:focus-visible span {
    background: linear-gradient(
        90deg,
        #02BCDD 0%,
        #06D1E5 20.71%,
        #64EDA8 48.26%,
        #D0F88D 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}