/* ==========================================================================
   blocks.css — the bridge between core block markup and the SBSI design.

   main.css is written against the approved design's own HTML. The pages
   are now built from core blocks, which wrap things slightly differently:
   a Buttons block puts the button class on a wrapper <div>, an Image
   block wraps its <img> in a <figure>, a Heading block adds
   .wp-block-heading, and text that the design put in a <div> now lives in
   a <p>. Every rule here exists to make that markup look exactly like the
   design's — nothing here restyles the design itself.

   Loaded after main.css on the front end and inside the block editor.
   ========================================================================== */

/* ---- 1. Text that moved from <div> to <p> ---------------------------------
   Zero-specificity resets (:where), so a class's own margins in main.css
   still win; only the browser's default paragraph margins are removed. */
:where(
	p.kicker, p.point-title, p.point-body,
	p.function-num, p.functions-label, p.namesake-dates, p.namesake-label,
	p.patron-role, p.patron-footnote, p.case-card-label, p.discipline-num,
	p.leadership-point, p.pullquote, p.pullquote-source,
	p.task-label, p.task-statement,
	p.pillar-big-num, p.pillar-priorities-head, p.pillar-priority,
	p.contact-detail-label, p.contact-detail-value,
	p.donate-card-kicker, p.donate-card-org, p.donate-stream-title,
	p.tier-label, p.tier-price, p.tier-sub, p.tier-flag, p.tiers-note,
	p.agenda-num, p.stat-label, p.stat-number, p.stat-note
) { margin-top: 0; margin-bottom: 0; }

/* Rules in main.css that addressed a child <div> by element. */
.patron-facts p { margin: 0; padding: 11px 0; border-bottom: 1px solid rgba(16, 32, 64, .1); font: 500 13.5px/1.45 var(--sans); color: var(--navy); }
.patron-facts p:last-child { border-bottom: none; }
.mission-beliefs p { margin: 0; font: 500 17px/1.5 var(--serif); color: var(--navy); }
.donate-card-head > .wp-block-group > p { margin: 0; }
.function-col > p:has(> a.function-link) { margin: 6px 0 0; }
.function-col > p > a.function-link { display: inline-block; }

