/* ================================================================
   Typography System: "The Human Signal"
   Contrast layer for Dark Constructivism imagery

   Three typefaces:
     Cormorant Garamond — display/editorial voice (serif)
     Source Sans 3      — body/UI workhorse (sans)
     IBM Plex Mono      — code/AI/technical (mono)

   Loaded AFTER styles.css to override Bootstrap + Clean Blog base.
   ================================================================ */

/* ── Design Tokens ─────────────────────────────────────────────── */

:root {
  /* ── Font Stacks ──────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Text Colors — warm stone tones ───────────────────────── */
  /**umb_swatch:Primary text — warm stone*/
  --text-primary: #1C1917;
  /**umb_swatch:Secondary text — muted stone*/
  --text-secondary: #57534E;
  /**umb_swatch:Tertiary text — softest stone*/
  --text-tertiary: #78716C;
  /**umb_swatch:Text on dark surfaces*/
  --text-on-dark: #F0EDE8;
  /**umb_swatch:Secondary text on dark*/
  --text-on-dark-secondary: #A8A29E;

  /* ── Surface Palette ──────────────────────────────────────── */
  /**umb_swatch:Primary surface — page background*/
  --surface-primary: #FFFCF9;
  /**umb_swatch:Secondary surface — cards*/
  --surface-secondary: #F5F0EB;
  /**umb_swatch:Tertiary surface — subtle wells*/
  --surface-tertiary: #EDE8E3;
  /**umb_swatch:Dark surface — masthead / on-dark sections*/
  --surface-dark: #1A1A1E;
  /**umb_swatch:Elevated dark surface*/
  --surface-dark-elevated: #252530;
  --surface-overlay: rgba(26, 26, 30, 0.6);

  /* ── Accent Palette ───────────────────────────────────────── */
  /**umb_swatch:Primary action / signal red*/
  --accent-primary: #C23D2E;
  /**umb_swatch:Primary action — hover*/
  --accent-primary-hover: #A83428;
  --accent-primary-subtle: rgba(194, 61, 46, 0.08);
  --accent-primary-light: #E8ADA7;
  /**umb_swatch:Secondary accent — warm bronze*/
  --accent-secondary: #8B6B4A;
  --accent-secondary-hover: #6E5339;
  /**umb_swatch:Tertiary accent — slate teal*/
  --accent-tertiary: #4A6B6E;

  /* ── Semantic Status ──────────────────────────────────────── */
  /**umb_swatch:Status — success*/
  --status-success: #3D7A4A;
  /**umb_swatch:Status — warning*/
  --status-warning: #B8860B;
  /**umb_swatch:Status — error*/
  --status-error: #C23D2E;
  /**umb_swatch:Status — info*/
  --status-info: #4A6B6E;

  /* ── Border & Divider Tones ───────────────────────────────── */
  /**umb_swatch:Border — light divider*/
  --border-light: #E0DAD4;
  /**umb_swatch:Border — medium*/
  --border-medium: #C4BCB4;
  /**umb_swatch:Border — dark divider*/
  --border-dark: #3A3A42;
  --border-accent: var(--accent-primary);

  /* ── Spacing Scale (tied to 18px base) ────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  /* ── Easing Tokens ────────────────────────────────────────── */
  --ease-micro: 150ms ease;
  --ease-standard: 250ms ease-out;
  --ease-emphasis: 350ms ease-out;

  /* ── Override Bootstrap body defaults ──────────────────────── */
  --bs-body-color: #1C1917;
  --bs-body-bg: #FFFCF9;
  --bs-body-line-height: 1.6;
  --bs-body-font-family: var(--font-body);

  /* ── Override Bootstrap palette with design system ─────────── */
  --bs-primary: #C23D2E;
  --bs-primary-rgb: 194, 61, 46;
  --bs-teal: #4A6B6E;
  --bs-gray-100: #F5F0EB;
  --bs-gray-200: #EDE8E3;
  --bs-gray-300: #E0DAD4;
  --bs-light: #F5F0EB;
  --bs-dark: #1A1A1E;
  --bs-dark-rgb: 26, 26, 30;

  /* ── Replace inherited link colors ────────────────────────── */
  --site-link-color: #8B6B4A;
  --site-link-hover-color: #6E5339;
}

/* ── Base ───────────────────────────────────────────────────────── */

body {
  color: var(--text-primary);
  background-color: var(--surface-primary);
  line-height: 1.6;
}

/* ── Links ─────────────────────────────────────────────────────── */
/* Every link gets a non-color identifier (underline) per WCAG 1.4.1.
   Underlines are refined with thickness, offset, and skip-ink for
   a clean look that doesn't fight the typographic hierarchy.        */

