/*
Theme Name: Yagil Tzivoni
Author: Itamar
Description: Custom WordPress theme for יגיל צבעוני | מתכנן פיננסי CFP, built from the Figma design (figma-to-wp skill).
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: yagil
*/

/* =============================================================================
 * Fonts — SELF-HOSTED (Stage F2)
 * -----------------------------------------------------------------------------
 * Heebo is a variable font on Google Fonts: one WOFF2 per subset covers the
 * weights the design uses (300 Light, 400 Regular, 500 Medium in articles). No external fonts enqueue.
 * ========================================================================== */

/* hebrew */
@font-face {
	font-family: 'Heebo';
	src: url('assets/fonts/heebo-hebrew.woff2') format('woff2');
	font-weight: 300 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin */
@font-face {
	font-family: 'Heebo';
	src: url('assets/fonts/heebo-latin.woff2') format('woff2');
	font-weight: 300 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================================
 * Design system — FROM FIGMA (Stage F1)
 * -----------------------------------------------------------------------------
 * Twin of design/tokens.json — change a token → change both files.
 * Type sizes are clamp()s: exact Figma size at the 1922px desktop frame, the
 * approved phone size at 390px (no mobile frame exists).
 * Breakpoints (literal in media queries, tagged): bp-sm 480 · bp-md 768 ·
 * bp-lg 1024 · bp-xl 1280.
 * ========================================================================== */

:root {
	--font-body: 'Heebo', system-ui, sans-serif;
	/* colors */
	--color-ink: #143864;
	--color-primary: #D3AD58;
	--color-surface: #FBF7F4;
	--color-white: #FFFFFF;
	--color-black: #000000;
	/* typeScale */
	--fs-100: clamp(0.875rem, 0.7795rem + 0.3916vw, 1.25rem);
	--fs-200: clamp(0.9375rem, 0.7943rem + 0.5875vw, 1.5rem);
	--fs-300: clamp(1rem, 0.8091rem + 0.7833vw, 1.75rem);
	--fs-400: clamp(1.0625rem, 0.8238rem + 0.9791vw, 2rem);
	--fs-500: clamp(1.125rem, 0.8386rem + 1.1749vw, 2.25rem);
	--fs-600: clamp(1.3125rem, 1.0102rem + 1.2402vw, 2.5rem);
	--fs-700: clamp(1.375rem, 1.025rem + 1.436vw, 2.75rem);
	--fs-800: clamp(1.875rem, 1.2068rem + 2.7415vw, 4.5rem);
	--fs-850: clamp(1.75rem, 1.1772rem + 2.3499vw, 4rem); /* Figma "כותרת מאמרים" 64 — inner-page title band */
	--fs-900: clamp(2rem, 0.9817rem + 4.1775vw, 6rem);
	/* fontWeights */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500; /* article sub-headings (Figma 243:820) */
	/* tracking */
	--tracking-title: 0.32em;
	--tracking-title-sm: 0.12em;
	--tracking-name: 0.19em;
	--tracking-tagline: 0.33em;
	/* spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-14: 3.5rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-30: 7.5rem;
	--space-fluid-sm: clamp(1rem, 0.7454rem + 1.0444vw, 2rem);
	--space-fluid-md: clamp(1.5rem, 1.2454rem + 1.0444vw, 2.5rem);
	--space-fluid-lg: clamp(2rem, 1.4909rem + 2.0888vw, 4rem);
	--space-fluid-xl: clamp(3rem, 1.8544rem + 4.6997vw, 7.5rem);
	--gutter: clamp(1.5rem, 1.3727rem + 0.5222vw, 2rem);
	/* radius */
	--radius-md: clamp(1.25rem, 1.0591rem + 0.7833vw, 2rem);
	--radius-lg: clamp(1.5rem, 1.2454rem + 1.0444vw, 2.5rem);
	--radius-full: 9999px;
	/* shadows */
	--shadow-box: 0 4px 12px 12px rgb(20 56 100 / 0.2);
	--shadow-card: 0 4px 20px 0 rgb(20 56 100 / 0.12);
	--shadow-soft: 0 4px 4px 0 rgb(58 52 46 / 0.2);
	--shadow-button: 0 4px 4px 0 rgb(20 56 100 / 0.1);
	--shadow-bar: 0 4px 12px 0 rgb(20 56 100 / 0.2);
	--shadow-photo: 0 4px 6px 0 rgb(20 56 100 / 0.2);
	--space-title-gap: clamp(2.5rem, 1.7681rem + 3.0026vw, 5.375rem);
	--space-title-after: clamp(2rem, 1.3318rem + 2.7415vw, 4.625rem);
	--space-stack-xl: clamp(2.5rem, 1.6408rem + 3.5248vw, 5.875rem);
	--space-bar-gap: clamp(1rem, 0.3954rem + 2.4804vw, 3.375rem);
	--header-offset: clamp(0.75rem, 0.4795rem + 1.1097vw, 1.8125rem);
	--size-social: clamp(3.5rem, 2.959rem + 2.2193vw, 5.625rem);
	--size-icon: clamp(1.5rem, 1.2932rem + 0.8486vw, 2.3125rem);
	--space-hero-top: clamp(6rem, 4.6953rem + 5.3525vw, 11.125rem);
	--space-hero-bottom: clamp(3rem, 2.1567rem + 3.4595vw, 6.3125rem);
	--space-box-top: clamp(2rem, 1.0295rem + 3.9817vw, 5.8125rem);
	--space-box-bottom: clamp(2rem, 1.2045rem + 3.2637vw, 5.125rem);
	--space-box-side: clamp(1.5rem, 1.0863rem + 1.6971vw, 3.125rem);
	--space-hero-group: clamp(2rem, 1.1727rem + 3.3943vw, 5.25rem);
	--space-hero-name: clamp(1rem, 0.5545rem + 1.8277vw, 2.75rem);
	--size-cfp: clamp(3.5rem, 2.8158rem + 2.8068vw, 6.1875rem);
	--space-about-top: clamp(2.5rem, 1.2908rem + 4.9608vw, 7.25rem);
	--space-about-bottom: clamp(3rem, 1.0112rem + 8.1593vw, 10.8125rem);
	--space-col-gap: clamp(2rem, 0.4408rem + 6.3969vw, 8.125rem);
	--space-grid-gap: clamp(1.5rem, 0.068rem + 5.8747vw, 7.125rem);
	--space-card-pad-block: clamp(1.5rem, 1.0545rem + 1.8277vw, 3.25rem);
	--space-card-pad-inline: clamp(1.5rem, 0.9909rem + 2.0888vw, 3.5rem);
	--space-card-gap: clamp(1.5rem, 0.8954rem + 2.4804vw, 3.875rem);
	--space-courses-bottom: clamp(3rem, -0.6594rem + 15.0131vw, 17.375rem);
	--space-testi-gap: clamp(4rem, 2.2817rem + 7.0496vw, 10.75rem);
	--space-testi-bottom: clamp(3rem, 2.1249rem + 3.5901vw, 6.4375rem);
	--space-letter-gap: clamp(1.5rem, 0.7363rem + 3.1332vw, 4.5rem);
	--space-letter-gap-wide: clamp(1.5rem, -0.0274rem + 6.2663vw, 7.5rem);
	--space-video-gap: clamp(1rem, -0.4001rem + 5.7441vw, 6.5rem);
	--size-letter: clamp(10rem, 6.2451rem + 15.4047vw, 24.75rem);
	--size-video: clamp(16.25rem, 14.1816rem + 8.4856vw, 24.375rem);
	--size-shot: clamp(16.25rem, 14.0862rem + 8.8773vw, 24.75rem);
	--size-play: clamp(4rem, 2.9499rem + 4.3081vw, 8.125rem);
	--shadow-shot: 0 4px 12px 8px rgb(20 56 100 / 0.08);
	--space-divider: clamp(1rem, 0.7693rem + 0.9465vw, 1.9063rem);
	--space-video-grid: clamp(1rem, -0.3524rem + 5.5483vw, 6.3125rem);
	--space-caption: clamp(1.25rem, 0.725rem + 2.154vw, 3.3125rem);
	--space-videos-bottom: clamp(3rem, 0.3111rem + 11.0313vw, 13.5625rem);
	--size-article: clamp(17.5rem, 11.2631rem + 25.5875vw, 42rem);
	--space-article-gap: clamp(1rem, 0.6818rem + 1.3055vw, 2.25rem);
	--space-articles-bottom: clamp(3rem, 0.0884rem + 11.9452vw, 14.4375rem);
	--shadow-article: 0 4px 10px 0 rgb(20 56 100 / 0.12);
	--shadow-box-soft: 0 4px 13.2px 15px rgb(20 56 100 / 0.05); /* navy hero box */
	--space-faq-gap: clamp(1rem, 0.5068rem + 2.0235vw, 2.9375rem);
	--space-faq-pad: clamp(1.25rem, 0.9318rem + 1.3055vw, 2.5rem);
	--space-faq-inner: clamp(1rem, 0.5227rem + 1.9582vw, 2.875rem);
	--space-faq-bottom: clamp(3rem, -0.2458rem + 13.3159vw, 15.75rem);
	/* inner pages (ethics code, Figma 243:684) */
	--space-hero-page-top: clamp(6rem, 5.1727rem + 3.3943vw, 9.25rem);
	--space-box-page: clamp(2rem, 0.8864rem + 4.5692vw, 6.375rem);
	--space-band: clamp(1.5rem, 1.0545rem + 1.8277vw, 3.25rem);
	--space-page-block: clamp(3rem, 2.2363rem + 3.1332vw, 6rem);
	--space-archive-bottom: clamp(3rem, 0.8521rem + 8.812vw, 11.4375rem); /* articles archive: last card row → footer (183) */
	/* container */
	--container-max: 86.125rem;
}


/* =============================================================================
 * Base + resets + typography — FROM FIGMA
 * ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* In-page anchors land below the sticky header (height published by script.js). */
	scroll-padding-block-start: calc(var(--header-h, 0px) + var(--space-4));
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-light);
	font-size: var(--fs-400);
	line-height: normal; /* Figma text styles use "auto" line height */
	color: var(--color-ink);
	background: var(--color-surface);
	overflow-x: clip; /* clip, never hidden — hidden would disable the sticky header */
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-weight: var(--fw-regular);
}

