/* =========================================================================
   YearbookLife — theme-wide globals.
   Section CSS lives in the section's own "Section: <slug>" block,
   appended by the section-conversion agent (see SECTION-PRIMER.md).
   ========================================================================= */

/* ---- Design tokens (mirror the vibe project's src/index.css; see VIBE-TOKENS.md).
   theme.json exposes these as WP presets — variables here are for plain HTML in
   patterns that don't have a preset applied. All HSL per the vibe design system. */
:root {
	--yb-background:        hsl(0 0% 100%);
	--yb-foreground:        hsl(223 37% 19%);
	--yb-primary:           hsl(15 81% 59%);
	--yb-primary-foreground:hsl(0 0% 100%);
	--yb-secondary:         hsl(169 39% 68%);
	--yb-secondary-foreground: hsl(223 37% 19%);
	--yb-muted:             hsl(169 30% 95%);
	--yb-muted-foreground:  hsl(223 15% 40%);
	--yb-accent:            hsl(169 39% 68%);
	--yb-border:            hsl(223 15% 90%);
	--yb-input:             hsl(223 15% 90%);
	--yb-ring:              hsl(15 81% 59%);
	--yb-destructive:       hsl(0 84.2% 60.2%);
	--yb-radius:            0.75rem;
}

body { -webkit-font-smoothing: antialiased; }

/* ---- Kill WP's default block gap (margin-block-start:24px) both at the top
   level (.wp-site-blocks children: header, main, footer), between the
   full-width sections stacked inside the constrained <main> (homepage), and
   between full-width sections stacked inside a WP Page's post-content
   wrapper (subpages — templates/page.html renders wp:post-content as
   .entry-content.is-layout-constrained). Sections manage their own vertical
   rhythm, so this gap only introduces stray offsets between them. */
.wp-site-blocks > *,
.wp-site-blocks main.is-layout-constrained > *,
.entry-content.is-layout-constrained > * { margin-block-start: 0; margin-block-end: 0; }

/* ---- Buttons: pill globally (matches the vibe project's default button shape). */
.wp-block-button__link { border-radius: 999px; font-weight: 700; padding: 0.7em 1.6em; }

/* ---- Video lightbox modal — paired with the initializer in assets/custom.js.
   Any section with a .yb-video-thumb link gets a YouTube modal for free. */
.yb-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 5vw; background: rgba(20,28,46,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.yb-modal.is-open { display: flex; }
.yb-modal__inner { position: relative; width: min(960px, 100%); }
.yb-modal__frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 1rem; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); background: #000; }
.yb-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yb-modal__close { position: absolute; top: -3rem; right: 0; background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; }

/* Mobile: FAQ / accordion sections line up with the 20px gutter of every other section.
   They were inset twice (WP root padding on the full-width group + their own container padding). */
@media (max-width: 767.98px) {
	:is(.yb-faq, .yb-faq-page, .yb-cv-faq).has-global-padding { padding-left: 1.25rem; padding-right: 1.25rem; }
	:is(.yb-faq, .yb-faq-page, .yb-cv-faq).has-global-padding > [class*="__container"] { padding-left: 0; padding-right: 0; }
	.yb-faq-page__container.yb-faq-page__container, .yb-cv-faq__container.yb-cv-faq__container { padding-left: 1.25rem; padding-right: 1.25rem; }
}