/*
Theme Name: IT Mystery Child
Theme URI: https://itmystery.com
Description: Child theme for Twenty Twenty-Five with IT Mystery branding, ad management, and dark mode
Version: 1.0
Requires at least: 6.4
Requires PHP: 7.4
Template: twentytwentyfive
Author: IT Mystery
Author URI: https://itmystery.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itmystery-child
Domain Path: /languages

Consolidates:
- itm-site.css v1.4 (site styling, dark mode)
- itm-ads.php v2.3 hooks (moved to functions.php)

Mirror these base tokens in the Styles UI so the editor preview
matches the front end (CSS stays the source of truth for components):
- Styles → Typography: body = Inter 17px, headings = Sora
- Styles → Colors → Links: #1D4ED8
- Styles → Layout → Content width: 720px (TT5 default is narrower)
*/

/* ── 0. Fonts ───────────────────────────────────────────────────
   Twenty Twenty-Five does NOT ship Sora or Inter. Install both via
   the Font Library: Appearance → Editor → Styles → Typography →
   manage fonts → Install Fonts → search "Sora" (600, 700) and
   "Inter" (400, 500, 600) → install and ACTIVATE. WordPress hosts
   them locally and prints the @font-face rules — no render-blocking
   request, no @import needed. Until activated, everything below
   silently falls back to system-ui.
   ────────────────────────────────────────────────────────────── */

/* ── 1. Design tokens ───────────────────────────────────────────
   functions.php wp_head hook owns --itm-aff-accent (#b45309).
   Everything here extends it without touching it.
   ────────────────────────────────────────────────────────────── */
:root {
  --itm-color-text: #1b1b1b;
  --itm-color-heading: #111111;
  --itm-color-muted: #6b7280;
  --itm-color-surface: #f9fafb;
  --itm-color-border: #e5e7eb;
  --itm-color-bg: #ffffff;
  --itm-color-link: #1d4ed8; /* Regular body links — NOT affiliate links.
                                     Affiliate links use --itm-aff-accent via functions.php. */

  --itm-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --itm-font-heading: "Sora", system-ui, -apple-system, sans-serif;
  --itm-font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;

  --itm-body-size: 17px;
  --itm-body-lh: 1.68;
  --itm-content-width: 720px;

  /* Theme switcher active-button indicator (light mode default).
     Each theme block in §18 overrides these two — adding a future
     theme means setting two variables here, not rewriting component CSS. */
  --itm-ts-active-bg: #111111;
  --itm-ts-active-fg: #ffffff;
}

/* ── 2. Base ────────────────────────────────────────────────────*/
body {
  font-family: var(--itm-font-body);
  font-size: var(--itm-body-size);
  line-height: var(--itm-body-lh);
  color: var(--itm-color-text);
  background: var(--itm-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. Headings ────────────────────────────────────────────────*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--itm-font-heading);
  color: var(--itm-color-heading);
  line-height: 1.25;
  font-weight: 700;
}

/* clamp() keeps headings proportional without breakpoint hacks  */
h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 0.5em;
}
h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  margin-top: 2em;
  margin-bottom: 0.6em;
  font-weight: 600;
}
h3 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  font-weight: 600;
}
h4 {
  font-size: 1rem;
  margin-top: 1.5em;
  font-weight: 600;
}

/* ── 5. Body elements ───────────────────────────────────────────*/

/* Scope to post content — global p {} bleeds into nav and footer */
.wp-block-paragraph,
.wp-block-post-content p {
  margin-bottom: 1.25em;
}

/* Regular body links — editorial blue, NOT accent amber.
   The functions.php wp_head hook handles .itm-affiliate-link separately. */
a {
  color: var(--itm-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}

strong,
b {
  font-weight: 600;
}

/* ── 6. Key Takeaway block ──────────────────────────────────────
   Generated by pipeline as <div class="key-takeaway">...</div>
   Editorial element — uses site primary (#111111), not affiliate
   accent. Amber is reserved for monetization elements only.
   ────────────────────────────────────────────────────────────── */
.key-takeaway {
  border-left: 4px solid var(--itm-color-heading);
  background: var(--itm-color-surface);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.6;
}

.key-takeaway strong {
  display: block;
  margin-bottom: 0.35em;
  font-size: 0.75rem;
  font-family: var(--itm-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--itm-color-heading);
}

/* ── 7. Tables ──────────────────────────────────────────────────
   Primary revenue element for comparison and best-x content.
   Gutenberg wraps tables in <figure class="wp-block-table">.
   ────────────────────────────────────────────────────────────── */

/* Horizontal scroll on overflow — never break table layout     */
.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
}

