/* tekscode — dark mode + RTL, layered over an inline-styled design.
 *
 * Two things make this awkward and dictate the approach:
 *   1. Inline styles beat stylesheets, so every rule re-declares the value and !important.
 *   2. React re-serialises inline styles, so a style attribute written as "#14171C" in the
 *      source arrives in the DOM as "rgb(20, 23, 28)". Selectors must match BOTH forms.
 *   3. `a` and `body` colours come from the helmet stylesheet, not inline, so they need
 *      direct element rules — attribute selectors cannot reach them.
 */

/* ── ground ─────────────────────────────────────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #12181C !important;
  color: #E8EBE9 !important;
  color-scheme: dark;
}

/* ── surfaces: canvas / paper / bone ────────────────────────────────── */
html[data-theme="dark"] [style*="#F8F4EC" i],
html[data-theme="dark"] [style*="rgb(248, 244, 236)"],
html[data-theme="dark"] [style*="#FFFFFF" i],
html[data-theme="dark"] [style*="rgb(255, 255, 255)"] { background-color: #171E23 !important; }

html[data-theme="dark"] [style*="#EFEAE0" i],
html[data-theme="dark"] [style*="rgb(239, 234, 224)"] { background-color: #1E262C !important; }

/* ── text: ink 1–4 ──────────────────────────────────────────────────── */
html[data-theme="dark"] [style*="#14171C" i],
html[data-theme="dark"] [style*="rgb(20, 23, 28)"] { color: #EDF0EE !important; }

html[data-theme="dark"] [style*="#2A2F37" i],
html[data-theme="dark"] [style*="rgb(42, 47, 55)"] { color: #C7CED2 !important; }

html[data-theme="dark"] [style*="#5B6270" i],
html[data-theme="dark"] [style*="rgb(91, 98, 112)"] { color: #9BA6AC !important; }

html[data-theme="dark"] [style*="#8C95A3" i],
html[data-theme="dark"] [style*="rgb(140, 149, 163)"] { color: #7E888E !important; }

/* links come from the helmet stylesheet — needs a direct rule */
html[data-theme="dark"] a { color: #EDF0EE !important; }
html[data-theme="dark"] a:hover { color: #FF7A5C !important; }

/* ── hairlines ──────────────────────────────────────────────────────── */
html[data-theme="dark"] [style*="#E4DED1" i],
html[data-theme="dark"] [style*="rgb(228, 222, 209)"] { border-color: #2A343A !important; }
html[data-theme="dark"] [style*="#C9C0AC" i],
html[data-theme="dark"] [style*="rgb(201, 192, 172)"] { border-color: #3A464E !important; }

/* ── the stamped hard shadow smudges on a dark ground ───────────────── */
html[data-theme="dark"] [style*="0 4px 0 0"],
html[data-theme="dark"] [style*="0 6px 0 0"] { box-shadow: 0 4px 0 0 #05080A !important; }

/* ── the already-dark Deploy band must still separate from the page ─── */
html[data-theme="dark"] [style*="background:#14171C" i],
html[data-theme="dark"] [style*="background: rgb(20, 23, 28)"] { background-color: #080C0F !important; }

/* coral and butter stay as-is: both read correctly on either ground.
   Mosaic tiles are intentionally untouched — the bands are the artwork. */

/* ── header controls ────────────────────────────────────────────────── */
.tc-controls { display: inline-flex; align-items: center; gap: 8px; }
.tc-ctl {
  font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid #C9C0AC; border-radius: 999px;
  background: transparent; color: #14171C; cursor: pointer;
  white-space: nowrap; transition: background .18s, color .18s, border-color .18s;
}
.tc-ctl:hover { background: #14171C; color: #F8F4EC; border-color: #14171C; }
.tc-ctl:focus-visible { outline: 2px solid #FF5C39; outline-offset: 2px; }
html[data-theme="dark"] .tc-ctl { color: #EDF0EE !important; border-color: #3A464E !important; }
html[data-theme="dark"] .tc-ctl:hover { background: #EDF0EE !important; color: #12181C !important; }

@media (max-width: 720px) {
  .tc-ctl { padding: 6px 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-ctl { transition: none; }
}

/* ── tinted cards keep dark text ─────────────────────────────────────
   The bento tints (coral-3, indigo-3, butter-3, mint) are deliberately light in both
   themes — they are the wayfinding colour. So text inside them must stay ink, otherwise
   the light-text rules above produce light-on-light. */
html[data-theme="dark"] [style*="#FFE2D8" i], html[data-theme="dark"] [style*="rgb(255, 226, 216)"],
html[data-theme="dark"] [style*="#DFE2F3" i], html[data-theme="dark"] [style*="rgb(223, 226, 243)"],
html[data-theme="dark"] [style*="#FFF4C2" i], html[data-theme="dark"] [style*="rgb(255, 244, 194)"],
html[data-theme="dark"] [style*="#7CE8B6" i], html[data-theme="dark"] [style*="rgb(124, 232, 182)"],
html[data-theme="dark"] [style*="#FFE2D8" i] *, html[data-theme="dark"] [style*="rgb(255, 226, 216)"] *,
html[data-theme="dark"] [style*="#DFE2F3" i] *, html[data-theme="dark"] [style*="rgb(223, 226, 243)"] *,
html[data-theme="dark"] [style*="#FFF4C2" i] *, html[data-theme="dark"] [style*="rgb(255, 244, 194)"] *,
html[data-theme="dark"] [style*="#7CE8B6" i] *, html[data-theme="dark"] [style*="rgb(124, 232, 182)"] * {
  color: #14171C !important;
}

/* ── floating theme toggle ───────────────────────────────────────────
   Deliberately position:fixed and appended to <body>, NOT injected into the header.
   Adding a child to the header flex row made it wrap and blanked the hero. */
.tc-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 16px; border: 1.5px solid #14171C; border-radius: 999px;
  background: #F8F4EC; color: #14171C; cursor: pointer;
  box-shadow: 0 4px 0 0 #14171C; transition: transform .18s, box-shadow .18s;
}
.tc-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 #14171C; }
.tc-fab:focus-visible { outline: 2px solid #FF5C39; outline-offset: 3px; }
html[data-theme="dark"] .tc-fab {
  background: #1E262C !important; color: #EDF0EE !important;
  border-color: #EDF0EE !important; box-shadow: 0 4px 0 0 #000 !important;
}
@media (max-width: 640px) { .tc-fab { right: 12px; bottom: 12px; padding: 9px 13px; } }
@media (prefers-reduced-motion: reduce) { .tc-fab { transition: none; } }

/* ── header brand: full lockup instead of the 26px pixel mark ─────────
   The supplied PNG is the whole lockup, so we widen the mark slot and hide the adjacent
   text wordmark rather than showing the name twice. */
[data-tc-logo] {
  /* trimmed lockup is 975x225 (4.33:1) — size to that ratio so it fills the slot */
  width: 156px !important;
  height: 36px !important;
  background: url("./tekscode-lockup-v2.png") no-repeat left center / contain !important;
  flex: 0 0 auto;
}
[data-tc-brand] > *:not([data-tc-logo]) { display: none !important; }
@media (max-width: 640px) { [data-tc-logo] { width: 116px !important; height: 28px !important; } }

/* ── wider header: 1240px left too much air on large screens ─────────── */
header > div, header > nav { max-width: 1560px !important; }
@media (max-width: 1600px) { header > div, header > nav { max-width: 96vw !important; } }


/* ── footer brand ────────────────────────────────────────────────────
   The footer carries its own copy of the pixel logomark; give it the real lockup too. */
footer [data-tc-logo], footer [data-tc-logo-f] {
  width: 156px !important;
  height: 36px !important;
  background: url("./tekscode-lockup-v2.png") no-repeat left center / contain !important;
}
footer [data-tc-brand-f] > *:not([data-tc-logo-f]) { display: none !important; }

/* ── dark-mode brand lockup ──────────────────────────────────────────
   The colour lockup disappears on the ink ground, so dark mode gets the
   light-on-dark artwork. */
html[data-theme="dark"] [data-tc-logo] {
  background-image: url("./tekscode-lockup-dark-v2.png") !important;
}

/* ── band paint-in ───────────────────────────────────────────────────
   Hold the band flat until its artwork has decoded, so the procedural mosaic
   never flashes before the image lands. */
[data-tc-bg]:not([data-tc-ready]) { background-color: #FF5C39; }
[data-tc-bg] { transition: background-image .3s ease; }

/* Language switch — sits beside the theme toggle, outside the header flex row
   for the same reason: injecting into that row makes it wrap and blanks the hero. */
.tc-lang {
  position: fixed; right: 20px; bottom: 68px; z-index: 9999;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: #FFFFFF; color: #14171C;
  border: 1.5px solid #14171C; box-shadow: 0 3px 0 0 #14171C;
}
.tc-lang:hover { background: #14171C; color: #F8F4EC; }
[data-theme="dark"] .tc-lang {
  background: #1B2127; color: #EDF0EE; border-color: #000000; box-shadow: 0 3px 0 0 #000000;
}


/* Arabic sets tighter than Latin at display sizes: the hero runs 92px on a 0.95
   line-height, and the ascenders and hamzas of one line collide with the next.
   Arabic needs the extra leading; the Latin setting stays as designed. */
[dir="rtl"] h1, h1[dir="rtl"] { line-height: 1.45 !important; }
[dir="rtl"] h2, h2[dir="rtl"] { line-height: 1.4 !important; }
[dir="rtl"] h3, h3[dir="rtl"] { line-height: 1.4 !important; }
[dir="rtl"] p,  p[dir="rtl"]  { line-height: 1.9 !important; }