a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: auto;
  text-decoration-color: currentColor;
  transition: color var(--ease-micro), text-decoration-color var(--ease-micro), text-decoration-thickness var(--ease-micro);
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  text-decoration: none;
}

/* --- Title/heading links (post titles, card titles) ------------- */
/* Standalone interactive elements — a faded underline identifies   */
/* them without dominating the display typography.                  */

.post-preview > a {
  text-decoration: none;
}

.post-preview > a > .post-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.06em;
  text-decoration-color: rgba(139, 107, 74, 0.4);
  text-decoration-skip-ink: auto;
}

.post-preview > a:hover > .post-title,
.post-preview > a:focus-visible > .post-title {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.article-grid-card .card-title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.04em;
  text-decoration-color: rgba(139, 107, 74, 0.4);
}

.article-grid-card .card-title a:hover,
.article-grid-card .card-title a:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Author card "Read more" link */
.card .card-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* --- Links on dark backgrounds (masthead, on-dark) -------------- */
/* Must be distinguishable from surrounding light text.             */

header.masthead a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(240, 237, 232, 0.5);
}

header.masthead a:hover {
  text-decoration-color: var(--text-on-dark);
  text-decoration-thickness: 2px;
}

header.masthead a:focus-visible {
  outline-color: var(--text-on-dark);
}

.on-dark a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(240, 237, 232, 0.5);
}

.on-dark a:hover {
  text-decoration-color: var(--text-on-dark);
  text-decoration-thickness: 2px;
}

.on-dark a:focus-visible {
  outline-color: var(--text-on-dark);
}

/* --- Navigation links — context provides identification --------- */
/* Nav bars, section nav, pagination, breadcrumbs are clearly       */
/* navigational UI. Underlines are not needed and would add noise.  */

#mainNav a,
.section-nav a,
.pagination a,
.breadcrumb a,
.navbar-brand {
  text-decoration: none;
}

#mainNav a:hover,
.section-nav a:hover {
  text-decoration: none;
}

#mainNav a:focus-visible,
.section-nav a:focus-visible,
.pagination a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration: none;
}

/* Footer nav — border-bottom already serves as non-color indicator */
.site-footer .footer-nav a {
  text-decoration: none;
}

/* --- Button links — no underline -------------------------------- */

.btn,
.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}

/* --- Badge/tag links — no underline ----------------------------- */

.badge a,
a.badge {
  text-decoration: none;
}

/* ── Headings ──────────────────────────────────────────────────── */

/* Display tier: serif voice */
h1, .h1, h2, .h2 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

h1, .h1 {
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}

h2, .h2 {
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
}

/* Structural tier: sans voice */
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.3;
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.35;
  letter-spacing: 0.015em;
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

/* ── Overline Utility ──────────────────────────────────────────── */
/* Uppercase small-text label — use on <span>, <p>, <div> etc. */

.overline {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ── Body & Editorial ──────────────────────────────────────────── */

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.55;
}

blockquote,
.blockquote {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-primary);
  border-left: 3px solid var(--text-secondary);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

.blockquote-footer {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: normal;
}

.pull-quote {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 3rem auto;
  max-width: 36em;
}

.caption {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ── Article Meta ──────────────────────────────────────────────── */

.post-meta,
.article-meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

/* ── Code ───────────────────────────────────────────────────────── */

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
}

pre code {
  font-family: var(--font-mono);
}

kbd {
  font-family: var(--font-mono);
}

/* ── Rich text / Markdown ─────────────────────────────────────── */

/* TinyMCE and Markdig both wrap single-line <li> content in a <p>,
   which inherits the global paragraph margins and creates extra
   space inside list items. :only-child collapses that case to look
   like inline text while leaving multi-paragraph list items
   (with their natural spacing) alone. */
.richtext li > p:only-child,
.markdown-content li > p:only-child {
  margin: 0;
}

/* ── UI: Navigation ────────────────────────────────────────────── */

#mainNav {
  font-family: var(--font-body);
}

#mainNav .navbar-brand {
  font-family: var(--font-body);
  font-weight: 600;
}

#mainNav .navbar-toggler {
  font-family: var(--font-body);
}

#mainNav .navbar-nav > li.nav-item > a.nav-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── UI: Buttons ───────────────────────────────────────────────── */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── UI: Footer ────────────────────────────────────────────────── */

.site-footer .footer-description {
  color: var(--text-on-dark-secondary);
}

.site-footer .footer-nav a {
  font-family: var(--font-body);
  text-transform: uppercase;
}