.wp-block-table table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 480px; /* Force scroll before table collapses */
  border-top: 3px solid var(--itm-color-heading);
}

/* Header row                                                    */
.wp-block-table thead th,
.entry-content thead th,
.wp-block-table th,
.entry-content th {
  background: var(--itm-color-heading);
  color: #ffffff;
  font-family: var(--itm-font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.6rem 0.875rem;
  text-align: left;
  white-space: nowrap;
}

/* Verdict / Best Choice / Recommendation — last header column  */
/* Slate gray creates visual hierarchy without using amber,     */
/* which is reserved for monetization elements.                 */
.wp-block-table thead th:last-child,
.entry-content thead th:last-child,
.wp-block-table th:last-child,
.entry-content th:last-child {
  background: #374151;
}

/* Data cells                                                    */
.wp-block-table td,
.entry-content td {
  padding: 0.65rem 0.875rem;
  border-bottom: 1px solid var(--itm-color-border);
  vertical-align: top;
  line-height: 1.5;
}

/* Row striping                                                  */
.wp-block-table tbody tr:nth-child(odd) td,
.entry-content tbody tr:nth-child(odd) td {
  background: var(--itm-color-surface);
}
.wp-block-table tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td {
  background: var(--itm-color-bg);
}

/* Row hover — uses color-mix to work in both light and dark modes */
.wp-block-table tbody tr:hover td,
.entry-content tbody tr:hover td {
  background: color-mix(in srgb, var(--itm-color-heading) 8%, var(--itm-color-bg));
}

/* Last column — verdict / recommendation                        */
.wp-block-table td:last-child,
.entry-content td:last-child {
  font-weight: 500;
  color: var(--itm-color-heading);
}

/* ── 8. Lists ───────────────────────────────────────────────────*/
.wp-block-list,
.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25em;
}

.wp-block-list > li,
.entry-content li {
  margin-bottom: 0.45em;
  line-height: 1.65;
}

/* Checklist-style lists (Before You Start, pipeline-generated) */
.wp-block-list.checklist,
.entry-content ul.checklist {
  list-style: none;
  padding-left: 0.25rem;
}
.wp-block-list.checklist > li::before,
.entry-content ul.checklist li::before {
  content: "✓ ";
  color: var(--itm-color-heading);
  font-weight: 600;
  margin-right: 0.35em;
}

/* ── 9. Code / monospace ────────────────────────────────────────*/
code,
kbd,
samp {
  font-family: var(--itm-font-mono);
  font-size: 0.875em;
  background: var(--itm-color-surface);
  border: 1px solid var(--itm-color-border);
  padding: 0.125rem 0.35rem;
  border-radius: 3px;
}

