/* ==========================================================================
   Core block bridges
   ==========================================================================
   Hand-authored and theme-owned — NOT synced from the static draft, because
   the draft has no WordPress markup in it. build_theme.py never touches this
   file.

   This is where core blocks (and later, plugin output) are mapped onto the
   design system's components. It is loaded on the front end AND handed to the
   editor, so what an author sees is what a visitor gets.

   Rule of thumb: if a core block already emits something close to one of our
   components, bridge it here. If it emits something structurally different,
   build a block pattern instead of fighting it with CSS.
   ========================================================================== */

/* ---- Details / FAQ accordion -------------------------------------------
   membership.html#faq is native <details>/<summary>, which is exactly what
   the core Details block emits — so the accordion is free apart from this.
   The one difference is that core puts content directly inside <details>
   rather than in our .accordion-body wrapper. */

.wp-block-details {
  border-bottom: var(--border-width) solid var(--border);
  padding-block: var(--space-4);
}

.wp-block-details summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text);
}

.wp-block-details summary::marker {
  color: var(--accent-text);
}

.wp-block-details > :not(summary) {
  margin-top: var(--space-3);
  color: var(--text-muted);
}

/* ---- Buttons ------------------------------------------------------------
   Core's button block carries its own colour and radius. Map it onto .btn so
   an editor dropping a button into a page gets the chapter's button, not
   WordPress's.

   The named styles below must beat the unstyled default, so the default is
   scoped to buttons carrying no is-style- class at all. An earlier version used
   :not(.is-style-outline), which at 0,4,0 quietly outranked
   .is-style-accent .wp-block-button__link at 0,3,0 — every accent button on a
   call-to-action band came out brand blue. Caught by rendering a pattern, not
   by reading the file. */

.wp-block-button__link {
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid transparent;
  text-decoration: none;
}

.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-primary .wp-block-button__link:not(.has-background) {
  background: var(--brand);
  color: var(--text-on-brand);
}

.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-primary .wp-block-button__link:not(.has-background):hover {
  background: var(--brand-hover);
}

.wp-block-button.is-style-accent .wp-block-button__link:not(.has-background) {
  background: var(--accent);
  color: #1A1405;
}

.wp-block-button.is-style-accent .wp-block-button__link:not(.has-background):hover {
  background: var(--accent-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover {
  border-color: var(--brand);
  color: var(--brand-text);
}

/* For the dark bands — .cta-band, .hero — where the surrounding text is
   already white. */
.wp-block-button.is-style-ghost .wp-block-button__link:not(.has-background) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.wp-block-button.is-style-ghost .wp-block-button__link:not(.has-background):hover {
  background: rgba(255, 255, 255, 0.16);
}

/* --- Padding, against core's own block-style variation --------------------
   An outline button rendered four pixels shorter than the filled one beside
   it, on the live site only — in the static draft the pair is identical. Core
   emits its own CSS for the outline variation:

     :root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link)
       { border-width: 2px; padding: 0.667em 1.33em; }

   `:root :where(...)` is 0,1,0 — the same weight as `.btn`, and it is printed
   after the theme's stylesheet, so it wins on source order and the button
   takes em-based padding instead of the design's. Only the outline variation
   gets this treatment, which is why one button of a pair shrank and the other
   did not.

   Re-asserted here at 0,2,0. The sizes are listed separately and after the
   base, because a single blanket rule on `.wp-block-button__link.btn` also
   outranks `.btn--sm` — that was tried once and inflated every small button,
   moving the home page by 100px. */
.wp-block-button__link.btn {
  padding: var(--space-3) var(--space-5);
  /* 2px, matching .btn's own literal — not --border-width, which is 1px and
     would quietly take two pixels off every button on the site. */
  border-width: 2px;
}

.wp-block-button__link.btn--lg { padding: var(--space-4) var(--space-6); }
.wp-block-button__link.btn--sm { padding: var(--space-2) var(--space-4); }

/* ---- Images and captions ------------------------------------------------ */

.wp-block-image img {
  border-radius: var(--radius-lg);
}

.wp-block-image figcaption,
.wp-block-embed figcaption {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---- Quote --------------------------------------------------------------
   The draft styles <blockquote> directly, so core's quote block inherits it;
   only the citation needs bringing into line. */

.wp-block-quote cite,
.wp-block-pullquote cite {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: normal;
}

/* ---- Separator ---------------------------------------------------------- */

.wp-block-separator {
  border: 0;
  border-top: var(--border-width) solid var(--border);
}

/* ---- Table -------------------------------------------------------------- */

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
  border-bottom: var(--border-width) solid var(--border);
  padding: var(--space-3);
  text-align: left;
}

/* ---- Checklist ----------------------------------------------------------
   The design's .check-list — gold ticks instead of bullets — offered to editors
   as a named list style rather than a class they have to remember. */

.wp-block-list.is-style-check-list {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-check-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}

.wp-block-list.is-style-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}

/* ---- Section groups -----------------------------------------------------
   Patterns build bands out of core/group with the design's own class names.
   Core adds its layout classes alongside; these make sure a group carrying
   .container is not also constrained to theme.json's 760px content size, which
   would squeeze every grid into a text column. */

.wp-block-group.section > .wp-block-group.container,
.wp-block-group.container {
  max-width: var(--container);
  margin-inline: auto;
}

/* ---- Reconciling core's spacing with the design's ------------------------
   Core's block library gives some blocks a bottom margin of its own. Where the
   design already owns the spacing — .media wraps every image and controls the
   gap around it — that margin is additive, and it accumulates: on the imported
   home page it was part of a 100px drift by the foot of the page.

   Only the blocks the importer actually produces are reset here, and only the
   margin. Anything else core does is left alone. */

.wp-block-image {
  margin-bottom: 0;
}

/* An imported button keeps its .btn classes. It needs no help: every geometry
   rule core applies to .wp-block-button__link is wrapped in :where(), which
   has zero specificity, so main.css wins on source order.

   Restating .btn's padding here was actively harmful — at (0,2,0) it outranked
   .btn--sm at (0,1,0) and inflated every small button on the page, which is
   what put a 24px drift into the imported home page. The one real rule core
   has sets `height: 100%`, which .btn's own display already overrides. */
.wp-block-button__link.btn {
  height: auto;
}

/* ---- core/image inside .media ------------------------------------------
   .media > img is a direct-child selector, and the Image block wraps its <img>
   in a <figure>. The relationship breaks, the photo loses its absolute fill,
   and the slot shows the star-field placeholder underneath — a photograph that
   is present, served, and invisible.

   Worth generalising: any design-system rule written as `>` will break the
   moment a block wrapper appears between parent and child, and it fails by
   showing the fallback rather than by erroring. Bridging it here rather than
   loosening the selector in main.css keeps the draft's CSS honest about its own
   structure, and keeps the Image block — so an editor can still swap a photo
   through the media picker instead of editing HTML. */

.media > .wp-block-image {
  position: static;
  margin: 0;
}

.media > .wp-block-image > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* --- Uploaded logo -------------------------------------------------------
   The design's brand lockup is an inline SVG mark plus a two-line wordmark,
   sized by .brand-mark. An uploaded logo replaces both, so it needs its own
   sizing: bounded by height, free in width, and never wider than the header
   can spare on a phone.

   max-width in ch rather than px so it tracks the wordmark it stands in for.
   The two rules below are the whole bridge — .brand is already an inline-flex
   row with the right alignment and gap. */
/* A logo standing in for the whole lockup has nothing to sit beside, so the
   gap that separates mark from wordmark would be trailing space. A logo used
   as the mark keeps it. */
.brand--logo-only { gap: 0; }

.brand-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: min(240px, 52vw);
  /* Wide enough for a full lockup, and harmless for a square mark, which is
     bounded by the height above. */
  object-fit: contain;
}

