/* ============================================================
   JEFF CADY / UESCA COACHING — SHARED THEME
   ------------------------------------------------------------
   Design tokens, resets, typography, layout shell, hero
   mechanism, and buttons shared by every page in this site
   family (jcady.org, uera.jcady.org, and any future page).

   HOW TO USE THIS FOR A NEW PAGE:
   1. Link this file + the same Google Fonts <link> this file
      assumes (Big Shoulders Display, Source Serif 4, IBM Plex
      Mono) — see any existing page's <head> for the exact tag.
   2. Link theme.js right after it (provides the topo contour
      background and the waypoint-ring icon generator).
   3. Use the classes below (.wrap, .hero, .btn, section,
      .section-title, etc.) for anything generic.
   4. Write page-specific CSS in your own page's <style> block,
      AFTER the theme.css <link>, so it can override anything
      that needs to differ (hero heading size, section colors,
      one-off components). Don't edit this file for a one-page
      need — only add something here if it's genuinely reusable
      across multiple pages.
   ============================================================ */

:root{
  /* ---- Core palette ---- */
  --paper:#DEDACB;
  --paper-2:#F1EEE1;
  --ink:#232922;
  --ink-soft:#565f4e;
  --pine:#1B2A1F;
  --pine-2:#25372A;
  --line:#A79C82;
  --line-soft:#c9c0a7;
  --accent:#CB5A28;
  --cream:#F7F2E7;
  --dim:#c8b190;
  --radius:2px;

  /* ---- Risk/status tiers ----
     For any tool that scores, flags, or rates something.
     Skip these tokens entirely on pages that don't need them. */
  --low:#4B7A4E;
  --mid:#B2812A;
  --high:#B23B2E;
  --low-bg:rgba(75,122,78,0.13);
  --mid-bg:rgba(178,129,42,0.15);
  --high-bg:rgba(178,59,46,0.14);
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- Typography ---------- */
h1,h2,h3,.display{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:800;
  margin:0;
}
.mono{font-family:'IBM Plex Mono', monospace;}
button{font-family:'IBM Plex Mono', monospace;cursor:pointer;}
button:focus-visible, input:focus-visible, a:focus-visible, label:focus-within{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ---------- Layout shell ---------- */
.wrap{max-width:820px;margin:0 auto;padding:0 24px;}
section{padding:64px 0;}
section + section{border-top:1px solid var(--line-soft);}
.section-title{font-size:clamp(26px,4vw,34px);margin-bottom:10px;}
.section-sub{color:var(--ink-soft);font-size:16px;max-width:60ch;margin-bottom:36px;font-style:italic;}

/* ---------- Hero (dark pine header w/ topo texture) ----------
   Structural mechanism only. Override .hero{padding} and
   .hero h1{font-size} per page — a two-word name and a
   four-word product title need different scale, and that's
   fine to set locally. */
.hero{
  background:var(--pine);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  padding:76px 0 58px;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--contour-pattern);
  opacity:0.5;
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:19px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--dim);display:inline-block;}
.hero h1{
  font-size:clamp(44px, 9vw, 80px);
  line-height:0.92;
  color:var(--cream);
}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p.lead{
  font-family:'Source Serif 4', serif;
  font-size:18.5px;
  color:#d9d2c0;
  max-width:52ch;
  margin-top:23px;
}

/* ---------- Buttons ---------- */
.btn-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;border:none;
  padding:15px 26px;font-size:13.5px;letter-spacing:0.06em;text-transform:uppercase;
  border-radius:var(--radius);text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:#b04b1f;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:0.35;cursor:not-allowed;}
.btn.small{padding:9px 16px;font-size:11.5px;}

/* Ghost button — default styling assumes a light background
   (body sections on --paper/--paper-2). */
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);}
.btn.ghost:hover{background:rgba(0,0,0,0.05);}

/* Ghost button automatically flips for dark/hero contexts —
   any page's hero gets a correctly-contrasted ghost button
   for free, no per-page override needed. */
.hero .btn.ghost, .btn.ghost-dark{
  border-color:rgba(247,242,231,0.4);color:var(--cream);
}
.hero .btn.ghost:hover, .btn.ghost-dark:hover{background:rgba(255,255,255,0.08);}

/* ---------- Tags / pills ----------
   Small rounded label chips — used for specialty tags,
   category labels, anything that reads as a short badge. */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;}
.pill-row span, .pill-row a{
  font-family:'IBM Plex Mono', monospace;font-size:11.5px;letter-spacing:0.05em;text-transform:uppercase;
  border:1px solid var(--line);padding:6px 14px;border-radius:20px;color:var(--ink-soft);
  text-decoration:none;
}

/* ---------- Simple card ----------
   A bordered content block on --paper-2. Good starting point
   for fact boxes, callouts, or list cards on a new page. */
.card{background:var(--paper-2);border:1px solid var(--line-soft);padding:22px 24px;}

/* ---------- Footer shell ----------
   The dark marketing-style footer (name, blurb, contact,
   copyright). A tool that just needs a thin credit line
   at the bottom of its own screens doesn't need this at all.*/
footer.site-footer-full{background:var(--pine);color:var(--dim);padding:56px 0 32px;}
footer.site-footer-full h2{color:var(--cream);font-size:28px;margin-bottom:12px;}
footer.site-footer-full p.lead-f{color:#d9d2c0;font-size:15.5px;max-width:50ch;margin-bottom:32px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  margin-top:36px;padding-top:22px;
  font-family:'IBM Plex Mono', monospace;font-size:11px;color:#a99b7d;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