pre {
  background: var(--itm-color-surface);
  border: 1px solid var(--itm-color-border);
  border-radius: 6px;
  padding: 1.25rem;
  overflow-x: auto;
  line-height: 1.5;
  margin-bottom: 1.25em;
  font-size: 0.85rem;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ── 10. Blockquote ─────────────────────────────────────────────*/
blockquote {
  border-left: 4px solid var(--itm-color-border);
  padding-left: 1.25rem;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  color: var(--itm-color-muted);
  font-style: italic;
}

blockquote p {
  margin-bottom: 0.5em;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ── 11. Horizontal rule ────────────────────────────────────────*/
hr {
  border: none;
  border-top: 1px solid var(--itm-color-border);
  margin: 2rem 0;
}

/* ── 12. Buttons ────────────────────────────────────────────────*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
  font-family: var(--itm-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.5rem;
  background: var(--itm-color-heading);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: filter 0.15s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  filter: brightness(0.92);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
.wp-block-button__link:active {
  filter: brightness(0.85);
}

/* ── 13. Forms ──────────────────────────────────────────────────*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: var(--itm-font-body);
  font-size: 1rem;
  padding: 0.65rem 0.875rem;
  border: 1px solid var(--itm-color-border);
  border-radius: 5px;
  background: var(--itm-color-bg);
  color: var(--itm-color-text);
  line-height: 1.5;
  transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--itm-color-link);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

textarea {
  resize: vertical;
}

/* ── 13.5. Category navigation (featured category grid) ────────*/
.itm-cat-grid {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.itm-cat-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.itm-cat-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.itm-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--itm-color-surface);
  border: 1px solid var(--itm-color-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.itm-cat-card:hover {
  border-color: var(--itm-color-link);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.08);
}

.itm-cat-card__icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.itm-cat-card__title {
  font-family: var(--itm-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--itm-color-heading);
}

.itm-cat-card__count {
  font-size: 0.75rem;
  color: var(--itm-color-muted);
  margin-top: 0.5rem;
}

/* ── 13.6 Category pill nav ──────────────────────────────────────
   Markup rendered by the [itm_category_nav] shortcode in
   functions.php. A mobile scroll-behavior rule for this exact class
   already existed below (added ahead of the component itself) —
   this fills in the base rule that was missing.

   Every color is a variable — no exceptions, per the lesson from
   the theme-switcher migration. A hardcoded hex here would silently
   break the moment hc-light or super-dark is active.
   ────────────────────────────────────────────────────────────── */
.itm-cat-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0.85rem 0;
}

.itm-cat-nav__label {
  font-family: var(--itm-font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--itm-color-muted);
  margin-right: 2px;
}

.itm-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--itm-color-border);
  background: var(--itm-color-surface);
  color: var(--itm-color-text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.itm-cat-pill:hover {
  background: var(--itm-color-heading);
  border-color: var(--itm-color-heading);
  color: var(--itm-color-bg);
  text-decoration: none;
}

.itm-cat-pill span {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--itm-color-muted);
  background: color-mix(in srgb, var(--itm-color-muted) 16%, transparent);
  border-radius: 999px;
  padding: 1px 6px;
}

.itm-cat-pill:hover span {
  color: var(--itm-color-bg);
  background: color-mix(in srgb, var(--itm-color-bg) 24%, transparent);
}

/* Hide horizontal scroll on mobile; categories reflow to fewer columns */
@media (max-width: 480px) {
  .itm-cat-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .itm-cat-nav::-webkit-scrollbar {
    display: none;
  }
}

/* ── 13.7 Site title — chunky wordmark ───────────────────────────
   TT5's default Site Title block renders fairly light, editorial-
   style type. This treats it more like a logotype: heavier weight,
   tighter letter-spacing, fixed to the heading font.

   NOTE: font-weight is 700, not 800/900 — Sora 800 isn't in the
   Font Library install list from §0 (only 600/700 are). 700 is the
   heaviest weight actually available right now. If you want it
   chunkier still, install Sora ExtraBold (800) via the Font Library
   first and I'll bump this — setting font-weight:800 without the
   actual font file installed just triggers browser-synthesized
   fake-bold, which looks worse than 700 real-bold, not better.
   ────────────────────────────────────────────────────────────── */
.wp-block-site-title,
.wp-block-site-title a {
  font-family: var(--itm-font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--itm-color-heading);
  text-decoration: none;
}

.wp-block-site-title a:hover {
  color: var(--itm-color-heading);
  text-decoration: none;
}

/* ── 14. Responsive ─────────────────────────────────────────────*/
@media (max-width: 768px) {
  :root {
    --itm-body-size: 16px;
  }

  h1 {
    font-size: 1.55rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  h3 {
    font-size: 1.1rem;
  }

  .wp-block-post-content,
  .entry-content,
  .post-content {
    padding-inline: 1rem;
  }

  /* Category grid — collapses to 2 columns on mobile */
  .itm-cat-grid--cols-4,
  .itm-cat-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tables already scroll via overflow-x on wrapper           */
}

/* ── 15. Author box ─────────────────────────────────────────────
   E-E-A-T surface under every post. In TT5: Appearance → Editor →
   Templates → Single Posts → add a Custom HTML block (or synced
   pattern) directly after the Post Content block, containing:

   <div class="itm-author-box">
     <img class="itm-author-box__avatar" src="..." alt="Jerry Gartner" />
     <div class="itm-author-box__body">
       <span class="itm-author-box__name">Jerry Gartner</span>
       <span class="itm-author-box__role">Editorial Director, IT Mystery</span>
       <p class="itm-author-box__bio">[bio from Brand Doc §8]</p>
     </div>
   </div>

   Editorial chrome only — near-black accent, never amber.
   ────────────────────────────────────────────────────────────── */
.itm-author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 2.5rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--itm-color-surface);
  border: 1px solid var(--itm-color-border);
  border-top: 3px solid var(--itm-color-heading);
  border-radius: 6px;
}
.itm-author-box__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.itm-author-box__name {
  display: block;
  font-family: var(--itm-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--itm-color-heading);
}
.itm-author-box__role {
  display: block;
  font-size: 0.75rem;
  color: var(--itm-color-muted);
  margin-bottom: 0.5em;
}
.itm-author-box__bio {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  color: var(--itm-color-text);
}

