/*
Theme Name: Mist & Fire
Theme URI: https://mistandfire.com
Description: Child theme for GeneratePress. Warm reading surface, cool chrome, amber carrying the hierarchy. Base type at 19px with a 66ch measure for long-form reading. Light only by design.
Author: Mist & Fire
Template: generatepress
Version: 1.1.0
Text Domain: mistandfire
*/

/* ═══════════════════════════════════════════════════════
   TOKENS

   Light only, deliberately. GeneratePress writes its own
   colors from the Customizer as inline CSS that loads after
   this file, so a dual-theme setup fights the parent theme
   and loses. One palette, executed properly.

   The fog is the symptom; the fire is the promise — so the
   reading surface runs warm and the chrome stays cool.
   ═══════════════════════════════════════════════════════ */
:root {
  --mf-ground:     #F6F2EF;  /* warm paper — the reading surface */
  --mf-chrome:     #E4E9EA;  /* cool band: header, footer */
  --mf-paper:      #FFFCFA;  /* raised surfaces: cards, capture blocks */
  --mf-edge:       #DACFC7;  /* hairlines on warm ground */
  --mf-edge-cool:  #C3CDD0;  /* hairlines inside the cool chrome */
  --mf-ink:        #241F1C;  /* warm charcoal */
  --mf-ink-soft:   #5E554F;  /* bylines, captions, secondary */
  --mf-amber:      #A85B17;  /* carries the hierarchy, not just accents */
  --mf-ember:      #7C3D10;  /* section headings, pressed states */
  --mf-amber-wash: #F2E2D1;  /* callout grounds */

  --mf-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mf-body:    "Newsreader", "Iowan Old Style", Georgia, serif;

  --mf-measure: 66ch;
  --mf-s--1: 0.875rem;
  --mf-s-0:  1.1875rem;   /* 19px — reading vision often shifts in this decade */
  --mf-s-1:  1.375rem;
  --mf-s-2:  1.75rem;
  --mf-s-3:  2.25rem;
  --mf-s-4:  3rem;

  /* Stops the browser auto-darkening form controls and scrollbars
     when the visitor's OS is in dark mode. */
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════
   GENERATEPRESS OVERRIDES

   GP outputs Customizer colors as inline CSS in <head>, after
   the child stylesheet. These need the extra weight to win.
   Better still: set the matching values in the Customizer
   (see the colour list in the install notes) and these become
   belt and braces.
   ═══════════════════════════════════════════════════════ */
body,
.separate-containers .site-content,
.one-container .site-content {
  background-color: var(--mf-ground) !important;
  color: var(--mf-ink) !important;
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-article {
  background-color: transparent !important;
  color: var(--mf-ink) !important;
}

.site-header,
.site-footer,
.site-info,
.footer-widgets {
  background-color: var(--mf-chrome) !important;
  color: var(--mf-ink-soft) !important;
}

.sidebar .widget,
.inside-right-sidebar .widget,
.inside-left-sidebar .widget {
  background-color: transparent !important;
  color: var(--mf-ink) !important;
}

.main-navigation,
.main-navigation ul ul {
  background-color: var(--mf-chrome) !important;
}

/* Container width — set here rather than in the Customizer.
   The 66ch measure on .entry-content does the real work. */
.grid-container { max-width: 900px; }

/* ═══════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════ */
body {
  font-family: var(--mf-body);
  font-size: var(--mf-s-0);
  line-height: 1.75;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title {
  font-family: var(--mf-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--mf-ink);
}

a {
  color: var(--mf-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--mf-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover,
a:focus {
  color: var(--mf-ember);
  text-decoration-color: var(--mf-ember);
}
a:focus-visible {
  outline: 2px solid var(--mf-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════════════════════ */
.site-header {
  border-bottom: 1px solid var(--mf-edge-cool);
  padding-block: 28px 24px;
}

.site-title,
.site-title a {
  font-family: var(--mf-display);
  font-size: var(--mf-s-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--mf-ink);
}

/* Wrap the ampersand in the Site Title as:
   Mist <span class="mf-amp">&</span> Fire   */
.mf-amp {
  color: var(--mf-amber);
  font-style: italic;
  font-variation-settings: "SOFT" 90, "WONK" 1;
  padding-inline: 0.08em;
}

.site-description {
  font-size: var(--mf-s--1);
  color: var(--mf-ink-soft);
  letter-spacing: 0.02em;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
  font-family: var(--mf-display);
  font-size: var(--mf-s--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mf-ink-soft);
  text-decoration: none;
  background: transparent;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
  color: var(--mf-amber);
  background: transparent;
}

/* ═══════════════════════════════════════════════════════
   ARTICLE
   The temperature rail: cool at the start of the read,
   amber by the end.
   ═══════════════════════════════════════════════════════ */
.single .inside-article,
.page .inside-article {
  border-left: 4px solid transparent;
  /* Fixed stops rather than percentages, so a short post still
     reaches amber instead of staying grey the whole way down. */
  border-image: linear-gradient(
    to bottom,
    var(--mf-edge) 0px,
    var(--mf-amber) 160px,
    var(--mf-ember) 100%
  ) 1;
  padding-left: clamp(16px, 4vw, 34px);
  padding-block: 44px 8px;
}

.single .entry-content,
.page .entry-content {
  max-width: var(--mf-measure);
}

.entry-title {
  font-size: clamp(var(--mf-s-3), 5.5vw, var(--mf-s-4));
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.entry-meta {
  font-family: var(--mf-body);
  font-size: var(--mf-s--1);
  color: var(--mf-ink-soft);
  padding-bottom: 24px;
  border-bottom: 2px solid var(--mf-amber);
  margin-bottom: 30px;
}
.entry-meta a { color: var(--mf-ink-soft); }

.single .entry-content > p:first-of-type {
  font-size: var(--mf-s-1);
  line-height: 1.6;
}

.entry-content p { margin: 0 0 1.15em; }

.entry-content h2 {
  font-size: var(--mf-s-2);
  margin-top: 2em;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
  color: var(--mf-ember);
}
.entry-content h3 {
  font-size: var(--mf-s-1);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.entry-content ul,
.entry-content ol { margin-bottom: 1.3em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content img { max-width: 100%; height: auto; }

.entry-content figcaption,
.wp-caption-text {
  font-size: var(--mf-s--1);
  color: var(--mf-ink-soft);
  padding-top: 8px;
}

/* Archive / blog listing — no rail, lighter treatment */
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
  border-left: 3px solid var(--mf-edge);
  padding-left: clamp(16px, 4vw, 28px);
  padding-block: 28px;
}
.blog .entry-title,
.archive .entry-title,
.search .entry-title { font-size: var(--mf-s-2); }

/* ═══════════════════════════════════════════════════════
   COMPONENTS
   The publish node must emit these class names.
   ═══════════════════════════════════════════════════════ */
.mf-kicker {
  font-family: var(--mf-display);
  font-size: var(--mf-s--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mf-amber);
  margin-bottom: 14px;
}

/* Red-flag safety callout — required in every article */
.mf-redflag {
  background: var(--mf-amber-wash);
  border-left: 4px solid var(--mf-amber);
  padding: 22px 24px;
  margin: 2em 0;
  font-size: calc(var(--mf-s-0) * 0.96);
}
.mf-redflag h3 {
  font-size: var(--mf-s-0);
  margin: 0 0 0.5em;
  font-variation-settings: "SOFT" 20, "WONK" 0;
  color: var(--mf-ink);
}
.mf-redflag p:last-child { margin-bottom: 0; }
.mf-redflag ul { margin: 0.6em 0 0; padding-left: 1.2em; }

/* Sourced attribution */
.mf-sourced {
  border-top: 1px solid var(--mf-edge);
  border-bottom: 1px solid var(--mf-edge);
  padding-block: 20px;
  margin: 2em 0;
  font-size: var(--mf-s-1);
  line-height: 1.5;
  font-style: italic;
}
.mf-sourced cite {
  display: block;
  margin-top: 10px;
  font-size: var(--mf-s--1);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mf-ink-soft);
}

/* Product card */
.mf-product {
  background: var(--mf-paper);
  border: 1px solid var(--mf-edge);
  border-top: 3px solid var(--mf-amber);
  padding: 24px;
  margin: 2em 0;
}
.mf-product-rank {
  font-family: var(--mf-display);
  font-size: var(--mf-s--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mf-amber);
  display: block;
  margin-bottom: 4px;
}
.mf-product h3 { margin: 0 0 10px; font-size: var(--mf-s-1); }
.mf-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--mf-s--1);
  color: var(--mf-ink-soft);
  font-variant-numeric: tabular-nums;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--mf-edge);
}
.mf-product-meta b { color: var(--mf-ink); font-weight: 600; }

.mf-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 18px 28px;
  margin-bottom: 20px;
}
.mf-cols > div { min-width: 0; }
.mf-cols h4 {
  font-family: var(--mf-display);
  font-size: var(--mf-s--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mf-ink-soft);
  margin: 0 0 8px;
}
.mf-cols ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: calc(var(--mf-s-0) * 0.94);
}

/* Affiliate CTA */
.mf-cta,
.entry-content a.mf-cta {
  display: inline-block;
  background: var(--mf-amber);
  color: #FFF;
  font-family: var(--mf-display);
  font-size: var(--mf-s--1);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 11px 20px;
  text-decoration: none;
}
.mf-cta:hover,
.entry-content a.mf-cta:hover {
  background: var(--mf-ember);
  color: #FFF;
}

/* FTC disclosure — must sit above the first affiliate link */
.mf-disclosure-top {
  font-size: var(--mf-s--1);
  color: var(--mf-ink-soft);
  border-left: 2px solid var(--mf-edge);
  padding: 4px 0 4px 14px;
  margin-bottom: 28px;
}
.mf-disclosure-inline {
  display: block;
  margin-top: 12px;
  font-size: var(--mf-s--1);
  color: var(--mf-ink-soft);
}

/* Email capture */
.mf-capture {
  background: var(--mf-paper);
  border-top: 3px solid var(--mf-amber);
  padding: 30px 26px;
  margin: 3em 0 0;
}
.mf-capture h2 { font-size: var(--mf-s-2); margin: 0 0 10px; color: var(--mf-ink); }
.mf-capture p { color: var(--mf-ink-soft); margin-bottom: 18px; }
.mf-capture input[type="email"] {
  font-family: var(--mf-body);
  font-size: var(--mf-s-0);
  padding: 11px 14px;
  border: 1px solid var(--mf-edge);
  background: var(--mf-ground);
  color: var(--mf-ink);
  width: 100%;
  max-width: 320px;
}
.mf-capture button,
.mf-capture input[type="submit"] {
  font-family: var(--mf-display);
  font-size: var(--mf-s--1);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 11px 22px;
  border: none;
  background: var(--mf-ink);
  color: var(--mf-ground);
  cursor: pointer;
}
.mf-capture button:hover,
.mf-capture input[type="submit"]:hover {
  background: var(--mf-amber);
  color: #FFF;
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--mf-s-0) * 0.94);
  font-variant-numeric: tabular-nums;
}
.entry-content th {
  font-family: var(--mf-display);
  font-size: var(--mf-s--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--mf-ink-soft);
  border-bottom: 1px solid var(--mf-edge);
  padding: 10px 12px 10px 0;
}
.entry-content td {
  border-bottom: 1px solid var(--mf-edge);
  padding: 12px 12px 12px 0;
  vertical-align: top;
}
.mf-table-scroll { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════
   SIDEBAR / FOOTER
   ═══════════════════════════════════════════════════════ */
.widget-area .widget {
  border-top: 1px solid var(--mf-edge);
  padding-top: 20px;
}
/* GP renders widget titles as h2 — needs the extra weight */
.widget .widget-title,
.widget-area h2.widget-title,
.sidebar .widget-title {
  font-family: var(--mf-display);
  font-size: var(--mf-s--1) !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mf-ink-soft);
  line-height: 1.3;
}

.site-footer,
.site-info {
  border-top: 1px solid var(--mf-edge-cool);
  font-size: var(--mf-s--1);
  color: var(--mf-ink-soft);
}
.site-info { padding-block: 28px 44px; }
.site-info a { color: var(--mf-ink-soft); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --mf-s-4: 2.4rem; --mf-s-3: 1.95rem; }
  .single .inside-article,
  .page .inside-article { padding-left: 16px; padding-block: 30px 8px; }
  .mf-product { padding: 18px; }
  .mf-capture { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}