/* =========================================================================
   INK & TONER FINDER — DESIGN TOKENS
   =========================================================================
   This is a utility / lookup tool, not a lifestyle brand. Someone lands here
   standing at their printer, phone in hand, cartridge tray open. The design
   optimizes for "shortest path to the right part number," not mood.

   Reusable across the future 10-site portfolio: keep the token names
   generic (paper/ink/brand accent), swap values per-site, keep the CMYK
   motif because it's content-grounded for *any* cartridge-lookup site.

   COLOR TOKENS
   --paper       #f6f5f2   warm off-white page background (not stark white —
                           reads like a spec sheet / manual, not an app chrome)
   --paper-raised #ffffff  card / table surface, sits one step lighter than
                           --paper so structure is visible without borders-only
   --ink         #14161c   near-black body text (not pure #000 — softer on
                           long scanning sessions across compatibility tables)
   --ink-soft    #4b4f5a   secondary text (captions, meta, footnotes)
   --blue        #1f4d5c   deep teal-blue — primary brand color, links, the
                           one accent used for anything *interactive/brand*.
                           Deliberately NOT terracotta/cream (overused AI-site
                           default) and NOT a neon-on-black scheme — a
                           lookup tool should feel closer to a hardware
                           reference manual than a startup landing page.
   --blue-dark   #163b46   hover/active state for --blue
   --line        #dcd8cf   hairline borders / table rules, warm gray to sit
                           inside the paper palette rather than cold gray

   RETAILER BRAND COLOR (Amazon Associates is the only affiliate program)
   --amazon      #e47911   Amazon orange

   CMYK SIGNATURE MOTIF
   --cy / --mg / --yl / --bk   the four dots used next to the wordmark and
                           pinned to the quick-answer callout. This is not
                           decoration — it is literally the four process
                           colors inside a color cartridge. Content-grounded
                           motif per Gate 2's "signature element" requirement.

   TYPE TOKENS
   --font-display  Space Grotesk, system-ui, sans-serif   (H1/H2, wordmark)
   --font-body     Inter, system-ui, sans-serif           (everything else)
   --font-mono     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                   Consolas, monospace                    (part numbers only:
                   CF258A, W2110A — tabular-nums so columns of part numbers
                   in the compatibility table align vertically)

   SPACING / SHAPE
   --radius        10px    soft-utility corner radius, used sparingly
   --radius-sm     6px
   --shadow-card   a very quiet shadow — this site does not use elevation
                   as a design crutch, just enough lift to separate the
                   quick-answer callout from the page
   ========================================================================= */

/* Webfonts are loaded via <link rel="preconnect"> + <link rel="stylesheet">
   in templates/base.html, NOT with @import here. An @import inside this file
   would force the browser to fetch and parse style.css before it could even
   discover the font stylesheet, and parse that before requesting the fonts —
   a three-deep render-blocking chain. Do not reintroduce it. */

:root {
  --paper: #f6f5f2;
  --paper-raised: #ffffff;
  --ink: #14161c;
  --ink-soft: #4b4f5a;
  --blue: #1f4d5c;
  --blue-dark: #163b46;
  --line: #dcd8cf;

  --amazon: #e47911;
  --amazon-dark: #b8600d;

  --cy: #00b7d6;
  --mg: #e0157c;
  --yl: #f4c11a;
  --bk: #14161c;

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgba(20, 22, 28, 0.06), 0 4px 16px rgba(20, 22, 28, 0.06);
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); margin-top: 2em; }
h3 { font-size: 1.1rem; margin-top: 1.5em; }

p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

main { display: block; }

/* ---------- part numbers: monospace + tabular figures ---------- */
.part-no, code.part-no, .compat-table td.part-no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  font-weight: 500;
  background: rgba(20, 22, 28, 0.04);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  white-space: nowrap;
}

