/*
Theme Name: Le-Dentist
Theme URI: https://www.le-dentist.com/
Author: Le-Dentist Dental Practice
Description: Custom block theme for Le-Dentist Dental Practice, Rawalpindi and Islamabad. No page builder and no third-party theme framework: every section is a normal WordPress block you can edit in the Site Editor, and every treatment and clinic has its own editable page.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: le-dentist
*/

/* Layout concept: a black-faded photo opens the page, a mint band carries the practice's
   numbers, then calm type on paper and mist, with one deep-green band for the principal dentist. */

:root {
	--ld-radius: 18px;
	--ld-shadow: 0 18px 40px -24px rgba(11, 59, 53, 0.45);
}

html { scroll-behavior: smooth; }
.wp-site-blocks > footer { margin-block-start: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[id] { scroll-margin-top: 96px; }

h1, h2, h3, h4 {
	font-variation-settings: "SOFT" 100, "WONK" 0;
	text-wrap: balance;
}
p { text-wrap: pretty; }

:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--mint);
	outline-offset: 3px;
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--deep);
	border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--deep);
}
.wp-block-button.ld-btn-mint > .wp-block-button__link {
	background: var(--wp--preset--color--mint);
	color: #062B25;
}
.wp-block-button.ld-btn-mint > .wp-block-button__link:hover { background: #5FE0B8; color: #062B25; }
.wp-block-button.ld-btn-light > .wp-block-button__link { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.8); }
.wp-block-button.ld-btn-light > .wp-block-button__link:hover { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }

/* ---------- Header ---------- */
.ld-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.admin-bar .ld-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ld-header { top: 0; position: relative; } }

.ld-header__bar { gap: 1.5rem; }
.ld-header__right { gap: 1.75rem; }
.ld-logo { margin: 0; flex-shrink: 0; }
.ld-logo img { width: clamp(150px, 16vw, 190px) !important; height: auto; display: block; }

.ld-nav { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.ld-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--deep); text-decoration: none; }
.ld-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--teal); }
.ld-header__cta .wp-block-button__link { padding: 0.6em 1.2em; font-size: var(--wp--preset--font-size--small); }

@media (max-width: 1080px) {
	.ld-header .wp-block-buttons.ld-header__cta { display: none; }
}

/* ---------- Hero (Cover block) ---------- */
.wp-block-cover.ld-hero {
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	background: #000000;
}
.wp-block-cover.ld-hero {
	padding-left: var(--wp--style--root--padding-left, 1rem);
	padding-right: var(--wp--style--root--padding-right, 1rem);
}
.ld-hero .wp-block-cover__inner-container {
	color: #FFFFFF;
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.ld-hero .wp-block-cover__inner-container > .ld-hero__text { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.ld-hero__text > * { max-width: 34rem; }
@media (min-width: 782px) {
	/* Photo sits on the right; the left of the band stays black behind the text. */
	.wp-block-cover.ld-hero .wp-block-cover__image-background {
		left: auto;
		right: 0;
		width: 68%;
	}
}
.ld-hero__place {
	color: var(--wp--preset--color--mint);
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.ld-hero__title {
	color: #FFFFFF !important;
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
	font-weight: 450;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
}
.ld-hero__lede {
	font-size: var(--wp--preset--font-size--large);
	color: rgba(255, 255, 255, 0.86);
	max-width: 32em;
	margin-top: 1.25rem;
}
.ld-hero__actions { margin-top: 1.75rem; }

@media (max-width: 781px) {
	.wp-block-cover.ld-hero {
		min-height: 0 !important;
		padding-top: 52vw;
		padding-bottom: 2.5rem;
		align-items: flex-end;
	}
	.wp-block-cover.ld-hero .wp-block-cover__image-background {
		height: 70vw;
		bottom: auto;
		object-position: 72% 40% !important;
	}
	.wp-block-cover.ld-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30vw, #000000 70vw) !important;
	}
}

/* ---------- Numbers band ---------- */
.ld-stats {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--deep);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	margin-top: 0;
}
.ld-stats__row { gap: 1.5rem 3rem; }
.ld-stat > * { margin: 0; }
.ld-stat__figure {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1.05;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--wp--preset--color--deep);
}
.ld-stat__label { margin-top: 0.35rem !important; font-weight: 600; }

