/* ==========================================================================
   Smartguard — Design Tokens
   These belong to the shared tokens.css. Included here so the component
   is self-contained; in the project, import rather than redefine.
   ========================================================================== */

:root {
  /* Colour */
  --colour-surface:     #101210;                 /* Base surface, one step up from page */
  --colour-border:      oklch(from var(--colour-text) l c h / 8%);

  /* Typography */
  

  /* Motion */
  --transition-fast:    150ms ease;
  --transition-default: 250ms ease;

  /* Effects */
  --blur-header: 14px;
  /* --shadow-soft: 0 1px 0 oklch(from var(--colour-text) l c h / 5%); */

}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  overflow: visible;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Base state: transparent, no border, no shadow — it belongs to the Hero. */
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  /*
    CSS-only scroll transition, no JavaScript.
    animation-timeline: scroll(root) ties the animation's progress directly
    to how far the document has scrolled, rather than to time. The range
    0px–60px matches the "approximately 60px" threshold from spec: fully
    transparent at the top, fully frosted by 60px, nothing in between is
    ever mid-way in a jarring way because it's driven by scroll position,
    not a timed animation.
  */
  animation-name: site-header-solidify;
  animation-duration: 1ms; /* required by spec syntax; timeline governs actual pacing */
  animation-timeline: scroll(root);
  animation-range: 0px 80px;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

@keyframes site-header-solidify {
  from {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    background: oklch(from var(--colour-page) calc(l + 0.05) c h / 52%);
    border-bottom-color: var(--colour-border);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(var(--blur-header));
    -webkit-backdrop-filter: blur(var(--blur-header));
  }
}

/*
  Fallback for browsers without scroll-driven animation support
  (no JS substitute is used — this is a deliberate static alternative).
  A permanently faint frosted header reads as intentional and calm either
  way, rather than the header snapping between two states or, worse,
  staying starkly transparent over busy content further down the page.
*/
@supports not (animation-timeline: scroll()) {
  .site-header {
    animation: none;
    background: oklch(from var(--colour-page) calc(l + 0.05) c h / 45%);
    border-bottom: 1px solid var(--colour-border);
    -webkit-backdrop-filter: blur(calc(var(--blur-header) / 2));
    backdrop-filter: blur(calc(var(--blur-header) / 2));
  }
}

.site-header__inner {
  width: 100%;
  max-width: var(--container-standard);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-lg);
}

/* Hidden but focusable — keyboard users can still Tab + Space this. */
.site-header__menu-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Hamburger button — hidden on desktop, shown at/below the existing 1024px breakpoint. */
.site-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-default);

}

.site-header__hamburger:hover {
  background: oklch(from var(--colour-brand) 92% c h / 12%);
}

.site-header__menu-toggle:focus-visible ~ .site-header__hamburger {
  outline: 2px solid var(--colour-brand);
  outline-offset: 2px;
}

.site-header__hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--colour-text);
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header__hamburger {
    display: grid;
    grid-template-rows: repeat(3, 2px);
    gap: 5px;
    align-content: center;
  }

  .site-header__nav {
    position: absolute;
    top: 60px;
    inset-inline: 0;
    width: auto;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height var(--transition-default),
      opacity var(--transition-default);
  }

  .site-header__nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-block: var(--space-md) var(--space-lg);
  }

  .site-header__menu-toggle:checked ~ .site-header__hamburger{
    grid-template-rows: 1fr;
    & .site-header__hamburger-bar{
        display: none;
        position: absolute;
        top: -1000px;
    }
    & .visually-hidden {
      position: relative;
      display: block;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: normal;
      align-self: center;
    }
  }

  .site-header__menu-toggle:checked ~ .site-header__nav {
    max-height: 320px;
    opacity: 1;
    background-image: linear-gradient(135deg,oklch(from var(--colour-brand) 0.2 c h / 95%), oklch(from var(--colour-brand) 0.1 c h / 95%));
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    z-index: 10;
    
    & a{
        color: var(--colour-text);
        font-weight: 600;
    }
  }
}

/* ---------- Logo ---------- */

.site-header__logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-family-logo);
  font-weight: var(--font-weight-medium);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--colour-text);
  text-decoration: none;
  /* margin-right: var(--space-xl); */
  & img {
    height: 32px;
    width: auto;
  }
}

.site-header__logo span {
  color: var(--colour-brand);
}

/* ---------- Navigation ---------- */

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

@property --main-menu-item-hover-width {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --main-menu-item-hover-height {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

.site-header__nav li {
    position: relative;
    height: 100%;
}
.site-header__nav li::after{
    content: "";
    position: absolute;
    top: -5px;
    left: -10px;
    width: var(--main-menu-item-hover-width);
    height: var(--main-menu-item-hover-height);
    border-radius: var(--radius-lg);
    transition:
        --main-menu-item-hover-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        --main-menu-item-hover-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    background: oklch(from var(--bg-500) l c h / 0.3);
    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 40px;
    }

}
.site-header__nav li:hover::after, .site-header__nav li:has(.is-active)::after{
    --main-menu-item-hover-width: calc(100% + 20px);
    --main-menu-item-hover-height: calc(100% + 10px);
}




.site-header__nav a {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--colour-text-muted);
  text-decoration: none;
  text-transform: none;
  padding-block: var(--space-sm);
  transition: color var(--transition-default);
  cursor: pointer;
}

.site-header__nav a:hover {
  color: var(--colour-brand);
}

/* Active page: understated, no indicator, just a calm shift to full text colour */
.site-header__nav a.is-active {
  color: var(--colour-text);
}

/* ---------- Accessibility ---------- */

.site-header__nav a:focus-visible,
.site-header__logo:focus-visible {
  outline: 2px solid var(--colour-brand);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ---------- Desktop-only, per spec ---------- */

@media (max-width: 1024px) {
  .site-header__inner { padding-inline: var(--space-md); }
  .site-header__nav ul { gap: var(--space-lg); }
}

/* Respect reduced-motion preferences even though this is a scroll-linked
   (not timed) effect — some users still prefer no blur/opacity shifts. */
@media (prefers-reduced-motion: reduce) {
  .site-header {
    animation: none;
    background: oklch(from var(--colour-page) calc(l + 0.05) c h / 60%);
    border-bottom: 1px solid var(--colour-border);
  }
}