@media (max-width: 900px) {
  .brand-logo { height: 36px; }
}


/* ---- Block widgets in the sidebar ---------------------------------------
   WordPress puts three block widgets into the first sidebar of a fresh
   install — Search, Recent Posts, Recent Comments — and a block widget
   ignores the sidebar's `before_title` and `after_title`. So the panel gets a
   `<h2 class="wp-block-heading">` in the display serif where every classic
   widget beside it gets the small sans `<h3>`, and the lists arrive with
   browser-default bullets and underlined links.

   Removing widgets-block-editor support stops new ones being made this way; it
   does nothing about the three already there, and a chapter should not have to
   delete and re-add widgets to get a sidebar that matches its own site.

   Scoped to .panel so this is about the sidebar and not about block headings
   anywhere else. */

.panel .wp-block-heading {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

.panel .wp-block-group { margin: 0; }

.panel .wp-block-latest-posts,
.panel .wp-block-latest-comments,
.panel .wp-block-categories,
.panel .wp-block-archives,
.panel .wp-block-page-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.panel .wp-block-latest-posts li,
.panel .wp-block-latest-comments li,
.panel .wp-block-categories li,
.panel .wp-block-archives li,
.panel .wp-block-page-list li {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.panel .wp-block-latest-posts li:last-child,
.panel .wp-block-latest-comments li:last-child,
.panel .wp-block-categories li:last-child,
.panel .wp-block-archives li:last-child,
.panel .wp-block-page-list li:last-child { margin-bottom: 0; }

/* Link decoration is deliberately not touched. The draft's own panel lists
   underline, so removing it here would have made the block widgets look
   different from the classic ones sitting directly beneath them — which is
   the problem this file is fixing, in the other direction. */

/* Recent Comments carries an avatar, an author, and an excerpt. In a narrow
   rail the avatar is the first thing the eye lands on and the least useful. */
.panel .wp-block-latest-comments__comment-avatar { display: none; }

.panel .wp-block-latest-comments__comment-meta { font-size: var(--text-sm); }

.panel .wp-block-latest-comments__comment-excerpt p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-1) 0 0;
}

/* The Search block builds its own form. Match the theme's, which is a stacked
   field and a full-width primary button. */
.panel .wp-block-search { margin: 0; }

.panel .wp-block-search__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.panel .wp-block-search__inside-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.panel .wp-block-search__input {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.panel .wp-block-search__input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.panel .wp-block-search__button {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
}

.panel .wp-block-search__button:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}