/**
 * SPS Media — base styles and shared component classes.
 *
 * Ported from ../spsmedia/frontend/src/app/globals.css (the `.article-content`
 * rules are carried over near-verbatim — they were already plain CSS against
 * the same custom properties this theme now defines in tokens.css, not
 * Tailwind utility classes, so there was nothing framework-specific to
 * translate). The container width (1320px) and padding pattern come from the
 * frontend's actual usage in page.tsx / Header.tsx, since globals.css itself
 * doesn't define a container class — Tailwind utilities did that inline.
 *
 * Breakpoints mirror Tailwind's defaults, which the frontend used unmodified:
 * sm 640px, md 768px, lg 1024px, xl 1280px.
 */

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

* {
  box-sizing: border-box;
}

body {
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-sans);
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* ── Layout container ────────────────────────────────────────────────── */

.site-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1320px;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 640px) {
  .site-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── Section heading (SectionHeading.tsx equivalent) ────────────────────── */

.section-heading {
  display: flex;
  align-items: center;
  gap: 24px;
}

.section-heading__text {
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-brand);
  margin: 0;
}

@media (min-width: 640px) {
  .section-heading__text {
    font-size: var(--text-section);
  }
}

.section-heading__rule {
  height: 1px;
  flex: 1;
  background: rgba(201, 37, 30, 0.7);
}

/* ── Buttons (pill CTAs) ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s;
}

.btn:hover {
  opacity: 0.9;
}

.btn--brand {
  background: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-sans);
}

.btn--gold {
  background: var(--color-brand-gold);
  color: var(--color-brand-gold-ink);
  font-family: var(--font-nav);
  font-weight: 500;
}

.btn--sm {
  height: 28px;
  padding: 0 18px;
  font-size: var(--text-hero-cta);
  white-space: nowrap;
}

.btn--md {
  padding: 16px 24px;
  font-size: var(--text-nav);
}

.btn--lg {
  min-height: 48px;
  padding: 8px 29px;
  font-size: 18px;
}

@media (min-width: 640px) {
  .btn--lg {
    font-size: var(--text-cta);
  }
}

.home-sections {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.home-section__cta {
  display: flex;
  justify-content: center;
}

/* ── Article card, compact/row variant (article-card-compact.php) ────── */

.article-card-compact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 640px) {
  .article-card-compact {
    flex-direction: row;
  }
}

.article-card-compact__image-link {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.article-card-compact__image {
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.05);
  aspect-ratio: 306 / 270;
  max-height: 220px;
}

.article-card-compact--lg .article-card-compact__image {
  aspect-ratio: 510 / 298;
  max-height: none;
}

@media (min-width: 640px) {
  .article-card-compact__image {
    width: 230px;
    max-height: none;
  }
  .article-card-compact--lg .article-card-compact__image {
    width: 340px;
  }
}

@media (min-width: 1024px) {
  .article-card-compact__image {
    width: 306px;
  }
  .article-card-compact--lg .article-card-compact__image {
    width: 510px;
  }
}

.article-card-compact__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-card-compact__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-card-content-gap);
}

.article-card-compact__title-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-card-compact__title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink);
  word-break: break-word;
  margin: 0;
  font-size: 22px;
}

.article-card-compact--lg .article-card-compact__title {
  font-size: 26px;
}

@media (min-width: 640px) {
  .article-card-compact__title {
    font-size: var(--text-card-title);
  }
  .article-card-compact--lg .article-card-compact__title {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .article-card-compact--lg .article-card-compact__title {
    font-size: 38px;
  }
}

.article-card-compact__title a {
  color: inherit;
  text-decoration: none;
}

.article-card-compact__title a:hover {
  color: var(--color-brand);
}

.article-card-compact__read-more {
  font-family: var(--font-sans);
  font-size: var(--text-read-more-link);
  font-weight: 500;
  letter-spacing: var(--text-read-more-link--letter-spacing);
  color: var(--color-brand);
  text-decoration: none;
}

.article-card-compact__read-more:hover {
  text-decoration: underline;
}

/* ── Article row section (divided rows, ArticleRowSection equivalent) ── */

.article-row-list > * + * {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 40px;
  margin-top: 40px;
}

/* ── Featured category section (lg card + stacked compacts) ──────────── */

.featured-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 46px;
}

