/* =========================================================================
   WANNABE BIBLE SCHOLAR — site-wide post stylesheet
   v1.0

   INSTALL THIS ONCE, IN ONE PLACE. Do not paste it into posts.
   Install notes are at the bottom of the file.

   HOW IT WORKS
   ------------
   Section 3 onwards styles the post body automatically. Every existing and
   future post picks up the parchment panel, the type, the headings, the
   quotes and the lists with no editing at all.

   The wbs- classes are optional components. You turn one on by typing the
   class name into a block's "Additional CSS class(es)" box in the editor
   sidebar (Block tab -> Advanced). No HTML required.

     wbs-lede         first paragraph, larger, with the gold drop cap
     wbs-scripture    a quote block set as Scripture, gold rule
     wbs-quote        a quote from a commentator (deliberately not Scripture)
     wbs-anatomy      a list with gold ✦ markers instead of bullets
     wbs-columns      a long list split into two columns on wide screens
     wbs-note         a boxed aside
     wbs-downloads    a Group or HTML block holding the free-download card
     wbs-masthead     a title block, for posts that need their own title page
     wbs-colophon     the small centred line that closes a post
     wbs-hebrew       Hebrew (right-to-left)
     wbs-greek        Greek
     wbs-translit     transliteration

   A NOTE ON THE SELECTORS
   -----------------------
   Every rule begins with the same scope:

     :is(.wbs-post, .single .entry-content, .page .entry-content)

   That is deliberate, not clumsiness. Keeping one prefix on every rule
   means component classes always outrank the base rules, so nothing here
   needs !important and nothing quietly cancels anything else out.

   If your theme's content wrapper is not .entry-content, search for
   ".entry-content" and change all of it. It is the only thing you would
   need to change.

   .wbs-post is the manual escape hatch — add it to a Group block if the
   automatic targeting does not catch something. Do not use it *inside* a
   post that is already being styled, or you get a panel inside a panel.
   ========================================================================= */


/* =========================================================================
   1. FONTS
   -------------------------------------------------------------------------
   @import is the slowest way to load fonts: the browser must download this
   stylesheet before it learns the fonts exist. Fine if Additional CSS is
   all you have. If you can edit your theme, delete this and load the same
   two families in the document head, or add them under
   Appearance -> Editor -> Styles -> Typography.

   Uncomment Frank Ruhl Libre only if you actually publish Hebrew.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;600&display=swap'); */


/* =========================================================================
   2. DESIGN TOKENS
   -------------------------------------------------------------------------
   Change a value here and the whole site follows. All names are prefixed
   wbs- so they cannot collide with your theme's own custom properties.
   ========================================================================= */

:root {
  /* Surfaces */
  --wbs-parchment:      #f7f2e8;
  --wbs-parchment-dark: #ede5d0;
  --wbs-border:         #c8b990;

  /* Text */
  --wbs-ink:            #1c1810;
  --wbs-ink-light:      #4a3f2f;

  /* Gold — two values on purpose.
     --wbs-gold is for rules, ornaments and borders.
     --wbs-gold-text is darker so small gold text passes WCAG AA against
     parchment (about 5:1). The original #9a7b3a came out near 3.6:1, which
     fails for text at these sizes. */
  --wbs-gold:           #9a7b3a;
  --wbs-gold-text:      #7d6224;
  --wbs-gold-light:     #c9a84c;

  /* Accent */
  --wbs-red:            #7a2020;
  --wbs-red-dark:       #601818;
  --wbs-red-fg:         #fdfaf3;

  /* Type */
  --wbs-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --wbs-body:    'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --wbs-hebrew:  'Frank Ruhl Libre', 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif;
  --wbs-greek:   'Source Serif 4', 'Gentium Book Plus', 'Cardo', Georgia, serif;
  --wbs-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Measure. 46rem puts lines near 75 characters, which is where serif body
     text reads best. Your 860px ran to about 95. Set this to 54rem to go
     back to the wider panel. */
  --wbs-measure: 46rem;

  --wbs-rhythm: 1.25em;
  --wbs-radius: 2px;
}


