/* ============================================================================
   KnoxWhat : "The Almanac" design system (ported from franklinwhat)
   base.css : tokens, typography, layout primitives, utilities
   A scruffy little field-guide aesthetic. Orange accent, clean paper light,
   Knoxville navy dark.
   ============================================================================ */

/* ── CLS fix: fallback-font matching ─────────────────────────────
 * Three @font-face declarations that paint the local system font with
 * adjusted metrics (size, ascent, line-height) so it occupies the SAME
 * visible box as the Google Font that replaces it on swap. Without this
 * Newsreader/Hanken Grotesk swap causes a 0.2+ CLS spike on mobile.
 * Values calibrated to typical Times/Arial/Courier metrics on Mac+Win;
 * within 1-2px of the actual web font box. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman'), local('Times');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Spline Sans Mono Fallback';
  src: local('Menlo'), local('Consolas'), local('Courier New');
  size-adjust: 96%;
  ascent-override: 88%;
  descent-override: 23%;
  line-gap-override: 0%;
}

:root {
  /* ---- Brand: warm orange (the KnoxWhat accent) ---- */
  --orange-50:  #fff3ee;
  --orange-100: #ffe2d4;
  --orange-200: #ffc4a8;
  --orange-500: #ff6b35;   /* primary, the orange */
  --orange-600: #ed5a26;   /* hover */
  --orange-700: #c2410c;   /* darker, clears AA as small text on light paper */
  --color-primary:       #ff6b35;
  --color-primary-hover: #ed5a26;
  /* Darker orange for small body-text in brand color (clears WCAG AA on the
   * light paper). Brand surfaces use --color-primary unchanged. */
  --color-primary-text:  #c2410c;

  /* ---- Emerald kept as a secondary green accent (dog marker, soft tints) ---- */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-500: #059669;
  --emerald-600: #047857;
  --emerald-700: #036249;

  /* ---- Navy (deep): dark sections, footer, depth (KnoxWhat dark base) ---- */
  --pine-900: #14233a;   /* footer / deepest navy */
  --pine-800: #1e3a5f;   /* Knoxville navy */
  --pine-700: #2a4d76;

  /* ---- On-dark text: light tints that read on navy footer / hero overlays ---- */
  --ondark:        #e7eef5;   /* primary light text on navy */
  --ondark-dim:    #aebfd0;   /* secondary light text on navy */
  --ondark-bright: #ffd2bd;   /* warm orange-tint accent on navy */

  /* ---- Clay / warmth, Local Tip, community, childcare highlight ---- */
  --clay-50:  #fdf3ec;
  --clay-100: #f9e3d2;
  --clay-500: #c2632f;
  --clay-600: #a64f22;
  --clay-700: #8a3f1b;

  /* ---- Gold, free / sunshine accents ---- */
  --gold-100: #f7eccf;
  --gold-500: #c9952b;
  --gold-600: #a87a1f;
  /* Darker gold for text on gold-100, clears WCAG AA (gold-600 reads at
   * 3.26:1 which is too low for marker text). */
  --gold-700: #7a5710;

  /* ---- River blue, water / waterfalls / map ---- */
  --river-100: #d8ecf2;
  --river-500: #2f7e96;
  --river-600: #246173;

  /* ---- Neutrals (clean light paper + navy-tinted ink) ---- */
  --paper:        #fafafa;  /* page background */
  --paper-sunk:   #f0f0f3;  /* recessed wells */
  --surface:      #ffffff;  /* cards */
  --surface-2:    #f6f6f9;
  --ink:          #1a1a2e;  /* navy near-black text */
  --ink-2:        #4a4a5e;  /* secondary text */
  --ink-3:        #63636f;  /* tertiary / metadata, clears WCAG AA on the light paper */
  --ink-3-soft:   #8a8a96;  /* softer tone, non-text uses (divider hints) */
  --line:         #e6e6ec;  /* hairline borders */
  --line-strong:  #d3d3dc;

  /* ---- Semantic ---- */
  --color-bg:        var(--paper);
  --color-surface:   var(--surface);
  --color-text:      var(--ink);
  --color-text-2:    var(--ink-2);
  --color-text-3:    var(--ink-3);
  --color-border:    var(--line);
  --color-border-2:  var(--line-strong);

  /* ---- Type ----
   * Fallback families paint with size/ascent-adjusted metrics so the
   * Google Font swap doesn't trigger CLS. See @font-face decls above. */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", "Hanken Grotesk Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", "Spline Sans Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* fluid type scale */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --t-3xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --t-4xl:  clamp(2.6rem, 1.6rem + 4.2vw, 4.4rem);

  /* ---- Spacing (8pt-ish) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --sh-xs: 0 1px 2px rgba(60, 45, 25, 0.06);
  --sh-sm: 0 1px 3px rgba(60, 45, 25, 0.08), 0 1px 2px rgba(60, 45, 25, 0.05);
  --sh-md: 0 6px 16px -6px rgba(60, 45, 25, 0.14), 0 2px 6px -2px rgba(60, 45, 25, 0.08);
  --sh-lg: 0 18px 40px -16px rgba(45, 35, 18, 0.22), 0 6px 14px -8px rgba(45, 35, 18, 0.12);

  --ring: 0 0 0 3px rgba(255, 107, 53, 0.34);

  --maxw: 1120px;
  --maxw-read: 720px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* ---- Dark mode: Knoxville navy night, not cold slate ---- */
