/* ==========================================================================
   SDP — Base: reset, document, typography, forms, a11y
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background-color: var(--sdp-bg);
	color: var(--sdp-ink-soft);
	font-family: var(--sdp-font-body);
	font-size: var(--sdp-text-base);
	line-height: var(--sdp-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Soft cream ground with two very diffuse brand blooms, as in the mockup. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60rem 40rem at 82% -10%, rgba(109, 96, 231, .10), transparent 60%),
		radial-gradient(50rem 34rem at -10% 30%, rgba(255, 122, 174, .08), transparent 60%),
		radial-gradient(46rem 30rem at 50% 108%, rgba(34, 193, 161, .08), transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sdp-4);
	font-family: var(--sdp-font-head);
	font-weight: 700;
	line-height: var(--sdp-leading-tight);
	color: var(--sdp-ink);
	letter-spacing: -0.015em;
}
h1 { font-size: var(--sdp-text-4xl); }
h2 { font-size: var(--sdp-text-3xl); }
h3 { font-size: var(--sdp-text-2xl); }
h4 { font-size: var(--sdp-text-xl); }
h5 { font-size: var(--sdp-text-lg); }
h6 { font-size: var(--sdp-text-base); }

p  { margin: 0 0 var(--sdp-4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--sdp-purple-600);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .18em;
	transition: color var(--sdp-dur-fast) var(--sdp-ease-out);
}
a:hover { color: var(--sdp-pink-600); }

strong, b { font-weight: 700; color: var(--sdp-ink); }
small     { font-size: var(--sdp-text-sm); }

ul, ol { margin: 0 0 var(--sdp-4); padding-inline-start: 1.25rem; }
li + li { margin-top: var(--sdp-1); }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

hr {
	border: 0;
	height: 1px;
	margin: var(--sdp-8) 0;
	background: var(--sdp-line);
}

blockquote {
	margin: var(--sdp-6) 0;
	padding: var(--sdp-5) var(--sdp-6);
	border-radius: var(--sdp-r-lg);
	background: var(--sdp-white);
	box-shadow: var(--sdp-clay-sm);
	font-family: var(--sdp-font-script);
	font-size: var(--sdp-text-xl);
	color: var(--sdp-ink);
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}
pre {
	overflow-x: auto;
	padding: var(--sdp-4);
	border-radius: var(--sdp-r-md);
	background: var(--sdp-mist);
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sdp-6);
}
th, td {
	padding: var(--sdp-3) var(--sdp-4);
	text-align: start;
	border-bottom: 1px solid var(--sdp-line);
}
th { font-family: var(--sdp-font-head); color: var(--sdp-ink); font-weight: 600; }

/* --- Forms — every field is a pressed clay well -------------------------- */
input, select, textarea, button { font: inherit; color: inherit; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	width: 100%;
	padding: var(--sdp-3) var(--sdp-4);
	border: 0;
	border-radius: var(--sdp-r-md);
	background: var(--sdp-white);
	color: var(--sdp-ink);
	box-shadow:
		inset 3px 4px 9px rgba(var(--sdp-clay-tint), .13),
		inset -2px -2px 6px rgba(255, 255, 255, .95);
	transition: box-shadow var(--sdp-dur) var(--sdp-ease-out);
}
textarea { min-height: 8rem; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--sdp-ink-faint); }

input:focus, select:focus, textarea:focus {
	outline: none;
	box-shadow:
		inset 3px 4px 9px rgba(var(--sdp-clay-tint), .16),
		0 0 0 3px rgba(var(--sdp-clay-tint), .28);
}

label {
	display: inline-block;
	margin-bottom: var(--sdp-2);
	font-family: var(--sdp-font-head);
	font-size: var(--sdp-text-sm);
	font-weight: 600;
	color: var(--sdp-ink);
}

/* --- Radios and checkboxes -------------------------------------------------
   These were never styled, so they kept browser defaults while the label above
   carried an 8px bottom margin — which is what pushed them out of alignment
   with their own text on checkout.
   -------------------------------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin: 0;
	padding: 0;
	accent-color: var(--sdp-purple);
	vertical-align: middle;
	cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }

/* A label that owns a radio or checkbox is a row, not a heading: no bottom
   margin, and the control sits on the text's centre line. */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: 0;
	font-weight: 600;
	cursor: pointer;
}

/* --- Accessibility ------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sdp-purple);
	outline-offset: 3px;
	border-radius: var(--sdp-r-sm);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed !important;
	top: var(--sdp-4); left: var(--sdp-4);
	z-index: 9999;
	width: auto; height: auto;
	padding: var(--sdp-3) var(--sdp-5);
	clip-path: none;
	border-radius: var(--sdp-r-pill);
	background: var(--sdp-white);
	box-shadow: var(--sdp-clay-md);
	font-family: var(--sdp-font-head);
	font-weight: 600;
	color: var(--sdp-ink);
}

[hidden] { display: none !important; }

/* --- WordPress core alignment & caption classes -------------------------- */
.alignleft  { float: left;  margin: 0 var(--sdp-6) var(--sdp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sdp-4) var(--sdp-6); }
.aligncenter{ display: block; margin-inline: auto; }
.alignwide, .alignfull { margin-block: var(--sdp-8); }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption {
	font-size: var(--sdp-text-sm);
	color: var(--sdp-ink-faint);
	text-align: center;
	margin-top: var(--sdp-2);
}
.sticky, .gallery-caption, .bypostauthor { /* required by the theme check */ }