@media (min-width: 1024px) {
  .featured-category-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.featured-category-grid__secondary {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Opinions grid (2x2 divided) ──────────────────────────────────────── */

.opinions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 64px;
}

@media (min-width: 768px) {
  .opinions-grid {
    grid-template-columns: 1fr 1fr;
  }
  .opinions-grid > *:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding-right: 32px;
  }
  .opinions-grid > *:nth-child(even) {
    padding-left: 32px;
  }
}

/* ── Article grid (3-col, LatestNews equivalent) ──────────────────────── */

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 25px;
}

@media (min-width: 768px) {
  .article-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .article-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.05);
}

.hero__image {
  position: absolute;
  inset: 0;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased up from center (the default 50%): the hero's very wide ~2.8:1
     crop at desktop widths (aspect-ratio 1200/428) cuts a lot out of any
     photo vertically, and a centered crop was cutting straight through
     people's faces in portrait-oriented photos (subject typically sits in
     the upper third, not dead center) — found checking the hero carousel
     on a full desktop viewport. Verified against all current hero photos:
     this keeps faces in frame on portrait shots without visibly harming
     the wider landscape/scene photos (bridge, building, pond), which read
     fine shifted up slightly too. */
  object-position: center 20%;
  display: block;
}

.hero__content {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 24px;
}

@media (min-width: 640px) {
  .hero__content {
    min-height: 400px;
    padding: 38px;
    padding-bottom: 28px;
  }
}

@media (min-width: 1024px) {
  .hero {
    aspect-ratio: 1200 / 428;
  }
  .hero__content {
    min-height: 0;
  }
}

/* 003-hero-carousel-redesign, research.md R2: replaces the old
   .hero__gradient full-image darkening (which uniformly darkened ~85% of
   every hero photo's height to guarantee text contrast) with a panel sized
   to the text itself. This was tested, not assumed: a shrunk version of the
   old gradient was measured against a real bright hero photo and failed
   WCAG AA (1.93:1 where 3:1 is required) because a multi-line headline can
   reach higher than a gradient tuned by eye expects — the exact failure
   mode 002's R13 already hit once, except a carousel has no single fixed
   photo left to hand-tune against. A fixed-opacity panel's contrast against
   fixed-color text depends only on the panel's own opacity, never on
   whatever photo sits behind it — measured at 12-17:1 worst-case across 3
   differently-lit real photos (research.md R2), and it leaves the large
   majority of every photo's area completely undarkened, which is what
   actually delivers "the image clearly visible" per spec.md US2. */
.hero__textpanel {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 640px;
  background: rgba(0, 0, 0, 0.82);
  border-radius: var(--radius-card);
  padding: 20px 24px;
}

.hero__title {
  max-width: 640px;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0;
  font-size: 28px;
}

@media (min-width: 640px) {
  .hero__title {
    font-size: 34px;
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: var(--text-hero);
  }
}

.hero__title a {
  color: inherit;
  text-decoration: none;
}

.hero__title a:hover {
  text-decoration: underline;
}

.hero__cta {
  align-self: flex-start;
}

/* ── Hero carousel (003-hero-carousel-redesign) ──────────────────────── */

.hero-carousel {
  width: 100%;
}

.hero-carousel__track {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.05);
  min-height: 320px;
}

@media (min-width: 640px) {
  .hero-carousel__track {
    min-height: 400px;
  }
}

@media (min-width: 1024px) {
  .hero-carousel__track {
    aspect-ratio: 1200 / 428;
    min-height: 0;
  }
}

/* Each slide also carries the base .hero class for its image/content/title
   styling; these rules override .hero's own position so slides stack in
   the same box instead of flowing one after another (contracts/
   hero-carousel-markup.md). The no-JS/CSS-only default — opacity+visibility
   rather than display — means slide 0 (server-rendered .is-active) is the
   only one visible or interactive with zero JavaScript (spec.md FR-013);
   inactive slides' links are not just invisible but unreachable
   (visibility: hidden removes them from the tab order and from clicks). */
.hero-carousel__slide.hero {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease;
}

.hero-carousel__slide.hero.is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide.hero {
    transition: none;
  }
}

/* [hidden] must win over the display:flex below — author styles otherwise
   override the browser's native `[hidden]{display:none}`, which would leave
   these controls visible-but-dead if JS never runs to remove the attribute
   (contracts/hero-carousel-markup.md: "JS is solely responsible for
   revealing it, so a JS error never leaves visible-but-dead buttons"). */
.hero-carousel__controls[hidden] {
  display: none;
}

