/* WordPress additions to theme.css (which comes unchanged from the approved designs). */

/* Inline icons sized like Font Awesome's: 1em high, width from the icon's shape, text colour. */
.svg-inline--fa { display: inline-block; height: 1em; width: auto; overflow: visible; vertical-align: -.125em; box-sizing: content-box; }

/* ---------- article content from the classic editor ---------- */
/* :where() keeps these rules weaker than theme.css's own (e.g. the Tidings boxes' lists and tables). */
/* Only plain lists in article text: the designed lists (staff, policies, Tidings boxes) keep theme.css's styles. */
:where(.entry-content > ul:not([class]), .entry-content > ol:not([class]), .entry-content > .bs-shortcode-list) { margin: 0 0 1.2em; padding-left: 1.4em; }
:where(.entry-content > ul:not([class]), .entry-content > ol:not([class]), .entry-content > .bs-shortcode-list) > li { margin: 0 0 .45em; }
:where(.entry-content li) > :where(ul, ol) { margin: .45em 0 0; }
.entry-content blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--brand); color: var(--ink-2); }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content hr { height: 0; margin: 2em 0; border: 0; border-top: 1px solid var(--rule); }
.entry-content iframe, .entry-content video, .entry-content embed, .entry-content object { display: block; max-width: 100%; margin: 0 0 1.2em; border: 0; }
.entry-content iframe[src*="youtube"], .entry-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Photos and their captions (never the Tidings boxes, which are figures too). */
:where(.entry-content) :where(figure:not(.dt-box), .wp-caption) { max-width: 100%; margin: 1.6em 0; }
:where(.entry-content) :where(.wp-caption-text, figure:not(.dt-box) > figcaption) { margin-top: 8px; font-size: .8125rem; line-height: 1.45; color: var(--meta); }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.entry-content .alignright { float: right; margin: .3em 0 1em 1.4em; }
@media (max-width: 760px) { .entry-content .alignleft, .entry-content .alignright { float: none; margin: 1.4em 0; } }
.entry-content::after { content: ""; display: table; clear: both; }

/* Plain tables (not in a Tidings box): scroll inside their own box on small screens. */
:where(.entry-content) > table:not(.tablepress) { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 0 0 1.4em; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
:where(.entry-content) > table th, :where(.entry-content) > table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
:where(.entry-content) > table th { font-weight: var(--w-strong); }

/* The old Publisher lists: check marks, stars and asterisks in brand blue. */
.entry-content .bs-shortcode-list { list-style: none; padding-left: 0; }
.entry-content .bs-shortcode-list li { position: relative; padding-left: 1.75em; }
.entry-content .bs-shortcode-list li::before { position: absolute; left: 0; top: 0; width: 1.2em; text-align: center; color: var(--brand-ink); font-weight: 800; }
.entry-content .list-style-check li::before { content: ""; top: .5em; left: .2em; width: .38em; height: .7em; border: solid var(--brand-ink); border-width: 0 .16em .16em 0; transform: rotate(45deg); }
.entry-content .list-style-star li::before { content: "★"; font-size: .9em; }
.entry-content .list-style-asterisk li::before, .entry-content .list-style-asterix li::before { content: "*"; font-size: 1.35em; line-height: 1.2; }

/* Old Publisher divider and info box. */
.entry-content .bs-divider { margin: 2em 0; }
.entry-content .bs-shortcode-alert { margin: 1.6em 0; padding: 16px 18px; background: var(--insight-bg); border-left: 3px solid var(--brand); font-size: 1rem; line-height: 1.6; }
.entry-content .bs-shortcode-alert p:last-child { margin-bottom: 0; }

/* [print-me] button for TablePress tables. */
.dt-print-button { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 20px; padding: 9px 16px; border: 0; border-radius: 4px; background: var(--brand); color: var(--on-brand); font-size: .9375rem; font-weight: var(--w-strong); line-height: 1.2; cursor: pointer; }
.dt-print-button:hover { background: color-mix(in srgb, var(--brand) 86%, #000); }
.dt-print-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- comments ---------- */
.comment__pending { margin: 2px 0 6px; font-size: .8125rem; font-weight: var(--w-strong); color: var(--meta); }

/* ---------- logged in: WordPress's admin bar ---------- */
/* The admin bar is fixed at the top (32px, 46px up to 782px wide; up to 600px wide it scrolls away with the
   page), so everything the theme pins to the top of the screen moves down by --ab. Visitors have --ab: 0. */
body { --ab: 0px; }
body.admin-bar { --ab: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --ab: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar { --ab: 0px; } }
body.admin-bar .slimbar { top: var(--ab); }
body.admin-bar .drawer { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .drawer { top: 46px; } }
body.admin-bar .tag-month__label { top: calc(var(--ab) + var(--slim-h) + 16px); }

/* ---------- ads ---------- */
/* Mediavine's sticky sidebar ad sits below the 44px slim bar, never under it. */
.sidebar-column .mv-sticky-slot, #sidebar-primary-sidebar .mv-sticky-slot { top: calc(var(--ab, 0px) + var(--slim-h) + 8px) !important; }

/* ---------- archive pages ---------- */
/* "Load more" is a link to the next page (works without JavaScript); it looks like the design's button. */
a.load-more { width: fit-content; line-height: 44px; text-align: center; }
.page-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.page-links a { font-weight: var(--w-strong); color: var(--brand-ink); }
.page-links a:hover { color: var(--link-hover); }
.author-hero__initials { display: grid; place-items: center; flex: none; background: var(--tint); color: var(--brand-ink); font-size: 2.5rem; font-weight: var(--w-head); }

/* The Archive category's index: a dated list for each year. */
.archive-years ul { margin-top: 18px; }
.archive-list { list-style: none; margin: 0; padding: 0; columns: 2 320px; column-gap: 32px; }
.archive-list li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.archive-list a { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 10px; }
.archive-list time { font-size: .75rem; font-weight: var(--w-strong); color: var(--brand-ink); white-space: nowrap; }
.archive-list__t { font-size: .9375rem; font-weight: var(--w-strong); line-height: 1.35; transition: color .12s ease; }
.archive-list a:hover .archive-list__t { color: var(--brand-ink); }

/* Old FAQ blocks ([accordions]) and embedded files. */
.entry-content .dt-faq { margin: 1.6em 0; }
.entry-content .dt-faq__title { margin-top: 0; }
.entry-content .dt-faq__item { border-top: 1px solid var(--rule); }
.entry-content .dt-faq__item:last-child { border-bottom: 1px solid var(--rule); }
.entry-content .dt-faq__item summary { padding: 12px 0; font-weight: var(--w-head); cursor: pointer; }
.entry-content .dt-faq__item summary:hover { color: var(--brand-ink); }
.entry-content .dt-faq__a { padding-bottom: 6px; }
.entry-content .dt-embed iframe { width: 100%; border: 1px solid var(--rule); background: var(--surface); }

/* Old inline-styled Tidings boxes (until they're converted): their fixed minimum widths don't fit phones. */
@media (max-width: 760px) {
	.entry-content div[style*="min-width"] { min-width: 0 !important; }
}

/* Headlines with long unbroken words ("Medea/Macbeth/Cinderella") still fit narrow screens. */
.card__title, .river__item h3, .alist__item h3, .latest-list__t, .rank__t, .archive-list__t, .single-post-title, .cat-title, .tag-title { overflow-wrap: anywhere; }