/* ---------- Sections ---------- */
.ld-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	margin-top: 0;
}
.ld-section__head { max-width: 42rem; margin-bottom: var(--wp--preset--spacing--50); }
.ld-section__head > h2 { margin-top: 0; }
.ld-section__head > p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--large); }

/* ---------- Treatments ---------- */
.ld-treatments__grid { column-gap: clamp(1.5rem, 4vw, 3rem); row-gap: 2.5rem; }
.ld-treatment > * { margin-top: 0; }
.ld-treatment__icon { margin: 0 0 0.9rem; }
.ld-treatment__icon img {
	display: block;
	width: 64px !important;
	height: 64px;
	padding: 12px;
	box-sizing: content-box;
	border-radius: 50%;
	background: var(--wp--preset--color--mist);
}
.ld-treatment__name {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin-bottom: 0.4rem;
	line-height: 1.25;
}
.ld-treatment__name a { color: var(--wp--preset--color--deep); text-decoration: none; }
.ld-treatment__name a:hover { color: var(--wp--preset--color--teal); text-decoration: underline; }
.ld-treatment p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin-bottom: 0; }

/* ---------- About ---------- */
.ld-about { padding-top: 0; }
.ld-about .wp-block-columns { gap: clamp(2rem, 6vw, 5rem); }
.ld-about h2 { margin-top: 0; }
.ld-about__photo { margin: 0; }
.ld-about__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--ld-radius);
}

/* ---------- Standards ---------- */
.ld-standards { background: var(--wp--preset--color--mist); }
.ld-standards__grid { gap: 1.5rem; }
.ld-standard {
	background: var(--wp--preset--color--paper);
	border-radius: var(--ld-radius);
	border-top: 3px solid var(--wp--preset--color--mint);
	padding: 1.5rem 1.6rem 1.6rem;
}
.ld-standard > * { margin-top: 0; }
.ld-standard__name { font-size: var(--wp--preset--font-size--large); font-weight: 600; margin-bottom: 0.5rem; }
.ld-standard p { margin-bottom: 0; color: var(--wp--preset--color--ink); }

/* ---------- Principal dentist (deep band) ---------- */
.ld-dentist { background: var(--wp--preset--color--deep); color: #DCEFE8; }
.ld-dentist h2, .ld-dentist h3 { color: var(--wp--preset--color--paper); }
.ld-dentist__cols { gap: clamp(2rem, 6vw, 5rem); }
.ld-dentist__photo { margin: 0; }
.ld-dentist__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ld-radius);
}
.ld-dentist__role { color: var(--wp--preset--color--mint); font-weight: 600; margin-bottom: 0.25rem; }
.ld-dentist__text > h2 { margin-top: 0; }
.ld-creds-cols { gap: 2rem; margin-top: 1.5rem; }
.ld-dentist__subhead {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 0.75rem;
}
.ld-creds { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; font-size: var(--wp--preset--font-size--small); }
.ld-creds li { position: relative; padding-left: 1.1rem; line-height: 1.5; }
.ld-creds li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
}
@media (max-width: 781px) { .ld-dentist__media { max-width: 340px; } }

/* ---------- Team ---------- */
.ld-team__cols { gap: clamp(2rem, 6vw, 5rem); }
.ld-team h2 { margin-top: 0; font-size: var(--wp--preset--font-size--x-large); }
.ld-team__intro { color: var(--wp--preset--color--muted); }
.ld-team__grid { gap: 1.5rem; margin-top: 1.5rem; }
.ld-person > * { margin: 0; }
.ld-person__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ld-radius);
	background: var(--wp--preset--color--mist);
}
.ld-person__name { font-size: var(--wp--preset--font-size--large); font-weight: 600; margin-top: 0.9rem !important; line-height: 1.25; }
.ld-person__role { color: var(--wp--preset--color--teal); font-weight: 600; font-size: var(--wp--preset--font-size--small); margin-top: 0.3rem !important; line-height: 1.4; }
.ld-person__quals { color: var(--wp--preset--color--muted); font-size: 0.875rem; margin-top: 0.4rem !important; line-height: 1.5; }
@media (max-width: 480px) { .ld-team__grid { grid-template-columns: 1fr 1fr !important; gap: 1rem; } }