/*
 * Figma trims every text box to cap height / baseline ("text-box-trim"), so
 * its spacing is measured from the letters, not from the line box. The same
 * CSS property makes the paddings/gaps below mean what the design means.
 * Browsers without support fall back to slightly looser spacing — harmless.
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figcaption,
.btn__label,
.text-trim {
	text-box: trim-both cap alphabetic;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
svg,
video {
	display: block;
	max-inline-size: 100%;
}

a {
	color: inherit;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: 1000;
	inline-size: auto;
	block-size: auto;
	clip: auto;
	margin: 0;
	padding: var(--space-2) var(--space-4);
	background: var(--color-white);
	color: var(--color-ink);
}

/* ---- Layout ---- */

.container {
	inline-size: 100%;
	max-inline-size: calc(var(--container-max) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Figma's hand-set line breaks only fit the desktop columns. */
@media (max-width: 1023px) { /* bp: --bp-lg */
	.br-lg {
		display: none;
	}
}

/* ---- Shared: section title (Figma text style "כותרת איזור": Heebo Light 96, +32%) ---- */

.section-title {
	font-size: var(--fs-900);
	font-weight: var(--fw-light);
	letter-spacing: var(--tracking-title);
	color: var(--color-ink);
	text-align: center;
	/* Browsers add tracking after the last letter too; Figma's box does not.
	   Matching padding on the start side re-centres the letters without the
	   overflow a negative margin would cause. */
	padding-inline: calc(var(--gutter) + var(--tracking-title)) var(--gutter);
}

/* ---- Shared: pill button (Figma component "כפתור") ---- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	padding-block: var(--space-6);
	padding-inline: var(--space-8);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-ink);
	font-size: var(--fs-300);
	font-weight: var(--fw-light);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: var(--shadow-button);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-bar);
}

.btn--white {
	background: var(--color-white);
}

.btn--sm {
	padding-block: var(--space-3);
	font-size: var(--fs-200);
}

.btn__label {
	display: block;
}

/* Figma "CourseButton": the smaller pill on course and article cards. */
.btn--course {
	gap: var(--space-5);
	padding-block: var(--space-4);
}

/* Article cards (Figma CourseButton "למאמר המלא"): the label keeps its full line
   box (41px at 28px), so the pill is 73px tall. The course cards' pills are trimmed. */
.articles-home__btn .btn__label,
.articles-archive__btn .btn__label {
	text-box: normal;
}

.btn--course .btn__icon {
	inline-size: 1em; /* 28px arrow at 28px text */
}

/* Figma: the navy "לעמוד המאמרים המלא" pill. */
.btn--navy {
	background: var(--color-ink);
	color: var(--color-white);
}

.btn__icon {
	flex: none;
	inline-size: var(--size-icon); /* Figma arrow: 37×29 at every button size */
	block-size: auto;
}

@media (max-width: 767px) { /* bp: --bp-md */
	.section-title {
		letter-spacing: var(--tracking-title-sm);
		padding-inline-start: calc(var(--gutter) + var(--tracking-title-sm));
	}
	.btn {
		gap: var(--space-4);
		padding-block: var(--space-4);
		padding-inline: var(--space-6);
		white-space: normal;
	}
}


/* =============================================================================
 * Global chrome — FROM FIGMA (Stage A1)
 * ========================================================================== */

/* ---- Shared: section divider (Figma "מפרידון קונטינרים") ---- */

.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	inline-size: 100%;
	padding-block: var(--space-divider); /* Figma bar: 131px = 70px flower + 2 × 30.5 */
	padding-inline: var(--gutter);
	background: var(--color-white);
	box-shadow: var(--shadow-bar);
}

.divider__line {
	flex: 1 1 0;
	max-inline-size: 40.3125rem; /* lint-ok: 645px — the Figma line length, a cap not a size */
	border-block-start: 2px solid var(--color-primary);
}

.divider__flower {
	flex: none;
	inline-size: clamp(3rem, 2.4rem + 2.2vw, 4.9375rem); /* lint-ok: 48→79px flower, decorative */
	block-size: auto;
}

/* ---- Shared: carousel (Figma "נקודות וחיצים") — inc/carousel.php + assets/js/carousel.js ---- */

.carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-fluid-lg);
}

