/* ═══════════════════════════════════════════════
   SECOND DRAFT — SHARED DESIGN SYSTEM
   averycallahan.co

   This file is referenced by every page on the site.
   Change something here, it changes everywhere.
   ═══════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
    --bg: #F5F0E8;
    --bg-dark: #1A1714;
    --bg-card: #FFFDF8;
    --text: #1A1714;
    --text-on-dark: #F0EBE3;
    --text-dim: #B5AFA8;
    --text-secondary: #5C5650;
    --text-muted: #706B66;
    --accent: #B45A2A;
    --accent-light: #D4825A;
    --accent-hover: #8B4513;
    --rule: #D4CEC4;
    --rule-light: #E6E0D6;
    --display: 'Playfair Display', Georgia, serif;
    --body: Georgia, 'Times New Roman', serif;
    --ui: 'IBM Plex Sans', -apple-system, sans-serif;
    --max: 1100px;
    --col: 640px;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 21px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { font-family: var(--body); color: var(--text); background: var(--bg); line-height: 1.65; overflow-x: hidden; }

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
.hdr { background: var(--bg); padding: 1.75rem 2rem; }
.hdr-in { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--display); font-size: 1.45rem; font-weight: 400; color: var(--text); text-decoration: none; white-space: nowrap; letter-spacing: 0.01em; }
.nav { display: flex; gap: 1.75rem; align-items: center; }
.nav a, .nav button { font-family: var(--ui); font-size: 0.7rem; font-weight: 400; color: var(--text-secondary); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: none; padding: 0; cursor: pointer; transition: color 0.2s; }
.nav a:hover, .nav button:hover { color: var(--text); }
.nav-sub { color: var(--accent) !important; font-weight: 500 !important; }

/* Territory dropdown */
.dd { position: relative; }
.dd-btn::after { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 0.3rem; margin-bottom: 2px; }
.dd-menu { position: absolute; top: calc(100% + 0.75rem); left: 50%; width: 340px; background: var(--bg-card); border: 1px solid var(--rule); box-shadow: 0 12px 32px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px); transition: all 0.2s; z-index: 100; border-radius: 2px; }
.dd:hover .dd-menu,
.dd.open .dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dd-menu::before { content: ''; position: absolute; top: -0.75rem; left: 0; right: 0; height: 0.75rem; }
.dd-menu a { display: block; padding: 1rem 1.5rem 1rem 2rem; text-decoration: none; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--rule-light); transition: background 0.2s; font-size: inherit; color: inherit; }
.dd-menu a:last-child { border-bottom: none; }
.dd-menu a:hover { background: rgba(180,90,42,0.05); }
.dd-menu a strong { font-family: var(--ui); font-size: 0.75rem; font-weight: 500; color: var(--text); display: block; text-transform: none; letter-spacing: 0.01em; line-height: 1.3; margin-bottom: 0.15rem; }
.dd-menu a span { font-family: var(--ui); font-size: 0.58rem; color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; line-height: 1.4; display: block; }

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
.ftr { background: var(--bg); border-top: 1px solid var(--rule); padding: 2rem; }
.ftr-in { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; }
.ftr-in p { font-family: var(--ui); font-size: 0.65rem; color: var(--text-muted); }
.ftr-links { display: flex; gap: 1.5rem; }
.ftr-links a { font-family: var(--ui); font-size: 0.65rem; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.ftr-links a:hover { color: var(--text); }

/* ══════════════════════════════════════
   CONTENT TYPOGRAPHY
   Scoped to .content — used on essays,
   hub pages, spoke content, about, etc.
   ══════════════════════════════════════ */

/* H1 — Page/essay titles */
.content h1 {
    font-family: var(--display);
    font-size: 2.35rem;
    font-weight: 400;
    line-height: 1.18;
    color: var(--text);
    margin-bottom: 0.4rem;
}

/* Subtitle — italic companion to H1 */
.content .subtitle {
    font-family: var(--display);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 1.75rem;
}

/* H2 — Section headings (hub pages, about page) */
.content h2 {
    font-family: var(--display);
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.22;
    color: var(--text);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

/* H3 — Sub-section headings (spoke content, hub sub-sections) */
.content h3 {
    font-family: var(--ui);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    letter-spacing: 0.01em;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
}

/* Body text */
.content p {
    font-family: var(--body);
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--text);
    margin-bottom: 1.1rem;
}

/* Italic */
.content em { font-style: italic; }

/* Bold */
.content strong { font-weight: 700; color: var(--text); }

/* Bold italic */
.content strong em,
.content em strong { font-weight: 700; font-style: italic; }

/* Links inside content */
.content a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(180, 90, 42, 0.3);
    transition: border-color 0.2s;
}
.content a:hover { border-color: var(--accent); }

