/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  LAUNCH STANDARDS — Apple HIG × Google Material × WCAG 2.1 AA          ║
   ║  The last line of defence before the committee sees the site.           ║
   ║                                                                          ║
   ║  Load order: ABSOLUTE LAST (after apex-layer.css)                       ║
   ║  Touch targets:  ≥ 44×44px  (Apple HIG 2024 / iOS HIG)                 ║
   ║  Tap targets:    ≥ 48×48dp  (Google Material 3)                         ║
   ║  Color contrast: ≥ 4.5:1   (WCAG 2.1 AA)                               ║
   ║  Focus ring:     visible on every interactive element                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ══════════════════════════════════════════════════════════════════════════
   0. SKIP LINK — first focusable element, hidden until focused
   Required by WCAG 2.4.1 (Level A) and Apple accessibility guidelines.
══════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 12px 24px;
  background: #a3cf2b;
  color: #021a1e;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top 0.2s ease;
  white-space: nowrap;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #021a1e;
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. GLOBAL FOCUS-VISIBLE RING
   Apple & Google both require clear, high-contrast focus indicators.
   This overrides any rogue `outline: none` — keyboard users must see focus.
══════════════════════════════════════════════════════════════════════════ */

*:focus {
  outline: none; /* hide on mouse clicks — :focus-visible handles keyboard */
}

*:focus-visible {
  outline: 2px solid #a3cf2b !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Elevated contrast for inputs and textareas */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #a3cf2b !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px rgba(163, 207, 43, 0.18) !important;
}

/* High-contrast mode support */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 3px solid ButtonText !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. MINIMUM TOUCH TARGETS — Apple HIG 44×44pt / Google 48×48dp
   Use padding-based expansion so layout is not disturbed.
══════════════════════════════════════════════════════════════════════════ */

/* Navigation links */
.vn-link,
.vn-links > li > a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Hamburger button */
.vn-hamburger {
  min-width:  44px !important;
  min-height: 44px !important;
}

/* CTA buttons in nav */
.vn-cta,
.vn-btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* All button elements */
button,
[role="button"],
[type="button"],
[type="submit"],
[type="reset"] {
  min-height: 44px;
  min-width:  44px;
}

/* Icon-only buttons — use pseudo-element expansion */
.btn-icon,
.social-btn,
.vf-social-btn,
.icon-btn {
  position: relative;
}

.btn-icon::before,
.social-btn::before,
.vf-social-btn::before,
.icon-btn::before {
  content: '';
  position: absolute;
  inset: 50% 50%;
  transform: translate(-50%, -50%);
  min-width:  44px;
  min-height: 44px;
  pointer-events: auto;
}

/* Back-to-top button */
#backToTop {
  min-width:  44px !important;
  min-height: 44px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. FORM ELEMENTS — Apple & Google standards
   Min height 44px, clear contrast, smooth transitions.
══════════════════════════════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  min-height: 44px;
  padding: 10px 14px;
  font-family: 'Cairo', 'Outfit', sans-serif;
  font-size: 1rem; /* never below 16px — prevents iOS auto-zoom */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
textarea:hover,
select:hover {
  border-color: rgba(163, 207, 43, 0.35);
}

/* Checkbox & Radio — minimum tap target */
input[type="checkbox"],
input[type="radio"] {
  min-width:  22px;
  min-height: 22px;
  cursor: pointer;
}

/* Label always full-width click target */
label {
  cursor: pointer;
  display: block;
}

/* Textarea — no horizontal resize (layout-safe) */
textarea {
  resize: vertical;
  min-height: 120px;
}

/* Select arrow styling */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-left: 36px;
}