.hero-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.hero-carousel__prev,
.hero-carousel__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.hero-carousel__prev:hover,
.hero-carousel__next:hover {
  opacity: 0.85;
}

.hero-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.hero-carousel__dot.is-active {
  background: var(--color-brand);
}

/* ── Promo band (newsletter / support CTA) ────────────────────────────── */

.promo-band {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--radius-card);
  background: var(--color-brand-gold);
  color: var(--color-brand-gold-ink);
  padding: 40px 24px;
}

@media (min-width: 640px) {
  .promo-band {
    padding: 48px 63px;
  }
}

.promo-band__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-band__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  font-size: 28px;
}

@media (min-width: 640px) {
  .promo-band__heading {
    font-size: 38px;
  }
}

.promo-band__subtext {
  max-width: 1045px;
  font-weight: 500;
  margin: 0;
  font-size: 18px;
  line-height: 30px;
}

@media (min-width: 640px) {
  .promo-band__subtext {
    font-size: 24px;
    line-height: 38px;
  }
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .newsletter-form {
    flex-direction: row;
  }
}

.newsletter-form__honeypot {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.newsletter-form__email {
  height: 57px;
  width: 100%;
  border: 2px solid rgba(74, 28, 0, 0.6);
  background: transparent;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  color: var(--color-brand-gold-ink);
  outline: none;
}

.newsletter-form__email::placeholder {
  color: rgba(74, 28, 0, 0.7);
}

.newsletter-form__email:focus {
  border-color: var(--color-brand);
}

@media (min-width: 640px) {
  .newsletter-form__email {
    max-width: 410px;
  }
}

.newsletter-form__submit {
  flex-shrink: 0;
  height: 57px;
  padding: 0 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  cursor: pointer;
}

.newsletter-form__submit:hover {
  opacity: 0.9;
}

.newsletter-form__message {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-brand-gold-ink);
  margin: 0;
}

/* ── Article page (single.php) ────────────────────────────────────────── */

.article-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.article-page__inner {
  margin: 0 auto;
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.article-page__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-page__title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--text-hero--line-height);
  color: var(--color-ink);
  margin: 0;
  font-size: 28px;
}

@media (min-width: 1024px) {
  .article-page__title {
    font-size: var(--text-hero);
  }
}

.article-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.article-page__share-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 44px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: var(--color-brand-gold);
  color: var(--color-brand-gold-ink);
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
}

.article-page__share-button:hover {
  opacity: 0.9;
}

.article-page__image {
  position: relative;
  width: 100%;
  max-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.05);
  aspect-ratio: 16 / 9;
}

@media (min-width: 640px) {
  .article-page__image {
    aspect-ratio: 1320 / 560;
  }
}

.article-page__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-page__deck {
  font-family: var(--font-serif);
  font-size: var(--text-deck);
  line-height: var(--text-deck--line-height);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.article-page__latest-heading {
  font-family: var(--font-serif);
  font-size: var(--text-section);
  line-height: var(--text-section--line-height);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 24px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.article-tags__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-muted);
  text-decoration: none;
}

.article-tags__pill:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* ── Share modal (assets/js/share-modal.js) ───────────────────────────── */

.share-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 16px;
}

.share-modal {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  border-radius: var(--radius-card);
  background: #123c6b;
  color: var(--color-white);
  padding: 32px 24px;
}

@media (min-width: 640px) {
  .share-modal {
    max-width: 480px;
    padding: 40px;
  }
}

.share-modal__close {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
}

.share-modal__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.share-modal__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-right: 24px;
  text-align: center;
}

.share-modal__heading h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  font-size: 24px;
}

@media (min-width: 640px) {
  .share-modal__heading h2 {
    font-size: 28px;
  }
}

.share-modal__heading p {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.share-modal__platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}

@media (min-width: 640px) {
  .share-modal__platforms {
    gap: 24px 32px;
  }
}

.share-modal__platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.share-modal__platform img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  transition: transform 0.15s;
}

@media (min-width: 640px) {
  .share-modal__platform img {
    width: 48px;
    height: 48px;
  }
}

.share-modal__platform:hover img {
  transform: scale(1.1);
}

.share-modal__platform span {
  font-size: 13px;
  white-space: nowrap;
}

.share-modal__copy-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
  background: var(--color-white);
  padding: 12px 16px;
}

.share-modal__copy-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-muted);
}

