/* ==========================================================================
   Mac Notch & Dynamic Island Header
   Self-contained, production-ready navigation component.
   Features:
   - macOS Notch concave corner fillets (radial-gradient)
   - Two-phase 450ms smooth scroll-collapse & expand transitions
   - Centered 480px expanded tablet dock -> 274px compact pill
   - Single-row phone/tablet stability (54px height lock)
   - Accessible keyboard focus and mobile drawer
   - Docked notch and floating Dynamic Island variants
   ========================================================================== */

:root {
  /* Notch Geometry & Colors */
  --nav-safe-top: env(safe-area-inset-top, 0px);
  --nav-dock-bar-height: 8px;
  --notch-ink: #111116;
  --notch-bar: var(--nav-dock-bar-height);
  --notch-fillet: 24px;

  /* Theme Tokens */
  --nav-text-muted: #babac5;
  --nav-text-light: #ffffff;
  --nav-accent: #1d4ed8;
  --nav-accent-hover: #eff5ff;

  /* Responsive Sizing Tokens */
  --nav-expanded-tablet-width: 480px;
  --nav-compact-tablet-width: 276px;
}

/* Scoped base reset for navigation */
.site-nav,
.site-nav * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Top Fixed Navigation Container
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: var(--nav-safe-top);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Top bezel bar running across the full viewport width */
.site-nav:before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nav-safe-top) - 1px);
  left: 0;
  right: 0;
  height: calc(var(--nav-safe-top) + var(--notch-bar) + 2px);
  background: var(--notch-ink);
  transition: opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   Inverted Concave Fillets (The MacBook Notch "Ears")
   Uses radial gradients to create smooth inverted corners at the top seam
   -------------------------------------------------------------------------- */
.site-nav__pill:before,
.site-nav__pill:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--notch-bar));
  width: var(--notch-fillet);
  height: calc(var(--notch-fillet) + var(--notch-bar));
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Left Concave Curve */
.site-nav__pill:before {
  left: calc(-1 * var(--notch-fillet) + 1px);
  background: radial-gradient(
    circle var(--notch-fillet) at 0 100%,
    transparent calc(var(--notch-fillet) - 1px),
    var(--notch-ink) var(--notch-fillet)
  );
}

/* Right Concave Curve */
.site-nav__pill:after {
  right: calc(-1 * var(--notch-fillet) + 1px);
  background: radial-gradient(
    circle var(--notch-fillet) at 100% 100%,
    transparent calc(var(--notch-fillet) - 1px),
    var(--notch-ink) var(--notch-fillet)
  );
}

/* --------------------------------------------------------------------------
   Brand Logo
   -------------------------------------------------------------------------- */
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
  user-select: none;
  transition: opacity 0.15s ease;
}

.site-nav__logo:hover {
  opacity: 0.9;
}

.site-nav__logo-img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Navigation Link Items
   -------------------------------------------------------------------------- */
.site-nav__link {
  color: var(--nav-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease-out;
  outline-color: #ffffff;
}

.site-nav__link:hover {
  color: var(--nav-text-light);
}

/* Hidden by default on desktop, shown inside mobile dropdown */
.site-nav__mobile-only {
  display: none;
}

/* --------------------------------------------------------------------------
   Action / CTA Button (With Signature Flip-to-Icon Effect)
   -------------------------------------------------------------------------- */
.site-nav .site-button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  line-height: 1.25;
  isolation: isolate;
  display: inline-grid;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: background 0.16s, border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.site-nav__cta {
  color: var(--nav-accent);
  background: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  height: 38px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 9999px;
  flex-shrink: 0;
  white-space: nowrap;
}

.site-nav .site-button__label,
.site-nav .site-button__icon {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.site-nav .site-button__label {
  white-space: nowrap;
  transition: opacity 0.24s, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s;
}

.site-nav .site-button__label > svg {
  flex-shrink: 0;
}

.site-nav .site-button__icon {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transform: translateY(6px) scale(0.8);
  transition: opacity 0.24s, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-nav__cta:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.015);
    background: var(--nav-accent-hover);
  }

  .site-nav__cta:hover:not(:disabled) .site-button__label {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-5px) scale(0.96);
  }

  .site-nav__cta:hover:not(:disabled) .site-button__icon {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0) scale(1);
  }
}