/* ---------- CMYK signature dot cluster ---------- */
.cmyk-dots {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.cmyk-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.cmyk-dots span:nth-child(1) { background: var(--cy); }
.cmyk-dots span:nth-child(2) { background: var(--mg); }
.cmyk-dots span:nth-child(3) { background: var(--yl); }
.cmyk-dots span:nth-child(4) { background: var(--bk); }
.cmyk-dots.cmyk-dots--lg span { width: 12px; height: 12px; }

/* ---------- header ---------- */
.site-header {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark .brand-ink { color: var(--blue); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-weight: 500;
  font-size: 0.95rem;
}
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--blue); }
.site-nav a.nav-about {
  background: var(--ink);
  color: var(--paper);
  padding: 6px 14px;
  border-radius: 999px;
}
.site-nav a.nav-about:hover { background: var(--blue-dark); color: var(--paper); }

.site-search {
  flex: 1 1 220px;
  max-width: 340px;
  position: relative;
}
.site-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
}
.site-search input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.site-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  max-height: 340px;
  overflow-y: auto;
  display: none;
  z-index: 30;
}
.site-search-results.is-open { display: block; }
.site-search-results a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.site-search-results a:last-child { border-bottom: none; }
.site-search-results a:hover { background: var(--paper); color: var(--blue); }
.site-search-results .cart-name {
  display: block;
  white-space: normal;
  font-weight: 500;
}
.site-search-results .cart-family {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.site-search-empty { padding: 10px 12px; color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- breadcrumb ---------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 18px 0 10px;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; color: var(--line); }

/* ---------- hero (homepage) ---------- */
.hero {
  padding: 48px 0 36px;
  text-align: left;
}
.hero p.hero-sub {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.hero .cmyk-dots { margin-bottom: 14px; }

/* ---------- quick answer callout: the signature element ---------- */
/* This box is the single most-repeated, most important element on the
   entire site — every model and family page leads with it. The CMYK dot
   cluster pinned to its top-right corner is the same literal motif as the
   header wordmark, reappearing at the moment the answer itself is given. */
.quick-answer {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  padding: 20px 52px 20px 22px;
  margin: 18px 0 28px;
  box-shadow: var(--shadow-card);
  font-size: 1.08rem;
}
.quick-answer .cmyk-dots {
  position: absolute;
  top: 16px;
  right: 16px;
}
.quick-answer p { margin: 0; font-weight: 500; }
.quick-answer .qa-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

/* ---------- trust stamp ---------- */
.trust-stamp {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: -14px 0 24px;
}
.trust-stamp::before {
  content: "✓ ";
  color: var(--blue);
}

/* ---------- compatibility table ---------- */
.compat-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.compat-table th, .compat-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  vertical-align: middle;
}
.compat-table th {
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.compat-table tr:last-child td { border-bottom: none; }

/* ---------- shop buttons (3 retailers) ---------- */
.shop-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: filter 0.12s ease;
}
.shop-btn:hover { filter: brightness(0.92); }
.shop-btn.shop-btn--amazon { background: var(--amazon); color: #1c1200; }
.shop-btn.shop-btn--amazon:hover { background: var(--amazon-dark); color: #fff; }

/* ---------- inline affiliate disclosure ---------- */
.disclosure-inline {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 10px 0 26px;
  padding-top: 4px;
}
.disclosure-inline a { color: var(--ink-soft); text-decoration: underline; }
.disclosure-inline a:hover { color: var(--blue); }

/* ---------- explainer blocks / content chunks ---------- */
.explainer {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 20px 0;
}
.explainer h2, .explainer h3 { margin-top: 0; }

/* ---------- FAQ accordion ---------- */
.faq { margin: 24px 0; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  padding: 14px 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-q:hover { color: var(--blue); }
.faq-q .chev { transition: transform 0.15s ease; flex-shrink: 0; color: var(--ink-soft); }
.faq-item.is-open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  padding: 0 4px 16px;
  color: var(--ink-soft);
}
.faq-a.is-collapsed { display: none; }

/* ---------- related models / card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.card:hover { border-color: var(--blue); color: var(--blue); }
.card .card-title { font-weight: 600; display: block; }
.card .card-meta { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- brand tiles (homepage) ---------- */
.brand-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 20px 0 32px; }
.brand-tile {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.brand-tile:hover { border-color: var(--blue); }
.brand-tile .brand-tile-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.brand-tile .brand-tile-meta { color: var(--ink-soft); font-size: 0.88rem; margin-top: 4px; }

/* ---------- series tables (brand hub) ---------- */
.series-block { margin: 24px 0; }
.series-block h3 { margin-bottom: 8px; }
.model-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; table-layout: fixed; }
.model-table th, .model-table td { padding: 7px 10px; font-size: 0.93rem; text-align: left; vertical-align: middle; }
.model-table th { font-weight: 600; color: var(--ink-soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); }
.model-table td { border-bottom: 1px solid var(--line); }
.model-table th:last-child, .model-table td:last-child { width: 340px; }
.model-table a { text-decoration: none; }
.model-table tr:last-child td { border-bottom: none; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding: 32px 0 40px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.site-footer .footer-links a { color: var(--ink-soft); text-decoration: none; }
.site-footer .footer-links a:hover { color: var(--blue); text-decoration: underline; }
.site-footer .footer-disclosure { max-width: 70ch; line-height: 1.5; }
.site-footer .footer-brand { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  display: none;
  z-index: 50;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner.is-visible { display: flex; }
.cookie-banner p { margin: 0; font-size: 0.88rem; flex: 1 1 260px; color: var(--paper); }
.cookie-banner a { color: var(--paper); text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-body);
}
.cookie-accept { background: var(--blue); color: #fff; }
.cookie-accept:hover { background: var(--blue-dark); }
.cookie-decline { background: transparent; color: var(--paper); border: 1px solid rgba(246,245,242,0.4) !important; }
.cookie-decline:hover { border-color: var(--paper) !important; }

/* ---------- guide / legal prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.meta-line { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 20px; }

/* ---------- utility ---------- */
.section { margin: 32px 0; }
.small-print { font-size: 0.82rem; color: var(--ink-soft); }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* =========================================================================
   MOBILE
   ========================================================================= */

/* Tablet and below: once the header wraps, the brand nav drops onto its own
   line. Left as-is it stays hard-right under the search box; center it so it
   reads as a nav bar rather than a stray right-aligned list. */
@media (max-width: 900px) {
  .site-nav {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .site-search {
    flex: 1 1 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .wordmark {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  /* Hero centering: validated fix carried forward from earlier design pass —
     on narrow viewports the hero heading + subtext CENTER rather than just
     shrinking font-size in place. Most traffic here is a phone at a printer. */
  .hero {
    text-align: center;
  }
  .hero .cmyk-dots { justify-content: center; margin-left: auto; margin-right: auto; }
  .hero p.hero-sub { margin-left: auto; margin-right: auto; }

  .site-header .container { gap: 10px; }
  .site-nav { gap: 12px; font-size: 0.88rem; }
  .quick-answer { padding-right: 22px; }
  .quick-answer .cmyk-dots { position: static; margin-bottom: 8px; }
  .shop-buttons { flex-direction: column; }
  .shop-btn { justify-content: center; }

  /* Series/model tables: drop the fixed family column so the 340px reserved
     space doesn't crush the model name on a phone. */
  .model-table { table-layout: auto; }
  .model-table th:last-child, .model-table td:last-child { width: auto; }

  /* Compat table (Cartridge / Part / Shop): a 3-column table doesn't fit a
     phone width without either crushing text or pushing the Shop button off
     the right edge behind a horizontal scroll — exactly the buy button
     nobody should have to scroll sideways to find. Below 600px it becomes a
     stack of cards instead: one card per cartridge, each field labeled via
     data-label (set in model.html / family.html) and the Shop button full
     width at the bottom of its card, right under the part number. */
  .compat-table, .compat-table thead, .compat-table tbody,
  .compat-table th, .compat-table td, .compat-table tr {
    display: block;
  }
  .compat-table thead { display: none; }
  .compat-table tr {
    padding: 12px 14px 14px;
    border-bottom: 1px solid var(--line);
  }
  .compat-table tr:last-child { border-bottom: none; }
  .compat-table td {
    border-bottom: none;
    padding: 4px 0;
  }
  .compat-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-bottom: 2px;
  }
  .compat-table td[data-label="Shop"] { margin-top: 4px; }
  .compat-table .shop-buttons { flex-direction: column; }
  .compat-table .shop-btn { width: 100%; }

  /* The stacked card is narrower than the old table cell — a long OEM part
     number (e.g. "Brother LC-101 Cyan/Magenta/Yellow") needs to wrap here
     instead of running off the card edge under nowrap. */
  .compat-table td.part-no { white-space: normal; }
}