/* ========================================================================
   Shared overrides for Figma Make output
   Loaded after styles.css on both index.html and about.html
   ======================================================================== */

/* Base resets */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body { background: #0a0a0c; }
a { text-decoration: none; color: inherit; }

/* Fix Figma Make colon-weight font names → actual Google Fonts families */
[class*="Space_Mono:Bold"]        { font-family: 'Space Mono', monospace !important; font-weight: 700 !important; }
[class*="Space_Mono:Regular"]     { font-family: 'Space Mono', monospace !important; font-weight: 400 !important; }
[class*="IBM_Plex_Mono:Regular"]  { font-family: 'IBM Plex Mono', monospace !important; font-weight: 400 !important; }
[class*="IBM_Plex_Mono:Medium"]   { font-family: 'IBM Plex Mono', monospace !important; font-weight: 500 !important; }
[class*="IBM_Plex_Mono:SemiBold"] { font-family: 'IBM Plex Mono', monospace !important; font-weight: 600 !important; }

/* Override Figma fixed pixel widths */
[data-name="Header"],
[data-name="Footer"] {
  width: 100%;
  justify-content: space-between;
  gap: 0;
}

[data-name="Main"] { flex: 1 1 0%; min-height: 0; overflow: hidden; align-items: stretch; }
[data-name="Section"]:first-child { flex: 0 0 35%; width: 35%; height: auto; min-width: 0; overflow-y: auto; overflow-x: hidden; }
[data-name="Section"]:last-child  { flex: 1 1 0%; width: 65%; height: auto; min-width: 0; overflow-y: auto; overflow-x: hidden; }

/* Remove Figma fixed inner widths so content fits within panels */
.figma-w-full { width: 100% !important; }

/* Figma font-variation-settings reset */
.font-variation-reset {
  font-variation-settings: 'CTGR' 0, 'wdth' 100, 'wght' 400;
}

/* Root wrapper (replaces inline style on both pages) */
[data-name="index.html"],
[data-name="about.html"],
[data-name$=".html"] {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(90deg, #0a0a0c 0%, #0a0a0c 100%),
                     linear-gradient(90deg, #fff 0%, #fff 100%);
}

/* Custom scrollbar — grey on dark background */
* {
  scrollbar-width: thin;
  scrollbar-color: #26262d #0a0a0c;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: #0a0a0c; }
*::-webkit-scrollbar-thumb { background: #26262d; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #3a3a44; }

/* WCAG AA contrast fixes — override Figma's #888899 (~4.0:1) → #9999aa (~5.2:1) */
[class*="text-\[#889\]"] { color: #9999aa !important; }
/* Override purple IDs #8a12f5 (~2.5:1) → #a64dff (~4.7:1) */
[class*="text-\[#8a12f5\]"] { color: #a64dff !important; }

/* Typewriter entrance animation */
[data-typewriter] {
  visibility: hidden;
}
[data-typewriter].typing,
[data-typewriter].typed {
  visibility: visible;
}
[data-typewriter].typing::after {
  content: "▌";
  animation: blink-cursor 0.6s step-end infinite;
}
@keyframes blink-cursor {
  50% { opacity: 0; }
}

/* No horizontal scroll inside panels */
[data-name="Section"] > div { overflow-x: hidden; overflow-y: auto; }

/* ── Case study design tokens ────────────────────────────────────────────── */
:root {
  --cs-border: 1px solid #26262d;
  --cs-text:   #e2e2e2;
  --cs-muted:  #9999aa;
  --cs-accent: #39ff14;
  --cs-mono:   'Space Mono', monospace;
  --cs-plex:   'IBM Plex Mono', monospace;
}

/* Stats row */
.cs-stats               { display: flex; width: 100%; border-bottom: var(--cs-border); }
.cs-stat                { flex: 1; padding: 32px 32px 28px; border-right: var(--cs-border); }
.cs-stat:last-child     { border-right: none; }
.cs-stat__value         { font-family: var(--cs-mono); font-weight: 700; font-size: 48px; letter-spacing: -2px; line-height: 1; color: var(--cs-text); }
.cs-stat__value--accent { color: var(--cs-accent); }
.cs-stat__label         { font-family: var(--cs-mono); font-weight: 400; font-size: 11px; color: var(--cs-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 10px; }

/* Section containers */
.cs-hero     { padding: 96px 48px 112px; border-bottom: var(--cs-border); }
.cs-problems { padding: 64px 48px 72px; }
.cs-section  { padding: 64px 48px 72px; border-top: var(--cs-border); }

/* Typography */
.cs-statement     { font-family: var(--cs-mono); font-weight: 700; font-size: 32px; color: var(--cs-text); letter-spacing: -1px; line-height: 1.25; margin: 0; }
.cs-tag           { font-family: var(--cs-mono); font-weight: 700; font-size: 11px; color: var(--cs-accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 32px; }
.cs-heading       { font-family: var(--cs-mono); font-weight: 700; font-size: 40px; color: var(--cs-text); letter-spacing: -1.5px; line-height: 1.1; margin: 0 0 24px; }
.cs-display       { font-family: var(--cs-mono); font-weight: 700; font-size: clamp(56px, 9vw, 160px); color: var(--cs-text); letter-spacing: -3px; line-height: 1; margin: 0 0 4px; }
.cs-label         { font-family: var(--cs-mono); font-weight: 400; font-size: 11px; color: var(--cs-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 40px; }
.cs-body          { font-family: var(--cs-plex); font-weight: 400; font-size: 15px; color: var(--cs-muted); line-height: 1.7; margin: 0 0 32px; max-width: 560px; }
.cs-callout       { font-family: var(--cs-mono); font-weight: 700; font-size: 14px; color: var(--cs-text); letter-spacing: 0.5px; }
.cs-callout--wide { max-width: 560px; }

/* Problem list */
.cs-problem-list            { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs-problem-item            { display: flex; align-items: baseline; gap: 24px; padding: 24px 0; border-bottom: var(--cs-border); }
.cs-problem-item:last-child { border-bottom: none; }
.cs-problem-num             { font-family: var(--cs-mono); font-weight: 700; font-size: 11px; color: var(--cs-muted); letter-spacing: 1.5px; min-width: 24px; }
.cs-problem-text            { font-family: var(--cs-mono); font-weight: 700; font-size: 32px; color: var(--cs-text); letter-spacing: -1px; line-height: 1.2; }

/* Detail list (inside solutions) */
.cs-detail-list              { list-style: none; margin: 0 0 32px; padding: 0; max-width: 560px; display: flex; flex-direction: column; }
.cs-detail-item              { display: flex; align-items: baseline; gap: 20px; padding: 20px 0; border-top: var(--cs-border); }
.cs-detail-item:last-child   { border-bottom: var(--cs-border); }
.cs-detail-num               { font-family: var(--cs-mono); font-weight: 700; font-size: 11px; color: var(--cs-muted); letter-spacing: 1.5px; min-width: 20px; flex-shrink: 0; }
.cs-detail-text              { font-family: var(--cs-plex); font-weight: 400; font-size: 15px; color: var(--cs-muted); line-height: 1.6; }

/* Images */
.cs-img              { display: block; width: 100%; margin-top: 48px; border: var(--cs-border); object-fit: cover; object-position: top; }
.cs-img--constrained { max-width: 560px; }
.cs-img-pair         { display: flex; gap: 8px; margin-top: 48px; }
.cs-img-pair img     { display: block; width: calc(50% - 4px); height: 280px; object-fit: cover; object-position: top; border: var(--cs-border); }
.cs-gallery          { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-gallery img      { display: block; width: 100%; height: 240px; object-fit: cover; object-position: top; border: var(--cs-border); }

/* Utility */
.pb-skills { padding-bottom: 20px; }

/* Typewriter grid overlay — stacks spans in the same cell so the h1 sizes to the longest word */
.tw-grid          { display: grid; }
.tw-grid > *      { grid-area: 1 / 1; }
.tw-grid__measure { visibility: hidden; }

/* Shared mobile breakpoint */
@media (max-width: 1000px) {
  /* Use body as scroll container — required for reliable Android touch scroll */
  html, body { overflow-y: auto; }
  [data-name$=".html"] { height: auto; min-height: 100vh; }
  [data-name="Main"] { flex-direction: column; overflow: visible; align-items: stretch; }
  [data-name="Section"]:first-child,
  [data-name="Section"]:last-child { flex: 0 0 auto; width: 100%; height: auto; overflow: visible; }
  /* overflow: visible (both axes) prevents these divs from being scroll containers.
     overflow-y: visible alone is ignored by browsers when overflow-x is auto (spec quirk). */
  [data-name="Section"] > div { overflow: visible; }
  .min-h-px { min-height: 0; flex: none; }
  /* Left-align Connect section */
  [data-name="HorizontalBorder+OverlayBlur"] .justify-center { justify-content: flex-start; }
  /* Reduce left panel outer padding */
  [data-name="Section"]:first-child .p-\[48px\] { padding: 16px; }
  /* Collapse the 445px spacer that pushes Connect to the bottom on desktop */
  .pt-\[445\.5px\] { padding-top: 32px; }
}