/* =========================================================================
   3. THE POST CONTAINER
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) {
  box-sizing: border-box;
  position: relative;
  max-width: var(--wbs-measure);
  margin-inline: auto;
  padding: 2.75rem 1.75rem 2.25rem;

  background-color: var(--wbs-parchment);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 28px,
    rgba(180, 160, 100, 0.07) 28px,
    rgba(180, 160, 100, 0.07) 29px
  );

  color: var(--wbs-ink);
  font-family: var(--wbs-body);
  font-size: 1.125rem;    /* 18px by default, but scales with the reader's
                             own browser font-size setting */
  font-weight: 400;
  line-height: 1.72;
  font-variant-numeric: oldstyle-nums proportional-nums;

  border: 1px solid var(--wbs-border);
  border-radius: var(--wbs-radius);
  overflow-wrap: break-word;   /* a long URL cannot blow out the panel */
}

:is(.wbs-post, .single .entry-content, .page .entry-content) *,
:is(.wbs-post, .single .entry-content, .page .entry-content) *::before,
:is(.wbs-post, .single .entry-content, .page .entry-content) *::after {
  box-sizing: border-box;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) > * {
  position: relative;
  z-index: 1;
}


/* =========================================================================
   4. BASE TYPOGRAPHY
   -------------------------------------------------------------------------
   Headings start at h2. The post title is the page's only h1 and the theme
   already prints it — do not add a second one inside the content.
   ========================================================================= */

/* Many themes set a colour directly on p and li, which would otherwise beat
   the container's colour. `inherit` reclaims it without hard-coding a value,
   so components below can still recolour their own contents. */