.carousel__track {
	display: flex;
	gap: var(--carousel-gap, var(--space-fluid-md));
	inline-size: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: var(--space-2); /* Figma p-8 — room for the slides' shadows */
}

.carousel__track::-webkit-scrollbar {
	display: none;
}

.carousel__slide {
	flex: none;
	scroll-snap-align: center;
}

.carousel__nav {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-2);
}

.carousel__arrow {
	display: grid;
	place-items: center;
	padding-block: 0; /* the 42px chevron is the bar's height, as in Figma */
	padding-inline: var(--space-3);
	border: 0;
	background: none;
	color: var(--color-ink);
	cursor: pointer;
}

.carousel__chevron {
	inline-size: 1.3125rem; /* lint-ok: 21px chevron from Figma — icon */
	block-size: auto;
}

.carousel__chevron--flip {
	transform: scaleX(-1);
}

.carousel__dots {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.carousel__dot {
	inline-size: 0.9375rem; /* lint-ok: 15px dot — badge */
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	cursor: pointer;
}

.carousel__dot.is-active {
	background: var(--color-ink);
}

/* ---- Header (Figma 243:47 "תפריט") — sticky on every width ---- */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	padding-block-start: var(--header-offset);
	transition: padding 0.3s ease;
}

.site-header.is-scrolled {
	padding-block-start: 0;
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-bar-gap);
	padding-block: var(--space-2);
	padding-inline: var(--gutter);
	background: var(--color-white);
	transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled .site-header__bar {
	box-shadow: var(--shadow-bar);
}

