/* ==========================================================================
   theme.css — everydaybonds paint layer
   --------------------------------------------------------------------------
   Colors, typography, and accent flourishes ONLY.
   Grid / flex / structural layout lives in layout.css (magazine lib).
   Link order: base.css → theme.css → layout.css
   ========================================================================== */

/* --- Web fonts ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

/* --- Color + font contract ----------------------------------------------- */
:root {
  /* Palette — exactly the 4 brand HEX (DS-2) */
  --color-bg:      #F4F6F8; /* Cool Linen — page background (light scheme) */
  --color-text:    #1B2432; /* Deep Navy Ink — body text */
  --color-accent:  #2E7D8C; /* Teal Depth — links, CTAs, nav rule, card lead */
  --color-surface: #E8A44A; /* Amber Thread — raised card/badge surfaces */
  --color-border:  #1B2432; /* Deep Navy Ink — hairlines, dividers, borders */

  /* Typography roles */
  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

/* --- Page-level paint ---------------------------------------------------- */
.page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
}

/* --- Header & nav -------------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  /* layout.css supplies the 3px accent border-block-end via --color-accent */
}

.nav-brand {
  color: var(--color-text);
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
}
.nav-brand:hover {
  color: var(--color-accent);
}

.nav-links a {
  color: var(--color-text);
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-accent);
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background: var(--color-bg);
  border-block-end: 1px solid var(--color-border);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--color-text);
  font-size: var(--text-3xl);
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--text-4xl);
  }
}

.hero__lead {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-weight: 300;
  font-style: italic;
}

/* --- Section & page titles ----------------------------------------------- */
.section-title {
  font-family: var(--font-sans);
  color: var(--color-text);
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
}

/* Amber accent rule beneath section titles */
.section-title::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--color-surface); /* Amber Thread */
  margin-block-start: var(--space-2xs);
}

.page-title {
  font-family: var(--font-display);
  color: var(--color-text);
  font-size: var(--text-3xl);
}

@media (min-width: 768px) {
  .page-title {
    font-size: var(--text-4xl);
  }
}

/* --- Article cards ------------------------------------------------------- */
.article-card {
  background: var(--color-bg);
  border-color: var(--color-border);
  transition: transform 0.25s ease, border-color 0.2s ease;
}

.article-card:hover {
  border-color: var(--color-accent);
}

/* Lead card (first child) — layout.css makes it full-width */
.article-card:first-child {
  background: var(--color-accent);  /* Teal Depth */
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.article-card:first-child .article-card__link {
  color: var(--color-bg);
}

.article-card:first-child .article-card__link:hover {
  color: var(--color-surface); /* Amber Thread on hover */
}

/* Secondary accent on even secondary cards */
.article-card:nth-child(2) {
  border-inline-start: 4px solid var(--color-surface); /* Amber Thread accent */
}

.article-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: inherit;
}

.article-card__link {
  color: var(--color-text);
  font-family: var(--font-display);
}

.article-card__link:hover {
  color: var(--color-accent);
}

/* --- Articles list page -------------------------------------------------- */
.articles-index {
  padding-block: var(--space-2xl) var(--space-xl);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .articles-index {
    padding-inline: var(--space-xl);
  }
}

.article-list__item {
  border-inline-start-color: var(--color-accent); /* Teal Depth */
  transition: border-color 0.2s ease;
}

.article-list__item:hover {
  border-inline-start-color: var(--color-surface); /* Amber Thread on hover */
}

.article-list__link {
  color: var(--color-text);
  font-family: var(--font-display);
  transition: color 0.2s ease;
}

.article-list__link:hover {
  color: var(--color-accent);
}

/* --- Article prose ------------------------------------------------------- */
/* DS-6: override too-large base h1 for long-form reading column */
.prose h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .prose h1 {
    font-size: var(--text-3xl);
  }
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  padding-block-start: var(--space-sm);
  border-block-start: 2px solid var(--color-surface); /* Amber accent rule above h2 */
}

.prose h3,
.prose h4,
.prose h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-text);
}

.prose h3 {
  font-size: var(--text-xl);
}

.prose p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-text);
}

.prose a {
  color: var(--color-accent);
  text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.prose a:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-surface);
}

/* Blockquotes — Amber Thread treatment */
.prose blockquote {
  border-inline-start: 4px solid var(--color-surface);
  padding-inline-start: var(--space-md);
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text);
  background: transparent;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg);
  /* layout.css supplies 3px accent border-block-start via --color-accent */
}

.footer-copy {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  opacity: 0.75;
}

/* --- Micro-interactions -------------------------------------------------- */
/* 1. Article card lift on hover (layout.css sets translateY; we refine shadow) */
.article-card:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* 2. Slow cinematic reveal on prose sections */
.prose {
  animation: prose-reveal 0.6s ease both;
}

@keyframes prose-reveal {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prose {
    animation: none;
  }
  .article-card {
    transition: none;
  }
}

/* --- Sections padding ---------------------------------------------------- */
.articles-section {
  padding-block: var(--space-xl) var(--space-2xl);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .articles-section {
    padding-inline: var(--space-xl);
  }
}