/* ==========================================================================
   YSMS Lab brand styles · v1.0 · October 2026
   Enqueued by the ysms-lab child theme (functions.php).
   Fonts are loaded by theme.json from assets/fonts/ (self-hosted, no Google).
   ========================================================================== */


:root {
  /* Colour */
  --ysms-ink: #16233A;          /* text, headers, dark backgrounds */
  --ysms-paper: #F8F5EE;        /* page background */
  --ysms-white: #FFFFFF;        /* cards, tables */
  --ysms-ochre: #C99A2E;        /* verdict accents: borders, fills, text on Ink only */
  --ysms-ochre-dark: #8A6A1F;   /* ochre text on light backgrounds */
  --ysms-graphite: #3E4756;     /* secondary text */
  --ysms-rule: #DCD5C6;         /* borders, dividers */
  --ysms-mist: #D5D9E0;         /* secondary text on Ink */
  --ysms-good: #2E6B4E;         /* scores 8.0 to 10 */
  --ysms-caution: #8A5A00;      /* scores 6.0 to 7.9 */
  --ysms-poor: #A23B32;         /* scores below 6.0 */

  /* Type */
  --ysms-font-display: "Newsreader Display", "Newsreader", Georgia, serif;
  --ysms-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ysms-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ysms-size-display: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);   /* 36 to 48px */
  --ysms-size-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);         /* 32 to 40px */
  --ysms-size-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);     /* 24 to 30px */
  --ysms-size-h3: 1.375rem;   /* 22px */
  --ysms-size-body: 1.125rem; /* 18px */
  --ysms-size-small: 0.9375rem; /* 15px */
  --ysms-size-label: 0.8125rem; /* 13px */

  /* Space and shape */
  --ysms-space-1: 4px; --ysms-space-2: 8px; --ysms-space-3: 12px; --ysms-space-4: 16px;
  --ysms-space-5: 24px; --ysms-space-6: 32px; --ysms-space-7: 48px; --ysms-space-8: 64px; --ysms-space-9: 96px;
  --ysms-radius-sm: 4px; --ysms-radius: 6px;
  --ysms-content: 720px; --ysms-wide: 1200px;
}

/* Base */
body { background: var(--ysms-paper); color: var(--ysms-ink); font-family: var(--ysms-font-body); font-size: var(--ysms-size-body); line-height: 1.6; }
h1, h2, h3 { font-family: var(--ysms-font-display); font-weight: 600; line-height: 1.15; color: var(--ysms-ink); letter-spacing: -0.005em; }
h1 { font-size: var(--ysms-size-h1); } h2 { font-size: var(--ysms-size-h2); } h3 { font-size: var(--ysms-size-h3); }
a { color: var(--ysms-ink); text-decoration: underline; text-decoration-color: var(--ysms-ochre); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ysms-ochre-dark); }

/* Label: small mono caps above boxes and sections */
.ysms-label { font-family: var(--ysms-font-mono); font-size: var(--ysms-size-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ysms-graphite); }

/* Answer box: top of every page */
.ysms-answer-box { background: var(--ysms-white); border: 1px solid var(--ysms-rule); border-top: 4px solid var(--ysms-ink); border-radius: var(--ysms-radius); padding: var(--ysms-space-5) var(--ysms-space-6); margin: var(--ysms-space-6) 0; }
.ysms-answer-box p { margin: 0; font-size: 1.1875rem; line-height: 1.55; }
.ysms-answer-box strong:first-child { font-family: var(--ysms-font-mono); font-size: var(--ysms-size-label); letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: var(--ysms-space-2); color: var(--ysms-graphite); font-weight: 500; }

/* Verdict box: our pick and runner-up */
.ysms-verdict { background: var(--ysms-white); border: 1px solid var(--ysms-rule); border-top: 4px solid var(--ysms-ochre); border-radius: var(--ysms-radius); padding: var(--ysms-space-5) var(--ysms-space-6); margin: var(--ysms-space-6) 0; }
.ysms-verdict .ysms-label { color: var(--ysms-ochre-dark); }
.ysms-verdict h3 { margin: var(--ysms-space-2) 0; }

/* Score badge: Lab Score out of 10 */
.ysms-score { display: inline-block; font-family: var(--ysms-font-mono); font-weight: 500; font-size: var(--ysms-size-small); padding: 4px 10px; border-radius: var(--ysms-radius-sm); background: var(--ysms-ink); color: var(--ysms-paper); white-space: nowrap; }
.ysms-score--good { background: var(--ysms-good); color: #fff; }
.ysms-score--caution { background: var(--ysms-caution); color: #fff; }
.ysms-score--poor { background: var(--ysms-poor); color: #fff; }

/* Key facts and comparison tables */
.ysms-table { width: 100%; border-collapse: collapse; background: var(--ysms-white); border: 1px solid var(--ysms-rule); border-radius: var(--ysms-radius); overflow: hidden; font-size: var(--ysms-size-small); }
.ysms-table th, .ysms-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--ysms-rule); vertical-align: top; }
.ysms-table thead th { background: var(--ysms-ink); color: var(--ysms-paper); font-weight: 600; }
.ysms-table tbody th { color: var(--ysms-graphite); font-weight: 400; width: 40%; }
.ysms-table td.num, .ysms-table .ysms-data { font-family: var(--ysms-font-mono); }
.ysms-table-wrap { overflow-x: auto; }

/* Pros and cons */
.ysms-proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ysms-space-5); }
.ysms-pros, .ysms-cons { background: var(--ysms-white); border: 1px solid var(--ysms-rule); border-radius: var(--ysms-radius); padding: var(--ysms-space-5); }
.ysms-pros { border-top: 4px solid var(--ysms-good); }
.ysms-cons { border-top: 4px solid var(--ysms-poor); }