.site-header__logo {
	flex: none;
	display: block;
}

.site-header__logo img {
	inline-size: 9.5rem; /* lint-ok: 152px logo box from Figma — logo is allowlisted */
	block-size: auto;
}

.site-header__nav {
	flex: 0 1 auto;
	min-inline-size: 0;
}

.site-header__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 var(--space-fluid-sm);
}

.site-header__menu a {
	display: block;
	padding-block: var(--space-2);
	font-size: var(--fs-200);
	line-height: normal;
	color: var(--color-ink);
	text-decoration: none;
	text-box: trim-both cap alphabetic;
}

.site-header__menu a:hover,
.site-header__menu .current-menu-item:not(.menu-item-type-custom) > a {
	color: var(--color-primary);
}

.site-header__cta {
	flex: none;
	padding-inline: var(--space-14); /* Figma: fixed 295px pill */
}

.site-header__burger {
	display: none;
	margin-inline-start: auto;
	padding: var(--space-3);
	border: 0;
	background: none;
	color: var(--color-ink);
	cursor: pointer;
}

/* Pages without a hero start below the fixed header. A hero (home, the articles
   archive, an inner page opening with hero-page, an article opening with its
   photo) sits under the header, as drawn in Figma. */
body:not(.home) #main:not(:has(> :is(.hero-home, .hero-page):first-child)):not(:has(.article-photo)) {
	padding-block-start: calc(var(--header-h, 5rem) + var(--header-offset));
}