.site-nav__cta:active:not(:disabled) {
  transform: scale(0.96);
  background: #e2e8f0;
}

/* --------------------------------------------------------------------------
   Mobile Hamburger Menu Button
   -------------------------------------------------------------------------- */
.site-nav__menu {
  display: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 10px;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  outline-color: #fff;
}

.site-nav__menu span {
  display: block;
  width: 16px;
  height: 2px;
  background: #e8eaed;
  border-radius: 2px;
  transition: transform 0.32s cubic-bezier(0.32, 1.22, 0.36, 1), opacity 0.18s;
}

/* Animated 'X' state */
.site-nav__pill.is-open .site-nav__menu span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.site-nav__pill.is-open .site-nav__menu span:nth-child(2) {
  opacity: 0;
}

.site-nav__pill.is-open .site-nav__menu span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   DESKTOP ANIMATION & SIZING (>= 769px)
   Smooth 450ms transitions via cubic-bezier(0.22, 1, 0.36, 1)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .site-nav__pill {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: calc(100% - 2 * var(--notch-fillet));
    height: 56px;
    margin-top: var(--notch-bar);
    padding: 6px 8px 6px 14px;
    background: var(--notch-ink);
    box-shadow: 0 calc(-1 * var(--notch-bar)) 0 0 var(--notch-ink);
    border-radius: 0 0 24px 24px;
    margin-left: auto;
    margin-right: auto;
    transition: 
      width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      gap 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  /* Compact mode on Desktop: tightens gap and keeps 56px height */
  .site-nav.is-compact .site-nav__pill {
    gap: 16px;
    padding: 6px 8px 6px 14px;
    height: 56px;
  }

  .site-nav__logo {
    margin-right: 10px;
    transition: opacity 0.15s ease, margin-right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-nav.is-compact .site-nav__logo {
    margin-right: 0;
  }

  /* Desktop Navigation Links (Two-Phase Smooth 450ms Transition) */
  .site-nav__links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-right: 8px;
    max-width: 600px;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    filter: blur(0px);
    transition: 
      max-width 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0s,
      margin-right 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0s,
      gap 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0s,
      opacity 0.25s ease-out 0.18s,
      transform 0.27s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
      filter 0.25s ease-out 0.18s,
      visibility 0s linear 0s;
  }

  /* Collapsing phase on desktop: links fade/slide out before space collapses */
  .site-nav.is-compact .site-nav__links {
    max-width: 0;
    margin-right: 0;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transform: translateX(-6px) scale(0.97);
    filter: blur(2px);
    transition: 
      opacity 0.18s ease-out 0s,
      transform 0.20s cubic-bezier(0.22, 1, 0.36, 1) 0s,
      filter 0.18s ease-out 0s,
      max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.10s,
      margin-right 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.10s,
      gap 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.10s,
      visibility 0s linear 0.45s;
  }
}