[dir="ltr"] select {
  background-position: right 14px center;
  padding-left: 14px;
  padding-right: 36px;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. MINIMUM READABLE TEXT — WCAG AA contrast
   Never render body text below 0.875rem (14px) or with opacity < 0.6.
══════════════════════════════════════════════════════════════════════════ */

/* Ensure body text meets 4.5:1 contrast on dark bg */
body,
p,
li,
td,
.section-desc,
.card-desc,
.srv-desc {
  color: rgba(255, 255, 255, 0.82);
}

/* Secondary text — still ≥ 3:1 (large text) */
.caption,
.micro,
.meta,
.label,
small {
  color: rgba(255, 255, 255, 0.62);
}

/* Interactive text — full contrast */
a,
.nav-link,
.vn-link {
  color: rgba(255, 255, 255, 0.88);
}

a:hover {
  color: #a3cf2b;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. iOS TEXT SIZE — prevent auto-zoom on input focus (iOS Safari)
   iOS zooms in if font-size < 16px. Force 16px on all inputs.
══════════════════════════════════════════════════════════════════════════ */

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: max(16px, 1rem) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   6. CONTENT-VISIBILITY — GPU paint deferral for off-screen sections
   Chrome/Edge: sections below the fold are not painted until near-viewport.
   ~25% layout improvement on long pages (Google Core Web Vitals).
══════════════════════════════════════════════════════════════════════════ */

@supports (content-visibility: auto) {
  .section:not(#hero-main):not(.vsh):not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. CSS CONTAIN — layout isolation for cards
   Prevents card reflows from triggering ancestor recalculations.
══════════════════════════════════════════════════════════════════════════ */

.glass-card,
.bento-card,
.srv-card,
.course-card,
.portfolio-item,
.spatial-card,
.vibe-step,
.milestone-card,
.vsh-stat {
  contain: layout style;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. SAFE AREA INSETS — iPhone notch / Dynamic Island / Android gesture bar
   Required for PWA full-screen display mode.
══════════════════════════════════════════════════════════════════════════ */

.vibe-nav {
  padding-left:  max(var(--section-x, 24px), env(safe-area-inset-left));
  padding-right: max(var(--section-x, 24px), env(safe-area-inset-right));
}

.vibe-footer {
  padding-bottom: max(48px, env(safe-area-inset-bottom));
}

body {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}


/* ══════════════════════════════════════════════════════════════════════════
   9. SCROLLBAR — refined, minimal (matches Apple design language)
══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(163, 207, 43, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(163, 207, 43, 0.50);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(163, 207, 43, 0.25) transparent;
}


/* ══════════════════════════════════════════════════════════════════════════
   10. SELECTION — branded highlight colour
══════════════════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(163, 207, 43, 0.28);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(163, 207, 43, 0.28);
  color: #ffffff;
}


/* ══════════════════════════════════════════════════════════════════════════
   11. IMAGE QUALITY & LOADING
   Force crisp rendering on retina. Lazy images don't shift layout.
══════════════════════════════════════════════════════════════════════════ */

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

img[loading="lazy"] {
  /* Reserve space to prevent CLS */
  min-height: 1px;
}

/* Smooth image reveal after load */
img.loaded,
img[data-loaded] {
  animation: ls-img-reveal 0.4s ease both;
}

@keyframes ls-img-reveal {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0);   }
}


/* ══════════════════════════════════════════════════════════════════════════
   12. LINK UNDERLINES — Material + Apple convention
   Visible underline on hover for clarity. No underline at rest (clean).
══════════════════════════════════════════════════════════════════════════ */

a:not(.btn):not(.vn-link):not(.vn-cta):not([class*="card"]):not([class*="btn"]) {
  text-decoration: none;
  text-underline-offset: 3px;
}

a:not(.btn):not(.vn-link):not(.vn-cta):not([class*="card"]):not([class*="btn"]):hover {
  text-decoration: underline;
  text-decoration-color: rgba(163, 207, 43, 0.6);
}


/* ══════════════════════════════════════════════════════════════════════════
   13. PRINT — clean, legible print output
   Apple review process sometimes checks print stylesheets.
══════════════════════════════════════════════════════════════════════════ */

@media print {
  .vibe-nav,
  .vibe-footer,
  .vs-cursor,
  .vs-cursor-ring,
  .vs-ticker,
  .ai-voice-orb,
  .scroll-progress-bar {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    line-height: 1.6;
  }

  h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
  p, li { color: #333 !important; orphans: 3; widows: 3; }

  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
  a[href^="#"]::after { content: ''; }

  .glass-card,
  .bento-card,
  .srv-card {
    background: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   14. REDUCED-MOTION — absolute override (safety net)
   Apple App Store rejects apps that ignore this preference.
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  .skip-link { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   15. HIGH-CONTRAST MODE — Windows / macOS Increase Contrast
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: more) {
  .glass-card,
  .bento-card,
  .srv-card,
  .course-card {
    border-color: rgba(255, 255, 255, 0.5) !important;
  }

  .btn-ghost {
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
  }

  .section-desc,
  p {
    color: rgba(255, 255, 255, 0.95) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   16. DARK MODE RESPECT — explicit (site is already dark, but signal it)
══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
}


/* ══════════════════════════════════════════════════════════════════════════
   17. SMOOTH SCROLL — respects reduced-motion
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   18. OVERSCROLL — prevent bounce showing white background on mobile
══════════════════════════════════════════════════════════════════════════ */

html,
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; /* remove grey flash on iOS tap */
}


/* ══════════════════════════════════════════════════════════════════════════
   19. TEXT RENDERING — Apple premium
══════════════════════════════════════════════════════════════════════════ */

body {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
  font-feature-settings:   "kern" 1, "calt" 1;
}

/* Prevent orphan single words on headings */
h1, h2, h3 {
  text-wrap: balance;
}

/* Long body text: optimise line breaks */
p, li {
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: break-word;
}


/* ══════════════════════════════════════════════════════════════════════════
   20. POINTER CURSORS — TOUCH ONLY
   On desktop: vibe-sovereign.css hides OS cursor (custom blob cursor runs).
   On touch devices: no custom cursor, so OS cursor must show correctly.
══════════════════════════════════════════════════════════════════════════ */

/* Touch devices — show OS cursor normally */
@media (hover: none) {
  * { cursor: auto !important; }

  button,
  [role="button"],
  label[for],
  select,
  summary,
  a,
  [tabindex]:not([tabindex="-1"]) {
    cursor: pointer !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  textarea {
    cursor: text !important;
  }
}

/* Desktop (hover capable) — hide OS cursor, custom blob cursor takes over */
@media (hover: hover) {
  *,
  *::before,
  *::after,
  a, button, input, select, textarea, label, [role="button"] {
    cursor: none !important;
  }
}