/* ── 16. Table of contents ──────────────────────────────────────
   Use Easy Table of Contents with AUTO-INSERT enabled for posts
   (Settings → Enable Support: Posts, Auto Insert: Posts, position
   before first heading). Auto-insert via the_content filter means
   zero per-post labor — pipeline drafts get a TOC automatically.
   A per-post TOC block would reintroduce manual work; don't.
   ────────────────────────────────────────────────────────────── */
.simpletoc-list,
#ez-toc-container {
  background: var(--itm-color-surface);
  border: 1px solid var(--itm-color-border);
  border-radius: 6px;
  padding: 1rem 1.25rem 1rem 2.5rem;
  margin: 0 0 2rem;
  font-size: 0.875rem;
  line-height: 1.7;
}
.simpletoc-list a,
#ez-toc-container a {
  color: var(--itm-color-link);
  text-decoration: none;
}
.simpletoc-list a:hover,
#ez-toc-container a:hover {
  text-decoration: underline;
}

/* ── 17. Newsletter / lead magnet box ───────────────────────────
   Markup lives in an itm_ads post unit targeting the
   'newsletter' position (functions.php v1.0+). Email capture is an
   editorial trust surface, NOT a commercial link — near-black
   accent. Amber stays exclusive to monetization.

   Unit HTML pattern:
   <div class="itm-newsletter">
     <h3 class="itm-newsletter__title">[offer headline]</h3>
     <p class="itm-newsletter__desc">[one-sentence value, no hype]</p>
     [form embed from email provider]
   </div>
   ────────────────────────────────────────────────────────────── */
