/**
 * Shared block conventions, loaded on the frontend AND in the editor canvas
 * (see veebify_enqueue_shared_assets in functions.php).
 *
 * Section spacing: blocks opt in by rendering data-spacing-top /
 * data-spacing-bottom attributes on their wrapper (none|small|medium|large).
 * Values here are the single source; mobile overrides at the bottom.
 */

/*
 * Section blocks sit flush, edge to edge: kill the layout block-gap margin
 * for any veebify block placed in a flow or constrained container — post
 * content on the frontend and the editor canvas alike. Core content blocks
 * (paragraphs, headings, …) are untouched and keep the normal block gap,
 * so text on interior pages doesn't collapse together. Sections own their
 * internal spacing via the data-spacing convention below.
 * WP's gap rules use :where() (zero specificity), so these always win.
 */

.is-layout-flow > [class*="wp-block-veebify-"],
.is-layout-constrained > [class*="wp-block-veebify-"],
.is-layout-flow > .veebify-embed,
.is-layout-constrained > .veebify-embed {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Template parts (header/footer) also sit flush against the page content. */
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/*
 * Stray empty paragraphs (left behind by editing) are 0px tall but still
 * carry the 24px block-gap margin — after the last section that shows up
 * as a white strip above the footer. Remove them from the flow entirely.
 */
.is-layout-flow > p:empty,
.is-layout-constrained > p:empty {
	display: none;
}

/*
 * Shared buttons: blocks render `veebify-btn is-style-filled|outline` on
 * button/anchor elements (hero, cta-big, footer, future blocks). Sharp
 * corners; font-size stays per-block. Colours from palette slugs only.
 */

.veebify-btn {
	box-sizing: border-box; /* max-width caps the full box, padding included */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border: 1px solid transparent;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.veebify-btn.is-style-filled {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

.veebify-btn.is-style-filled:hover,
.veebify-btn.is-style-filled:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
}

/* Outline: accent at 30% behind the dark accent-text so the label stays
   readable over any photo (hero/cta over imagery); 45% on hover. */
.veebify-btn.is-style-outline {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

.veebify-btn.is-style-outline:hover,
.veebify-btn.is-style-outline:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

/* Button group (hero __ctas, cta-big __buttons; add the class to future
   button rows). Mobile: a single centred grid column sized to the widest
   button's content (min 220px), so stacked buttons all share that width;
   each button is capped at 280px. 12px gap. The doubled class selector
   out-ranks the blocks' own gap rules whatever the stylesheet order.
   Blocks must not set their own mobile width/stretch rules on buttons. */
@media (max-width: 639px) {
	.veebify-btn-group.veebify-btn-group {
		display: grid;
		grid-template-columns: minmax(220px, max-content);
		justify-content: center;
		gap: 12px;
		width: 100%;
	}
	.veebify-btn-group .veebify-btn {
		width: 100%;
		min-width: 0;
		max-width: 280px;
		justify-self: center;
	}
}

/*
 * Shared eyebrow: small gold uppercase text with a short gold line each
 * side. Used by cta-big (class veebify-eyebrow) — add the
 * class rather than copying these rules into a block stylesheet.
 */

.veebify-eyebrow {
	display: flex;
	align-items: center;
	gap: 21px;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.veebify-eyebrow::before,
.veebify-eyebrow::after {
	content: "";
	width: 52px;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
}

/*
 * Section background + text tone: sectional blocks render --section-bg as
 * an inline custom property (the only inline style allowed) plus an
 * is-text-light / is-text-dark class — from veebify_section_attrs() in
 * functions.php (render) and SectionBackgroundControl in
 * src/shared/background.js (editor). Block stylesheets consume
 * background-color: var(--section-bg) and colour text roles with
 * var(--section-fg) / var(--section-fg-muted) defined here.
 */

.is-text-light {
	--section-fg: var(--wp--preset--color--text-light);
	--section-fg-muted: var(--wp--preset--color--text-muted);
}

.is-text-dark {
	/* Near-black body text used on light backgrounds across the theme. */
	--section-fg: #1a1a1a;
	--section-fg-muted: var(--wp--preset--color--text-muted);
}

/*
 * Third-party / embed blocks (veebify_wrap_embed_block in functions.php —
 * currently the Trustindex reviews widget). Same section background and
 * data-spacing convention as our blocks; inner container 1200px like the
 * features block. Content-box on purpose: Trustindex's loader derives the
 * column count from the widget's measured width (floor(width / 300)), so
 * the 24px gutters must not eat into the 1200px — 4 reviews on desktop,
 * stepping down naturally as the viewport narrows.
 */
.veebify-embed {
	background-color: var(--section-bg, var(--wp--preset--color--surface-warm));
	color: var(--section-fg, var(--wp--preset--color--text-light));
}

.veebify-embed__inner {
	box-sizing: content-box;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

@media (max-width: 600px) {
	.veebify-embed__inner {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/*
 * WP Google Review Slider ([wprevpro_usetemplate]) inside the embed wrapper.
 * The plugin insets the slides 30px each side (.wprev-slider margin) but
 * puts its 25px prev/next arrows 10px inside the slider, so they cover the
 * first and last cards. Park the arrows at the slider's edges, inside that
 * 30px lane; from 1320px up there is room beside the container, so drop
 * the lane — the cards take the full 1200px like the other sections — and
 * hang the arrows outside it.
 */
.veebify-embed .wprs_unslider-arrow.prev {
	left: 0;
}

.veebify-embed .wprs_unslider-arrow.next {
	right: 0;
}

@media (min-width: 1320px) {
	.veebify-embed .wprev-slider {
		margin-left: 0;
		margin-right: 0;
	}

	.veebify-embed .wprs_unslider-arrow.prev {
		left: -36px;
	}

	.veebify-embed .wprs_unslider-arrow.next {
		right: -36px;
	}
}

[data-spacing-top="none"] { padding-top: 0; }
[data-spacing-top="small"] { padding-top: 32px; }
[data-spacing-top="medium"] { padding-top: 64px; }
[data-spacing-top="large"] { padding-top: 96px; }

[data-spacing-bottom="none"] { padding-bottom: 0; }
[data-spacing-bottom="small"] { padding-bottom: 32px; }
[data-spacing-bottom="medium"] { padding-bottom: 64px; }
[data-spacing-bottom="large"] { padding-bottom: 96px; }

@media (max-width: 781px) {
	[data-spacing-top="small"] { padding-top: 24px; }
	[data-spacing-top="medium"] { padding-top: 40px; }
	[data-spacing-top="large"] { padding-top: 64px; }

	[data-spacing-bottom="small"] { padding-bottom: 24px; }
	[data-spacing-bottom="medium"] { padding-bottom: 40px; }
	[data-spacing-bottom="large"] { padding-bottom: 64px; }
}

/* --- Anchors (theme level) ---------------------------------------------
   Section blocks support "anchor" (HTML anchor under Advanced → id on the
   wrapper). The fixed header floats over the page, so anything targeted by
   an id scrolls to sit 16px below it. --veebify-header-height is set on
   <html> by the header block's view.js (78px = medium logo fallback). */
[id] {
	scroll-margin-top: calc(var(--veebify-header-height, 78px) + 16px);
}

html {
	scroll-behavior: smooth;
}

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