/**
 * Base layer — resets, layout primitives, buttons and the scroll-reveal system.
 * Ported verbatim from the Pawsentials landing page's <style id="base"> block.
 */

* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
h1 { line-height: 1.05; }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }
.section--dark :focus-visible,
.pw-footer :focus-visible { outline-color: var(--color-primary); }

/* Skip link — visible only once focused. */
.pw-skip-link:focus {
	position: fixed;
	inset: 1rem auto auto 1rem;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--color-secondary);
	color: var(--on-dark);
	border-radius: var(--btn-radius);
	font-family: var(--font-display);
	font-weight: 700;
}

/* ── Flow-gap neutraliser ───────────────────────────────────────────────────
   theme.json sets a 1.25rem blockGap, which core turns into

       :root :where(.is-layout-flow) > * { margin-block-start: 1.25rem }

   That is right for prose and wrong for this page. The sections are built to
   butt together, and the wave dividers pull themselves 1px into their
   neighbours, so the inherited gap renders as a white stripe: under the promo
   marquee, above and below every tinted band, and either side of every wave —
   where it also exposes the page background through the divider.

   Only the theme's own section-level blocks are reset. Paragraphs, headings
   and images inside a group keep the rhythm blockGap gives them, and no other
   template is affected.

   Core writes those gaps at two specificities: (0,1,0) for the global
   `:root :where(.is-layout-flow) > *`, and (0,0,0) for the site-level
   `:where(.wp-site-blocks) > *`, since :where() contributes nothing. The :is()
   prefix here lands at (0,2,0) and so beats both outright rather than relying
   on this stylesheet happening to be printed after the global styles.
   .wp-site-blocks is the front end; .editor-styles-wrapper is the Site Editor
   canvas, where that wrapper does not exist. */
:is(.wp-site-blocks, .editor-styles-wrapper) :is(
	.promo,
	.mobile-hero,
	.hero2,
	.section,
	.sym,
	.sym__row,
	.stickybuy,
	.legal
),
:is(.wp-site-blocks, .editor-styles-wrapper) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* The wave is the exception: it does not want zero, it wants its own -1px.
   Sub-pixel rounding at fractional zoom levels leaves a hairline of page
   background between the divider and the section it joins, and the overlap is
   what hides it. Restated at the same specificity so the reset above cannot
   flatten it back to zero. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wave {
	margin-block: -1px;
}

/* ── Layout primitives ──────────────────────────────────────────────────── */
.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); margin-block-start:0 !important;}
.section--surface { background: var(--color-surface); }
.section--dark { background: var(--color-dark); color: var(--on-dark); }
.section--primary { background: var(--color-primary); color: var(--on-primary); }

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-secondary);
	margin-bottom: .9rem;
}

.section--dark .eyebrow {
	color: var(--on-primary);
	background: var(--color-primary);
	padding: .4rem .95rem;
	border-radius: 999px;
}

.section-title { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.01em; margin-bottom: .85rem; }
.section--dark .section-title { color: var(--on-dark); }
.section-sub { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--color-muted); max-width: 56ch; }
.section--dark .section-sub { color: var(--on-dark-muted); }
.head-center { text-align: center; margin-inline: auto; }
.head-center .section-sub { margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .95rem 1.9rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: var(--btn-radius);
	border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
	white-space: nowrap;
}

.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: var(--on-primary); box-shadow: var(--btn-shadow); }
.btn--primary:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--color-secondary); filter: none; }
.btn--outline { background: transparent; border-color: var(--color-secondary); color: var(--color-text); box-shadow: var(--btn-shadow); }
.btn--outline:hover { background: var(--color-secondary); color: var(--on-dark); transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--color-secondary); }
.section--dark .btn--outline { border-color: var(--on-dark); color: var(--on-dark); box-shadow: 4px 4px 0 rgba(255, 255, 255, .35); }
.section--dark .btn--outline:hover { background: var(--on-dark); color: var(--color-secondary); }

/* ── Scroll reveal ──────────────────────────────────────────────────────────
   JS-driven. Without the editor guard below, every .reveal block would sit at
   opacity 0 inside the Site Editor canvas, where the observer never runs. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

.block-editor-block-list__layout .reveal,
.is-root-container .reveal { opacity: 1 !important; transform: none !important; }

/* ── Section waves ──────────────────────────────────────────────────────────
   Fills come from the tokens, never hardcoded hex. --from-X matches the section
   ABOVE, --to-Y the section BELOW, so reordering sections cannot leave a
   divider showing the wrong colour. */
.wave { line-height: 0; margin-block: -1px; position: relative; z-index: 1; }
.wave svg { display: block; width: 100%; height: auto; position: relative; top: 1px; }
.wave--from-bg { background: var(--color-bg); }
.wave--from-surface { background: var(--color-surface); }
.wave--from-dark { background: var(--color-dark); }
.wave--to-bg svg path { fill: var(--color-bg); }
.wave--to-surface svg path { fill: var(--color-surface); }
.wave--to-dark svg path { fill: var(--color-dark); }

/* ── Image placeholders ────────────────────────────────────────────────────
   Every .ph box is a slot waiting for a real photo. */
.ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	text-align: center;
	padding: 1.25rem;
	aspect-ratio: var(--ph-ratio, 4 / 3);
	border: 2px dashed var(--color-secondary);
	border-radius: var(--img-radius);
	color: var(--color-secondary);
	background: repeating-linear-gradient(-45deg,
		color-mix(in srgb, var(--color-primary) 16%, #fff) 0 14px,
		#fff 14px 28px);
}

.ph__tag {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	background: var(--color-secondary);
	color: #fff;
	padding: .25rem .75rem;
	border-radius: 999px;
}

.ph__what { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; max-width: 32ch; }
.ph__spec { font-size: .76rem; font-weight: 600; color: var(--color-muted); }
.section--dark .ph { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .55); color: var(--on-dark); }
.section--dark .ph__tag { background: var(--color-primary); color: var(--on-primary); }
.section--dark .ph__spec { color: var(--on-dark-muted); }

/* ── Screen-reader only ─────────────────────────────────────────────────── */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ── WordPress alignment helpers the block editor emits ─────────────────── */
.alignwide { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.alignfull { max-width: none; width: 100%; }
.aligncenter { margin-inline: auto; }