/* apple.com global nav — measured 2026-10-26; library entry nav/apple-global-nav.
   Load after tokens/base, colors/apple-neutral-palette, typography/apple-font-weights,
   buttons/apple-buttons (for bar CTA pill + mobile elevated CTA). Set --accent to client brand. */

:root {
  /* Breakpoints (use in @media; not valid inside var()) */
  --agn-bp-desktop: 834px;
  --agn-bp-mobile-max: 833px;
  --agn-bp-flyout-stack: 640px;

  /* Bar geometry */
  --agn-height-desktop: 44px;
  --agn-height-mobile: 48px;
  --agn-z-index: 9999;
  --agn-z-index-curtain: 9998;
  --agn-content-max-width: 1024px;
  --agn-content-padding-inline: 22px;
  --agn-link-padding-inline: 8px;
  --agn-list-margin-inline: -8px;
  --agn-min-width: 320px;

  /* Colours */
  --agn-color-primary: rgba(0, 0, 0, 0.8);
  --agn-color-primary-hover: #000000;
  --agn-color-secondary: #333336;
  --agn-color-flyout-heading: #6e6e73;
  --agn-bar-background: rgba(250, 250, 252, 0.8);
  --agn-bar-background-fallback: rgba(250, 250, 252, 0.92);
  --agn-panel-background: #fafafc;
  --agn-curtain-background: rgba(232, 232, 237, 0.4);

  /* Blur */
  --agn-backdrop-saturate: 180%;
  --agn-backdrop-blur: 20px;
  --agn-curtain-blur: 20px;

  /* Motion — library standard (measured apple.com globalheader, Oct 2026) */
  --agn-motion-ease-standard: cubic-bezier(0.4, 0, 0.6, 1);
  --agn-motion-duration-color: 0.32s;
  --agn-motion-duration-medium: 0.24s;
  --agn-motion-flyout-open-delay: 120ms;
  --agn-motion-flyout-close-delay: 0.12s;
  --agn-motion-flyout-spacing: 88px;
  --agn-motion-flyout-rate-min: 240ms;
  --agn-motion-flyout-rate-max: 480ms;
  --agn-motion-flyout-switch-duration: 0.12s;
  --agn-motion-flyout-item-duration: 0.32s;
  --agn-motion-flyout-item-stagger: 20ms;
  --agn-motion-flyout-item-base-delay: 80ms;
  --agn-motion-flyout-row-offset-open: -4px;
  --agn-motion-flyout-row-close-min: 0.16s;
  --agn-motion-flyout-row-close-max: 0.24s;
  --agn-motion-curtain-fade-delay: 80ms;
  --agn-motion-mobile-row-duration: 0.24s;
  --agn-motion-mobile-row-stagger: 20ms;
  --agn-motion-mobile-row-base-delay: 200ms;
  --agn-motion-mobile-row-offset-open: -8px;
  --agn-motion-mobile-icon-fade: 0.24s;
  --agn-motion-mobile-icon-return-delay: 80ms;
  --agn-motion-mobile-sheet-transition-delay: 80ms;
  --agn-motion-burger-duration: 0.24s;
  --agn-motion-focus-return-delay: 300ms;

  /* Motion aliases (existing --agn-* hooks) */
  --agn-ease-standard: var(--agn-motion-ease-standard);
  --agn-duration-color: var(--agn-motion-duration-color);
  --agn-duration-medium: var(--agn-motion-duration-medium);
  --agn-flyout-open-delay: var(--agn-motion-flyout-open-delay);
  --agn-flyout-close-delay: var(--agn-motion-flyout-close-delay);
  --agn-flyout-spacing: var(--agn-motion-flyout-spacing);
  --agn-flyout-rate-min: var(--agn-motion-flyout-rate-min);
  --agn-flyout-rate-max: var(--agn-motion-flyout-rate-max);
  --agn-flyout-switch-duration: var(--agn-motion-flyout-switch-duration);
  --agn-flyout-item-duration: var(--agn-motion-flyout-item-duration);
  --agn-flyout-item-stagger: var(--agn-motion-flyout-item-stagger);
  --agn-flyout-item-base-delay: var(--agn-motion-flyout-item-base-delay);
  --agn-flyout-row-offset-open: var(--agn-motion-flyout-row-offset-open);
  --agn-flyout-row-close-min: var(--agn-motion-flyout-row-close-min);
  --agn-flyout-row-close-max: var(--agn-motion-flyout-row-close-max);
  --agn-curtain-fade-delay: var(--agn-motion-curtain-fade-delay);
  --agn-mobile-row-duration: var(--agn-motion-mobile-row-duration);
  --agn-mobile-row-stagger: var(--agn-motion-mobile-row-stagger);
  --agn-mobile-row-base-delay: var(--agn-motion-mobile-row-base-delay);
  --agn-mobile-row-offset-open: var(--agn-motion-mobile-row-offset-open);
  --agn-mobile-icon-fade: var(--agn-motion-mobile-icon-fade);
  --agn-mobile-icon-return-delay: var(--agn-motion-mobile-icon-return-delay);
  --agn-mobile-menu-close-delay: var(--agn-motion-mobile-sheet-transition-delay);
  --agn-burger-morph-duration: var(--agn-motion-burger-duration);
  --agn-focus-return-delay: var(--agn-motion-focus-return-delay);

  /* Desktop bar links */
  --agn-bar-font-size: 12px;
  --agn-bar-font-weight: 400;
  --agn-bar-line-height: 1;
  --agn-bar-letter-spacing: -0.01em;

  /* Desktop flyout content */
  --agn-flyout-content-padding-top: 40px;
  --agn-flyout-content-padding-inline: 22px;
  --agn-flyout-content-padding-bottom: 84px;
  --agn-flyout-group-max-width: 25%;
  --agn-flyout-group-padding-end: 44px;
  --agn-flyout-group-elev-max-width: 50%;
  --agn-flyout-group-elev-padding-end: 88px;
  --agn-flyout-heading-size: 12px;
  --agn-flyout-heading-weight: 400;
  --agn-flyout-heading-line-height: 1.33337;
  --agn-flyout-heading-letter-spacing: -0.01em;
  --agn-flyout-link-elev-size: 24px;
  --agn-flyout-link-elev-weight: 600;
  --agn-flyout-link-elev-line-height: 1.16667;
  --agn-flyout-link-elev-letter-spacing: 0.009em;
  --agn-flyout-link-elev-padding: 9px 11px 7px;
  --agn-flyout-link-elev-margin-top-first: 6px;
  --agn-flyout-link-elev-margin-bottom: -6px;
  --agn-flyout-link-elev-row-pitch: 38px;
  --agn-flyout-link-size: 12px;
  --agn-flyout-link-weight: 600;
  --agn-flyout-link-line-height: 1.33337;
  --agn-flyout-link-letter-spacing: -0.01em;
  --agn-flyout-link-padding: 7px 11px;
  --agn-flyout-link-margin-top-first: 10px;
  --agn-flyout-link-margin-bottom: -6px;
  --agn-flyout-link-margin-inline: -11px;
  --agn-flyout-link-row-pitch: 24px;

  /* Bar CTA pill (local-nav Buy style) */
  --agn-bar-cta-font-size: 12px;
  --agn-bar-cta-font-weight: 400;
  --agn-bar-cta-padding: 4px 11px;
  --agn-bar-cta-radius: 980px;

  /* Mobile closed bar */
  --agn-mobile-logo-padding-inline: 16px;
  --agn-mobile-icon-hit: 48px;
  --agn-burger-size: 18px;
  --agn-burger-stroke: 1.2;
  --agn-burger-opacity: 0.8;
  --agn-burger-opacity-hover: 1;
  --agn-utility-icon-size: 17px;

  /* Mobile open menu */
  --agn-mobile-menu-padding-top: 50px;
  --agn-mobile-menu-padding-bottom: 84px;
  --agn-mobile-inset-inline: 48px;
  --agn-mobile-link-size: 28px;
  --agn-mobile-link-weight: 600;
  --agn-mobile-link-line-height: 1;
  --agn-mobile-link-letter-spacing: 0.007em;
  --agn-mobile-link-padding-block: 3px 4px;
  --agn-mobile-link-text-padding-block: 7.5px;
  --agn-mobile-link-margin-bottom: -7px;
  --agn-mobile-row-pitch: 46px;
  --agn-mobile-first-item-margin-top: -3px;
  --agn-mobile-section-gap: 24px;
  --agn-mobile-secondary-size: 17px;
  --agn-mobile-secondary-weight: 400;
  --agn-mobile-secondary-line-height: 1.47059;
  --agn-mobile-secondary-letter-spacing: -0.022em;
  --agn-mobile-secondary-min-height: 44px;

  /* Language picker (compact; flyout list tokens) */
  --agn-lang-list-background: var(--agn-panel-background);
  --agn-lang-list-size: 12px;
  --agn-lang-list-color: var(--agn-color-secondary);
  --agn-lang-list-motion: 0.32s var(--agn-ease-standard);
  --agn-lang-list-offset: -4px;

  /* Focus — nav uses inset ring */
  --agn-focus-outline-width: var(--focus-ring-width, 2px);
  --agn-focus-outline-offset: var(--focus-ring-offset-nav, -7px);

  /* Typography stack (not SF Pro) */
  --agn-font-family: var(--type-font-text, Figtree, "Noto Sans Thai", system-ui, sans-serif);
  --agn-font-family-display: var(--type-font-display, Figtree, "Noto Sans Thai", system-ui, sans-serif);

  /* Flyout height JS hook */
  --agn-flyout-height: 44px;
  --agn-flyout-rate: 0s;
  --agn-flyout-prev-height: 0px;
  --agn-flyout-next-height: 0px;
}

/* Scoped to nav only — do not set --sk-focus-color on :root */
#agn,
.agn {
  --sk-focus-color: var(--focus-ring-color, var(--accent, #0071e3));
  --sk-focus-offset: var(--focus-ring-offset-nav, -7px);
}