/* Callout: a fact, warning or tip */
.ysms-callout { background: var(--ysms-white); border: 1px solid var(--ysms-rule); border-radius: var(--ysms-radius); padding: var(--ysms-space-4) var(--ysms-space-5); }
.ysms-callout--warning { border-color: var(--ysms-caution); }

/* Last tested stamp */
.ysms-tested { font-family: var(--ysms-font-mono); font-size: var(--ysms-size-small); color: var(--ysms-graphite); }

/* Independence note for the footer */
.ysms-independence { font-size: var(--ysms-size-small); color: var(--ysms-mist); }

/* ==========================================================================
   Twenty Twenty-Five compatibility
   The parent theme's templates, parts and patterns use its own colour, font
   and size names. The YSMS Lab theme.json replaces those presets, so these
   rules map the parent's names to the brand so nothing falls back to blank.
   ========================================================================== */
:root {
  --wp--preset--color--base: var(--ysms-paper);
  --wp--preset--color--contrast: var(--ysms-ink);
  --wp--preset--color--accent-1: var(--ysms-ochre);
  --wp--preset--color--accent-2: var(--ysms-paper);
  --wp--preset--color--accent-3: var(--ysms-ink);
  --wp--preset--color--accent-4: var(--ysms-graphite);
  --wp--preset--color--accent-5: var(--ysms-white);
  --wp--preset--color--accent-6: var(--ysms-rule);
  --wp--preset--font-family--manrope: var(--ysms-font-body);
  --wp--preset--font-family--fira-code: var(--ysms-font-mono);
  --wp--preset--font-size--medium: var(--ysms-size-body);
  --wp--preset--font-size--large: var(--ysms-size-h3);
  --wp--preset--font-size--x-large: var(--ysms-size-h2);
  --wp--preset--font-size--xx-large: var(--ysms-size-h1);
}
.has-base-color { color: var(--ysms-paper) !important; }
.has-base-background-color { background-color: var(--ysms-paper) !important; }
.has-contrast-color { color: var(--ysms-ink) !important; }
.has-contrast-background-color { background-color: var(--ysms-ink) !important; }
.has-accent-1-background-color { background-color: var(--ysms-ochre) !important; }
.has-accent-3-color { color: var(--ysms-ink) !important; }
.has-accent-4-color { color: var(--ysms-graphite) !important; }
.has-accent-5-background-color { background-color: var(--ysms-white) !important; }
.has-accent-6-border-color { border-color: var(--ysms-rule) !important; }
.has-manrope-font-family { font-family: var(--ysms-font-body) !important; }
.has-fira-code-font-family { font-family: var(--ysms-font-mono) !important; }
.has-medium-font-size { font-size: var(--ysms-size-body) !important; }
.has-large-font-size { font-size: var(--ysms-size-h3) !important; }
.has-x-large-font-size { font-size: var(--ysms-size-h2) !important; }
.has-xx-large-font-size { font-size: var(--ysms-size-h1) !important; }

/* ==========================================================================
   Header and footer (parts/header.html, parts/footer.html)
   ========================================================================== */
.ysms-header { background: var(--ysms-paper); border-bottom: 1px solid var(--ysms-rule); }
.ysms-header-inner { max-width: var(--ysms-wide); margin: 0 auto; padding: var(--ysms-space-5) var(--ysms-space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--ysms-space-5); }
.ysms-header-logo, .ysms-footer-logo { display: inline-block; text-decoration: none; line-height: 0; }
.ysms-header-logo img { display: block; width: 220px; max-width: 60vw; height: auto; }
.ysms-footer { background: var(--ysms-ink); color: var(--ysms-paper); }
.ysms-footer-inner { max-width: var(--ysms-wide); margin: 0 auto; padding: var(--ysms-space-7) var(--ysms-space-4); }
.ysms-footer-logo img { display: block; width: 200px; max-width: 60vw; height: auto; }
.ysms-footer-tagline { margin: var(--ysms-space-4) 0 var(--ysms-space-2); font-size: var(--ysms-size-small); color: var(--ysms-paper); }
.ysms-footer .ysms-independence { margin: 0; }
.ysms-footer a { color: var(--ysms-paper); }

/* Keep the footer at the bottom of the screen on short pages */
.wp-site-blocks { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group { flex: 1 0 auto; }
.wp-site-blocks > footer.wp-block-template-part { margin-top: auto; }

/* Table block: replace WordPress's default dark cell borders with Rule lines */
.wp-block-table.ysms-table { border: 1px solid var(--ysms-rule); border-radius: var(--ysms-radius); }
.wp-block-table.ysms-table table { width: 100%; border-collapse: collapse; margin: 0; }
.wp-block-table.ysms-table th, .wp-block-table.ysms-table td { border: 0; border-bottom: 1px solid var(--ysms-rule); }
.wp-block-table.ysms-table thead { border-bottom: 0; }
.wp-block-table.ysms-table thead th { border-bottom: 1px solid var(--ysms-ink); }
.wp-block-table.ysms-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.ysms-table tbody td:first-child { color: var(--ysms-graphite); width: 40%; }

/* Pros and cons: line the two boxes up (cancel WordPress's block-gap margin in the grid) */
.ysms-proscons { margin-block: var(--ysms-space-6); }
.ysms-proscons > * { margin-block: 0 !important; }

/* No extra space above the first item inside any box */
.ysms-answer-box > :first-child, .ysms-verdict > :first-child, .ysms-pros > :first-child,
.ysms-cons > :first-child, .ysms-callout > :first-child { margin-top: 0; }
.ysms-answer-box > :last-child, .ysms-verdict > :last-child, .ysms-pros > :last-child,
.ysms-cons > :last-child, .ysms-callout > :last-child { margin-bottom: 0; }