/* ---------- Booking steps (a real sequence, so numbered) ---------- */
.ld-booking { background: var(--wp--preset--color--mist); }
.ld-steps {
	counter-reset: ld-step;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem clamp(1.5rem, 4vw, 3rem);
}
.ld-steps li { counter-increment: ld-step; position: relative; padding-top: 3.75rem; }
.ld-steps li::before {
	content: counter(ld-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--mint);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	color: var(--wp--preset--color--deep);
}
.ld-steps strong { color: var(--wp--preset--color--deep); }

/* ---------- Clinics ---------- */
.ld-clinics__cols { gap: clamp(1.5rem, 4vw, 3rem); }
.ld-clinic > * { margin-top: 0; }
.ld-clinic__name { font-size: var(--wp--preset--font-size--x-large); margin-bottom: 0.25rem; }
.ld-clinic__days { color: var(--wp--preset--color--teal); font-weight: 700; margin-bottom: 0.5rem; }
.ld-clinic__address { line-height: 1.55; }
.ld-clinic__address em { color: var(--wp--preset--color--muted); font-style: normal; font-size: var(--wp--preset--font-size--small); }
.ld-clinic__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 600; font-size: var(--wp--preset--font-size--small); }

.ld-map {
	margin-top: 1rem;
	border-radius: var(--ld-radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	aspect-ratio: 16 / 10;
	max-width: 100%;
	background: var(--wp--preset--color--mist);
}
.ld-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Contact ---------- */
.ld-contact { border-top: 1px solid var(--wp--preset--color--line); }
.ld-contact__cols { gap: clamp(2rem, 6vw, 5rem); }
.ld-contact__info > h2 { margin-top: 0; }
.ld-details > * { margin: 0; }
.ld-details__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-top: 1.25rem !important;
}
.ld-details__label:first-child { margin-top: 0 !important; }
.ld-details__value { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--deep); line-height: 1.45; overflow-wrap: anywhere; }
.ld-details__value em { color: var(--wp--preset--color--muted); font-style: normal; font-size: var(--wp--preset--font-size--small); }
.ld-contact__form {
	background: var(--wp--preset--color--mist);
	border-radius: var(--ld-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	align-self: flex-start;
}
.ld-contact__form > h3 { margin-top: 0; }

/* ---------- Form ---------- */
.ld-form { display: grid; gap: 1rem; margin-top: 1rem; }
.ld-form p { margin: 0; }
.ld-form__field { display: grid; gap: 0.35rem; }
.ld-form label { font-weight: 600; color: var(--wp--preset--color--deep); font-size: var(--wp--preset--font-size--small); }
.ld-form__optional { font-weight: 400; color: var(--wp--preset--color--muted); }
.ld-form input[type="text"],
.ld-form input[type="tel"],
.ld-form select,
.ld-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid #A9C9BF;
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
}
.ld-form input:focus, .ld-form select:focus, .ld-form textarea:focus { border-color: var(--wp--preset--color--teal); outline: 3px solid rgba(50, 210, 160, 0.45); outline-offset: 0; }
.ld-form__check { display: flex; gap: 0.6rem; align-items: flex-start; }
.ld-form__check input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--wp--preset--color--teal); flex-shrink: 0; }
.ld-form__check label { font-weight: 500; }
.ld-form button {
	cursor: pointer;
	border: 0;
	font-family: inherit;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
	border-radius: 999px;
	padding: 0.85em 1.6em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}