@media (max-width: 1399px) { /* bp: --bp-nav — the desktop menu stops fitting */
	.site-header__bar {
		justify-content: flex-start;
	}
	.site-header__nav,
	.site-header__cta {
		display: none;
	}
	.site-header__burger {
		display: block;
	}
}

@media (max-width: 767px) { /* bp: --bp-md */
	.site-header__logo img {
		inline-size: 7rem; /* lint-ok: phone logo size, allowlisted */
	}
}

/* ---- Mobile drawer ---- */

.site-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	background: rgb(20 56 100 / 0.4); /* lint-ok: --color-ink at 40% — scrim */
	opacity: 0;
	transition: opacity 0.25s ease;
}

.site-drawer.is-open {
	opacity: 1;
}

.site-drawer[hidden] {
	display: none;
}

.site-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	inline-size: 100%;
	overflow-y: auto;
	padding-block: var(--space-20) var(--space-10);
	padding-inline: var(--gutter);
	background: var(--color-surface);
}

.site-drawer__close {
	position: absolute;
	inset-block-start: var(--space-6);
	inset-inline-end: var(--gutter);
	padding: var(--space-3);
	border: 0;
	background: none;
	color: var(--color-ink);
	cursor: pointer;
}

.site-drawer__menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-align: center;
}

.site-drawer__menu a {
	display: block;
	padding-block: var(--space-3);
	font-size: var(--fs-600);
	color: var(--color-ink);
	text-decoration: none;
}

/* ---- Footer (Figma 243:413) — "בואו נדבר" contact block + designer credit ---- */

.site-footer__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-title-gap);
	padding-block-end: var(--space-title-after);
}

.site-footer__panel {
	padding-block: var(--space-fluid-xl);
	background: var(--color-ink);
	color: var(--color-surface);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-stack-xl);
}