:is(.wbs-post, .single .entry-content, .page .entry-content) :is(p, li, dd, td) {
  color: inherit;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) p {
  margin: 0 0 var(--wbs-rhythm);
  orphans: 2;
  widows: 2;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) > p:last-child {
  margin-bottom: 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(h2, h3, h4, h5, h6) {
  font-family: var(--wbs-display);
  font-weight: 600;
  color: var(--wbs-ink);
  line-height: 1.28;
  text-wrap: balance;
  scroll-margin-top: 5rem;   /* clears a sticky header on anchor links */
  padding: 0;
  border: 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem);
  margin: 2.1em 0 0.6em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) h3 {
  font-size: 1.3rem;
  margin: 2em 0 0.7em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) h4 {
  font-size: 1.075rem;
  letter-spacing: 0.01em;
  margin: 1.9em 0 0.6em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(h2, h3, h4):first-child {
  margin-top: 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) em { font-style: italic; }
:is(.wbs-post, .single .entry-content, .page .entry-content) strong { font-weight: 600; }

:is(.wbs-post, .single .entry-content, .page .entry-content) small {
  font-size: 0.82em;
  color: var(--wbs-ink-light);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(hr, .wp-block-separator) {
  height: 0;
  border: 0;
  border-top: 1px solid var(--wbs-border);
  max-width: 8rem;
  margin: 2.6em auto;
  opacity: 1;
}


/* -------------------------------------------------------------------------
   4a. Links in running text
   The original stylesheet had none, so inline links fell through to the
   theme — usually a bright blue that fights the parchment.
   ------------------------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) a {
  color: var(--wbs-red);
  text-decoration: underline;
  text-decoration-color: rgba(122, 32, 32, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .15s ease, text-decoration-color .15s ease;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) a:hover {
  color: var(--wbs-red-dark);
  text-decoration-color: currentColor;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) a:focus-visible {
  outline: 3px solid var(--wbs-gold-light);
  outline-offset: 2px;
  border-radius: 1px;
}


/* -------------------------------------------------------------------------
   4b. Lists
   ------------------------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(ul, ol) {
  margin: 0 0 var(--wbs-rhythm);
  padding-left: 1.5em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) li {
  margin-bottom: 0.5em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) li::marker {
  color: var(--wbs-gold-text);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(ul, ol) :is(ul, ol) {
  margin: 0.5em 0 0;
}

/* Definition lists — handy for word studies */
:is(.wbs-post, .single .entry-content, .page .entry-content) dt {
  font-weight: 600;
  margin-top: 1em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) dd {
  margin: 0.2em 0 0;
  padding-left: 1.2em;
  color: var(--wbs-ink-light);
}


/* -------------------------------------------------------------------------
   4c. Quotes — the default for any quote block you do not class
   ------------------------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) blockquote {
  margin: 1.9em 0;
  padding: 2px 0 2px 1.25rem;
  border-left: 3px solid var(--wbs-border);
  color: var(--wbs-ink-light);
  font-size: 1.02em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) blockquote p:last-child {
  margin-bottom: 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--wbs-body);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wbs-gold-text);
}


/* -------------------------------------------------------------------------
   4d. Images, figures and captions
   ------------------------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(img, iframe, video) {
  max-width: 100%;
  height: auto;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) figure {
  margin: 2em 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(figcaption, .wp-element-caption) {
  margin-top: 0.7em;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--wbs-ink-light);
  text-align: center;
  font-style: italic;
}


/* -------------------------------------------------------------------------
   4e. Tables — reading plans, passage lists, lesson indexes
   ------------------------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.94em;
  font-variant-numeric: lining-nums tabular-nums;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(th, td) {
  padding: 0.6em 0.8em;
  text-align: left;
  border-bottom: 1px solid var(--wbs-border);
  vertical-align: top;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) th {
  font-family: var(--wbs-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wbs-gold-text);
  border-bottom-width: 2px;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wp-block-table {
  overflow-x: auto;   /* wide tables scroll instead of breaking the layout */
}


/* -------------------------------------------------------------------------
   4f. Code — for the occasional .docx or filename mention
   ------------------------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) code {
  font-family: var(--wbs-mono);
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  background: rgba(154, 123, 58, 0.12);
  border-radius: 2px;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) pre {
  overflow-x: auto;
  padding: 1em 1.1em;
  background: var(--wbs-parchment-dark);
  border: 1px solid var(--wbs-border);
  border-radius: var(--wbs-radius);
  font-size: 0.86em;
  line-height: 1.6;
}


/* -------------------------------------------------------------------------
   4g. Footnotes (the core Footnotes block)
   ------------------------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wp-block-footnotes {
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--wbs-border);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--wbs-ink-light);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wp-block-footnotes li {
  margin-bottom: 0.7em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) sup a {
  text-decoration: none;
  color: var(--wbs-gold-text);
  font-weight: 600;
}


/* =========================================================================
   5. ORIGINAL-LANGUAGE TEXT
   -------------------------------------------------------------------------
   Pair with a lang attribute so screen readers switch pronunciation:
   <span class="wbs-hebrew" lang="he">חֶסֶד</span>
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-hebrew {
  font-family: var(--wbs-hebrew);
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.12em;
  line-height: 1.9;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-greek {
  font-family: var(--wbs-greek);
  font-size: 1.04em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-translit {
  font-style: italic;
  color: var(--wbs-ink-light);
}


/* =========================================================================
   6. COMPONENT — LEDE PARAGRAPH  (wbs-lede)
   -------------------------------------------------------------------------
   The drop cap uses ::first-letter, which will latch onto an opening
   quotation mark if the paragraph starts with one. Start ledes with a
   letter.
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-lede {
  font-size: 1.25rem;
  line-height: 1.68;
  color: var(--wbs-ink);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-lede::first-letter {
  font-family: var(--wbs-display);
  font-size: 3.1em;
  font-weight: 600;
  float: left;
  line-height: 0.82;
  margin: 0.08em 0.09em 0 0;
  color: var(--wbs-gold);
}


/* =========================================================================
   7. COMPONENT — SCRIPTURE  (wbs-scripture)
   -------------------------------------------------------------------------
   Use on a Quote block; put the reference in the block's citation field.
   Add is-passage as a second class for longer readings.
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-scripture {
  font-family: var(--wbs-display);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--wbs-ink-light);
  border-left: 3px solid var(--wbs-gold);
  margin: 1.9em 0;
  padding: 2px 0 2px 1.375rem;
  break-inside: avoid;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-scripture p {
  margin-bottom: 0.5em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-scripture p:last-of-type {
  margin-bottom: 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-scripture cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--wbs-body);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wbs-gold-text);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-scripture.is-passage {
  padding: 1.2rem 0 1.2rem 1.5rem;
  border-left-width: 4px;
}


/* =========================================================================
   8. COMPONENT — NON-SCRIPTURE QUOTE  (wbs-quote)
   -------------------------------------------------------------------------
   For quoting a commentator, so it reads visibly differently from the text
   of Scripture. That distinction is worth keeping visual.
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-quote {
  font-family: var(--wbs-body);
  font-style: normal;
  font-size: 1.02em;
  border-left: 3px solid var(--wbs-border);
  color: var(--wbs-ink-light);
  margin: 1.9em 0;
  padding: 2px 0 2px 1.375rem;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-quote cite {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--wbs-gold-text);
}


/* =========================================================================
   9. COMPONENT — ORNAMENT LIST  (wbs-anatomy)
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-anatomy {
  list-style: none;
  margin: 0 0 1.4em;
  padding-left: 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-anatomy li {
  position: relative;
  margin: 0 0 0.85em;
  padding-left: 1.75rem;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-anatomy li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--wbs-gold);
  font-size: 0.8em;
}


/* =========================================================================
   10. COMPONENT — TWO-COLUMN LIST  (wbs-columns)
   -------------------------------------------------------------------------
   For a 72-item lesson index that would otherwise run two screens deep.
   ========================================================================= */

@media (min-width: 640px) {
  :is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-columns {
    columns: 2;
    column-gap: 2.5rem;
  }
  :is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-columns li {
    break-inside: avoid;
  }
}


/* =========================================================================
   11. COMPONENT — NOTE / ASIDE  (wbs-note)
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-note {
  margin: 2.2em 0;
  padding: 1.2rem 1.3rem;
  background: rgba(154, 123, 58, 0.07);
  border: 1px solid var(--wbs-border);
  border-left: 3px solid var(--wbs-gold);
  border-radius: var(--wbs-radius);
  font-size: 0.96em;
  color: var(--wbs-ink-light);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-note > :last-child {
  margin-bottom: 0;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-note :is(h3, h4) {
  margin-top: 0;
  font-size: 1.05rem;
}


/* =========================================================================
   12. COMPONENT — DOWNLOAD CARD  (wbs-downloads)
   -------------------------------------------------------------------------
   Works with the hand-written buttons in your John post AND with core
   Button blocks, so you can rebuild the card without touching HTML.
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads {
  margin: 2.4em 0 2em;
  padding: 1.9rem 1.6rem 1.6rem;
  background: var(--wbs-parchment-dark);
  border: 1px solid var(--wbs-border);
  border-top: 3px solid var(--wbs-gold);
  border-radius: var(--wbs-radius);
  text-align: center;
  break-inside: avoid;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wbs-gold-text);
  margin: 0 0 0.5em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads :is(h2, h3, h4),
:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads-title {
  font-family: var(--wbs-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.25em;
  color: var(--wbs-ink);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads-note {
  font-size: 0.94rem;
  color: var(--wbs-ink-light);
  margin: 0 0 1.35em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn-row, .wbs-downloads .wp-block-buttons) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}


/* --- the buttons ------------------------------------------------------- */

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn, .wbs-downloads .wp-block-button__link) {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 16rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--wbs-radius);
  text-decoration: none;
  font-family: var(--wbs-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn, .wbs-downloads .wp-block-button__link):is(:hover, :focus-visible) {
  transform: translateY(-2px);
  text-decoration: none;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn, .wbs-downloads .wp-block-button__link):focus-visible {
  outline: 3px solid var(--wbs-gold-light);
  outline-offset: 3px;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-btn svg {
  flex: 0 0 auto;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-btn-label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-btn-meta {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.88;
  margin-top: 2px;
}

/* Primary — the PDF */
:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn-primary, .wbs-downloads .is-style-fill .wp-block-button__link) {
  background: var(--wbs-red);
  color: var(--wbs-red-fg);
  border: 1px solid var(--wbs-red);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn-primary, .wbs-downloads .is-style-fill .wp-block-button__link):is(:hover, :focus-visible) {
  background: var(--wbs-red-dark);
  border-color: var(--wbs-red-dark);
  color: var(--wbs-red-fg);
}

/* Secondary — the Word file */
:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn-secondary, .wbs-downloads .is-style-outline .wp-block-button__link) {
  background: transparent;
  color: var(--wbs-ink);
  border: 1px solid var(--wbs-gold);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn-secondary, .wbs-downloads .is-style-outline .wp-block-button__link):is(:hover, :focus-visible) {
  background: rgba(154, 123, 58, 0.14);
  color: var(--wbs-ink);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-fineprint {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--wbs-ink-light);
  margin: 1.2em 0 0;
}