.ld-form button:hover { background: var(--wp--preset--color--deep); }
.ld-form__small { font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.ld-form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ld-form__notice { padding: 0.85rem 1rem; border-radius: 10px; font-weight: 600; }
.ld-form__notice--ok { background: #D4F5E8; color: #075E4F; }
.ld-form__notice--error { background: #FCE4E1; color: #8A2318; }

/* ---------- FAQ ---------- */
.ld-faq { background: var(--wp--preset--color--mist); }
.ld-faq__cols { gap: clamp(2rem, 6vw, 5rem); }
.ld-faq h2 { margin-top: 0; }
.ld-faq__intro { color: var(--wp--preset--color--muted); }
.ld-faq__item:first-child { margin-top: 0 !important; }
.ld-faq__item {
	background: var(--wp--preset--color--paper);
	border-radius: 14px;
	padding: 0 1.25rem;
	margin-top: 0.75rem !important;
}
.ld-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--deep);
	padding: 1.05rem 2rem 1.05rem 0;
	position: relative;
	list-style: none;
}
.ld-faq__item summary::-webkit-details-marker { display: none; }
.ld-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--teal);
}
.ld-faq__item[open] summary::after { content: "–"; }
.ld-faq__item p { margin: 0 0 1.1rem; color: var(--wp--preset--color--ink); }

/* ---------- Inner pages ---------- */
.ld-page { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--40); }
.ld-page__title { font-size: var(--wp--preset--font-size--xx-large); margin-bottom: 0.5rem; }
.ld-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--ink); }
.ld-page h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.ld-ticks { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.ld-ticks li { position: relative; padding-left: 1.75rem; }
.ld-ticks li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.45em;
	width: 0.55rem;
	height: 0.95rem;
	border: solid var(--wp--preset--color--teal);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}
.ld-page .ld-treatments__grid { margin-top: 2rem; }
.ld-location__cols { gap: 2.5rem; margin-top: 2rem; }

.ld-cta {
	background: var(--wp--preset--color--mist);
	border-radius: var(--ld-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem) !important;
	margin-top: var(--wp--preset--spacing--50) !important;
}
.ld-cta > h2 { margin-top: 0 !important; }

/* ---------- Footer ---------- */
.ld-footer {
	background: var(--wp--preset--color--deep);
	color: #CFE6DE;
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0;
}
.ld-footer a { color: #FFFFFF; }
.ld-footer__logo { margin: 0 0 1rem; }
.ld-footer__logo img { width: 160px; height: auto; background: #FFFFFF; padding: 10px 14px; border-radius: 12px; box-sizing: content-box; }
.ld-footer__h {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--mint);
	margin: 0 0 0.4rem;
}
.ld-footer__h + p { margin-top: 0; }
.ld-footer p + .ld-footer__h { margin-top: 1.25rem; }
.ld-footer .ld-social { gap: 0.75rem; }
.ld-footer .ld-social .wp-social-link { color: #FFFFFF; }
.ld-footer .ld-social .wp-social-link svg { width: 1.5rem; height: 1.5rem; }
.ld-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 2rem; padding-top: 1rem; color: #9CC4B8; }
.ld-footer__legal p { margin: 0; }

/* ---------- Phone call bar ---------- */
.ld-callbar { display: none; }
@media (max-width: 781px) {
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	.ld-callbar {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
		background: var(--wp--preset--color--paper);
		border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 -8px 24px -16px rgba(11, 59, 53, 0.5);
	}
	.ld-callbar a {
		display: grid;
		place-items: center;
		min-height: 48px;
		border-radius: 999px;
		font-weight: 700;
		font-size: 0.9375rem;
		text-decoration: none;
	}
	.ld-callbar__call { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--paper); }
	.ld-callbar__wa { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--deep); border: 1px solid var(--wp--preset--color--line); }
}

/* ---------- Small screens: single-column grids ---------- */
@media (max-width: 781px) {
	.ld-stats__row,
	.ld-standards__grid { grid-template-columns: 1fr !important; }
	.ld-stats__row { gap: 1.25rem; }
	.ld-stat { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
	.ld-stat__label { margin-top: 0 !important; }
	.ld-treatments__grid { grid-template-columns: 1fr 1fr !important; column-gap: 1.25rem; }
}
@media (max-width: 420px) {
	.ld-treatments__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) {
	.ld-treatments__grid { row-gap: 1.75rem; }
	.ld-treatment { display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; align-items: start; }
	.ld-treatment__icon { grid-row: 1 / span 2; margin: 0; }
	.ld-treatment__icon img { width: 36px !important; height: 36px; padding: 10px; }
	.ld-treatment__name { margin-top: 0.2rem; }
}