/* Blockquote */
.content blockquote {
    margin: 1.75rem 0;
    padding: 0 0 0 1.5rem;
    border-left: 3px solid var(--accent);
}
.content blockquote p {
    font-family: var(--display);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* Horizontal rule — coda divider */
.content hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 2.5rem 0;
}

/* Unordered list */
.content ul {
    margin: 1rem 0 1.25rem 0;
    padding-left: 1.25rem;
    list-style: none;
}
.content ul li {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
}
.content ul li::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* Ordered list */
.content ol {
    margin: 1rem 0 1.25rem 0;
    padding-left: 1.25rem;
    list-style: none;
    counter-reset: item;
}
.content ol li {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
    counter-increment: item;
}
.content ol li::before {
    content: counter(item) ".";
    position: absolute;
    left: -1.25rem;
    font-family: var(--ui);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent);
    top: 0.15rem;
}

/* ══════════════════════════════════════
   DARK SECTION OVERRIDES
   Add class .dark to any section
   ══════════════════════════════════════ */
.dark { background: var(--bg-dark); }
.dark .content h1 { color: var(--text-on-dark); }
.dark .content .subtitle { color: var(--text-dim); }
.dark .content h2 { color: var(--text-on-dark); }
.dark .content h3 { color: var(--text-on-dark); }
.dark .content p { color: var(--text-dim); }
.dark .content strong { color: var(--text-on-dark); }
.dark .content blockquote p { color: var(--text-dim); }
.dark .content hr { border-color: rgba(255,255,255,0.12); }
.dark .content ul li,
.dark .content ol li { color: var(--text-dim); }
.dark .content a { color: var(--accent-light); border-color: rgba(212, 130, 90, 0.3); }

/* ══════════════════════════════════════
   SUBSCRIBE FORM COMPONENT
   Reusable across all pages
   ══════════════════════════════════════ */
.sub-form { display: flex; gap: 0.5rem; }
.sub-form input { flex: 1; font-family: var(--ui); font-size: 0.85rem; padding: 0.75rem 0.9rem; border: 1px solid var(--rule); background: var(--bg-card); color: var(--text); outline: none; }
.sub-form input::placeholder { color: var(--text-muted); }
.sub-form input:focus { border-color: var(--accent); }
.sub-form button { font-family: var(--ui); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.75rem 1.75rem; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: background 0.2s; }
.sub-form button:hover { background: var(--accent-hover); }
.sub-fine { font-family: var(--ui); font-size: 0.65rem; color: var(--text-muted); margin-top: 0.6rem; }

/* ══════════════════════════════════════
   SECTION LABEL
   Small uppercase label above sections
   ══════════════════════════════════════ */
.slabel { font-family: var(--ui); font-size: 0.65rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.75rem; }

/* ══════════════════════════════════════
   UTILITY — READING COLUMN
   Centers content at 640px max-width
   ══════════════════════════════════════ */
.reading-col { max-width: var(--col); margin: 0 auto; padding: 0 2rem; }

/* ══════════════════════════════════════
   RESPONSIVE — TABLET
   ══════════════════════════════════════ */
@media (max-width: 900px) {
    .sub-form { flex-direction: column; }
    .sub-form button { width: 100%; }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE
   ══════════════════════════════════════ */
@media (max-width: 600px) {
    .hdr { padding: 1.25rem 1.5rem; }
    .hdr-in { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .nav { gap: 1.5rem; }
    .nav-sub { display: none; }
    .reading-col { padding: 0 1.5rem; }
    .ftr { padding: 1.5rem; }
    .ftr-in { flex-direction: column; gap: 0.5rem; }
    .content h1 { font-size: 1.9rem; }
    .content h2 { font-size: 1.45rem; }
    .dd-menu { position: fixed; left: 1rem; right: 1rem; width: auto; transform: translateX(0); }
    .dd:hover .dd-menu,
    .dd.open .dd-menu { transform: translateX(0); }
}