/*
  Theme Name: Genealogy Workshop
  Description: Self-contained custom theme for Genealogy Workshop. No external data sources or remotely-hosted assets.
  Author: Genealogy Workshop
  Author URI: https://genealogyworkshop.us
  Version: 4.1
 	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/*
   Typography is owned by Automatic.css.

   ACSS styles the body through :where(body) - font-size (--text-m),
   line-height (--text-line-height), colour (--text-color), background and
   font family - and handles vertical rhythm through Smart Spacing. Because
   :where() carries ZERO specificity, any plain `body {}` or `section {}`
   rule here would silently beat all of it. That is exactly what used to
   happen: a legacy `section { line-height: 1 }` inherited into lists and
   crushed their wrapped lines. Do not reintroduce bare element typography
   rules - change the values in the ACSS dashboard instead.
*/


:root {
  --primary-color: #003399;
  --secondary-color: #0f6a24;
}


section {
  position: relative;
}


figcaption {
  text-align: center;
}


/*------------------------- Custom styles ----------------------------------*/

/*
   Centered lists.

   list-style-position defaults to `outside`, which anchors the bullet outside
   the <li> content box - so centering the text in the editor moves the words
   but leaves the marker at the list's left edge. When the classic editor
   centres list items (it writes text-align onto the <li>, or onto the <ul>
   if the whole list is selected), pull the markers inline so they center
   along with the text. No class or HTML editing needed.
*/

:is(.page-content, .mce-content-body) :is(ul, ol):has(> li[style*="center"]),
:is(.page-content, .mce-content-body) :is(ul, ol)[style*="center"] {
  list-style-position: inside;
  padding-inline-start: 0;
}

/*
   Alternative, if you would rather keep bullets hanging on the left and
   simply center the whole list block on the page: add class="list--centered"
   to the <ul> from the editor's Text tab (do NOT also center the items).
*/

:is(.page-content, .mce-content-body) :is(ul, ol).list--centered {
  inline-size: fit-content;
  margin-inline: auto;
}

/*
   Classic editor (TinyMCE) parity.

   TinyMCE's own wp-content.css sets `body { font-family: Georgia,...,serif;
   font-size: 16px; line-height: 1.5; color: #333 }` at specificity (0,0,1).
   Automatic.css applies its text layer through :where(body), which carries
   ZERO specificity - so TinyMCE wins regardless of load order and the editor
   renders serif at the wrong size. Re-apply the ACSS values with enough
   specificity to win. Values still come from ACSS, so changing them in the
   dashboard still flows through to the editor.
*/

body.mce-content-body {
  font-family: var(--text-font-family, Roboto, sans-serif);
  font-size: var(--text-m);
  line-height: var(--text-line-height);
  color: var(--text-color);
}

body.mce-content-body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--heading-font-family, Roboto, sans-serif);
}

/*
   Readable measure.

   Cap every top-level item in the content column at 70ch. Direct children
   only - constraining descendants as well would re-clamp things already
   inside a capped parent (list items, figcaptions) for no benefit.

   Also applied inside the classic editor so the measure is visible while
   writing, not just on the front end.
*/

/* One knob for the whole column. This is a FIXED length on purpose:
   `ch` is font-size-relative, so 70ch on an h1 resolved to ~1846px (i.e.
   effectively uncapped) while body text capped at ~701px - the headings
   never shared the column. A custom property does not fix that either:
   `ch` inside var() resolves at the USING element, not where it is declared
   (measured: h1 still got 1846px). 44rem ~= the 70ch body measure. */
:is(.page-content, .mce-content-body) {
  --measure: 44rem;
}

:is(.page-content, .mce-content-body) > * {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

/*
   Media is exempt from the 70ch measure and fills the content column.
   70ch is a READING measure - it should govern prose, not pictures.

   <img> is inline by default, so it also needs display:block for the auto
   margins above to be able to centre it. max-inline-size (not inline-size)
   means a large image fills the column while a small one is never upscaled.
*/
:is(.page-content, .mce-content-body) > :is(img, picture, video, iframe, figure) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}