/* ═════════════════════════════════════════════════════════
   WORLD-CLASS UX ENHANCEMENT — Mobile-First, Accessible, Premium
   Deployed across all 10 portfolio domains: R14
   ═════════════════════════════════════════════════════════ */

/* ── 1. CSS RESET & BOX-SIZING ─────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── 2. MOBILE-FIRST TYPOGRAPHY ────────────────────── */
html {
  font-size: 100%; /* 16px base — mobile friendly */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  color: #1a1f2b;
  background-color: #ffffff;
}

/* Keep wide tables scrollable instead of breaking the page */
table { border-collapse: collapse; max-width: 100%; }
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #e3e6eb; }

/* ── 3. RESPONSIVE HEADING SCALE ───────────────────── */
h1 { font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.375rem, 4vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); line-height: 1.3; }
h4 { font-size: 1.125rem; line-height: 1.4; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; margin-top: 0; margin-bottom: 0.5em; }

/* ── 4. TOUCH-FRIENDLY TARGETS ─────────────────────── */
button, .btn, [role="button"],
a.button, a.btn, .cta, input[type="submit"],
input[type="button"], select {
  min-height: 44px; min-width: 44px;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 5. FOCUS STATES ───────────────────────────────── */
:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── 6. LINKS ──────────────────────────────────────── */
a {
  color: #0066cc;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
  transition: color 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
a:hover { color: #004499; }
a:active { color: #002266; }

/* ── 7. IMAGES — CLS PREVENTION ────────────────────── */
img, video, iframe, embed { max-width: 100%; height: auto; display: block; }

/* ── 8. FORM ELEMENTS ───────────────────────────────── */
input, textarea, select {
  font-size: 1rem;
  padding: 0.625rem 0.75rem;
  border: 1.5px solid #d0d0d0;
  border-radius: 0.5rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0,102,204,0.15);
  outline: none;
}
label { display: block; margin-bottom: 0.375rem; font-weight: 600; font-size: 0.9375rem; }

/* ── 9. SPACING ─────────────────────────────────────── */
section, .section { padding: clamp(2rem, 5vw, 4rem) 1.25rem; }
p { margin-bottom: 1.25em; }

/* ── 10. MOBILE BREAKPOINTS ────────────────────────── */
@media (max-width: 768px) {
  nav a, nav button { padding: 0.75rem 1rem; font-size: 1.0625rem; }
  body { font-size: 1rem; line-height: 1.6; }
  h1 { font-size: clamp(1.5rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  section, .section { padding: 1.5rem 1rem; }
}

/* ── 11. DARK MODE ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body { background-color: #0d1117; color: #e6edf3; }
  th, td { border-bottom-color: #30363d; }
  a { color: #58a6ff; }
  a:hover { color: #79c0ff; }
  input, textarea, select { background: #161b22; border-color: #30363d; color: #e6edf3; }
  input:focus, textarea:focus, select:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.15); }
}

/* ── 12. REDUCED MOTION ─────────────────────────────── */
@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; }
}

/* ── 13. PRINT ──────────────────────────────────────── */
@media print {
  body { font-size: 12pt; line-height: 1.5; color: #000; }
  nav, .no-print { display: none !important; }
  a { color: #000; text-decoration: underline; }
}