/* --------------------------------------------------------------------------
   TABLET & MOBILE RESPONSIVE SIZING (<= 768px)
   - Expanded state: Moderately narrower centered dock (480px)
   - Compact state: Visibly smaller centered pill (276px)
   - Locked 54px height in both states (no vertical growth)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-nav__pill {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    /* At top (expanded): Moderately narrower tablet dock, horizontally centered */
    width: min(var(--nav-expanded-tablet-width, 480px), calc(100vw - 2 * var(--notch-fillet) - 8px));
    max-width: min(var(--nav-expanded-tablet-width, 480px), calc(100vw - 2 * var(--notch-fillet) - 8px));
    margin-left: auto;
    margin-right: auto;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    margin-top: var(--notch-bar);
    padding: 8px 12px 8px 14px;
    gap: 0 10px;
    background: var(--notch-ink);
    box-shadow: 0 calc(-1 * var(--notch-bar)) 0 0 var(--notch-ink);
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    transition: 
      width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      gap 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  /* Logo anchored on left; CTA + Menu sit on right with balanced space */
  .site-nav__logo,
  .site-nav:not(.is-compact) .site-nav__logo,
  .site-nav.is-compact .site-nav__logo {
    margin-right: auto;
  }

  /* Scrolled compact state: contracts down to ~274px-276px */
  .site-nav.is-compact .site-nav__pill {
    width: min(var(--nav-compact-tablet-width, 276px), calc(100vw - 2 * var(--notch-fillet) - 8px));
    max-width: min(var(--nav-compact-tablet-width, 276px), calc(100vw - 2 * var(--notch-fillet) - 8px));
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 8px 12px 8px 14px;
    gap: 0 10px;
    overflow: hidden;
  }

  /* When mobile/tablet drawer is opened */
  .site-nav__pill.is-open,
  .site-nav.is-compact .site-nav__pill.is-open {
    width: min(var(--nav-expanded-tablet-width, 480px), calc(100vw - 2 * var(--notch-fillet) - 8px));
    max-width: min(var(--nav-expanded-tablet-width, 480px), calc(100vw - 2 * var(--notch-fillet) - 8px));
    height: auto;
    max-height: 580px;
    overflow: visible;
    flex-wrap: wrap;
  }

  .site-nav__pill.is-open .site-nav__logo,
  .site-nav.is-compact .site-nav__pill.is-open .site-nav__logo {
    margin-right: auto;
  }

  .site-nav__logo {
    flex-shrink: 1;
    min-width: 0;
    gap: 7px;
    transition: opacity 0.15s ease;
  }

  .site-nav__logo span {
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-nav__cta {
    order: 2;
    flex-shrink: 0;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: 9999px;
  }

  .site-nav__menu {
    display: inline-flex;
    order: 3;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  /* Inactive drawer links collapsed to 0 so they do not inflate width */
  .site-nav__pill:not(.is-open) .site-nav__links {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden !important;
  }

  .site-nav__links {
    order: 5;
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    transition: 
      max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.22s ease,
      padding 0.22s ease;
  }

  .site-nav__pill.is-open .site-nav__links,
  .site-nav.is-compact .site-nav__pill.is-open .site-nav__links {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 480px;
    padding: 10px 2px 8px;
    margin-top: 4px;
  }

  .site-nav__link {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    color: #e2e8f0;
  }

  .site-nav__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .site-nav__mobile-only {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Extra Small Mobile Screens (<= 380px, e.g. 320px iPhone SE)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .site-nav__pill,
  .site-nav.is-compact .site-nav__pill {
    padding: 8px 8px 8px 10px;
    gap: 0 6px;
  }

  .site-nav__logo,
  .site-nav.is-compact .site-nav__logo {
    gap: 5px;
  }

  .site-nav__logo span {
    font-size: 13.5px;
  }

  .site-nav__cta {
    padding: 0 10px;
    font-size: 12px;
    height: 34px;
    min-height: 34px;
  }

  .site-nav__menu {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility Skip Link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 12px 18px;
  background: #ffffff;
  color: #0f2133;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto;
  z-index: 2000;
  transition: top 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.skip-link:focus {
  top: 16px;
}

/* --------------------------------------------------------------------------
   Optional Variant: Floating Dynamic Island Mode
   Add class .is-floating to .site-nav
   -------------------------------------------------------------------------- */
.site-nav.is-floating:before {
  opacity: 0;
  pointer-events: none;
}

.site-nav.is-floating .site-nav__pill {
  margin-top: 14px;
  border-radius: 9999px;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.site-nav.is-floating .site-nav__pill:before,
.site-nav.is-floating .site-nav__pill:after {
  opacity: 0;
}

@media (max-width: 768px) {
  .site-nav.is-floating .site-nav__pill,
  .site-nav.is-floating.is-compact .site-nav__pill {
    border-radius: 20px;
  }
}

/* --------------------------------------------------------------------------
   Zero-Transition Utility (Used on page load / refresh to prevent glitching)
   -------------------------------------------------------------------------- */
.site-nav.no-transition,
.site-nav.no-transition *,
.site-nav.no-transition::before,
.site-nav.no-transition::after,
.site-nav.no-transition .site-nav__pill,
.site-nav.no-transition .site-nav__pill::before,
.site-nav.no-transition .site-nav__pill::after,
.site-nav.no-transition .site-nav__links {
  transition: none !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   Reduced Motion Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav *,
  .site-nav::before,
  .site-nav::after,
  .site-nav__pill,
  .site-nav__pill::before,
  .site-nav__pill::after,
  .site-nav__links,
  .site-nav__link,
  .site-nav__logo,
  .site-nav__cta {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
}