.share-modal__copy-button {
  flex-shrink: 0;
  border-radius: 50%;
  padding: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-muted);
}

.share-modal__copy-button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-ink);
}

.share-modal__copy-button.is-copied {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-brand);
  white-space: nowrap;
}

/* ── Archive pages (category.php, tag.php, author.php) ────────────────── */

.archive-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.archive-page__breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-muted);
}

.archive-page__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.archive-page__breadcrumb a:hover {
  text-decoration: underline;
}

.archive-page__breadcrumb-sep {
  margin: 0 8px;
}

.archive-page__title {
  font-family: var(--font-serif);
  font-size: var(--text-section);
  line-height: var(--text-section--line-height);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.archive-page__empty {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-muted);
}

.archive-page__pagination {
  display: flex;
  justify-content: center;
}

.archive-page__pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-white);
  padding: 0 28px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
}

.archive-page__pagination a:hover {
  opacity: 0.9;
}

.author-page__header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.author-page__avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.author-page__title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.author-page__bio {
  max-width: 680px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-muted);
  margin: 0;
}

/* ── Search page (search.php) ────────────────────────────────────────── */

.search-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.search-page__title {
  font-family: var(--font-serif);
  font-size: var(--text-section);
  line-height: var(--text-section--line-height);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.search-page__form {
  display: flex;
  max-width: 612px;
  gap: 22px;
}

.search-page__input {
  height: 57px;
  min-width: 0;
  flex: 1;
  border-radius: 0;
  border: 2px solid rgba(74, 28, 0, 0.4);
  background: transparent;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  color: var(--color-ink);
  outline: none;
}

.search-page__input:focus {
  border-color: var(--color-brand);
}

.search-page__submit {
  flex-shrink: 0;
  height: 57px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  cursor: pointer;
}

.search-page__submit:hover {
  opacity: 0.9;
}

/* ── 404 page (inherited from the parent theme's 404.php) ────────────── */

/* The parent theme's default WP core search form button
   (get_search_form()'s .search-submit) fails WCAG AA contrast on this
   install — found by the accessibility audit (task T041/T042). This repo
   doesn't have a rewritten 404.php (template-hierarchy.md left it as a
   "verify during implementation" case, per FR-011); the minimal, correctly-
   scoped fix is overriding just this one button's colors, using the same
   brand button treatment already used everywhere else in this theme. */
.error404 .search-submit {
  background: var(--color-brand);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  cursor: pointer;
}

.error404 .search-submit:hover {
  opacity: 0.9;
}

/* ── Donation page (page-voluntary-service-fee.php) ──────────────────── */

.donation-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.donation-page__title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--text-hero--line-height);
  color: var(--color-ink);
  margin: 0;
  font-size: 28px;
}

@media (min-width: 1024px) {
  .donation-page__title {
    font-size: var(--text-hero);
  }
}

.donation-page__payment {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.donation-page__amounts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.donation-page__amounts-label {
  font-family: var(--font-serif);
  font-size: var(--text-section);
  line-height: var(--text-section--line-height);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.donation-page__amounts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.donation-page__amount-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-white);
  padding: 0 28px;
  font-family: var(--font-nav);
  font-size: var(--text-nav);
  font-weight: 500;
  text-decoration: none;
}

.donation-page__amount-button:hover {
  opacity: 0.9;
}

.donation-page__qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.donation-page__qr-image {
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.donation-page__qr-caption {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-muted);
  margin: 0;
}

/* ── WP post content — sanitized server-side by the theme's the_content ─
   filter (functions.php); same visual rules the frontend applied to its
   own sanitized dangerouslySetInnerHTML output. ─────────────────────────── */

.article-content {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-ink);
  /* WP-authored content can contain long tokens /  -joined runs that
     won't wrap and overflow the viewport on mobile — force them to break. */
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Wide embeds (tables, pre, iframes) scroll inside their own box instead of
   widening the page. */
.article-content table,
.article-content pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.article-content iframe {
  max-width: 100%;
}
.article-content > * + * {
  margin-top: 1.25em;
}
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 1.5em;
}
/* No .article-content h1 rule: the theme's the_content filter strips any
   <h1> from stored content before it reaches the page (FR-012) — the
   template's own real <h1> is the only one that should ever render. */