/* =========================================================================
   13. COMPONENT — MASTHEAD  (wbs-masthead)
   -------------------------------------------------------------------------
   Only for a post that genuinely needs a title page of its own. On a normal
   post the theme already prints the title, and repeating it here gives the
   page two titles.
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-masthead {
  text-align: center;
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--wbs-border);
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-series-label {
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wbs-gold-text);
  margin: 0 0 0.9em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-masthead-title {
  font-family: var(--wbs-display);
  font-size: clamp(1.9rem, 5vw, 2.85rem);
  font-weight: 600;
  color: var(--wbs-ink);
  line-height: 1.14;
  margin: 0 0 0.25em;
}

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-subtitle {
  font-family: var(--wbs-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--wbs-ink-light);
  margin: 0;
}


/* =========================================================================
   14. COMPONENT — COLOPHON  (wbs-colophon)
   ========================================================================= */

:is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-colophon {
  margin: 2.1rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--wbs-border);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wbs-gold-text);
}


/* =========================================================================
   15. SMALL SCREENS
   ========================================================================= */

@media (max-width: 640px) {
  :is(.wbs-post, .single .entry-content, .page .entry-content) {
    padding: 2rem 1.1rem 1.75rem;
    font-size: 1.0625rem;
    border-left: 0;
    border-right: 0;
  }

  :is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-lede {
    font-size: 1.15rem;
  }

  :is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads {
    padding: 1.5rem 1rem 1.4rem;
  }

  :is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn, .wbs-downloads .wp-block-button, .wbs-downloads .wp-block-button__link) {
    min-width: 100%;
    width: 100%;
  }
}


