/**
 * Doctor Portfolio: rules theme.json cannot express.
 * Tokens come from theme.json custom properties (--wp--preset--*, --wp--custom--*).
 *
 * Contents: context variables · typography refinements · links · focus ·
 * cards · dark-section overrides · motion preferences.
 */

/* Context: accent and focus colours flip inside dark sections. */
:root {
	--dp-accent: var(--wp--preset--color--teal);
	--dp-focus: var(--wp--preset--color--teal);
	--dp-muted: var(--wp--preset--color--slate);
	--dp-transition: var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.is-style-section-midnight,
.is-style-section-charcoal {
	--dp-accent: var(--wp--preset--color--cyan);
	--dp-focus: var(--wp--preset--color--cyan);
	--dp-muted: var(--wp--preset--color--mist);
}

.is-style-section-paper,
.is-style-section-frost {
	--dp-accent: var(--wp--preset--color--teal);
	--dp-focus: var(--wp--preset--color--teal);
	--dp-muted: var(--wp--preset--color--slate);
}

/* Typography refinements. */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.wp-block-post-title {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--ice);
	color: var(--wp--preset--color--midnight);
}

/* Links: refined underline, colour transition. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--dp-transition), text-decoration-color var(--dp-transition);
}

/* Focus: always visible for keyboard users, never for mouse clicks. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-block-button__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--dp-focus);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--preset--border-radius--xs);
}

/* Buttons. */
.wp-block-button__link {
	transition: background-color var(--dp-transition), color var(--dp-transition), border-color var(--dp-transition);
}

/* Muted text helper used by patterns (e.g. meta lines). */
.has-muted-color,
.dp-muted {
	color: var(--dp-muted);
}

/* Eyebrow follows the section accent (teal on light, cyan on dark). */
.is-style-eyebrow {
	color: var(--dp-accent);
}

/* Cards: subtle lift on hover, only when the card contains a link. */
.is-style-card {
	transition: box-shadow var(--dp-transition), transform var(--dp-transition), border-color var(--dp-transition);
}

.is-style-card:has(a):hover {
	box-shadow: var(--wp--preset--shadow--lifted);
	border-color: var(--wp--preset--color--slate);
	transform: translateY(-2px);
}

/* Glass card: frosted only where supported; falls back to a flat tint. */
@supports (backdrop-filter: blur(1px)) {
	.is-style-card-glass {
		backdrop-filter: blur(12px) saturate(120%);
	}
}

.is-style-card-glass:has(a):hover {
	border-color: rgba(207, 239, 245, 0.32);
}

/* Card titles: no underline at rest (cards are already framed), underline on hover. */
:is(.is-style-card, .is-style-card-glass) :is(h2, h3, h4) a {
	text-decoration: none;
}

:is(.is-style-card, .is-style-card-glass) :is(h2, h3, h4) a:hover {
	text-decoration: underline;
}

/*
 * Accent separator: a short 3rem line aligned with the text edge.
 * It keeps the full content width (so constrained layouts don't centre it)
 * and paints only its first 3rem.
 */
.wp-block-separator.is-style-accent {
	height: 2px;
	border: 0;
	background: linear-gradient(to right, var(--dp-accent) 3rem, transparent 3rem);
	opacity: 1;
}

/*
 * Sections sit flush against each other: no root block gap between the
 * header, main, footer and full sections.
 */
.wp-site-blocks > *,
:where(.is-layout-flow, .is-layout-constrained) > [class*="is-style-section-"] + [class*="is-style-section-"] {
	margin-block-start: 0;
}

/*
 * Page frame: footer stays at the bottom of short pages.
 * Header: the <header> template part itself is sticky. (Sticky on the inner
 * group would not stick, because its parent is exactly as tall as the header.)
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 50;
}

/* Footer column headings: mono label, muted. */
.dp-footer-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dp-muted);
}

/*
 * Profile placeholders: blocks bound to an empty profile field get the class
 * "dsc-placeholder" (added by the Doctor Site Core plugin). Shown clearly so
 * unfinished information is never mistaken for confirmed content.
 */
.dsc-placeholder {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--dp-muted);
	outline: 1px dashed currentColor;
	outline-offset: 4px;
	border-radius: var(--wp--preset--border-radius--xs);
}

/* Skip link (output by core in block themes). */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

/* Respect reduced-motion preferences: no movement, near-instant changes. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.is-style-card:has(a):hover {
		transform: none;
	}
}