/* ===========================================================================
   SSTGC — content layer
   File: assets/css/content.css   (loads after components.css)

   The problem this solves: interior pages are authored in the WordPress editor
   as flat paragraphs and bullet lists. the_content() outputs exactly that, so
   a page listing twenty trustees renders as one long thin column of names — no
   theme can infer that those names are people.

   Two responses. This file is the first: read the SHAPE of the markup and
   respond to it. A list where every item is short is a roster and belongs in
   columns; a list of long items is prose and belongs in one. :has() and
   sibling selectors can tell those apart without anyone re-authoring content.

   The second response — block patterns, so the office can build a real person
   grid instead of typing a list — is in inc/patterns.php. This file makes what
   exists today look intentional; patterns make what comes next better.
   =========================================================================== */

/* ── Vertical rhythm ───────────────────────────────────────────────────────
   The editor produces a flat stream of siblings. Owl selectors give that
   stream a rhythm without needing a class on anything.                      */

.prose > * + *              { margin-top: var(--s-4); }
.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + *             { margin-top: var(--s-3); }
.prose > * + h2             { margin-top: var(--s-12); }
.prose > * + h3             { margin-top: var(--s-10); }
.prose > * + h4             { margin-top: var(--s-8); }
.prose > *:first-child      { margin-top: 0; }

/* A heading immediately after a heading is a title and a subtitle, not two
   sections. Close the gap. */
.prose > h2 + h3,
.prose > h3 + h4            { margin-top: var(--s-2); }

/* ── Headings gain structure ───────────────────────────────────────────────
   An h2 in editor content is usually a section break the author expected to
   read as one. A rule above it does that, and unlike a border on the heading
   itself it does not appear on the first heading of the page.               */

.prose > * + h2 {
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
}
.prose > * + h2::before {
  /* A short saffron tick above the heading — enough to mark the section
     without a decorative flourish that repeats twenty times down a page. */
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-bottom: var(--s-4);
}

/* ── Lead paragraph ────────────────────────────────────────────────────────
   The first paragraph of a page is almost always the summary. Setting it
   larger gives the page an entry point instead of starting flat.           */

.prose > p:first-child {
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

/* ── Rosters ───────────────────────────────────────────────────────────────
   Trustees, committee members, priests, donors. A list of short items is a
   roster; in one column it is a thin ribbon of text with a page of whitespace
   beside it. Columns fix that with no re-authoring.

   The heuristic is deliberately blunt — CSS cannot count characters. Any list
   with 6+ items gets columns, and column-width keeps a long item from being
   squeezed: if the items turn out to be long, the browser gives them fewer,
   wider columns on its own.                                                */

.prose ul:has(li:nth-child(6)),
.prose ol:has(li:nth-child(6)) {
  columns: 2;
  column-gap: var(--s-8);
  max-width: none;
}
.prose ul:has(li:nth-child(12)),
.prose ol:has(li:nth-child(12)) { columns: 3; }

.prose ul:has(li:nth-child(6)) li,
.prose ol:has(li:nth-child(6)) li {
  break-inside: avoid;
  max-width: none;
}

@media (max-width: 820px) {
  .prose ul:has(li:nth-child(6)),
  .prose ol:has(li:nth-child(6)),
  .prose ul:has(li:nth-child(12)),
  .prose ol:has(li:nth-child(12)) { columns: 1; }
}

/* A list item containing a nested list is a heading with children — that is
   structure, so opt it out of columns entirely. */
.prose ul:has(li ul), .prose ol:has(li ol) { columns: 1 !important; }

/* ── List presentation ─────────────────────────────────────────────────────
   Default disc bullets on a name roster read as a shopping list. Replace the
   marker with a small saffron rule for short items — it reads as a register.  */

.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: var(--s-5);
  line-height: var(--lh-snug);
  padding-block: var(--s-1);
}
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
}

/* Nested lists step back to discs — a rule at two levels loses its meaning. */
.prose ul ul { list-style: disc; padding-left: var(--s-5); margin-top: var(--s-2); }
.prose ul ul > li { padding-left: 0; }
.prose ul ul > li::before { display: none; }
.prose ul ul > li::marker { color: var(--text-soft); }