.itm-newsletter {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--itm-color-surface);
  border: 1px solid var(--itm-color-border);
  border-top: 3px solid var(--itm-color-heading);
  border-radius: 6px;
}
.itm-newsletter__title {
  margin: 0 0 0.35em;
  font-family: var(--itm-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--itm-color-heading);
}
.itm-newsletter__desc {
  margin: 0 0 1em;
  font-size: 0.9rem;
  color: var(--itm-color-text);
}
.itm-newsletter input[type="email"] {
  font-family: var(--itm-font-body);
  font-size: 0.9rem;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--itm-color-border);
  border-radius: 5px;
  width: 100%;
  max-width: 320px;
  margin-right: 8px;
}
.itm-newsletter button,
.itm-newsletter input[type="submit"] {
  font-family: var(--itm-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  background: var(--itm-color-heading);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.itm-newsletter button:hover,
.itm-newsletter input[type="submit"]:hover {
  filter: brightness(0.92);
}

/* ── 18. Theme tokens: dark / high-contrast-light / super-dark ───
   Four explicit themes plus "system" (no [data-theme] attribute,
   handled by @media (prefers-color-scheme: dark) below):
     light        — :root defaults (§1)
     dark         — [data-theme="dark"]
     hc-light     — [data-theme="hc-light"]   (max-contrast light, AAA)
     super-dark   — [data-theme="super-dark"] (true OLED black, AAA)

   All four explicit blocks use the `html[data-theme="x"]` selector
   form (element + attribute) rather than a bare attribute selector.
   This is a deliberate specificity fix: the wp_head-printed inline
   <style id="itm-ads-css"> block sets `--itm-aff-accent` on a bare
   `:root` selector, which has IDENTICAL specificity to a bare
   `[data-theme="x"]` selector — meaning whichever rule happens to
   print later in <head> wins, regardless of intent. Prefixing with
   `html` raises specificity just enough to always win, independent
   of hook-priority print order.

   --itm-aff-accent is themed independently per mode here. The
   functions.php wp_head hook still controls the LIGHT-mode value at
   :root (your admin-configured hex). Each theme below sets its own
   value tuned for that theme's background — same job (mark
   affiliate/monetization elements), different hex, always AAA
   against its own bg. Color decisions below.

   --itm-ts-active-bg / --itm-ts-active-fg drive the active-button
   indicator in the theme switcher (§19) — set once per theme block,
   the component CSS itself never hardcodes a color.
   ────────────────────────────────────────────────────────────── */

/* ── Dark ─────────────────────────────────────────────────────
   bg #141414 / surface #1f1f1f: deep but not OLED pure-black —
     easier on eyes, avoids "black smearing" on LCD.
   link #7cb3ff: blue-400-ish, passes AAA at 17px on #141414.
   aff-accent #f59e0b: brighter amber (Tailwind amber-400),
     10.5:1 against #141414 — AAA. Passes where #b45309 would not.
   heading #f0f0f0: near-white — this inversion is WHY the table
     header / newsletter button / pick-row fixes below are needed:
     several components use --itm-color-heading as a SOLID background
     with hardcoded white text, which breaks the moment heading
     itself becomes near-white. super-dark inherits the same
     inversion and therefore needs the same fixes — see below.
   ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --itm-color-bg: #141414;
  --itm-color-surface: #1f1f1f;
  --itm-color-border: #303030;
  --itm-color-text: #d4d4d4;
  --itm-color-heading: #f0f0f0;
  --itm-color-muted: #8a8a8a;
  --itm-color-link: #7cb3ff;
  --itm-aff-accent: #f59e0b;
  --itm-ts-active-bg: #f0f0f0;
  --itm-ts-active-fg: #111111;
}

/* ── High Contrast Light ──────────────────────────────────────
   Max-contrast mode, not just AAA-and-stop: pure black text on
   pure white, no light grays anywhere. Borders do the separation
   work that background tinting does in normal light mode — this
   mirrors how OS-level high-contrast modes (Windows, macOS) behave.

   Verified ratios (WCAG relative-luminance formula, computed not
   eyeballed):
     body text   #000000 on #ffffff  → 21.00:1  AAA
     muted text  #333333 on #ffffff  → 12.63:1  AAA
     link        #0000cc on #ffffff  → 11.22:1  AAA
     accent      #8a4500 on #ffffff  →  7.16:1  AAA

   Heading stays BLACK in this mode (unlike dark/super-dark, where
   heading inverts to near-white). That means the table-header and
   newsletter-button rules in §7/§17 — which use
   `background: var(--itm-color-heading)` + hardcoded white text —
   render correctly here with ZERO extra override CSS. The bug those
   components have only exists when heading inverts to a light color;
   hc-light never does that.
   ──────────────────────────────────────────────────────────── */
html[data-theme="hc-light"] {
  --itm-color-bg: #ffffff;
  --itm-color-surface: #ffffff;
  --itm-color-border: #000000;
  --itm-color-text: #000000;
  --itm-color-heading: #000000;
  --itm-color-muted: #333333;
  --itm-color-link: #0000cc;
  --itm-aff-accent: #8a4500;
  --itm-ts-active-bg: #000000;
  --itm-ts-active-fg: #ffffff;
}

/* ── Super Dark ───────────────────────────────────────────────
   True OLED black, not near-black — deliberately more extreme than
   regular dark mode rather than a re-skin of it. Heading inverts to
   near-white here the same way it does in regular dark mode, so it
   inherits the SAME component fixes (table header, newsletter
   button, pick-row, template-part) — see the combined selectors
   below rather than duplicating each fix a third time.

   Verified ratios:
     body text  #ffffff on #000000  → 21.00:1  AAA
     muted text #b3b3b3 on #000000  → 10.02:1  AAA
     link       #8fc4ff on #000000  → 11.51:1  AAA
     accent     #ffb020 on #000000  → 11.48:1  AAA

   Surface is lifted one notch (#0a0a0a) off true-black bg purely for
   depth cues on cards/tables — not a text-contrast pair, so the low
   bg-vs-surface ratio here is expected and not a WCAG concern.
   ──────────────────────────────────────────────────────────── */
html[data-theme="super-dark"] {
  --itm-color-bg: #000000;
  --itm-color-surface: #0a0a0a;
  --itm-color-border: #2a2a2a;
  --itm-color-text: #ffffff;
  --itm-color-heading: #f0f0f0;
  --itm-color-muted: #b3b3b3;
  --itm-color-link: #8fc4ff;
  --itm-aff-accent: #ffb020;
  --itm-ts-active-bg: #ffffff;
  --itm-ts-active-fg: #000000;
}

/* System preference (no explicit [data-theme] set) — maps to the
   regular "dark" look only. hc-light and super-dark are explicit,
   switcher-only choices; there's no OS-level signal for either, so
   they're never auto-applied. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --itm-color-bg: #141414;
    --itm-color-surface: #1f1f1f;
    --itm-color-border: #303030;
    --itm-color-text: #d4d4d4;
    --itm-color-heading: #f0f0f0;
    --itm-color-muted: #8a8a8a;
    --itm-color-link: #7cb3ff;
    --itm-aff-accent: #f59e0b;
    --itm-ts-active-bg: #f0f0f0;
    --itm-ts-active-fg: #111111;
  }
}

/* ─ Heading-inversion fixes: Table header contrast ──────────────
   dark AND super-dark both invert heading to a light color, which
   breaks `background: var(--itm-color-heading)` + hardcoded white
   text. hc-light never inverts heading, so it needs none of this.
   ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .wp-block-table thead th,
html[data-theme="dark"] .entry-content thead th,
html[data-theme="dark"] .wp-block-table th,
html[data-theme="dark"] .entry-content th,
html[data-theme="super-dark"] .wp-block-table thead th,
html[data-theme="super-dark"] .entry-content thead th,
html[data-theme="super-dark"] .wp-block-table th,
html[data-theme="super-dark"] .entry-content th {
  background: #2d2d2d;
  color: #f0f0f0;
}

html[data-theme="dark"] .wp-block-table thead th:last-child,
html[data-theme="dark"] .entry-content thead th:last-child,
html[data-theme="dark"] .wp-block-table th:last-child,
html[data-theme="dark"] .entry-content th:last-child,
html[data-theme="super-dark"] .wp-block-table thead th:last-child,
html[data-theme="super-dark"] .entry-content thead th:last-child,
html[data-theme="super-dark"] .wp-block-table th:last-child,
html[data-theme="super-dark"] .entry-content th:last-child {
  background: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wp-block-table thead th,
  :root:not([data-theme="light"]) .entry-content thead th,
  :root:not([data-theme="light"]) .wp-block-table th,
  :root:not([data-theme="light"]) .entry-content th {
    background: #2d2d2d;
    color: #f0f0f0;
  }

  :root:not([data-theme="light"]) .wp-block-table thead th:last-child,
  :root:not([data-theme="light"]) .entry-content thead th:last-child,
  :root:not([data-theme="light"]) .wp-block-table th:last-child,
  :root:not([data-theme="light"]) .entry-content th:last-child {
    background: #1a1a1a;
  }
}

/* ─ Heading-inversion fixes: Newsletter button ───────────────── */
html[data-theme="dark"] .itm-newsletter button,
html[data-theme="dark"] .itm-newsletter input[type="submit"],
html[data-theme="super-dark"] .itm-newsletter button,
html[data-theme="super-dark"] .itm-newsletter input[type="submit"] {
  background: #3b82f6;
}

html[data-theme="dark"] .itm-newsletter button:hover,
html[data-theme="dark"] .itm-newsletter input[type="submit"]:hover,
html[data-theme="super-dark"] .itm-newsletter button:hover,
html[data-theme="super-dark"] .itm-newsletter input[type="submit"]:hover {
  background: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .itm-newsletter button,
  :root:not([data-theme="light"]) .itm-newsletter input[type="submit"] {
    background: #3b82f6;
  }

  :root:not([data-theme="light"]) .itm-newsletter button:hover,
  :root:not([data-theme="light"]) .itm-newsletter input[type="submit"]:hover {
    background: #2563eb;
  }
}

/* ─ Row pick highlight ──────────────────────────────────────────
   Transparent mix so the mix source is whatever bg is active —
   theme-agnostic by construction, so dark and super-dark share it
   without needing separate rules.
   ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] tr.itm-pick td,
html[data-theme="super-dark"] tr.itm-pick td {
  background: color-mix(
    in srgb,
    var(--itm-aff-accent) 12%,
    transparent
  ) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) tr.itm-pick td {
    background: color-mix(
      in srgb,
      var(--itm-aff-accent) 12%,
      transparent
    ) !important;
  }
}

/* ─ Template part styling ────────────────────────────────────────
   TT5 core outputs a light bg on .wp-block-site-header by default.
   Override so header/footer respect the active theme's tokens.
   ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .wp-block-template-part,
html[data-theme="dark"] .wp-block-site-header,
html[data-theme="dark"] .wp-block-site-footer,
html[data-theme="super-dark"] .wp-block-template-part,
html[data-theme="super-dark"] .wp-block-site-header,
html[data-theme="super-dark"] .wp-block-site-footer {
  background: var(--itm-color-bg);
  color: var(--itm-color-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wp-block-template-part,
  :root:not([data-theme="light"]) .wp-block-site-header,
  :root:not([data-theme="light"]) .wp-block-site-footer {
    background: var(--itm-color-bg);
    color: var(--itm-color-text);
  }
}

/* ── 19. Theme switcher ───────────────────────────────────────────
   Markup rendered by the [itm_theme_switcher] shortcode in
   functions.php (migrated from the standalone ITM_Theme_Switcher.html
   Custom HTML block — same markup pattern, five buttons instead of
   three, styling moved here instead of an inline <style> tag so it
   shares the same design tokens as everything else on the site).

   Every color below is a variable, not a hardcoded hex — that's the
   actual fix this migration makes. The original block hardcoded
   #6b7280 / #111111 / #1d4ed8 / rgba(0,0,0,0.08), which only ever
   worked for exactly two themes. Add a third and the hover state and
   focus ring silently stop adapting. Token-driven means a future 6th
   theme needs zero changes here.
   ────────────────────────────────────────────────────────────── */
.itm-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--itm-color-surface);
  border-radius: 8px;
  line-height: 0;
}