.site-footer__intro {
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
	text-align: center;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-stack-xl);
	inline-size: 100%;
}

.contact-form__row {
	display: flex;
	gap: var(--space-6);
}

.contact-form__field {
	flex: 1 1 0;
	display: flex;
	align-items: flex-end;
	gap: var(--space-6);
	min-inline-size: 0;
}

.contact-form__label {
	flex: none;
	text-box: trim-both cap alphabetic;
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
	white-space: nowrap;
}

.contact-form__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding-block: 0; /* browsers keep an input's natural line box — the row is its height */
	padding-inline: 0;
	border: 0;
	border-block-end: 2px solid var(--color-surface);
	border-radius: 0;
	background: transparent;
	font-size: var(--fs-400);
	color: var(--color-surface);
}

.contact-form__input:focus-visible {
	outline: none;
	border-block-end-color: var(--color-primary);
}

.contact-form__consent {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--fs-400);
	cursor: pointer;
}

.contact-form__checkbox,
.contact-form__consent input[type="checkbox"] {
	flex: none;
	appearance: none;
	inline-size: 2.1875rem; /* lint-ok: 35px checkbox box from Figma */
	block-size: 2.1875rem; /* lint-ok: 35px checkbox box, not text-bearing */
	margin: 0;
	border: 2px solid var(--color-surface);
	background: transparent;
	cursor: pointer;
}

.contact-form__checkbox:checked,
.contact-form__consent input[type="checkbox"]:checked {
	background: var(--color-primary);
	box-shadow: inset 0 0 0 4px var(--color-ink);
}

.contact-form__consent-text a,
.contact-form__consent a {
	color: var(--color-primary);
}

.contact-form__submit {
	inline-size: 100%;
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
}

.site-footer__socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-12);
}

.site-footer__social {
	position: relative;
	display: block;
	inline-size: var(--size-social);
	aspect-ratio: 1;
	transition: transform 0.2s ease;
}

.site-footer__social:hover {
	transform: translateY(-3px);
}

/* The SVG carries its drop shadow outside the 90px circle (Figma inset
   0 -4.44% -8.89% -4.44%), so it overflows the link box instead of sizing it. */
.site-footer__social img {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -4.44%;
	inline-size: 108.9%;
	max-inline-size: none;
	block-size: auto;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	font-size: var(--fs-400);
}

.site-footer__copyright {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.site-footer__copyright-icon {
	flex: none;
	inline-size: 1.25em;
	block-size: auto;
}

.site-footer__legal-link {
	text-box: trim-both cap alphabetic;
	padding-inline-start: var(--space-6);
	border-inline-start: 2px solid var(--color-surface);
	color: var(--color-white);
	text-decoration: none;
}

.site-footer__legal-link:hover {
	text-decoration: underline;
}

.site-footer__credit {
	display: flex;
	justify-content: center;
	padding-block: var(--space-10) var(--space-2);
}

.site-footer__credit img {
	inline-size: 10.4375rem; /* lint-ok: 167px designer logo, allowlisted */
	block-size: auto;
}

/* ---- Contact Form 7 retarget: style only what CF7 adds (B5) ---- */

.site-footer__form {
	inline-size: 100%;
}

.contact-form .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	display: flex;
	min-inline-size: 0;
}

/* The consent row: CF7 nests the checkbox three spans deep plus a label. Flatten
   the wrappers so box · text · link are one flex sentence (gotcha: a flex
   container blockifies inline wrappers). */
.contact-form__consent .wpcf7-form-control-wrap,
.contact-form__consent .wpcf7-acceptance,
.contact-form__consent .wpcf7-list-item,
.contact-form__consent label {
	display: contents;
}

.contact-form__consent {
	flex-wrap: wrap;
	column-gap: var(--space-2);
}

.contact-form__consent input[type="checkbox"] {
	margin-inline-end: var(--space-4); /* box → text: 24px with the row gap, as in Figma */
}