.prose ol { padding-left: var(--s-6); }
.prose ol > li { padding-block: var(--s-1); }
.prose ol > li::marker { color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Label: value paragraphs ───────────────────────────────────────────────
   Editor content is full of "Name: Ramesh Kumar", "Phone: 513…", typed as
   paragraphs where the label is bolded. When a paragraph opens with a <strong>
   it is a labelled row, and aligning those turns a stack of sentences into
   something scannable.                                                      */

.prose p:has(> strong:first-child) {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--s-2) var(--s-5);
  align-items: baseline;
  padding-block: var(--s-2);
  max-width: none;
}
.prose p:has(> strong:first-child) > strong:first-child {
  font-weight: 600;
  color: var(--text-strong);
  font-size: var(--t-sm);
}

/* Consecutive labelled rows become a table with hairlines between. */
.prose p:has(> strong:first-child) + p:has(> strong:first-child) {
  border-top: 1px dashed var(--line);
  margin-top: 0;
}

@media (max-width: 560px) {
  .prose p:has(> strong:first-child) { grid-template-columns: 1fr; gap: 0; }
}

/* A paragraph that is ONLY a bold line is a sub-heading the author did not
   mark up as one. Treat it accordingly. */
.prose p:has(> strong:only-child) {
  display: block;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin-top: var(--s-8);
  border-top: 0;
  padding-block: 0;
}
.prose p:has(> strong:only-child) > strong { font-weight: inherit; font-size: inherit; }

/* ── Tables from the editor ────────────────────────────────────────────────
   The editor emits a bare <table> with no wrapper, so it overflows on a phone
   rather than scrolling. Making the table a block scroll container is the only
   pure-CSS fix available without touching the markup.                        */

.prose table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-collapse: separate;
  border-spacing: 0;
}
.prose table thead th:first-child { border-top-left-radius: var(--r); }
.prose table thead th:last-child  { border-top-right-radius: var(--r); }
.prose table th, .prose table td { border-bottom: 1px solid var(--line); }
.prose table tr:last-child td { border-bottom: 0; }

/* An editor table with no thead still needs its first row to read as one. */
.prose table:not(:has(thead)) tr:first-child td {
  background: var(--surface-sunk);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-soft);
}

/* ── Images ────────────────────────────────────────────────────────────────*/

.prose img { border-radius: var(--r); }

/* An image alone in a paragraph is a figure. Centre it and give it air. */
.prose p:has(> img:only-child) {
  display: block;
  margin-block: var(--s-8);
  padding: 0;
  border: 0;
  max-width: none;
}
.prose p:has(> img:only-child) img { margin-inline: auto; }

.prose .alignleft  { float: left;  margin: 0 var(--s-6) var(--s-4) 0; max-width: 45%; }
.prose .alignright { float: right; margin: 0 0 var(--s-4) var(--s-6); max-width: 45%; }
.prose .aligncenter { margin-inline: auto; }

@media (max-width: 640px) {
  .prose .alignleft, .prose .alignright { float: none; margin: var(--s-6) 0; max-width: 100%; }
}

.prose figure { margin-block: var(--s-8); }
.prose figcaption {
  font-size: var(--t-sm);
  color: var(--text-soft);
  text-align: center;
  margin-top: var(--s-3);
}

/* Consecutive standalone images become a gallery rather than a vertical stack
   of full-width photos, which is how the gallery pages currently read. */
.prose p:has(> img:only-child) + p:has(> img:only-child) { margin-top: var(--s-4); }

.prose .wp-block-gallery,
.prose .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-4);
  margin-block: var(--s-8);
}
.prose .gallery-item { margin: 0 !important; width: auto !important; }
.prose .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0 !important; }

/* ── Embeds ────────────────────────────────────────────────────────────────
   A Google Calendar embed arrives with fixed width and height attributes, so
   it renders as a small box centred in an empty page — which is what the
   Calendar of Events page currently does. Overriding the attributes lets it
   fill its container, and a taller ratio suits a month grid: 16/9 crops the
   last week off.                                                            */

.prose iframe,
.prose .wp-block-embed__wrapper iframe {
  width: 100% !important;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r);
  display: block;
  margin-block: var(--s-8);
}

/* Calendar embeds — Google Calendar, Simple Calendar, Teamup. A month grid
   needs height, not width. */
.prose iframe[src*='calendar.google'],
.prose iframe[src*='teamup.com'],
.prose iframe[src*='calendar'] {
  aspect-ratio: auto;
  min-height: 680px;
  height: 78vh;
  max-height: 900px;
  border: 1px solid var(--line);
  background: var(--surface);
}

@media (max-width: 700px) {
  .prose iframe[src*='calendar.google'],
  .prose iframe[src*='teamup.com'],
  .prose iframe[src*='calendar'] {
    min-height: 560px;
    height: 70vh;
  }
}

/* An embed alone in a centred paragraph — the editor's default for a pasted
   iframe — should not be constrained to the prose measure. */
.prose p:has(> iframe:only-child) {
  display: block;
  max-width: none;
  padding: 0;
  border: 0;
  margin-block: var(--s-8);
}

/* Simple Calendar plugin output (the temple uses simcal shortcodes). */
.prose .simcal-calendar,
.prose .simcal-default-calendar-grid {
  max-width: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.prose .simcal-calendar-head { background: var(--surface-sunk); }
.prose .simcal-current { background: var(--brand-tint) !important; }

/* ── Editor blocks ─────────────────────────────────────────────────────────*/

.prose .wp-block-columns { display: grid; gap: var(--s-8); margin-block: var(--s-8); }
@media (min-width: 782px) {
  .prose .wp-block-columns { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.prose .wp-block-column > *:first-child { margin-top: 0; }

.prose .wp-block-buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-block: var(--s-6); }
.prose .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .72em 1.5em;
  background: var(--brand); color: var(--white);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600;
  text-decoration: none;
}
.prose .wp-block-button__link:hover { background: var(--brand-hover); color: var(--white); }
.prose .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--brand); border: 1.5px solid var(--brand);
}

.prose .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-12); }

.prose .wp-block-table { margin-block: var(--s-8); }

/* ── Callout ───────────────────────────────────────────────────────────────
   A blockquote in temple content is usually a saying or an important notice
   rather than a citation, so it is set as a panel, not a pull-quote.        */

.prose blockquote {
  margin-block: var(--s-8);
  padding: var(--s-5) var(--s-6);
  background: var(--brand-tint);
  border: 0;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: normal;
  color: var(--text);
  max-width: none;
}
.prose blockquote > *:first-child { margin-top: 0; }
.prose blockquote p { max-width: var(--measure); }
.prose blockquote cite {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  font-style: normal;
  color: var(--text-soft);
}

/* ── Downloads ─────────────────────────────────────────────────────────────
   A bare PDF link in a paragraph is a download. Marking it as one means people
   know what they are clicking before they click it.                         */

.prose a[href$='.pdf'],
.prose a[href$='.doc'], .prose a[href$='.docx'],
.prose a[href$='.xls'], .prose a[href$='.xlsx'] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  font-weight: 500;
}
.prose a[href$='.pdf']::before,
.prose a[href$='.doc']::before, .prose a[href$='.docx']::before,
.prose a[href$='.xls']::before, .prose a[href$='.xlsx']::before {
  content: '↓';
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.prose a[href$='.pdf']:hover::before { background: var(--brand); color: var(--white); }

/* An external link opening in a new tab should say so. */
.prose a[target='_blank']::after {
  content: '↗';
  font-size: .78em;
  margin-left: 2px;
  opacity: .6;
}

/* ── Contact details ───────────────────────────────────────────────────────*/

.prose a[href^='mailto:'], .prose a[href^='tel:'] { white-space: nowrap; font-weight: 500; }

/* ── Measure ───────────────────────────────────────────────────────────────
   Prose is capped for readability, but anything laid out — grids, tables,
   galleries, labelled rows — must be free to use the full width.            */

.prose > p, .prose > ul:not(:has(li:nth-child(6))) > li, .prose > ol > li { max-width: var(--measure); }
.prose > table, .prose > figure, .prose > .wp-block-columns,
.prose > .wp-block-gallery, .prose > .gallery, .prose > blockquote { max-width: none; }

/* ── Empty-paragraph cleanup ───────────────────────────────────────────────
   Editors press Enter to make space; the result is <p>&nbsp;</p> and
   <p><br></p> scattered through the content, each adding a full line of gap
   the rhythm above already handles.                                         */

.prose p:empty,
.prose p:has(> br:only-child) { display: none; }