/*
 * Editorial content layer for WordPress search results and chamber articles.
 * Existing stored copy remains authoritative; this bundle supplies presentation only.
 */

.content-page {
  min-height: 100vh;
  background: var(--color-bg);
}

/* Geometry lives in site.css so every preloader crops the new lockup the
   same way; this bundle contributes only the entrance state. */
#dfw-preloader #pl-logo {
  opacity: 0;
  transform: scale(.9);
  filter: drop-shadow(0 0 2rem rgba(212,175,55,.3));
}

#dfw-preloader #pl-tagline {
  margin: 2rem 1.5rem 0;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.1;
  opacity: 0;
  transform: translateY(.875rem);
}

.content-hero {
  position: relative;
  min-height: clamp(30rem, 62vh, 44rem);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-text-light);
  background:
    radial-gradient(circle at 78% 25%, rgba(212,175,55,.13), transparent 34%),
    linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-3) 74%);
}

.content-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .34;
  background-image:
    linear-gradient(rgba(237,232,224,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,232,224,.025) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}

/* The gold rule lives on the inner container, not the full-width band (N1,
   2026-10-01). On the band it was inset from the viewport edge while the
   title sits in the 90rem container, so above 1440px the rule started left
   of the title and the grid. Now all three share the container edge. */
.content-hero__inner {
  position: relative;
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: clamp(10rem, 18vh, 13rem) var(--page-gutter) clamp(5.5rem, 11vh, 8rem);
}

.content-hero__inner::after {
  position: absolute;
  right: var(--page-gutter);
  bottom: clamp(2rem, 5vh, 4rem);
  left: var(--page-gutter);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--color-gold), rgba(212,175,55,.08) 72%, transparent);
}

/* Compact listing header (N1). Listings (Our News, post archives, search)
   have no header image, so a 558px navy band only pushed the results below
   the fold. Same rhythm as the PMPro header in pmpro.css: clearance for the
   fixed header, a modest title, the rule along the bottom edge. Keep the
   tall .content-hero for a header that carries an image. */
.content-hero--compact {
  min-height: 0;
  align-items: stretch;
}
.content-hero--compact .content-hero__inner {
  padding: calc(72px + 1.75rem) var(--page-gutter) 1.75rem;
}
@media (min-width: 1024px) {
  .content-hero--compact .content-hero__inner { padding-top: calc(117px + 1.75rem); }
}
.content-hero--compact .content-hero__inner::after { bottom: 0; }
.content-hero--compact .content-hero__title {
  max-width: none;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  letter-spacing: -.02em;
  line-height: 1;
}
.content-hero--compact .content-hero__lead {
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.6;
}
.content-surface--listing {
  padding-block: clamp(2rem, 5vh, 3rem) var(--sec-std);
}

