/*
Theme Name: Sneaker History — Archive
Theme URI: https://sneakerhistory.com
Author: Nick Engvall / Claude Design
Description: An editorial, museum-style redesign of SneakerHistory.com in the "Archive" direction. Newsreader serif + IBM Plex Mono pairing, paper/ink palette, single accent #FF2247. Built from the Claude Design handoff. Custom post types for the Brands A–Z directory and the Sneaker Glossary, plus a dark podcast hub.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sneaker-history-archive
*/

/* ===================================================================
   DESIGN TOKENS  (from HANDOFF.md — used verbatim throughout)
   =================================================================== */
:root{
  --paper:#FAF7F1;        /* primary background */
  --paper-tint:#F4F0E7;   /* alt sections, spotlight/feature cards, nav-rail */
  --ink:#211D18;          /* primary text, buttons */
  --ink-body:#2B2620;     /* long-form body copy */
  --dark:#1A1611;         /* feature moments: podcast band, footer */
  --muted-1:#524D45;      /* deks / secondary text */
  --muted-2:#6B665D;      /* tertiary text, descriptions */
  --muted-3:#8A8479;      /* meta, captions, mono labels */
  --hairline:rgba(33,29,24,0.12);
  --accent:#FF2247;       /* eyebrows, active nav, tags, hovers, CTAs */
  --dark-text:#FAF7F1;
  --dark-muted:#C7BFB2;
  --dark-muted-2:#8A8071;
  --dark-hairline:rgba(250,247,241,0.15);
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ===================================================================
   BASE  (mirrors the inline <style> blocks in the comps)
   =================================================================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--paper); scroll-behavior:smooth; }
body{ color:var(--ink); font-family:var(--serif); min-height:100vh; }
::selection{ background:var(--accent); color:#fff; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; }

/* ===================================================================
   HOVER UTILITIES
   The static comps used a `style-hover="..."` attribute handled by the
   design-tool runtime (support.js), which the WP build does not load.
   These classes reproduce each hover state with real CSS.
   =================================================================== */
.hov-accent{ transition:color .15s ease; }
.hov-accent:hover{ color:var(--accent); }

.hov-bg-accent{ transition:background .15s ease; }
.hov-bg-accent:hover{ background:var(--accent) !important; }

.hov-tint{ transition:background .15s ease; }
.hov-tint:hover{ background:rgba(33,29,24,0.03); }

.hov-border-accent{ transition:border-color .15s ease, color .15s ease; }
.hov-border-accent:hover{ border-color:var(--accent); color:var(--accent); }

.hov-border-accent-only{ transition:border-color .15s ease; }
.hov-border-accent-only:hover{ border-color:var(--accent); }

.hov-ink{ transition:color .15s ease; }
.hov-ink:hover{ color:var(--ink); }

.hov-invert{ transition:background .15s ease, color .15s ease; }
.hov-invert:hover{ background:var(--ink); color:var(--paper); }

/* ===================================================================
   WORDPRESS CORE CLASSES
   Minimal styling so wp_head / the block editor / alignments behave
   inside the 680px article column.
   =================================================================== */
.alignleft{ float:left; margin:6px 24px 16px 0; }
.alignright{ float:right; margin:6px 0 16px 24px; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text,.wp-element-caption{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted-3); margin-top:10px;
}
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
}
.sticky,.gallery-caption,.bypostauthor{}

/* Article body: let WP content inherit the editorial type ramp.
   Applied via .sh-article-body wrapper in single.php. */
.sh-article-body p{ margin:0 0 26px; }
.sh-article-body h2{
  font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.2;
  letter-spacing:-0.01em; margin:44px 0 20px;
}
.sh-article-body h3{
  font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.25;
  margin:36px 0 16px;
}
.sh-article-body img{ border-radius:4px; }
.sh-article-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.sh-article-body blockquote{
  margin:44px 0; padding:8px 0 8px 28px; border-left:3px solid var(--accent);
}
.sh-article-body blockquote p{
  font-family:var(--serif); font-weight:400; font-style:italic; font-size:30px;
  line-height:1.3; color:var(--ink); margin:0;
}
.sh-article-body ul,.sh-article-body ol{ margin:0 0 26px; padding-left:1.3em; }
.sh-article-body li{ margin:0 0 10px; }

/* Drop cap on the first paragraph of an article (matches the comp). */
.sh-article-body > p:first-of-type::first-letter{
  float:left; font-family:var(--serif); font-weight:500; font-size:86px;
  line-height:0.78; padding:6px 14px 0 0; color:var(--accent);
}

/* ===================================================================
   DIRECTORY GUIDE  (template-directory-guide.php)
   Restyles an existing long-form A–Z guide page in place: <h2> letter
   headers, <h3> entry names, <p> descriptions. Content is untouched.
   =================================================================== */
.sh-guide{ max-width:1200px; margin:0 auto; padding:8px 40px 0; font-family:var(--serif); color:var(--ink-body); }

/* Letter section headers */
.sh-guide h2{
  font-family:var(--serif); font-weight:400; font-size:44px; line-height:1;
  letter-spacing:-0.01em; margin:52px 0 20px; padding-bottom:12px;
  border-bottom:2px solid var(--ink); scroll-margin-top:120px;
}
.sh-guide h2 a{ color:inherit; }

/* Entry names */
.sh-guide h3{
  font-family:var(--serif); font-weight:500; font-size:23px; line-height:1.25;
  margin:0; padding:22px 0 7px; border-top:1px solid rgba(33,29,24,0.1);
  scroll-margin-top:120px;
}
.sh-guide h3 a{ color:inherit; transition:color .15s ease; }
.sh-guide h3 a:hover{ color:var(--accent); }

/* Entry descriptions + intro copy */
.sh-guide p{
  font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--muted-1);
  margin:0 0 20px; max-width:760px;
}
.sh-guide p a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* Intro block: the lead paragraphs before the first letter read larger */
.sh-guide > p:first-of-type{ font-size:20px; color:var(--ink-body); max-width:720px; }

/* The inline "Jump to:" letter line is redundant with the sticky bar — mute it */
.sh-guide hr{ border:0; border-top:1px solid var(--hairline); margin:0; opacity:0; height:0; }

/* Lists, if any entries use them */
.sh-guide ul,.sh-guide ol{ margin:0 0 20px; padding-left:1.2em; max-width:760px; }
.sh-guide li{ margin:0 0 8px; font-size:17px; color:var(--muted-1); }

@media (max-width: 640px){
  .sh-guide h2{ font-size:34px; }
}

/* ===================================================================
   RESPONSIVE  (the comps were desktop-only; these are additive guards
   so the site does not break on tablet/phone. Desktop is unchanged.)
   =================================================================== */
@media (max-width: 980px){
  .sh-grid-2,.sh-grid-3,.sh-grid-4,.sh-archive-body,.sh-hero,.sh-brand-header{
    grid-template-columns:1fr !important;
  }
  .sh-nav-links{ display:none !important; }
}
@media (max-width: 640px){
  .sh-h1{ font-size:40px !important; }
  .sh-pad{ padding-left:22px !important; padding-right:22px !important; }
}