.article-content h2 {
  font-size: 26px;
}
.article-content h3 {
  font-size: 21px;
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.article-content a {
  color: var(--color-brand);
  text-decoration: underline;
}
.article-content blockquote {
  border-left: 4px solid var(--color-brand);
  padding-left: 1.25em;
  font-style: italic;
  color: var(--color-muted);
}
.article-content ul,
.article-content ol {
  padding-left: 1.5em;
}
.article-content ul {
  list-style: disc;
}
.article-content ol {
  list-style: decimal;
}
.article-content figcaption {
  font-size: 14px;
  color: var(--color-muted);
  text-align: center;
}

/* ── Category / support pills ────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  height: var(--spacing-pill-height);
  padding: 0 var(--spacing-pill-gap);
  font-family: var(--font-sans);
  font-size: var(--text-badge);
  line-height: var(--text-badge--line-height);
}

.pill--category {
  background: var(--color-category);
  color: var(--color-white);
}

/* ── Byline (template-parts/byline.php) ──────────────────────────────── */

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
}

.byline--light {
  color: var(--color-muted);
}

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

.byline__item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.byline__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.byline__link {
  color: inherit;
  text-decoration: none;
}

.byline__link:hover {
  text-decoration: underline;
}

/* ── Article card (template-parts/article-card.php) ──────────────────── */

.article-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.article-card__image-link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.article-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 384 / 253;
  background: rgba(0, 0, 0, 0.05);
}

.article-card--lg .article-card__image {
  aspect-ratio: 588 / 270;
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-content-gap);
  padding-top: 14px;
}

.article-card__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-pill-gap);
}

.article-card__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-title-byline-gap);
}

.article-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--text-card-title--line-height);
  color: var(--color-ink);
  word-break: break-word;
  margin: 0;
  font-size: 22px;
}

.article-card--lg .article-card__title {
  font-size: 26px;
}

@media (min-width: 640px) {
  .article-card__title {
    font-size: var(--text-card-title);
  }
  .article-card--lg .article-card__title {
    font-size: 32px;
  }
}

.article-card__title a {
  color: inherit;
  text-decoration: none;
}

.article-card__title a:hover {
  color: var(--color-brand);
}

.article-card__read-more {
  font-family: var(--font-sans);
  font-size: var(--text-read-more-link);
  font-weight: 500;
  letter-spacing: var(--text-read-more-link--letter-spacing);
  color: var(--color-brand);
  text-decoration: none;
}

.article-card__read-more:hover {
  text-decoration: underline;
}

/* 003-hero-carousel-redesign US3: a subtle, purely-visual response
   confirming the whole card is clickable — not just the title link's
   existing color-change (above). Scoped to @media (hover: hover) so touch
   devices (which report no real hover capability) never get a state stuck
   on after a tap (spec.md US3's touch-device exemption, research.md R9).
   transform/box-shadow only — no property that affects layout, so nothing
   shifts around the card. */
@media (hover: hover) {
  .article-card__image img {
    transition: transform 300ms ease;
  }
  .article-card:hover .article-card__image img {
    transform: scale(1.04);
  }
}

/* :focus-within fires whenever any link inside the card (image or title)
   has keyboard focus — a card-level cue distinct from the hover-only
   treatment above, so keyboard users get their own clear signal. */
.article-card:focus-within {
  box-shadow: 0 0 0 2px var(--color-brand);
  border-radius: var(--radius-card);
}

/* ── Opinion card (template-parts/opinion-card.php) ──────────────────── */

.opinion-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.opinion-card__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.opinion-card__avatar-link {
  flex-shrink: 0;
  display: block;
}

.author-avatar {
  border-radius: 50%;
  object-fit: cover;
  color: #9ca3af;
  background: #e5e7eb;
}

.opinion-card__title-group {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.opinion-card__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
  word-break: break-word;
  margin: 0;
}

.opinion-card__title a {
  color: inherit;
  text-decoration: none;
}

.opinion-card__title a:hover {
  color: var(--color-brand);
}

.opinion-card__excerpt {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.opinion-card__image {
  flex-shrink: 0;
  display: block;
  width: 76px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.05);
}

.opinion-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Same US3 treatment as .article-card above — hover-only scale, distinct
   keyboard focus-within cue. */
@media (hover: hover) {
  .opinion-card__image img {
    transition: transform 300ms ease;
  }
  .opinion-card:hover .opinion-card__image img {
    transform: scale(1.04);
  }
}

.opinion-card:focus-within {
  box-shadow: 0 0 0 2px var(--color-brand);
  border-radius: var(--radius-card);
}

