/* Header styles */
:root {
    --header-height-normal: 84px;
    --header-height-scrolled: 64px;
    --header-height-mobile-normal: 70px;
    --header-height-mobile-scrolled: 60px;
    --logo-height-normal: 44px;
    --logo-height-scrolled: 38px;
    --logo-height-mobile-normal: 38px;
    --logo-height-mobile-scrolled: 34px;
}

/* ---------- Header wrapper (spacer) ----------
   The header component is injected into <div id="site-header">. The header itself is
   position:fixed, so it is attached to the top of the viewport at every scroll position and
   does not depend on any parent being tall enough (position:sticky stopped working because the
   header was the only child of this div). This wrapper stays in the page flow and reserves the
   header's height, so the content below does not slide under the header. */
#site-header {
    height: var(--header-height-normal);
}

/* Anchor links stop below the fixed header */
html {
    scroll-padding-top: calc(var(--header-height-scrolled) + 12px);
}

/* ---------- Base header ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    isolation: isolate;
    font-family: Arial, Helvetica, sans-serif;
    height: var(--header-height-normal);
    transition: height 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
    height: var(--header-height-scrolled);
    box-shadow: 0 4px 20px rgba(11,42,91,0.12);
}

/* White glass background lives on a pseudo-element. backdrop-filter on the header itself would
   make it the containing block for the fixed menu backdrop and shrink that to the header size. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .site-header::before {
        background-color: #fff;
    }
}

/* Brand accent strip */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--td-yellow,#FFC000) 0%, var(--td-teal,#2FB3C9) 60%, var(--td-navy,#14438A) 100%);
    pointer-events: none;
}

/* Header container */
.header-container {
    position: relative;
    z-index: 999;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
    align-items: center;
    height: 100%;
    padding: 0 clamp(16px, 3vw, 40px);
    width: 100%;
    box-sizing: border-box;
}
.logo-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
}
.logo {
    height: var(--logo-height-normal);
    width: auto;
    display: block;
    max-width: 100%;
    transition: height 0.25s ease;
}
.site-header.is-scrolled .logo {
    height: var(--logo-height-scrolled);
}

/* Desktop navigation */
.desktop-nav {
    justify-self: center;
}

/* Header actions (CTA + hamburger) */
.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-list {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-link {
    color: var(--td-black);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .01em;
    font-size: 0.95rem;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--td-yellow);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
    color: var(--td-navy,#14438A);
}
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
    .nav-link:hover {
        color: var(--td-navy,#14438A);
    }
    .nav-link:hover::after {
        transform: scaleX(1);
    }
}

/* CTA button */
.site-header .cta {
    /* Override btn-primary from components.css */
    background-color: var(--td-yellow,#FFC000);
    color: var(--td-black);
    border: none;
    border-radius: 6px;
    padding: 0.7rem 1.4rem;
    min-height: 44px;
    height: auto;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    justify-self: end;
    align-self: center;
    width: auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
@media (hover: hover) and (pointer: fine) {
    .cta:hover {
        background-color: var(--td-yellow-dark,#F5A800);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
}
.cta:focus-visible {
    outline: 2px solid var(--td-navy,#14438A);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255,192,0,.4);
}

/* Hamburger button */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.hamburger-line {
    display: block;
    height: 2px;
    width: 24px;
    background-color: var(--td-black);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    margin: 0;
}
@media (hover: hover) and (pointer: fine) {
    .hamburger:hover .hamburger-line {
        background-color: var(--td-yellow);
        transform: scale(1.1);
    }
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--td-white);
    max-height: calc(100vh - var(--header-height-mobile-normal));
    max-height: calc(100dvh - var(--header-height-mobile-normal));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
/* Gradient accent at top of the menu */
.mobile-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--td-yellow,#FFC000) 0%, var(--td-teal,#2FB3C9) 60%, var(--td-navy,#14438A) 100%);
    pointer-events: none;
}
.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.mobile-menu:not(.open) {
    pointer-events: none;
}
.mobile-menu .container {
    padding: 1.5rem;
}
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-nav-item {
    /* Divider between items */
    border-top: 1px solid rgba(11,42,91,0.08);
}
.mobile-nav-item:first-child {
    border-top: none;
}
.mobile-nav-link {
    display: block;
    padding: 1rem 0;
    color: var(--td-black);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .01em;
    font-size: 0.95rem;
    text-align: left;
}
@media (hover: hover) and (pointer: fine) {
    .mobile-nav-link:hover {
        color: var(--td-navy,#14438A);
    }
}
.mobile-nav-link:active {
    color: var(--td-navy,#14438A);
}
.mobile-nav-link.active,
.mobile-nav-link[aria-current="page"] {
    color: var(--td-navy,#14438A);
    border-left: 4px solid var(--td-yellow,#FFC000);
    padding-left: calc(1rem + 4px); /* compensate for border */
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    background: var(--td-yellow,#FFC000);
    color: var(--td-black);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    z-index: 1050;
}

/* Body lock when menu open */
body.menu-open {
    overflow: hidden;
}

/* Dim backdrop as body pseudo-element: sits below header (1000) and menu (998), above page content */
body.menu-open::after {
    content: '';
    position: fixed;
    top: var(--header-height-mobile-normal);
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(11,42,91,0.45);
    z-index: 997;
    touch-action: none;
}

/* Focus styles */
.nav-link:focus-visible,
.mobile-nav-link:focus-visible,
.hamburger:focus-visible,
.skip-link:focus {
    outline: 2px solid var(--td-navy,#14438A);
    outline-offset: 3px;
}

/* ---------- Tablet and mobile (900px and below) ---------- */
@media (max-width: 900px) {
    #site-header {
        height: var(--header-height-mobile-normal);
    }
    /* Anchor links (for example #saas) stop below the fixed header */
    html {
        scroll-padding-top: calc(var(--header-height-mobile-scrolled) + 12px);
    }
    .header-container {
        grid-template-columns: 1fr auto; /* Two columns: logo and header-actions */
        column-gap: 12px;
    }
    .desktop-nav {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    /* Position elements in mobile view */
    .site-header .logo-link {
        grid-column: 1;
        justify-self: start; /* Left */
    }
    .site-header .hamburger {
        grid-column: 2;
        justify-self: end; /* Right */
    }
    .site-header .header-actions {
        grid-column: 2;
        justify-self: end; /* Right */
        gap: 10px;
    }
    /* CTA button mobile styles */
    .site-header .cta {
        padding: 8px 14px;
        min-height: 40px;
        font-size: 0.85rem;
        line-height: 1.2;
    }
    /* Mobile header height */
    .site-header {
        height: var(--header-height-mobile-normal);
    }
    .site-header.is-scrolled {
        height: var(--header-height-mobile-scrolled);
    }
    .logo {
        height: var(--logo-height-mobile-normal);
    }
    .site-header.is-scrolled .logo {
        height: var(--logo-height-mobile-scrolled);
    }
}

/* ---------- Extra small screens (360px and below) ---------- */
@media (max-width: 360px) {
    .site-header .logo,
    .site-header.is-scrolled .logo {
        height: 30px;
    }
    .site-header .cta {
        padding: 7px 12px;
        font-size: 0.8rem;
        min-height: 35px;
    }
    .site-header .header-actions {
        gap: 8px;
    }
    .site-header .header-container {
        padding-inline: 12px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header.is-scrolled,
    .logo,
    .nav-link::after,
    .hamburger-line,
    .hamburger,
    .cta,
    .mobile-menu {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}