.content-hero__meta {
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin: 0 0 1.5rem;
  color: rgba(237,232,224,.68);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.content-hero__meta > * + *::before {
  margin-right: 1.25rem;
  color: var(--color-gold);
  content: "\00B7";
}

.content-hero__title {
  max-width: 16ch;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.6rem, 7.4vw, 7rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .9;
  text-wrap: balance;
}

.content-hero__lead {
  max-width: 46rem;
  margin: 2rem 0 0;
  color: rgba(237,232,224,.76);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.75;
}

.content-surface {
  --color-gold: var(--color-gold-ink);
  position: relative;
  background: var(--color-bg);
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}

.content-article {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.content-featured {
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-warm);
  box-shadow: var(--shadow-paper);
}

.content-featured img {
  width: 100%;
  display: block;
}

.content-body {
  color: #26364a;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.88;
}

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

.content-body :is(h2, h3, h4) {
  margin: 2.4em 0 .75em;
  color: var(--color-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.05;
  text-wrap: balance;
}

.content-body h2 { font-size: clamp(2.35rem, 4vw, 3.8rem); }
.content-body h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.content-body h4 { font-size: clamp(1.55rem, 2.2vw, 2rem); }
.content-body p { margin: 0 0 1.55em; }
.content-body :is(ul, ol) { margin: 0 0 1.7em; padding-left: 1.4em; }
.content-body ul { list-style: square; }
.content-body ol { list-style: decimal; }
.content-body li + li { margin-top: .55em; }

.content-body a {
  color: var(--color-gold-ink);
  font-weight: 500;
  text-decoration-thickness: 1px;
}

.content-body blockquote {
  margin: clamp(2.5rem, 6vw, 5rem) 0;
  border-left: 3px solid var(--color-gold-ink-lg);
  padding: .5rem 0 .5rem clamp(1.5rem, 4vw, 3rem);
  color: var(--color-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.2;
}

.content-body :is(img, video, iframe) { max-width: 100%; }
.content-body img { height: auto; }
.content-body figure { margin: clamp(2rem, 5vw, 4rem) 0; }
.content-body figcaption { margin-top: .75rem; color: var(--color-muted); font-size: .82rem; line-height: 1.5; }
.content-body iframe { width: 100%; min-height: min(32rem, 70vw); border: 0; }

.content-body table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.content-body :is(th, td) { border-bottom: 1px solid var(--color-rule); padding: .8rem 1rem; text-align: left; }
.content-body th { color: var(--color-text); font-weight: 600; }

.content-navigation {
  width: min(100%, 52rem);
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  border-top: 1px solid var(--color-rule);
  padding-top: 2rem;
}

.content-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.content-navigation a {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}

.content-navigation .nav-next { text-align: right; }
.content-navigation .nav-next a { justify-content: flex-end; }

.search-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  width: min(100%, 52rem);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

.search-panel label { min-width: 0; }

.search-panel input {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid rgba(12,27,46,.4);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  padding: .75rem 0;
  outline: 0;
}

.search-panel input:focus { border-color: var(--color-gold-ink); box-shadow: 0 2px 0 var(--color-gold-ink); }

.search-summary {
  width: min(100%, 72rem);
  margin: 0 0 1.5rem;
  color: var(--color-muted);
  font-size: .82rem;
}

/* Search results start at the container edge like every other listing (N1);
   they were centred in a 72rem column, indented from the title. */
.search-results-grid {
  width: min(100%, 72rem);
  margin-inline: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
}

.search-result {
  min-width: 0;
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: rgba(255,255,255,.48);
  transition: background-color .25s ease, transform .25s ease;
}

.search-result__meta {
  margin: 0 0 1.25rem;
  color: var(--color-gold-ink);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.search-result h2 {
  margin: 0;
  color: var(--color-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 3.3vw, 3rem);
  font-weight: 400;
  line-height: 1.02;
  text-wrap: balance;
}

.search-result h2 a { color: inherit; text-decoration: none; }
.search-result__excerpt { margin: 1.35rem 0 0; color: var(--color-muted); line-height: 1.75; }
.search-result__action { min-height: 44px; display: inline-flex; align-items: center; margin-top: 1.5rem; color: var(--color-gold-ink); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

.search-empty {
  width: min(100%, 52rem);
  margin-inline: auto;
  border-left: 3px solid var(--color-gold-ink-lg);
  background: var(--color-bg-warm);
  color: var(--color-text);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 1.05rem;
}

/* .content-pagination removed (N2): pagination is template-parts/pagination.php,
   styled once in site.css. */

/* The stub-footer layout rules that used to live here were removed on
   2026-08-03: the 11-line inline footer they targeted was replaced by
   template-parts/site-footer.php, and forcing `footer nav` to a column
   broke the shared footer's horizontal legal row. Footer layout now
   belongs to site.css only. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (pointer: fine) {
  .search-result:hover { background: #fff; transform: translateY(-2px); }
  .search-result h2 a:hover,
  .search-result__action:hover,
  .content-navigation a:hover { color: var(--color-gold-ink); }
}

@media (max-width: 767px) {
  .content-hero__title { font-size: clamp(3.25rem, 15vw, 5.25rem); }
  .search-panel { grid-template-columns: 1fr; }
  .search-panel button { width: 100%; }
  .search-results-grid { grid-template-columns: 1fr; }
  .content-navigation .nav-links { grid-template-columns: 1fr; }
  .content-navigation .nav-next,
  .content-navigation .nav-next a { text-align: left; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .search-result,
  .content-navigation a { transition: none; }
}

/* ── 404 wayfinding (added 2026-08-03, audit fix H1) ───────────────────────
   Reuses the content-page shell; only the link grid needs new rules. */
.error-404__path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  color: var(--color-gold);
  overflow-wrap: anywhere;
}

.error-404__heading {
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-text);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 300;
  text-align: center;
}

.error-404__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

.error-404__card { background: #fff; }

.error-404__card a {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 100%;
  padding: 1.6rem 1.5rem;
  text-decoration: none;
  transition: background .25s ease;
}

.error-404__label {
  color: var(--color-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
}

.error-404__desc {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.6;
}

@media (pointer: fine) {
  .error-404__card a:hover { background: var(--color-bg-warm); }
  .error-404__card a:hover .error-404__label { color: var(--color-gold-ink); }
}

.error-404__help {
  margin: clamp(2.4rem, 5vw, 3.5rem) auto 0;
  color: var(--color-muted);
  font-size: .95rem;
  text-align: center;
}

.error-404__help a {
  /* min-height keeps these above the 24px WCAG 2.5.8 target floor; they sit in
     <main> so they don't inherit the 44px rule site.css applies inside footer. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-gold-ink);
  text-decoration: underline;
  text-underline-offset: .22em;
}

/* -- "Our News" archive grid (index.php, R4/R5 2026-10-01) ---------------- */
.news-archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 768px) { .news-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .news-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }