/*
Theme Name: Dental Studio
Theme URI: https://dentalstudio.click
Description: Original child theme of Twenty Twenty-Five for the dental studio. website. Clean teal design system, sticky header, long-form article layout, related posts and author box.
Author: dental studio.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: dental-studio
*/

/* ---------- Design tokens (8px spacing scale) ---------- */
:root {
	--ds-ink: #0B2A3C;
	--ds-text: #35505F;
	--ds-primary: #0F766E;
	--ds-primary-d: #0B5C56;
	--ds-mint: #CCFBF1;
	--ds-tint: #F0FAF8;
	--ds-line: #D8E7E4;
	--ds-radius: 16px;
	--ds-shadow: 0 1px 2px rgba(11, 42, 60, .06), 0 8px 24px rgba(11, 42, 60, .08);
	--ds-shadow-lg: 0 2px 4px rgba(11, 42, 60, .06), 0 16px 40px rgba(11, 42, 60, .14);
	--ds-s1: 8px; --ds-s2: 16px; --ds-s3: 24px; --ds-s4: 32px; --ds-s6: 48px; --ds-s8: 64px; --ds-s12: 96px; --ds-s16: 128px;
	--ds-gutter: 24px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #B45309; outline-offset: 3px; border-radius: 4px; }

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

/* ---------- Header ---------- */
.ds-header {
	position: sticky; top: 0; z-index: 50;
	background: transparent;
	padding: 0 var(--ds-gutter);
	transition: background .25s ease, box-shadow .25s ease;
}
.admin-bar .ds-header { top: 32px; }
.ds-header.is-scrolled {
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	box-shadow: 0 1px 0 var(--ds-line);
}
.ds-header__inner { min-height: 72px; gap: var(--ds-s3); }
.ds-brand { gap: 12px; align-items: center; }
.ds-brand svg { width: 36px; height: 36px; flex: none; }
.ds-brand .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--ds-serif); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; }
.ds-brand .wp-block-site-title a { color: var(--ds-ink); text-decoration: none; }
.ds-nav .wp-block-navigation-item__content { position: relative; font-weight: 600; font-size: .98rem; color: var(--ds-ink); text-decoration: none; padding: 8px 2px; }
.ds-nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
	background: var(--ds-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.ds-nav .wp-block-navigation-item__content:hover::after,
.ds-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ds-nav .ds-nav-mobile-only { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .ds-nav-mobile-only { display: block; }
.ds-header__cta .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 960px) { .ds-header__cta { display: none; } }

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link {
	min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow); }
.is-style-outline > .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--ds-primary-d); border: 2px solid var(--ds-primary);
}
.is-style-outline > .wp-block-button__link:hover { background: var(--ds-mint); color: var(--ds-primary-d); }

/* ---------- Layout helpers ---------- */
.ds-wrap { max-width: 1200px; margin: 0 auto; }
.ds-section { padding: clamp(48px, 7vw, 112px) var(--ds-gutter); }
.ds-section--tint { background: var(--ds-tint); }
.ds-section-head { max-width: 720px; margin: 0 0 var(--ds-s6); }
.ds-section-head h2 { margin: 0 0 var(--ds-s2); font-size: var(--wp--preset--font-size--xl); }
.ds-section-head p { margin: 0; }
.ds-eyebrow {
	display: inline-block; margin: 0 0 var(--ds-s2); padding: 6px 14px; border-radius: 999px;
	background: var(--ds-mint); color: var(--ds-primary-d); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
}
.ds-grid { display: grid; gap: var(--ds-s3); }
.ds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ds-actions { display: flex; flex-wrap: wrap; gap: var(--ds-s2); margin-top: var(--ds-s4); }
.ds-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.6rem; border-radius: 999px;
	background: var(--ds-primary); color: #fff !important; font-weight: 600; text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ds-btn:hover { background: var(--ds-primary-d); transform: translateY(-2px); box-shadow: var(--ds-shadow); }
.ds-btn--ghost { background: transparent; color: var(--ds-primary-d) !important; border: 2px solid var(--ds-primary); }
.ds-btn--ghost:hover { background: var(--ds-mint); }

