/* ============================================================================
   apple-theme.css — shared "Apple gallery" design system
   Derived from DESIGN-apple.md. Photography-first, light-dominant, single
   Action Blue accent, SF Pro / Inter type with tight tracking, pill CTAs.
   Loaded by every public page. Pages also remap their legacy :root palette
   to the Apple tokens below so existing components reskin automatically.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand / accent */
  --ax-primary:        #0066cc;   /* Action Blue — the single interactive color */
  --ax-primary-focus:  #0071e3;   /* focus ring */
  --ax-primary-ondark: #2997ff;   /* links on dark tiles */

  /* Ink / text */
  --ax-ink:        #1d1d1f;
  --ax-ink-80:     #333333;
  --ax-ink-48:     #6e6e73;
  --ax-on-dark:    #ffffff;
  --ax-muted-dark: #cccccc;

  /* Surfaces */
  --ax-canvas:     #ffffff;
  --ax-parchment:  #f5f5f7;
  --ax-pearl:      #fafafc;
  --ax-tile-1:     #272729;
  --ax-tile-2:     #2a2a2c;
  --ax-tile-3:     #252527;
  --ax-black:      #000000;

  /* Lines */
  --ax-divider:    #f0f0f0;
  --ax-hairline:   #e0e0e0;

  /* Radii */
  --ax-r-xs: 5px;  --ax-r-sm: 8px;  --ax-r-md: 11px;
  --ax-r-lg: 18px; --ax-r-pill: 9999px;

  /* Spacing */
  --ax-xxs:4px; --ax-xs:8px; --ax-sm:12px; --ax-md:17px;
  --ax-lg:24px; --ax-xl:32px; --ax-xxl:48px; --ax-section:80px;

  /* The single drop-shadow in the system — product imagery only */
  --ax-product-shadow: rgba(0,0,0,0.22) 3px 5px 30px 0;

  /* Font stacks: system-ui resolves to real SF Pro on Apple devices */
  --ax-font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --ax-font-text:    "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