/* Paragraph block styles offered in the editor. */
.is-style-kicker { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.is-style-lede { font: 400 clamp(16px, 1.5vw, 18.5px)/1.6 var(--sans); }
.is-style-fineprint { font: 400 11.5px/1.5 var(--sans); color: var(--sand); }

/* ---- 2. Headings ----------------------------------------------------------- */
.wp-block-heading { overflow-wrap: anywhere; }

/* ---- 3. Buttons ------------------------------------------------------------
   Core puts the classes on the wrapper (.wp-block-button.btn-gold) and its
   own styles on the link (.wp-block-button__link). The link takes the
   design's .btn rules; the wrapper's variant class picks the colour. Block
   styles chosen in the editor (.is-style-gold …) map to the same rules. */
.wp-block-buttons { gap: 12px; align-items: stretch; }
.wp-block-buttons > .wp-block-button { margin: 0; }

/* The variant classes (btn, btn-gold, chip…) sit on the wrapper <div>,
   where main.css's own .btn/.chip rules would paint a second pill around
   the link. The wrapper is inert; only the link is styled below. */
.wp-block-button.btn, .wp-block-button[class*="btn-"],
.wp-block-button.chip, .wp-block-button[class*="chip--"],
.wp-block-button.btn:hover, .wp-block-button[class*="btn-"]:hover,
.wp-block-button.chip:hover, .wp-block-button[class*="chip--"]:hover {
	display: inline-block; padding: 0; border: 0; border-radius: 0;
	background: transparent; color: inherit; font: inherit; line-height: inherit;
	box-shadow: none; transform: none; transition: none; cursor: default;
	width: auto; white-space: normal; text-align: left;
}
.wp-block-button.btn-block { display: block; width: 100%; }
.wp-block-buttons.cta-actions { justify-content: center; margin-top: 26px; }
.wp-block-buttons.home-hero-actions { margin-top: 34px; }
.wp-block-buttons.join-hero-actions { margin-top: 30px; }
.wp-block-buttons.contact-card-actions { gap: 9px; }
.wp-block-buttons.research-hero-chips { gap: 9px; padding-bottom: 30px; }
.tier-card > .wp-block-buttons { margin-top: auto; }
.tier-card > .wp-block-buttons > .wp-block-button { flex: 1 1 100%; }
.mission-teaser-inner > .wp-block-buttons,
.agenda-head > .wp-block-buttons { flex: none; }

.wp-block-button.btn > .wp-block-button__link,
.wp-block-button[class*="is-style-"] > .wp-block-button__link {
	display: inline-block; font: 700 14px/1 var(--sans);
	padding: 15px 24px; border-radius: 5px; transition: all .15s;
	text-align: center; cursor: pointer; border: none; text-decoration: none;
	background: var(--navy); color: #fff; box-shadow: none;
}
.wp-block-button.btn-sm > .wp-block-button__link { font-size: 13.5px; padding: 12px 17px; border-radius: 4px; }
.wp-block-button.btn-lg > .wp-block-button__link { font-size: 15px; padding: 17px 28px; }
.wp-block-button.btn-block > .wp-block-button__link { display: block; width: 100%; padding: 16px; }

.wp-block-button.btn-gold > .wp-block-button__link,
.wp-block-button.is-style-gold > .wp-block-button__link { background: var(--gold-bright); color: var(--navy); }
.wp-block-button.btn-gold > .wp-block-button__link:hover,
.wp-block-button.is-style-gold > .wp-block-button__link:hover { background: #eec572; color: var(--navy); transform: translateY(-2px); }

.wp-block-button.btn-red > .wp-block-button__link,
.wp-block-button.is-style-red > .wp-block-button__link { background: var(--red); color: #fff; }
.wp-block-button.btn-red > .wp-block-button__link:hover,
.wp-block-button.is-style-red > .wp-block-button__link:hover { background: var(--red-dark); color: #fff; }

.wp-block-button.btn-navy > .wp-block-button__link,
.wp-block-button.is-style-navy > .wp-block-button__link { background: var(--navy); color: #fff; }
.wp-block-button.btn-navy > .wp-block-button__link:hover,
.wp-block-button.is-style-navy > .wp-block-button__link:hover { background: #16294a; color: #fff; }

.wp-block-button.btn-outline-navy > .wp-block-button__link,
.wp-block-button.is-style-outline-navy > .wp-block-button__link { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); padding: 13.5px 22.5px; }
.wp-block-button.btn-sm.btn-outline-navy > .wp-block-button__link { padding: 10.5px 15.5px; }
.wp-block-button.btn-outline-navy > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-navy > .wp-block-button__link:hover { background: var(--navy); color: var(--cream); }

.wp-block-button.btn-outline-white > .wp-block-button__link,
.wp-block-button.is-style-outline-white > .wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); padding: 13.5px 22.5px; }
.wp-block-button.btn-outline-white > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-white > .wp-block-button__link:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* Chips (the Research hub's stream links). */
.wp-block-button.chip > .wp-block-button__link,
.wp-block-button.is-style-chip > .wp-block-button__link {
	display: inline-block; font: 600 12.5px/1 var(--sans);
	padding: 11px 16px; border-radius: 40px; white-space: nowrap;
	background: #fff; color: #33404f; border: 1px solid rgba(16, 32, 64, .2);
	transition: all .15s; text-decoration: none;
}
.wp-block-button.chip > .wp-block-button__link:hover { border-color: var(--navy); color: var(--navy); }
.wp-block-button.chip--gold > .wp-block-button__link { background: var(--gold-bright); color: var(--navy); border-color: var(--gold-bright); }
.wp-block-button.chip--dark > .wp-block-button__link { background: transparent; color: #cdd6e2; border-color: rgba(255, 255, 255, .24); }
.wp-block-button.chip--dark > .wp-block-button__link:hover { border-color: var(--gold-bright); color: #fff; }

/* ---- 4. Images ------------------------------------------------------------- */
.wp-block-group .wp-block-image { margin: 0; }
.wp-block-image img { height: auto; }
.wp-block-image > figcaption.wp-element-caption { text-align: inherit; }

/* ---- 5. Lists ---------------------------------------------------------------
   The membership benefits were a column of <span>s; they are a List now. */
ul.tier-benefits { list-style: none; padding-left: 0; margin-top: 0; }
ul.tier-benefits li { margin: 0; }

/* ---- 6. Separators ---------------------------------------------------------
   Core forces a 100px default width with a high-specificity selector. */
hr.wp-block-separator.about-hero-rule { width: 64px !important; height: 2px; border: 0; background: var(--gold); opacity: 1; margin: 28px 0 !important; }

/* ---- 7. Groups: band styles offered in the editor ----------------------- */
.wp-block-group.is-style-band-navy { background: var(--navy); color: #fff; padding: clamp(44px, 6vw, 76px) var(--pad-x); }
.wp-block-group.is-style-band-navy h1, .wp-block-group.is-style-band-navy h2, .wp-block-group.is-style-band-navy h3 { color: #fff; }
.wp-block-group.is-style-band-navy p { color: #c9d2df; }
.wp-block-group.is-style-band-navy .kicker, .wp-block-group.is-style-band-navy .is-style-kicker { color: var(--gold-bright); }
.wp-block-group.is-style-band-parchment { background: var(--parchment); padding: clamp(44px, 6vw, 76px) var(--pad-x); }
.wp-block-group.is-style-band-cream { background: var(--cream); padding: clamp(44px, 6vw, 76px) var(--pad-x); }
.wp-block-group.is-style-band-white { background: #fff; padding: clamp(44px, 6vw, 76px) var(--pad-x); }
.wp-block-group[class*="is-style-band-"] > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Full-width groups inside a constrained body (campaign bodies). */
.campaign-body > .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ---- 8. Documents (the Document template + doc-* classes) ----------------- */
.doc-hero-grid { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-end; justify-content: space-between; }
.doc-hero-copy { max-width: 680px; }
.doc-facts { display: flex; flex-direction: column; gap: 14px; border-left: 2px solid rgba(224, 180, 88, .4); padding-left: 20px; margin: 0; }
.doc-facts div { margin: 0; }
.doc-facts dt { font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8ea0bd; margin: 0 0 6px; }
.doc-facts dd { margin: 0; font: 500 15px/1.4 var(--sans); color: #fff; }

.doc-layout { padding-top: clamp(38px, 5vw, 66px); padding-bottom: clamp(38px, 5vw, 66px); display: flex; gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.doc-toc { flex: 0 0 236px; position: sticky; top: 104px; max-height: calc(100vh - 140px); overflow-y: auto; padding-right: 6px; }
.doc-toc-label { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin: 0 0 12px; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font: 400 13px/1.4 var(--sans); }
.doc-toc a { display: flex; gap: 9px; padding: 6px 8px; border-radius: 4px; color: var(--body); }
.doc-toc a:hover { background: var(--parchment); color: var(--navy); }
.doc-toc a span { font: 600 10.5px/1.5 var(--mono); color: var(--gold); flex: none; }
@media (max-width: 900px) { .doc-layout { flex-direction: column; } .doc-toc { position: static; flex: none; max-height: none; width: 100%; } }

.doc-body {
	flex: 1 1 620px; min-width: 0; max-width: 790px;
	display: flex; flex-direction: column; gap: clamp(32px, 3.6vw, 44px);
	font: 400 clamp(15.5px, 1.3vw, 16.5px)/1.75 var(--sans); color: #3C4757;
	counter-reset: doc-section;
}
.doc-body p { margin: 0; }
.doc-body a { color: var(--navy); border-bottom: 1.5px solid var(--gold); }
.doc-body a:hover { color: var(--gold); }
.doc-body ul, .doc-body ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.doc-body li > ul, .doc-body li > ol { margin-top: 8px; }
.doc-body em { font-style: italic; }
.doc-body strong { font-weight: 600; color: var(--ink); }

.doc-intro { display: flex; flex-direction: column; gap: 15px; }
.doc-intro > p:first-child { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--ink); }

.doc-section { display: flex; flex-direction: column; gap: 15px; scroll-margin-top: 130px; border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 36px); }
.doc-section > h2 { margin: 0 0 4px; font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--serif); color: var(--navy); letter-spacing: -.01em; display: flex; gap: 14px; align-items: baseline; }
.doc-section > h2::before { counter-increment: doc-section; content: counter(doc-section, decimal-leading-zero); font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--gold); flex: none; }
.doc-section > h3, .doc-body h3 { margin: 10px 0 0; font: 600 clamp(17px, 1.7vw, 19px)/1.3 var(--serif); color: var(--navy); }

.doc-clause { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.doc-clause > .doc-clause-num { grid-column: 1; font: 600 12px/1.75 var(--mono); color: var(--gold); }
.doc-clause > *:not(.doc-clause-num) { grid-column: 2; }
.doc-clause > * + *:not(.doc-clause-num) { margin-top: 8px; }

.doc-callout { display: flex; gap: 14px; align-items: flex-start; background: var(--parchment); border: 1px solid rgba(176, 135, 60, .35); border-left: 3px solid var(--gold); border-radius: 8px; padding: 16px 20px; }
.doc-callout > .doc-callout-label { font: 600 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); flex: none; }
.doc-callout > p:not(.doc-callout-label) { font-size: 14px; line-height: 1.6; color: var(--body); }

.doc-box { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; }
.doc-box > .doc-box-label { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 2px; }
.doc-box > .doc-box-link { font: 600 13.5px/1 var(--sans); }
.doc-box > .doc-box-link a { border: 0; color: var(--navy); }
.doc-box > .doc-box-link a:hover { color: var(--gold); }
.doc-box .doc-clause { padding: 10px 0; border-top: 1px solid var(--line); }
.doc-box .doc-clause:first-of-type { border-top: 0; padding-top: 0; }

.doc-definitions { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
.doc-definitions > .doc-term { font: 600 14px/1.5 var(--sans); color: var(--ink); }

/* ---- 9. Editor canvas -------------------------------------------------------
   Designed sections carry their own backgrounds and paddings; the editor
   should show them edge to edge rather than boxed in the default column. */
.editor-styles-wrapper { background: var(--cream); }
.editor-styles-wrapper .wp-block-group.wrap,
.editor-styles-wrapper .wp-block-group.wrap-narrow,
.editor-styles-wrapper .wp-block-group.wrap-article { box-sizing: border-box; }