.opinion-card__read-more {
  font-family: var(--font-sans);
  font-size: var(--text-read-more-link);
  font-weight: 500;
  letter-spacing: var(--text-read-more-link--letter-spacing);
  color: var(--color-brand);
  text-decoration: none;
}

.opinion-card__read-more:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .opinion-card__title {
    font-size: 24px;
  }
  .opinion-card__excerpt {
    font-size: 16px;
    line-height: 24px;
  }
  .opinion-card__image {
    width: 120px;
  }
}

@media (min-width: 1024px) {
  .opinion-card__title {
    font-size: 28px;
  }
}

/* ── CTA band (template-parts/cta-band.php) ──────────────────────────── */

.support-cta-bands {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .support-cta-bands {
    flex-direction: row;
    align-items: stretch;
  }
  .support-cta-bands > .cta-band {
    flex: 1;
  }
}

.cta-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  border-radius: var(--radius-card);
  padding: 40px 32px;
}

@media (min-width: 640px) {
  .cta-band {
    padding: 48px 48px;
  }
}

.cta-band--gold {
  background: var(--color-brand-gold);
}

.cta-band--whatsapp {
  background: var(--color-whatsapp-tint);
}

.cta-band__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-band__title {
  font-family: var(--font-serif);
  font-size: var(--text-section);
  line-height: var(--text-section--line-height);
  font-weight: 600;
  margin: 0;
}

.cta-band--gold .cta-band__title {
  color: var(--color-brand-gold-ink);
}

.cta-band--whatsapp .cta-band__title {
  color: var(--color-whatsapp-ink);
}

.cta-band__subtitle {
  max-width: 620px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.cta-band--gold .cta-band__subtitle {
  color: rgba(74, 28, 0, 0.8);
}

.cta-band--whatsapp .cta-band__subtitle {
  color: rgba(11, 66, 40, 0.8);
}

.cta-band__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 0 28px;
  font-weight: 500;
  text-decoration: none;
}

.cta-band__button:hover {
  opacity: 0.9;
}

.cta-band__button--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
  font-family: var(--font-nav);
  font-size: var(--text-nav);
}

.cta-band__button--gold {
  background: var(--color-white);
  color: var(--color-brand-gold-ink);
  font-family: var(--font-nav);
  font-size: var(--text-cta);
}

/* ── Header (header.php) ──────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  color: var(--color-ink);
  padding: 12px 20px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

.site-header {
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--color-white);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-header__logo {
  flex-shrink: 0;
  display: block;
}

.site-header__logo img {
  height: 64px;
  width: auto;
  display: block;
}

@media (min-width: 640px) {
  .site-header__logo img {
    height: 80px;
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: 2px;
}

@media (min-width: 1280px) {
  .desktop-nav {
    display: flex;
  }
}

.desktop-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 10px 6px;
  font-family: var(--font-nav);
  font-size: var(--text-nav);
  color: var(--color-ink);
  text-decoration: none;
}

.desktop-nav__link:hover {
  color: var(--color-brand);
}

.desktop-nav__group {
  position: relative;
}

.desktop-nav__chevron {
  margin-top: 2px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.desktop-nav__group:hover .desktop-nav__chevron,
.desktop-nav__group:focus-within .desktop-nav__chevron {
  transform: rotate(180deg);
}

.desktop-nav__panel {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 30;
  padding-top: 8px;
  transition: opacity 0.15s;
}

.desktop-nav__group:hover .desktop-nav__panel,
.desktop-nav__group:focus-within .desktop-nav__panel {
  visibility: visible;
  opacity: 1;
}

.desktop-nav__panel ul {
  list-style: none;
  margin: 0;
  padding: 8px;
  width: max-content;
  min-width: 224px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--color-white);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.desktop-nav__panel a {
  display: block;
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--font-nav);
  font-size: 17px;
  color: var(--color-ink);
  text-decoration: none;
}

.desktop-nav__panel a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-brand);
}

.site-header__support {
  display: none;
}

@media (min-width: 1320px) {
  .site-header__support {
    display: inline-flex;
  }
}

.site-header__icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-header__icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.site-header__icon-button:hover {
  color: var(--color-brand);
}

.site-header__hamburger {
  display: flex;
}

@media (min-width: 1280px) {
  .site-header__hamburger {
    display: none;
  }
}

/* ── Mobile menu (header.php + assets/js/mobile-menu.js) ─────────────── */