/* ── Section Heading ───────────────────────────────────────────── */

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── Post Preview / Article List ───────────────────────────────── */

.post-preview > a > .post-title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}

.post-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
}

.post-preview > .post-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Article grid cards */
.article-grid-card .card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
}

.article-grid-card .card-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Author cards */
.card .card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
}

.card .card-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ── Block Author Attribution ──────────────────────────────────── */

.block-author {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
}

/* ── Category Badges ───────────────────────────────────────────── */

.badge {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Badges on dark backgrounds (masthead) */
header.masthead .badge {
  font-size: 0.7rem;
  font-weight: 600;
}

/* ── Masthead / Hero (text on dark imagery) ────────────────────── */

header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
  color: var(--text-on-dark);
}

header.masthead h1,
header.masthead .h1,
header.masthead h2,
header.masthead .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading {
  font-family: var(--font-body);
  font-weight: 300;
}

header.masthead .post-heading .subheading {
  font-family: var(--font-body);
  font-weight: 600;
}

header.masthead .post-heading .meta {
  font-family: var(--font-body);
  color: var(--text-on-dark-secondary);
}

header.masthead .post-heading .meta a {
  color: var(--text-on-dark);
}

/* ── On-Dark Context (CMS-toggled class) ───────────────────────── */
/* Applied via CMS selector when content sits on dark backgrounds  */

.on-dark {
  color: var(--text-on-dark);
}

.on-dark h1, .on-dark .h1,
.on-dark h2, .on-dark .h2 {
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--text-on-dark);
}

.on-dark h3, .on-dark .h3,
.on-dark h4, .on-dark .h4,
.on-dark h5, .on-dark .h5,
.on-dark h6, .on-dark .h6 {
  color: var(--text-on-dark);
}

.on-dark .overline {
  color: var(--text-on-dark-secondary);
}

.on-dark a {
  color: var(--text-on-dark);
}

/* ── Section Rows ──────────────────────────────────────────────── */

.section-row__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.section-row--bg-accent {
  color: var(--text-on-dark);
}

.section-row--bg-accent h1,
.section-row--bg-accent h2,
.section-row--bg-accent h3,
.section-row--bg-accent .section-row__title {
  color: var(--text-on-dark);
}

.section-row--bg-accent .post-meta,
.section-row--bg-accent .block-author {
  color: var(--text-on-dark-secondary);
}

.section-row--bg-accent a {
  color: var(--text-on-dark);
  text-decoration-color: rgba(240, 237, 232, 0.5);
}

.section-row--bg-accent a:hover {
  text-decoration-color: var(--text-on-dark);
}

.section-row--bg-accent a:focus-visible {
  outline-color: var(--text-on-dark);
}

/* ── Post Notes ────────────────────────────────────────────────── */

.post-notes {
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-light);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

/* ── AI-Authored Content ───────────────────────────────────────── */
/* Subtle temperature shift: cooler, more measured, mono-inflected */

.ai-authored {
  letter-spacing: 0.005em;
  border-left: 2px solid var(--text-tertiary);
  padding-left: 1.5rem;
}

.ai-authored h1, .ai-authored .h1,
.ai-authored h2, .ai-authored .h2 {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0;
}

.ai-authored blockquote,
.ai-authored .blockquote {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0;
}

.ai-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* AI-assisted (human-edited) — lighter treatment, no border */
.ai-assisted {
  border-left: none;
  padding-left: 0;
}

.ai-assisted .ai-label {
  font-weight: 400;
  font-size: 0.65rem;
}

/* ── Alert Banner block ────────────────────────────────────────────
   The block uses Bootstrap's .alert + Font Awesome icon. Two issues
   the design system corrects:

     1. The rich-text body's first <p> has top margin (and last <p>
        bottom margin), which inflates the vertical box. With the
        flex `align-items-center` layout the icon then drifts above
        the visible text optical center. Stripping the first/last
        child margins inside .alert-body collapses to text height
        and the icon centers correctly.

     2. The icon inherits the dark-foreground variant of each
        Bootstrap level (e.g. .alert-warning -> #997404), which
        reads as a generic dark glyph. Coloring it with the
        corresponding --status-* token gives each level a more
        distinctly themed visual. */

.alert .alert-body > *:first-child { margin-top: 0; }
.alert .alert-body > *:last-child  { margin-bottom: 0; }

.alert-info    .alert-icon { color: var(--status-info); }
.alert-warning .alert-icon { color: var(--status-warning); }
.alert-danger  .alert-icon { color: var(--status-error); }
.alert-success .alert-icon { color: var(--status-success); }