/* ==========================================================================
   Dublin Dental Group – base tokens, reset, shared utilities
   ========================================================================== */

:root {
	/* Color */
	--dd-slate: #3e5261;
	--dd-slate-dark: #293a46;
	--dd-teal: #4a8c7a;
	--dd-teal-dark: #3d7666;
	--dd-gold: #d9b87a;
	--dd-cream: #f5f2ec;
	--dd-stone: #e8e3d9;
	--dd-ink: #2c2c28;
	--dd-muted: #6b6b64;
	--dd-subtle: #9a9a92;
	--dd-star: #c49a5a;
	--dd-teal-tint: #eaf2ef;
	--dd-white: #fff;

	/* Type */
	--dd-font-serif: "Lora", Georgia, serif;
	--dd-font-sans: "Outfit", system-ui, -apple-system, sans-serif;

	/* Layout */
	--dd-container: 1280px;
	--dd-gutter: 24px;
	--dd-section-y: 112px;
	--dd-header-h: 128px;

	--dd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023px) {
	:root {
		--dd-section-y: 80px;
		--dd-header-h: 88px;
	}
}

@media (max-width: 599px) {
	:root {
		--dd-gutter: 16px;
		--dd-section-y: 64px;
	}
}

/*
 * Everything below is in a cascade layer so block, header and footer styles
 * (unlayered) always override it, regardless of the order WordPress prints them.
 */
@layer dd-base {

	/* Reset ------------------------------------------------------------------- */

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

	html {
		scroll-behavior: smooth;
		scroll-padding-top: var(--dd-header-h);
		-webkit-text-size-adjust: 100%;
	}

	body {
		margin: 0;
		font-family: var(--dd-font-sans);
		font-size: 16px;
		line-height: 1.6;
		color: var(--dd-ink);
		background: var(--dd-white);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

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

	h1,
	h2,
	h3,
	h4 {
		margin: 0;
		font-family: var(--dd-font-serif);
		font-weight: 600;
		line-height: 1.2;
	}

	p {
		margin: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	button {
		font: inherit;
	}

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

		*,
		*::before,
		*::after {
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
		}
	}

	/* Utilities --------------------------------------------------------------- */

	.dd-container {
		width: 100%;
		max-width: var(--dd-container);
		margin-inline: auto;
		padding-inline: var(--dd-gutter);
	}

	.screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.dd-skip-link {
		position: absolute;
		top: -100px;
		left: 16px;
		z-index: 1000;
		padding: 12px 20px;
		background: var(--dd-teal);
		color: var(--dd-white);
		font-weight: 600;
	}

	.dd-skip-link:focus {
		top: 16px;
	}

	:focus-visible {
		outline: 2px solid var(--dd-teal);
		outline-offset: 3px;
	}

	/* Section headings -------------------------------------------------------- */

	.dd-section-title {
		font-size: 48px;
		line-height: 1.25;
		color: var(--dd-ink);
	}

	@media (max-width: 767px) {
		.dd-section-title {
			font-size: 36px;
		}
	}

	/* Buttons ----------------------------------------------------------------- */

	.dd-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 16px 32px;
		border: 1px solid transparent;
		font-family: var(--dd-font-sans);
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 0.2s var(--dd-ease), border-color 0.2s var(--dd-ease), color 0.2s var(--dd-ease);
	}

	.dd-btn--sm {
		padding: 10px 24px;
		letter-spacing: 0.08em;
	}

	.dd-btn--primary {
		background: var(--dd-teal);
		color: var(--dd-white);
	}

	.dd-btn--primary:hover {
		background: var(--dd-teal-dark);
	}

	.dd-btn--outline-light {
		border-color: rgba(255, 255, 255, 0.3);
		color: rgba(255, 255, 255, 0.8);
	}

	.dd-btn--outline-light:hover {
		border-color: var(--dd-white);
		color: var(--dd-white);
	}

	.dd-btn--dark {
		background: var(--dd-slate);
		color: var(--dd-white);
	}

	.dd-btn--dark:hover {
		background: var(--dd-slate-dark);
	}
}