/* ---------- Hero ---------- */
.ds-hero {
	padding: clamp(56px, 9vw, 128px) var(--ds-gutter) clamp(48px, 7vw, 96px);
	background:
		radial-gradient(60% 70% at 88% 8%, rgba(15, 118, 110, .16), transparent 62%),
		radial-gradient(50% 60% at 4% 92%, rgba(204, 251, 241, .95), transparent 62%),
		linear-gradient(180deg, #F0FAF8 0%, #FFFFFF 100%);
}
.ds-hero h1 { max-width: 16ch; margin: 0 0 var(--ds-s3); font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4rem); letter-spacing: -.02em; }
.ds-hero__sub { max-width: 58ch; margin: 0; font-size: 1.25rem; color: var(--ds-text); }
.ds-page-hero {
	padding: clamp(32px, 5vw, 64px) var(--ds-gutter) clamp(24px, 4vw, 48px);
	background: linear-gradient(180deg, #F0FAF8 0%, #FFFFFF 100%);
}
.ds-page-hero > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.ds-page-hero h1 { margin-top: var(--ds-s1); margin-bottom: var(--ds-s2); }
.ds-page-hero p { max-width: 62ch; }

/* ---------- Trust strip ---------- */
.ds-trust { border-block: 1px solid var(--ds-line); background: #fff; padding: var(--ds-s3) var(--ds-gutter); }
.ds-trust ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; gap: var(--ds-s2) var(--ds-s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ds-trust li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--ds-ink); font-size: .98rem; }
.ds-trust svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--ds-primary); }

/* ---------- Cards ---------- */
.ds-card {
	background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: var(--ds-s4);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ds-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); border-color: #B7D6D1; }
.ds-card h3 { margin: 0 0 var(--ds-s1); font-size: 1.35rem; }
.ds-card p { margin: 0 0 var(--ds-s2); }
.ds-card a.ds-more { font-weight: 700; text-decoration: none; }
.ds-card a.ds-more::after { content: " \2192"; }
.ds-icon {
	width: 48px; height: 48px; border-radius: 12px; margin-bottom: var(--ds-s2);
	background: var(--ds-mint); color: var(--ds-primary-d); display: grid; place-items: center;
}
.ds-icon svg { width: 24px; height: 24px; }
.ds-badge, .ds-badge a {
	display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ds-mint);
	color: var(--ds-primary-d); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}

