/* =============================================================================
   Layout — Container, layout matrix, grid system, content areas

   The layout matrix is driven by a body class emitted from the Customizer:
     .layout-full-width | .layout-centered | .layout-left-sidebar
     .layout-right-sidebar | .layout-double-sidebar

   DOM order is always content-first (accessibility + SEO); visual column
   placement is done with CSS grid `order`, which also flips correctly in RTL
   because grid columns follow the writing direction.
   ============================================================================= */

/* ── Container ────────────────────────────────────────────────────────────── */
.content-area__inner,
.site-footer__inner {
  max-width: var(--flavor-wide-w, 1200px);
  margin-inline: auto;
  padding-inline: var(--flavor-pad-x, 24px);
}

.content-area {
  padding-block: var(--flavor-sp-2xl);
}

.content-area--front {
  padding-block: 0;
}

@media (max-width: 767px) {
  .content-area__inner,
  .site-footer__inner {
    padding-inline: var(--flavor-pad-x-mob, 16px);
  }
}

/* Full-width entry content (front page block layouts) */
.entry-content--full-width {
  max-width: none;
  padding-inline: 0;
}

.entry-content--full-width > .alignfull {
  margin-inline-start: 0;
  width: 100%;
}

/* Constrained content for articles */
.article-single__content,
.page-single__content {
  max-width: var(--flavor-content-w, 720px);
  margin-inline: auto;
}

/* ── Post Grid — responsive card layout ───────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--flavor-sp-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout Matrix
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared grid shell for every sidebar-bearing layout */
@media (min-width: 1024px) {

  .layout-right-sidebar .content-area--single,
  .layout-right-sidebar .content-area--archive,
  .layout-right-sidebar .content-area--search,
  .layout-left-sidebar .content-area--single,
  .layout-left-sidebar .content-area--archive,
  .layout-left-sidebar .content-area--search,
  .layout-double-sidebar .content-area--single,
  .layout-double-sidebar .content-area--archive,
  .layout-double-sidebar .content-area--search {
    display: grid;
    gap: var(--flavor-layout-gap, 48px);
    max-width: var(--flavor-wide-w, 1200px);
    margin-inline: auto;
    padding-inline: var(--flavor-pad-x, 24px);
    align-items: start;
  }

  .layout-right-sidebar .content-area--single > .content-area__inner,
  .layout-right-sidebar .content-area--archive > .content-area__inner,
  .layout-right-sidebar .content-area--search > .content-area__inner,
  .layout-left-sidebar .content-area--single > .content-area__inner,
  .layout-left-sidebar .content-area--archive > .content-area__inner,
  .layout-left-sidebar .content-area--search > .content-area__inner,
  .layout-double-sidebar .content-area--single > .content-area__inner,
  .layout-double-sidebar .content-area--archive > .content-area__inner,
  .layout-double-sidebar .content-area--search > .content-area__inner {
    max-width: none;
    padding-inline: 0;
    min-width: 0; /* prevents long words / wide tables from blowing out the grid */
  }

  /* ── Right sidebar: content | sidebar ─────────────────────────────────── */
  .layout-right-sidebar .content-area--single,
  .layout-right-sidebar .content-area--archive,
  .layout-right-sidebar .content-area--search {
    grid-template-columns: minmax(0, 1fr) var(--flavor-sidebar-w, 300px);
  }

  .layout-right-sidebar .content-area__inner { order: 1; }
  .layout-right-sidebar .site-sidebar--primary { order: 2; }

  /* ── Left sidebar: sidebar | content ──────────────────────────────────── */
  .layout-left-sidebar .content-area--single,
  .layout-left-sidebar .content-area--archive,
  .layout-left-sidebar .content-area--search {
    grid-template-columns: var(--flavor-sidebar-w, 300px) minmax(0, 1fr);
  }

  .layout-left-sidebar .site-sidebar--primary { order: 1; }
  .layout-left-sidebar .content-area__inner { order: 2; }

  /* ── Double sidebar: sidebar | content | sidebar ──────────────────────── */
  .layout-double-sidebar .content-area--single,
  .layout-double-sidebar .content-area--archive,
  .layout-double-sidebar .content-area--search {
    grid-template-columns:
      var(--flavor-sidebar-w, 300px)
      minmax(0, 1fr)
      var(--flavor-sidebar-w, 300px);
  }

  .layout-double-sidebar .site-sidebar--primary { order: 1; }
  .layout-double-sidebar .content-area__inner { order: 2; }
  .layout-double-sidebar .site-sidebar--secondary { order: 3; }

  /* Fallback: no layout class present (e.g. a custom template) */
  body:not([class*="layout-"]) .content-area--single,
  body:not([class*="layout-"]) .content-area--archive,
  body:not([class*="layout-"]) .content-area--search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--flavor-sidebar-w, 300px);
    gap: var(--flavor-layout-gap, 48px);
    max-width: var(--flavor-wide-w, 1200px);
    margin-inline: auto;
    padding-inline: var(--flavor-pad-x, 24px);
  }
}

/* ── Full width — no sidebar, wide canvas ─────────────────────────────────── */
.layout-full-width .content-area--single,
.layout-full-width .content-area--archive,
.layout-full-width .content-area--search {
  display: block;
  max-width: var(--flavor-wide-w, 1200px);
  margin-inline: auto;
  padding-inline: var(--flavor-pad-x, 24px);
}

.layout-full-width .content-area__inner {
  max-width: none;
  padding-inline: 0;
}

.layout-full-width .article-single__content,
.layout-full-width .page-single__content {
  max-width: none;
}

.layout-full-width .site-sidebar {
  display: none;
}

/* ── Centered — narrow compact column, no sidebar ─────────────────────────── */
.layout-centered .content-area--single,
.layout-centered .content-area--archive,
.layout-centered .content-area--search {
  display: block;
  max-width: var(--flavor-content-w, 720px);
  margin-inline: auto;
  padding-inline: var(--flavor-pad-x, 24px);
}

.layout-centered .content-area__inner {
  max-width: none;
  padding-inline: 0;
}

.layout-centered .site-sidebar {
  display: none;
}

/* ── Mobile: every layout collapses to a single stacked column ────────────── */
@media (max-width: 1023px) {
  .content-area--single,
  .content-area--archive,
  .content-area--search {
    display: block;
    padding-inline: 0;
  }

  .site-sidebar {
    margin-block-start: var(--flavor-sp-2xl);
    padding-inline: var(--flavor-pad-x-mob, 16px);
  }
}

/* ── Page Header (archives, search) ───────────────────────────────────────── */
.page-header {
  margin-block-end: var(--flavor-sp-xl);
}

.page-header__title {
  font-size: var(--flavor-h1, 2.5rem);
}

.page-header__desc {
  color: var(--flavor-text-muted);
  margin-block-start: var(--flavor-sp-sm);
}

.page-header__query {
  color: var(--flavor-primary);
}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.error-404 {
  text-align: center;
  padding: var(--flavor-sp-3xl) var(--flavor-sp-md);
}

.error-404__code {
  display: block;
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: var(--flavor-border);
  margin-block-end: var(--flavor-sp-md);
}

.error-404__title {
  margin-block-end: var(--flavor-sp-md);
}

.error-404__desc {
  color: var(--flavor-text-muted);
  max-width: 480px;
  margin-inline: auto;
  margin-block-end: var(--flavor-sp-xl);
}

.error-404__search {
  max-width: 400px;
  margin-inline: auto;
  margin-block-end: var(--flavor-sp-lg);
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.site-sidebar {
  padding-block-start: var(--flavor-sp-md);
  min-width: 0;
}

.widget + .widget {
  margin-block-start: var(--flavor-sp-xl);
}

.widget__title {
  font-size: var(--flavor-h5, 1.125rem);
  margin-block-end: var(--flavor-sp-md);
  padding-block-end: var(--flavor-sp-sm);
  border-bottom: 2px solid var(--flavor-primary);
}

/* ── Ad Slots ─────────────────────────────────────────────────────────────── */
.ad-slot {
  text-align: center;
  margin-block: var(--flavor-sp-lg);
  min-height: 90px;
}

.ad-slot--header {
  background: var(--flavor-bg-alt);
  padding: var(--flavor-sp-sm);
}

.ad-slot--in-article {
  margin-block: var(--flavor-sp-xl);
  padding: var(--flavor-sp-md);
  background: var(--flavor-bg-alt);
  border-radius: var(--flavor-radius);
}