html[data-theme="dark"] {
  --paper:       #0f1d2e;   /* deep navy night */
  --paper-sunk:  #0a1622;
  --surface:     #16273b;
  --surface-2:   #12202f;
  --ink:         #eef1f6;
  --ink-2:       #b6c0cf;
  --ink-3:       #8595a8;
  --line:        #25384e;
  --line-strong: #324a64;

  --orange-500: #ff7a47;   /* a touch brighter for contrast on navy */
  --color-primary: #ff7a47;
  --color-primary-hover: #ff9165;
  --color-primary-text:  #ff8a5c;  /* small text uses the brighter shade in dark mode */

  --pine-900: #0b1521;     /* footer goes deeper than the page */
  --pine-800: #14253a;

  --clay-500: #d97a44;
  --gold-500: #d8a93f;
  --river-500: #4ba2bb;

  --sh-xs: 0 1px 2px rgba(0,0,0,0.4);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.5);
  --sh-md: 0 8px 22px -8px rgba(0,0,0,0.6);
  --sh-lg: 0 22px 48px -18px rgba(0,0,0,0.7);
  --ring: 0 0 0 3px rgba(25, 178, 126, 0.4);
}

/* ============================================================================
   Reset / base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
/* In-page anchor jumps (e.g. /real-estate/#who-wed-call) land below the sticky
   ~76px masthead instead of behind it. The home's #map/#about additionally get
   a dynamic offset in app.js (it also clears the home's sticky controls bar). */
:target { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* subtle paper texture via faint contour wash (very light) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,107,53,0.05), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(30,58,95,0.04), transparent 55%);
}
html[data-theme="dark"] body::before {
  opacity: 0.7;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,122,71,0.07), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(78,205,196,0.05), transparent 55%);
}
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--color-primary); text-decoration: none; }

/* Accessibility, links inside text blocks need an underline AND
 * sufficient contrast so they are distinguishable without relying on
 * colour alone (WCAG 1.4.1 + 1.4.3 + Lighthouse link-in-text-block).
 * Navigation links, card-wrapping anchors, footer columns and the
 * brand mark opt out explicitly. --color-primary-text is a darker
 * emerald (#036249) that clears 4.5:1 against warm-paper. */
p a, li a, blockquote a, dd a, .guide-intro a, .page-head__sub a,
.read a:not(.brand):not(.btn):not(.rest-card), .footer__list a {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.rest-card a, .event-card a, a.btn, a.brand,
.masthead__nav a, .crumbs a, .skip-link, .pill, .marker {
  text-decoration: none;
}

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 500; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
p { text-wrap: pretty; }

/* ============================================================================
   Layout primitives
   ============================================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
@media (max-width: 640px){ .wrap { padding-inline: var(--s-4); } }
.read { max-width: var(--maxw-read); }

.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--wrap { flex-wrap: wrap; }

/* ---- Eyebrow / label (mono) ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.eyebrow--emerald { color: var(--color-primary-text); }

/* ---- Section header pattern ---- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1.5px solid var(--color-border);
}
.section-head__title { font-size: var(--t-2xl); }
.section-head__link {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--color-text-2);
  white-space: nowrap;
}
.section-head__link:hover { color: var(--color-primary); }

/* ---- Utilities ---- */
.mono { font-family: var(--font-mono); }
.muted { color: var(--color-text-2); }
.center { text-align: center; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Focus ---- */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: #fff;
  padding: var(--s-2) var(--s-4); z-index: 9999; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; font-size: var(--t-sm);
}
.skip-link:focus { left: var(--s-4); }

/* ---- Divider with contour feel ---- */
.rule { border: 0; border-top: 1.5px solid var(--color-border); margin: var(--s-6) 0; }