/* Bug found 2026-09-04 while checking the 003 hero carousel on a mobile
   viewport: same class of issue fixed for .hero-carousel__controls (author
   CSS's `display` declarations below otherwise beat the browser's native
   `[hidden]{display:none}` regardless of the `hidden` attribute actually
   being present) — except here it meant the mobile nav drawer rendered
   open, covering the page, on every single mobile page load, closable but
   never actually starting closed. Never caught earlier because every
   mobile screenshot taken so far either used a desktop-width viewport
   (where the >=1280px rule below happens to force it shut with
   `!important`) or deliberately had the drawer toggled open already. */
.mobile-menu-backdrop[hidden],
.mobile-menu[hidden] {
  display: none;
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
}

@media (min-width: 1280px) {
  .mobile-menu-backdrop,
  .mobile-menu {
    display: none !important;
  }
}

.mobile-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 85%;
  max-width: 360px;
  overflow-y: auto;
  background: var(--color-white);
  padding: 16px;
  box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.15);
}

.mobile-menu__close {
  align-self: flex-end;
  margin-bottom: 8px;
}

.mobile-menu__link {
  display: block;
  border-radius: 4px;
  padding: 12px 8px;
  font-family: var(--font-nav);
  font-size: var(--text-nav);
  color: var(--color-ink);
  text-decoration: none;
}

.mobile-menu__link:hover {
  background: rgba(0, 0, 0, 0.05);
}

.mobile-menu__group-row {
  display: flex;
  align-items: stretch;
}

.mobile-menu__link--hub {
  flex: 1;
}

.mobile-menu__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  border-radius: 4px;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mobile-menu__expand:hover {
  background: rgba(0, 0, 0, 0.05);
}

.mobile-menu__expand svg {
  transition: transform 0.15s;
}

.mobile-menu__expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Same [hidden]-override bug as .hero-carousel__controls and .mobile-menu
   above, found by testing this exact toggle interactively: mobile-menu.js
   correctly sets/removes the `hidden` property on collapse/expand, but
   without this rule the `display: flex` below silently wins regardless —
   every category rendered permanently expanded, and clicking a chevron to
   collapse one had no visible effect at all (the chevron itself still
   rotated correctly, since that's driven by `aria-expanded`, not `hidden`,
   making the arrow look "broken" — spinning with no effect on the list). */
.mobile-menu__children[hidden] {
  display: none;
}

.mobile-menu__children {
  list-style: none;
  margin: 0 0 4px 8px;
  padding: 0 0 0 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu__children a {
  display: block;
  border-radius: 4px;
  padding: 10px 8px;
  font-family: var(--font-nav);
  font-size: 16px;
  color: var(--color-muted);
  text-decoration: none;
}

.mobile-menu__children a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-brand);
}

.mobile-menu__support {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-brand-gold);
  color: var(--color-brand-gold-ink);
  padding: 12px 24px;
  font-family: var(--font-nav);
  font-weight: 500;
  text-decoration: none;
}

/* ── Footer (footer.php) ──────────────────────────────────────────────── */

.site-footer {
  background: var(--color-brand-gold);
  color: #26181b;
}

.site-footer a:not(.site-footer__support-button) {
  color: inherit;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.site-footer__row {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 1024px) {
  .site-footer__row {
    flex-direction: row;
    justify-content: space-between;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__logo img {
  height: auto;
  width: 248px;
  max-width: none;
}

@media (min-width: 640px) {
  .site-footer__logo img {
    width: 340px;
  }
}

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  text-decoration: none;
}

.site-footer__contact:hover {
  text-decoration: underline;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

@media (min-width: 1024px) {
  .site-footer__columns {
    gap: 64px;
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-column__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-brand-gold-ink);
  margin: 0;
}

.footer-column__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-column__list a {
  font-size: 18px;
  line-height: 32px;
  text-decoration: none;
}

.footer-column__list a:hover {
  text-decoration: underline;
}

.site-footer__support-card {
  max-width: 384px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--radius-card);
  background: var(--color-brand);
  color: var(--color-white);
  padding: 24px;
}

.site-footer__support-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__support-text h2 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.site-footer__support-text p {
  font-size: 16px;
  line-height: 21px;
  margin: 0;
}

.site-footer__support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-ink);
  padding: 8px 24px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}

.site-footer__support-button:hover {
  opacity: 0.9;
}

.site-footer__copyright {
  text-align: center;
  font-size: 16px;
  margin: 0;
}