.itm-ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--itm-color-muted);
  transition: background 0.15s ease, color 0.15s ease;
  font-size: inherit;
  box-shadow: none !important;
}

.itm-ts-btn:hover {
  /* color-mix with currentColor rather than a hardcoded rgba —
     adapts automatically to any theme's muted/heading tone instead
     of going invisible against a dark background. */
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--itm-color-heading);
}

/* Active state — driven by the two variables each theme block above
   sets. No per-theme override rule needed here; the cascade already
   resolved the right values by the time this rule reads them. */
.itm-ts-btn[aria-pressed="true"] {
  background: var(--itm-ts-active-bg);
  color: var(--itm-ts-active-fg);
}

.itm-ts-btn:focus-visible {
  outline: 2px solid var(--itm-color-link);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .itm-ts-btn {
    transition: none;
  }
}

/* ── 20. Site header layout ────────────────────────────────────
   Companion to templates/parts/header.html. Flattened to a SINGLE
   level of group nesting (header > row > [title, switcher, nav] as
   direct siblings) after a deeper nested-group version (title > row
   > utility-cluster > [switcher, nav]) failed Gutenberg's block
   validation in practice. One fewer nesting level, smaller surface
   area for a parse error.

   Title stays left; switcher + nav cluster right via margin-left:
   auto on the switcher block (a standard flex trick — pushing one
   item, and everything after it, to the far edge — rather than a
   wrapping sub-container needing its own layout JSON).
   ────────────────────────────────────────────────────────────── */