.contact-form__consent .wpcf7-list-item-label,
.contact-form__consent a {
	text-box: trim-both cap alphabetic;
}

.contact-form .wpcf7-not-valid-tip {
	position: absolute;
	inset-block-start: 100%;
	font-size: var(--fs-100);
	color: var(--color-primary);
}

.contact-form .wpcf7-form-control-wrap,
.contact-form__consent {
	position: relative;
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: var(--space-4) var(--space-6);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-md);
	font-size: var(--fs-300);
	text-align: center;
}

.wpcf7-spinner {
	display: none;
}

@media (max-width: 767px) { /* bp: --bp-md — phone plan: fields stack, links stack */
	.contact-form__row {
		flex-direction: column;
		gap: var(--space-stack-xl);
	}
	.contact-form__consent {
		align-items: flex-start;
	}
	.site-footer__socials {
		gap: var(--space-4); /* 4 + 3 icons in two rows */
		padding-inline: var(--space-4);
	}
	.site-footer__legal {
		flex-direction: column;
		gap: var(--space-3);
	}
	.site-footer__legal-link {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
	.site-footer__credit img {
		inline-size: 7rem; /* lint-ok: phone credit logo, allowlisted */
	}
}

/* ---- Shared: YouTube popup (inc/video-modal.php + assets/js/video-modal.js) ---- */

/* The stretched button over a video card: the whole card is the hit area. */
.video-trigger {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
}

.video-trigger:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

.video-modal {
	inline-size: min(90vw, 68.75rem); /* lint-ok: 1100px player cap */
	max-inline-size: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.video-modal::backdrop {
	background: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

.video-modal__box {
	position: relative;
}

.video-modal__frame {
	aspect-ratio: 16 / 9;
	overflow: hidden; /* radius mask */
	border-radius: var(--radius-md);
	background: var(--color-black);
	box-shadow: var(--shadow-box);
}

.video-modal__frame iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.video-modal__close {
	position: absolute;
	inset-block-end: calc(100% + var(--space-3));
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	inline-size: var(--space-12);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
}

.has-video-modal body {
	overflow: hidden; /* lint-ok: scroll lock while the modal is open; the header is fixed, not sticky */
}

/* ---- Basic pages (page.php, 404.php, index.php) — composed from the design system ---- */

.basic-page {
	padding-block-end: var(--space-fluid-xl);
}

.basic-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-fluid-lg);
	margin-block-start: var(--space-title-gap);
}

.basic-page__lead {
	max-inline-size: 48rem; /* lint-ok: reading measure */
	font-size: var(--fs-400);
	text-align: center;
}

.basic-page__content {
	inline-size: 100%;
	max-inline-size: 60rem; /* lint-ok: reading measure */
	font-size: var(--fs-300);
	line-height: 1.6;
}

.basic-page__content > * + * {
	margin-block-start: 1em;
}

.basic-page__content h2,
.basic-page__content h3 {
	font-size: var(--fs-600);
}

.basic-page__content ul,
.basic-page__content ol {
	padding-inline-start: 1.5em;
	list-style: revert;
}

/* ---- Third-party: AccessibleWP toolbar (stand-in until a certified provider) ----
   Reset the theme's fluid type on its root (gotcha), and move it to the bottom
   RIGHT corner: the WhatsApp bubble owns the bottom left, and at the top left it
   covered the hero box on phones. Physical sides on purpose: a screen corner. */

#acwp-toolbar-btn-wrap,
#acwp-toolbar {
	font-family: system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.4;
}

#acwp-toolbar-btn-wrap {
	top: auto !important; /* lint-ok: overrides the plugin's inline-level position */
	bottom: var(--space-4);
	left: auto !important; /* physical: screen corner */
	right: var(--space-4); /* physical: screen corner */
}

#acwp-toolbar {
	left: auto !important; /* physical: screen corner */
	right: 20px; /* physical: matches the plugin's own 20px inset; lint-ok */
}