/* DigitalScore: front-end and editor styles. Colours come from theme.json palette variables. */

/* ---------- Dark mode: override palette variables ---------- */
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #08141D;
	--wp--preset--color--surface: #0E202D;
	--wp--preset--color--contrast: #E7F0F4;
	--wp--preset--color--muted: #9DB1BD;
	--wp--preset--color--line: #1C3344;
	--wp--preset--color--teal: #00C0D8;
	--wp--preset--color--teal-deep: #22D3EE;
	--wp--preset--color--blue: #5CB4E8;
	--wp--preset--color--teal-tint: #0B2D36;
	--wp--preset--color--blue-tint: #102A44;
	--wp--preset--color--on-accent: #04222A;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--teal); color: #04222A; }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}
.ds-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.ds-header-inner { gap: 1.25rem; }
.ds-logo { display: inline-flex; align-items: center; line-height: 0; }
.ds-logo img { height: 64px; width: auto; display: block; }
.ds-logo .ds-logo-dark { display: none; }
:root[data-theme="dark"] .ds-logo .ds-logo-light { display: none; }
:root[data-theme="dark"] .ds-logo .ds-logo-dark { display: block; }
.ds-header-actions { gap: 0.75rem; align-items: center; }
.ds-theme-toggle {
	appearance: none;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-radius: 999px;
	font: 500 0.75rem/1 var(--wp--preset--font-family--mono);
	padding: 0.5rem 0.8rem;
	cursor: pointer;
	letter-spacing: 0.02em;
}
.ds-theme-toggle:hover { border-color: var(--wp--preset--color--teal); }
.ds-theme-toggle .ds-t-dark { display: none; }
:root[data-theme="dark"] .ds-theme-toggle .ds-t-light { display: none; }
:root[data-theme="dark"] .ds-theme-toggle .ds-t-dark { display: inline; }
@media (max-width: 600px) {
	.ds-logo img { height: 52px; }
	.ds-header-cta { display: none; }
}

/* ---------- Eyebrow, mono, helpers ---------- */
.ds-eyebrow,
.ds-eyebrow a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-deep);
	text-decoration: none;
	margin-bottom: 0.5rem;
}
.ds-mono { font-family: var(--wp--preset--font-family--mono); }

/* ---------- Hero ---------- */
.ds-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(3rem, 8vw, 6.5rem);
	padding-bottom: clamp(3rem, 8vw, 6rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.ds-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--wp--preset--color--line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--wp--preset--color--line) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at 25% 15%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse at 25% 15%, #000 0%, transparent 70%);
	opacity: 0.8;
	pointer-events: none;
}
.ds-hero > * { position: relative; }
.ds-hero h1 { max-width: 18ch; }
.ds-lead { max-width: 52ch; }

/* ---------- Cards ---------- */
.ds-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 1.5rem;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.ds-card:hover { border-color: var(--wp--preset--color--teal); }
.ds-card h3 { margin-top: 0; margin-bottom: 0.5rem; }
.ds-card p { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.ds-card > *:last-child { margin-bottom: 0; }
.ds-card a { text-underline-offset: 3px; }
.ds-post-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.ds-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--teal-deep); }
.ds-post-card .wp-block-post-featured-image { margin: -1.5rem -1.5rem 1.25rem; }
.ds-post-card .wp-block-post-featured-image img { border-radius: 14px 14px 0 0; }

/* ---------- "What we map" list in hero ---------- */
.ds-map ul { list-style: none; margin: 0; padding: 0; counter-reset: ds; }
.ds-map li {
	counter-increment: ds;
	display: flex;
	gap: 0.9rem;
	align-items: baseline;
	padding: 0.65rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}
.ds-map li:first-child { border-top: 0; }
.ds-map li::before {
	content: counter(ds, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--teal-deep);
}

/* ---------- Evidence strip ---------- */
.ds-strip {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}
.ds-strip p {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ---------- Steps ---------- */
.ds-step-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--teal);
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* ---------- CTA band ---------- */
.ds-cta { border-radius: 18px; }
.ds-cta h2, .ds-cta p { color: #fff; }
.ds-cta .ds-lead { color: #CFE3EC; }

/* ---------- Sections ---------- */
.ds-section {
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.ds-section-head { margin-bottom: 2rem; }
.ds-section-head h2 { margin-top: 0; }

/* ---------- Footer ---------- */
.ds-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding-top: 3rem;
	padding-bottom: 2rem;
	font-size: var(--wp--preset--font-size--small);
}
.ds-footer .ds-logo img { height: 96px; }
.ds-footer h4 { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.ds-footer ul { list-style: none; padding: 0; margin: 0; }
.ds-footer li { margin: 0.4rem 0; }
.ds-footer a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.ds-footer a:hover { color: var(--wp--preset--color--teal-deep); }
.ds-footer-nav .wp-block-navigation__container { gap: 0.4rem; }
.ds-footer-nav a { font-size: var(--wp--preset--font-size--small); }
.ds-footer-legal .wp-block-navigation__container { gap: 1rem; }
.ds-footer-legal a { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.ds-footer-base { border-top: 1px solid var(--wp--preset--color--line); margin-top: 2rem; padding-top: 1.25rem; color: var(--wp--preset--color--muted); }

/* ---------- Post meta ---------- */
.ds-meta { gap: 1rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.ds-meta a { text-decoration: none; }

/* ---------- Forms (plugin forms inherit a clean look) ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select {
	width: 100%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 0.75rem 0.9rem;
	font: inherit;
}
input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 1px;
}

/* ---------- Layout rhythm ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }
.ds-hero, .ds-strip, .ds-section, .ds-footer { margin-block-start: 0; }
.ds-main {
	padding-top: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(2rem, 5vw, 4rem);
}
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.wp-block-post-featured-image img { border-radius: 12px; }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal-deep);
	background: transparent;
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ds-card { transition: none; }
}