.itm-site-header {
  padding-top: 1rem;
  border-bottom: 1px solid var(--itm-color-border);
}

.itm-header-row {
  width: 100%;
  align-items: center;
  gap: 10px;
  padding-bottom: 0.75rem;
}

.itm-header-switcher {
  margin-left: auto;
}

/* ── 21. Navigation block — hamburger overlay theming ────────────
   Targets WordPress core's Navigation block overlay/toggle markup
   directly, rather than relying on the block's own per-instance
   Style panel colors — so it follows the active theme automatically
   (including hc-light / super-dark) without per-block configuration.

   Class names below are core WordPress markup, stable across recent
   versions, but I have no live WP instance to render this against —
   verify visually on staging. If the overlay looks unstyled or a
   class name has changed, the menu will still be fully FUNCTIONAL
   (core's own default styles still apply); only the theming would
   be off.
   ────────────────────────────────────────────────────────────── */

/* Hamburger toggle button (closed state) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--itm-color-heading);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
  color: var(--itm-color-link);
}

/* Overlay panel background/text when the menu is open */
.wp-block-navigation__responsive-dialog {
  background-color: var(--itm-color-bg);
  color: var(--itm-color-text);
}

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--itm-color-bg);
}

/* Menu item links inside the open overlay */
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
  color: var(--itm-color-text);
  font-family: var(--itm-font-heading);
}

.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content:hover {
  color: var(--itm-color-link);
}