/* =========================================================================
   16. MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  :is(.wbs-post, .single .entry-content, .page .entry-content) * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  :is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-btn, .wbs-downloads .wp-block-button__link):is(:hover, :focus-visible) {
    transform: none;
  }
}


/* =========================================================================
   17. PRINT
   -------------------------------------------------------------------------
   People print these lessons. Worth getting right.
   ========================================================================= */

@media print {
  :is(.wbs-post, .single .entry-content, .page .entry-content) {
    max-width: none;
    background: #fff !important;
    background-image: none !important;
    border: 0;
    padding: 0;
    font-size: 11.5pt;
    line-height: 1.5;
    color: #000;
  }

  :is(.wbs-post, .single .entry-content, .page .entry-content) a {
    color: #000;
    text-decoration: underline;
  }

  /* Print the URL after download links so a paper copy is still usable */
  :is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  :is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-downloads {
    background: #fff !important;
    border: 1px solid #999;
  }

  :is(.wbs-post, .single .entry-content, .page .entry-content) :is(h2, h3, h4) {
    break-after: avoid;
  }

  :is(.wbs-post, .single .entry-content, .page .entry-content) :is(.wbs-scripture, .wbs-note, .wbs-downloads, blockquote, figure, table) {
    break-inside: avoid;
  }
}


/* =========================================================================
   18. OPTIONAL — DARK MODE
   -------------------------------------------------------------------------
   Only relevant if your theme has a dark mode. If it does not, leave this
   commented out; a parchment page inside a dark theme looks like a bug.
   ========================================================================= */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --wbs-parchment:      #1a1712;
    --wbs-parchment-dark: #221e17;
    --wbs-border:         #4a4132;
    --wbs-ink:            #ece4d3;
    --wbs-ink-light:      #b8ac93;
    --wbs-gold-text:      #d4b463;
    --wbs-red:            #d98a8a;
    --wbs-red-dark:       #e8a5a5;
  }
  :is(.wbs-post, .single .entry-content, .page .entry-content) {
    background-image: none;
  }
  :is(.wbs-post, .single .entry-content, .page .entry-content) .wbs-btn-primary {
    background: #8c2a2a;
    border-color: #8c2a2a;
    color: #fdfaf3;
  }
}
*/


/* =========================================================================
   WHERE TO PUT THIS FILE
   -------------------------------------------------------------------------
   Take the first option you can actually do.

   1. CHILD THEME OR SITE PLUGIN — best, because it survives a theme switch.
      Save as wbs-blog.css alongside the child theme's functions.php:

        add_action('wp_enqueue_scripts', function () {
          wp_enqueue_style(
            'wbs-blog',
            get_stylesheet_directory_uri() . '/wbs-blog.css',
            [],
            '1.0'
          );
        });

   2. ADDITIONAL CSS — Appearance -> Customize -> Additional CSS, or in a
      block theme, Appearance -> Editor -> Styles -> (three dots) ->
      Additional CSS. Paste the whole file. It is stored per theme, so it
      will not follow you if you change themes. Keep this file as the master
      copy either way.

   3. A CODE SNIPPETS PLUGIN — add as a CSS snippet, run site-wide.

   Do not paste this into a post. The whole point is that it lives in one
   place and every post reads from it.

   CHECK THESE FOUR THINGS AFTER INSTALLING
   ----------------------------------------
   - Open a post. If nothing changed, the theme's wrapper is not
     .entry-content. Right-click the post text, choose Inspect, find the
     element holding the content, and swap its class in throughout.
   - Open the homepage and a category archive. The parchment panel should
     not appear around excerpts.
   - Print-preview a post (Ctrl/Cmd+P).
   - Tab through a post with the keyboard. Every link and button should show
     a gold focus ring.
   ========================================================================= */