/* ---- Base typography (opt-in via body.ax) ------------------------------- */
body.ax {
  font-family: var(--ax-font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.ax h1, body.ax h2, body.ax h3 {
  font-family: var(--ax-font-display);
  font-weight: 600;
  letter-spacing: -0.022em;   /* the "Apple tight" cadence */
  line-height: 1.1;
}

/* ---- Global nav: white header bar with the VR logo ---------------------- */
.ax-global-nav {
  position: sticky; top: 0; z-index: 9000;
  height: 52px;
  background: var(--ax-canvas);
  color: var(--ax-ink);
  border-bottom: 1px solid var(--ax-hairline);
  display: flex; align-items: center; gap: 22px;
  padding: 0 22px;
  font-family: var(--ax-font-text);
  font-size: 12px; letter-spacing: -0.12px;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.ax-global-nav::-webkit-scrollbar { display: none; }
.ax-global-nav a {
  color: var(--ax-ink); opacity: 0.7; text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}
.ax-global-nav a:hover { opacity: 1; color: var(--ax-primary); }
.ax-global-nav .ax-nav-brand { opacity: 1; display: inline-flex; align-items: center; line-height: 0; }
.ax-global-nav .ax-nav-brand svg { height: 28px; width: auto; display: block; }
.ax-global-nav .ax-nav-spacer { flex: 1; }
.ax-global-nav a.ax-nav-active { opacity: 1; font-weight: 600; }

/* The big header logo moved into the nav — hide the old in-page one */
.header-logo { display: none !important; }

/* Hamburger (mobile only) — sits top-right, toggles the link dropdown */
.ax-nav-burger {
  display: none; flex-direction: column; gap: 4px;
  width: 32px; height: 32px; padding: 7px;
  background: transparent; border: 0; cursor: pointer;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.ax-nav-burger span { display: block; width: 18px; height: 2px; background: var(--ax-ink); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 833px) {
  /* Keep the burger IN the flex flow (no absolute/fixed — iOS Safari mishandles
     absolute-inside-sticky and hides it). Push it to the top-right with order +
     margin-left:auto; the brand stays left and links drop below when open. */
  .ax-global-nav { overflow: visible; }
  .ax-global-nav .ax-nav-brand { order: 0; }
  .ax-nav-burger { display: flex; order: 1; margin-left: auto; }
  .ax-global-nav > a:not(.ax-nav-brand) { display: none; order: 2; }
  .ax-global-nav .ax-nav-spacer { display: none; }
  .ax-global-nav.open {
    height: auto; flex-wrap: wrap; overflow: visible;
    align-items: flex-start; padding-bottom: 10px;
  }
  .ax-global-nav.open > a:not(.ax-nav-brand) {
    display: block; width: 100%; padding: 9px 2px; font-size: 15px; opacity: 0.9; order: 2;
  }
  .ax-global-nav.open .ax-nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .ax-global-nav.open .ax-nav-burger span:nth-child(2) { opacity: 0; }
  .ax-global-nav.open .ax-nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---- Frosted sub-nav ---------------------------------------------------- */
.ax-subnav {
  position: sticky; top: 44px; z-index: 8900;
  height: 52px;
  display: flex; align-items: center; gap: 18px;
  padding: 0 24px;
  background: rgba(245,245,247,0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--ax-ink);
}
.ax-subnav .ax-subnav-title {
  font-family: var(--ax-font-display);
  font-size: 21px; font-weight: 600; letter-spacing: 0.231px;
}
.ax-subnav .ax-nav-spacer { flex: 1; }
.ax-subnav a { color: var(--ax-ink); text-decoration: none; font-size: 14px; letter-spacing: -0.224px; }
.ax-subnav a:hover { color: var(--ax-primary); }

/* ---- Buttons ------------------------------------------------------------ */
.ax-btn, .ax-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ax-font-text); font-size: 17px; font-weight: 400;
  letter-spacing: -0.374px; line-height: 1;
  border-radius: var(--ax-r-pill); padding: 11px 22px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .1s ease, background-color .2s ease;
  text-decoration: none;
}
.ax-btn { background: var(--ax-primary); color: #fff; }
.ax-btn:hover { background: #0071e3; }
.ax-btn-ghost { background: transparent; color: var(--ax-primary); border-color: var(--ax-primary); }
.ax-btn-ghost:hover { background: rgba(0,102,204,0.06); }
.ax-btn:active, .ax-btn-ghost:active { transform: scale(0.95); }      /* system micro-interaction */
.ax-btn:focus-visible, .ax-btn-ghost:focus-visible {
  outline: 2px solid var(--ax-primary-focus); outline-offset: 2px;
}
.ax-btn-lg { font-size: 18px; font-weight: 300; padding: 14px 28px; }
.ax-btn-on-dark { color: #fff; }

/* ---- Tiles (full-bleed alternating sections) ---------------------------- */
.ax-tile {
  padding: var(--ax-section) 24px;
  text-align: center;
}
.ax-tile--canvas    { background: var(--ax-canvas);    color: var(--ax-ink); }
.ax-tile--parchment { background: var(--ax-parchment); color: var(--ax-ink); }
.ax-tile--dark      { background: var(--ax-tile-1);    color: var(--ax-on-dark); }
.ax-tile--black     { background: var(--ax-black);     color: var(--ax-on-dark); }
.ax-tile--dark a, .ax-tile--black a { color: var(--ax-primary-ondark); }
.ax-tile h1, .ax-tile h2 {
  font-family: var(--ax-font-display); font-weight: 600;
  font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.022em; line-height: 1.07;
  margin: 0 0 16px;
}
.ax-tile .ax-lead {
  font-family: var(--ax-font-display); font-weight: 400;
  font-size: clamp(21px, 2.6vw, 28px); line-height: 1.14; letter-spacing: 0.196px;
  margin: 0 auto 28px; max-width: 640px;
}
.ax-tile .ax-cta-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* Inner content lock */
.ax-wrap { max-width: 1440px; margin: 0 auto; }
.ax-wrap--text { max-width: 980px; margin: 0 auto; }

/* ---- Cards (utility/grid) ----------------------------------------------- */
.ax-card {
  background: var(--ax-canvas);
  border: 1px solid var(--ax-hairline);
  border-radius: var(--ax-r-lg);
  padding: var(--ax-lg);
}
.ax-card img { border-radius: var(--ax-r-sm); }
.ax-product-shadow { box-shadow: var(--ax-product-shadow); }

/* ---- Footer ------------------------------------------------------------- */
.ax-footer {
  background: var(--ax-parchment);
  color: var(--ax-ink-80);
  padding: 64px 24px;
  font-size: 12px; letter-spacing: -0.12px;
}
.ax-footer .ax-legal { color: var(--ax-ink-48); font-size: 12px; }

/* ---- Links: the single accent everywhere -------------------------------- */
body.ax a.ax-link { color: var(--ax-primary); text-decoration: none; }
body.ax a.ax-link:hover { text-decoration: underline; }