/* ---------- Post cards (query loop, related, latest) ---------- */
.ds-post-grid { display: grid; gap: var(--ds-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ds-post-card, .ds-loop-card {
	background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); overflow: hidden;
	display: flex; flex-direction: column; height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}
.ds-post-card:hover, .ds-loop-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); }
.ds-post-card__img, .ds-loop-card .wp-block-post-featured-image { aspect-ratio: 16 / 9; width: 100%; margin: 0; overflow: hidden; background: var(--ds-mint); }
.ds-post-card__img img, .ds-loop-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-post-card__body, .ds-loop-card__body { padding: var(--ds-s3); display: flex; flex-direction: column; gap: var(--ds-s1); flex: 1; }
.ds-post-card__title, .ds-loop-card .wp-block-post-title { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.ds-post-card__title a, .ds-loop-card .wp-block-post-title a { color: var(--ds-ink); text-decoration: none; }
.ds-post-card__title a:hover, .ds-loop-card .wp-block-post-title a:hover { color: var(--ds-primary); }
.ds-post-card__meta { font-size: .88rem; color: #4B6572; margin-top: auto; }
.ds-loop-card .wp-block-post-excerpt { margin: 0; font-size: .98rem; }
.ds-loop-card .wp-block-post-excerpt__more-link { display: none; }

/* ---------- Single post / long-form ---------- */
.ds-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 var(--ds-s3); font-size: .92rem; color: #4B6572; }
.ds-meta a { color: var(--ds-primary-d); font-weight: 600; }
.ds-article-head { padding: clamp(24px, 4vw, 48px) var(--ds-gutter) 0; }
.ds-article-head > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.ds-article-head .wp-block-post-title { margin-top: var(--ds-s2); margin-bottom: var(--ds-s2); }
.ds-article-hero { max-width: 1000px; margin: var(--ds-s3) auto var(--ds-s4); padding: 0 var(--ds-gutter); }
.ds-article-hero img { border-radius: var(--ds-radius); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ds-body { padding: 0 var(--ds-gutter); }
.ds-body .wp-block-post-content > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.ds-body .wp-block-post-content h2 { margin-top: var(--ds-s6); margin-bottom: var(--ds-s2); scroll-margin-top: 96px; }
.ds-body .wp-block-post-content h3 { margin-top: var(--ds-s4); margin-bottom: var(--ds-s1); scroll-margin-top: 96px; }
.ds-body .wp-block-post-content p, .ds-body .wp-block-post-content ul, .ds-body .wp-block-post-content ol { margin-top: 0; margin-bottom: var(--ds-s2); }
.ds-body .wp-block-post-content li { margin-bottom: 6px; }
.ds-body .wp-block-post-content blockquote { border-left: 4px solid var(--ds-primary); margin: var(--ds-s4) auto; padding: var(--ds-s1) var(--ds-s3); background: var(--ds-tint); border-radius: 0 12px 12px 0; }
.ds-body .wp-block-post-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--ds-s3); font-size: .98rem; }
.ds-body .wp-block-post-content th, .ds-body .wp-block-post-content td { border: 1px solid var(--ds-line); padding: 10px 14px; text-align: left; vertical-align: top; }
.ds-body .wp-block-post-content th { background: var(--ds-tint); color: var(--ds-ink); }
.ds-toc, .ds-callout { background: var(--ds-tint); border: 1px solid var(--ds-line); border-radius: 12px; padding: var(--ds-s3); margin-bottom: var(--ds-s4) !important; }
.ds-toc strong, .ds-callout strong { color: var(--ds-ink); }
.ds-toc ol { margin: var(--ds-s1) 0 0; padding-left: 1.2em; }
.ds-callout { border-left: 4px solid var(--ds-primary); }
.ds-callout p:last-child { margin-bottom: 0; }
.ds-sources { font-size: .95rem; }
.ds-sources li { word-break: break-word; }
.ds-after { padding: var(--ds-s6) var(--ds-gutter) 0; }
.ds-after > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.ds-author { display: flex; gap: var(--ds-s2); align-items: flex-start; padding: var(--ds-s3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: #fff; }
.ds-author__mono { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ds-primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--wp--preset--font-family--ds-serif); }
.ds-author__name { margin: 0; font-weight: 700; color: var(--ds-ink); }
.ds-author__role { margin: 0 0 6px; font-size: .85rem; color: #4B6572; }
.ds-author__bio { margin: 0 0 6px; font-size: .96rem; }
.ds-related { padding: var(--ds-s8) var(--ds-gutter); }
.ds-related > .ds-wrap > h2 { margin: 0 0 var(--ds-s3); font-size: 1.6rem; }
.ocs-breadcrumbs ol { font-size: .88rem; color: #4B6572; margin-bottom: 0 !important; }
.ocs-breadcrumbs a { color: var(--ds-primary-d); }
.ds-article-head .ocs-breadcrumbs, .ds-page-hero .ocs-breadcrumbs { margin-bottom: var(--ds-s1); }

/* ---------- FAQ ---------- */
.ds-faq h3, .ds-faq h2 { margin-bottom: 8px; }

/* ---------- CTA band ---------- */
.ds-cta { background: var(--ds-ink); color: #D6E6EA; padding: clamp(48px, 6vw, 96px) var(--ds-gutter); text-align: center; }
.ds-cta h2 { color: #fff; margin: 0 0 var(--ds-s2); }
.ds-cta p { max-width: 56ch; margin: 0 auto var(--ds-s4); }
.ds-cta .ds-btn { background: #fff; color: var(--ds-ink) !important; }
.ds-cta .ds-btn:hover { background: var(--ds-mint); }

/* ---------- Footer ---------- */
.ds-footer { background: #0B2A3C; color: #C9DCE2; padding: var(--ds-s8) var(--ds-gutter) var(--ds-s4); }
.ds-footer a { color: #E7F4F2; text-decoration: none; }
.ds-footer a:hover { color: #fff; text-decoration: underline; }
.ds-footer__grid { max-width: 1200px; margin: 0 auto; display: grid; gap: var(--ds-s6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ds-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--ds-s2); font-family: var(--wp--preset--font-family--ds-serif); font-weight: 700; font-size: 1.3rem; color: #fff; }
.ds-footer__brand svg { width: 34px; height: 34px; }
.ds-footer h2 { color: #fff; font-family: var(--wp--preset--font-family--ds-sans); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--ds-s2); }
.ds-footer ul { list-style: none; margin: 0; padding: 0; }
.ds-footer li { margin-bottom: 10px; }
.ds-footer p { margin: 0 0 var(--ds-s2); font-size: .96rem; }
.ds-footer__legal { max-width: 1200px; margin: var(--ds-s6) auto 0; padding-top: var(--ds-s3); border-top: 1px solid rgba(255, 255, 255, .15); display: flex; flex-wrap: wrap; gap: var(--ds-s1) var(--ds-s3); justify-content: space-between; font-size: .88rem; }
.ds-footer__legal p { margin: 0; }

/* ---------- Progress bar, back to top ---------- */
.ds-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; }
.admin-bar .ds-progress { top: 32px; }
.ds-progress span { display: block; height: 100%; background: var(--ds-primary); transform: scaleX(0); transform-origin: left; }
.ds-top { color: #E7F4F2 !important; font-weight: 600; }

/* ---------- Forms (Contact Form 7) ---------- */
.wpcf7 form p { margin: 0 0 var(--ds-s2); }
.wpcf7 label { display: block; font-weight: 600; color: var(--ds-ink); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea {
	width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; color: var(--ds-ink);
	background: #fff; border: 1.5px solid #9DBBB6; border-radius: 12px; min-height: 48px;
}
.wpcf7 textarea { min-height: 160px; }
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { outline: 3px solid #B45309; outline-offset: 1px; border-color: var(--ds-primary); }
.wpcf7 input[type="submit"] {
	min-height: 48px; padding: .8rem 1.8rem; border: 0; border-radius: 999px; background: var(--ds-primary); color: #fff;
	font: inherit; font-weight: 600; cursor: pointer; transition: transform .2s ease, background-color .2s ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--ds-primary-d); transform: translateY(-2px); }
.wpcf7-not-valid-tip { color: #B42318; font-size: .9rem; }
.wpcf7 form .wpcf7-response-output { border-radius: 12px; padding: 12px 16px; }
.ds-form-card { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: var(--ds-s4); box-shadow: var(--ds-shadow); }

/* ---------- Small screens ---------- */
@media (max-width: 782px) {
	.admin-bar .ds-header, .admin-bar .ds-progress { top: 46px; }
	.ds-card { padding: var(--ds-s3); }
	.ds-form-card { padding: var(--ds-s3); }
	.ds-author { flex-direction: column; }
}

/* ---------- Wide blocks inside pages ---------- */
.ds-body .wp-block-post-content > .ds-wide { max-width: 1200px; }
.ds-body .wp-block-post-content > .ds-wide.ds-grid { margin-bottom: var(--ds-s6); }
.ds-body .wp-block-post-content > .ds-narrow { max-width: 680px; }
.ds-contact-grid { display: grid; gap: var(--ds-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.ds-contact-grid h2 { margin-top: 0 !important; }
.ds-note { font-size: .95rem; color: #4B6572; }
.ds-hero h1 { max-width: 20ch; }
.ds-hero .ds-wrap, .ds-cta .ds-wrap { position: relative; }
@media (max-width: 480px) {
	.ds-actions .ds-btn { width: 100%; }
	.ds-footer__legal { flex-direction: column; }
}

/* ---------- Header fixes: single-line brand, hamburger below 960px ---------- */
.ds-brand .wp-block-site-title, .ds-brand .wp-block-site-title a { white-space: nowrap; }
.ds-header .ds-header__inner { flex-wrap: nowrap; }
@media (max-width: 960px) {
	.ds-header .ds-header__cta { display: none !important; }
	.ds-header .ds-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.ds-header .ds-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
}
@media (min-width: 961px) {
	.ds-header .ds-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; }
	.ds-header .ds-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: block !important; }
}
.ds-nav .wp-block-navigation__responsive-container-open { color: var(--ds-ink); min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.wp-block-navigation__responsive-container.is-menu-open { background: #fff; color: var(--ds-ink); }

/* ---------- Touch targets (44px hit areas) ---------- */
.ds-brand .wp-block-site-title a { display: inline-flex; align-items: center; min-height: 44px; }
.ocs-breadcrumbs a { position: relative; display: inline-block; }
.ocs-breadcrumbs a::after, .ds-badge a::after, .ds-meta a::after { content: ""; position: absolute; inset: -10px -6px; }
.wp-block-post-terms.ds-badge { padding: 0; background: none; }
.wp-block-post-terms.ds-badge a { position: relative; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ds-mint); }
.ds-meta a { position: relative; }
.ds-footer li a, .ds-footer .ds-top, .ds-footer__brand + p a { display: inline-block; padding: 8px 0; min-height: 44px; box-sizing: border-box; }
.ds-footer li { margin-bottom: 0; }
.ds-loop-card .wp-block-post-title a, .ds-post-card__title a { display: inline-block; padding: 4px 0; }
.ds-card a.ds-more { display: inline-block; padding: 10px 0; }
/* Mobile menu overlay: larger tap targets */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding: 12px 0; font-size: 1.2rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }

.ds-card h2 { margin: 0 0 var(--ds-s1); font-size: 1.35rem; }

/* Sticky header: the template-part wrapper is the sticky element (its parent is the full-height site container). */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: 32px; }
.ds-header, .admin-bar .ds-header { position: relative; top: 0; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }