/**
 * Homepage built from WordPress blocks: bridges the block markup (wp-block-* wrappers, divs for list items,
 * Details / Table / Image blocks) to the homepage design in global.css and home.css. Front page + block editor.
 * Everything is scoped to the homepage wrapper (.gb-root.gb-home).
 */

/* Block spacing: Blocksy spaces every block in a flow layout (24px). The design sets its own spacing, so the
   flow spacing is off inside the homepage; the design's own margins (more specific) still apply. */
:where(.gb-root.gb-home) :is(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }
:where(.gb-root.gb-home) :is(.is-layout-flow, .is-layout-constrained) > :where(:not(h1, h2, h3, h4, h5, h6)) { margin-block-end: 0; }
:where(.gb-root.gb-home) :is(.wp-block-image, .wp-block-table) { margin: 0; }

/* Buttons and chips: the link carries the design classes (home-blocks.php), the Button wrapper steps aside
   so the link sits in its row as before. */
.gb-root.gb-home .wp-block-button { display: contents; }

/* Hero four-step strip: a div per step (was a list item). */
.gb-root .gb-hero__steps > .gb-hero__step { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--gb-r-md); background: rgba(255,255,255,0.04); font-size: var(--gb-fs-14); font-weight: 600; color: #fff; line-height: 1.3; }
.gb-root .gb-hero__step > p { margin: 0; }
.gb-root .gb-hero__step > .gb-hero__step-icon { flex: 0 0 auto; width: 22px; height: 22px; }
.gb-root .gb-hero__step > .gb-hero__step-icon img { display: block; width: 22px; height: 22px; }
@media (max-width: 560px) {
	.gb-root .gb-hero__steps > .gb-hero__step { padding: 10px 12px; }
}

/* How it works: the number and "who" labels are paragraphs now; keep their own sizes over ".gb-step p". */
.gb-root .gb-step p.gb-step__num { font-size: var(--gb-fs-18); color: var(--gb-gold); }
.gb-root .gb-step p.gb-step__who { font-size: var(--gb-fs-12); color: var(--gb-muted); }
.gb-root .gb-step p.gb-step__who--gb { color: var(--gb-gold-ink); }

/* Example spreadsheet: first column and the two-gift row (were classed cells). */
.gb-root .gb-sheet td:first-child { color: var(--gb-muted); }
.gb-root .gb-sheet tbody tr:nth-child(5) td { background: #fdfbf7; }

/* FAQ: the answer paragraph sits straight in the Details block (was inside .gb-faq__body). */
.gb-root .gb-faq details > p { padding: 0 4px 20px; color: var(--gb-ink-2); max-width: 70ch; font-size: var(--gb-fs-15); }
.gb-root .gb-faq details > p + p { margin-top: 8px; }

/* Contact card: phone and email are paragraphs holding the links (were bare links). */
.gb-root .gb-card .gb-contact p { margin: 0; font-size: inherit; color: inherit; }

/* How it works: the steps were an ordered list with the theme list start padding (1.2em); the cards keep that width. */
.gb-root .gb-steps.wp-block-group { padding-inline-start: 1.2em; }

/* Example spreadsheet: no Table block borders beyond the design's row lines. */
.gb-root .gb-sheet .wp-block-table thead { border-bottom: 0; }
.gb-root .gb-sheet .wp-block-table th { border-left: 0; border-right: 0; border-top: 0; }

/* Help card: the button sat in the card's text flow (a bare link), so its Buttons wrapper steps aside too. */
.gb-root.gb-home .gb-card > .wp-block-buttons { display: contents; }