@font-face {
	font-family: "Material Symbols Rounded";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/material-symbols-rounded.woff2") format("woff2");
}

.dc-icon {
	font-family: "Material Symbols Rounded", sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.dc-logo-mark-img {
	flex: none;
	margin: 0;
}
.dc-logo-mark-img img {
	display: block;
	height: 44px;
	width: auto;
}
/* The footer's chip variant bakes its own padding + rounded card into
   the image, so the icon reads smaller than the plain header mark at
   the same height — bump it up to keep the icon's visual weight
   consistent between header and footer. */
.dc-logo-mark-img--chip img {
	height: 52px;
}

/* WP applies its default vertical rhythm (margin-block-start) to every
   non-first direct child of .wp-site-blocks — <main> (2nd child, after
   <header>) and <footer> (3rd child) both inherit an unwanted gap
   above them. Every section/the footer already has its own top
   padding, so this extra gap is pure redundant space. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}
/* Same default vertical-rhythm rule also applies between every
   sibling section inside <main>'s own constrained layout — each one
   picks up an extra ~23px margin-top on top of its own deliberate
   top padding. Zero it across every homepage section. */
.dc-stats-bar,
#about,
#values,
#services,
#testimonials,
#why,
#blog,
#appointment {
	margin-top: 0;
}

/* Frosted-glass sticky header. Sticky lives on the template-part wrapper
   (.dc-header-part), not the inner group — a sticky element's containing
   block is its immediate parent, and the wp:template-part wrapper has no
   extra height of its own, so stickiness has to be anchored one level up
   to actually persist past the header's own height while scrolling. */
.dc-header-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
/* backdrop-filter on an element creates a new stacking context for
   ALL of its descendants — including the mobile nav's overlay menu,
   several levels down, despite its own z-index:100000. Trapped inside
   that context, the overlay could never paint above <main>'s content
   even though its z-index looks high enough; clicking the hamburger
   opened the menu but it rendered invisibly behind the page. Moving
   the blur to a ::before pseudo-element keeps the same visual effect
   without the real header element (an actual ancestor of the nav)
   ever having backdrop-filter itself, so nothing is trapped. */
.dc-header-glass {
	position: relative;
}
.dc-header-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Without an explicit z-index, this positioned pseudo-element
	   paints ABOVE the header's normal in-flow content (logo, nav,
	   buttons) regardless of DOM order — positioned elements always
	   paint above non-positioned ones. z-index:-1 keeps it strictly
	   behind everything else in the header (it stays above <main>
	   overall since .dc-header-part's own z-index:50 still applies to
	   the header as a whole). */
	z-index: -1;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	pointer-events: none;
}

/* Nav + link hovers */
.dc-nav a {
	transition: color 0.2s ease;
}
.dc-nav a:hover {
	color: var(--wp--preset--color--ink) !important;
}
/* WP's nav block only converts to a hamburger below 600px, but this
   header's logo + 6 links + phone + CTA button need ~1200px to fit
   on one line — leaving a wide, awkward zone (~600-1200px) where the
   row free-wraps into 2 or 3 stacked lines of plain text instead of
   collapsing cleanly. Force the hamburger to take over earlier by
   re-showing the toggle button and re-hiding the inline flat nav
   within that zone (core's own >=600px rule already handles >=1024px
   correctly, so this override only needs to cover the gap). */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.dc-header-glass .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex !important;
		align-items: center;
	}
	.dc-header-glass .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}
/* The site tagline has no width cap, so even once it wraps to 2 lines
   its longest line still sizes to ~255px — wide enough that logo +
   tagline alone don't leave room for the hamburger icon to sit beside
   them, wrapping it to its own row. Capping it forces a narrower wrap
   that fits alongside the hamburger on one row. */
@media (max-width: 1023.98px) {
	.wp-block-site-tagline {
		max-width: 160px;
	}
}
/* Phone number + "Book Consultation" live in two copies: .dc-header-cta
   sits in the header row itself (desktop, where everything fits on one
   line), and .dc-nav-mobile-cta sits inside the nav block so it renders
   inside the hamburger's slide-out overlay alongside the links. Show
   exactly one at a time so they never appear twice. WP's auto-generated
   per-block layout class (.wp-container-core-group-is-layout-*) sets its
   own display:flex at the same specificity and loads later in the
   cascade, so these need !important to win. */
.dc-nav-mobile-cta {
	display: none !important;
}
@media (max-width: 1023.98px) {
	.dc-header-cta {
		display: none !important;
	}
	.dc-nav-mobile-cta {
		display: flex !important;
	}
}
/* The footer's Explore column nav is vertical and inherited WP core's
   default 32px navigation block-gap — much looser than the Get in
   Touch column's own 13px item spacing right next to it. */
footer .dc-nav {
	row-gap: 13px;
}
/* WP's flex layout defaults to align-items:center, which vertically
   centers each footer column against the tallest one (Explore) —
   pushing the shorter Get in Touch column down instead of lining its
   heading up with the others. */
.dc-footer-row {
	align-items: flex-start !important;
}
/* justify-content:space-between spreads the 3 footer columns across
   the full row width, leaving Get in Touch flush against the right
   edge. Nudge it left, closer to Explore, without disturbing the
   other two columns' positions. */
@media (min-width: 783px) {
	.dc-footer-touch {
		/* A negative margin here gets absorbed by justify-content:
		   space-between's own free-space recalculation (it
		   re-anchors the item's edge, canceling the visual shift) —
		   transform sidesteps layout entirely and reliably nudges
		   the rendered box left. Scoped to desktop only: below WP's
		   782px column-stacking breakpoint the columns stack full
		   width, and this fixed -100px shift pushed the column off
		   the left edge of the viewport. */
		transform: translateX(-100px);
	}
}
/* The phone/email links' own anchor color (the theme's global
   elements.link, ink) wins over the paragraph's default text color,
   rendering near-invisible on this dark background — match the
   plain-text lines' muted-on-dark color instead. */
.dc-footer-touch a {
	color: var(--wp--preset--color--muted-on-dark) !important;
}
.dc-footer-touch a:hover {
	color: var(--wp--preset--color--base) !important;
}
/* Footer social icons */
.dc-footer-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.dc-footer-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--muted-on-dark);
	transition: background 0.2s ease, color 0.2s ease;
}
.dc-footer-social-icon:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
/* WP's constrained-layout auto-centers "plain" children narrower than
   their parent (max-width + margin-left/right:auto), which drifted
   this maxWidth:340px description away from the logo/icon row's left
   edge above it. */
.dc-footer-desc {
	margin-left: 0 !important;
}

.dc-phone-link a {
	display: flex;
	align-items: center;
	gap: 7px;
}
.dc-phone-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex: none;
}

.dc-cta-primary {
	transition: filter 0.2s ease, transform 0.2s ease;
}
.dc-cta-primary:hover {
	filter: brightness(0.95);
	transform: translateY(-1px);
}

.dc-cta-secondary {
	transition: border-color 0.2s ease;
}
.dc-cta-secondary:hover {
	border-color: var(--wp--preset--color--ink) !important;
}

/* Hero floating cards */
.dc-hero-grid {
	/* WP core forces .wp-block-columns{align-items:normal!important};
	   match it to actually center the hero's two columns. */
	align-items: center !important;
}
.dc-hero-media {
	position: relative;
}
.dc-hero-portrait-frame {
	position: relative;
	max-width: 78%;
	margin: 0 auto;
	padding: 20px;
}
.dc-hero-portrait {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	box-shadow: 0 30px 60px -24px rgba(12, 34, 54, 0.35);
}
.dc-hero-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.dc-hero-btn-shadow {
	box-shadow: 0 10px 24px rgba(224, 138, 77, 0.3);
}
/* Decorative organic/leaf illustration in the About section's top-right
   corner, matching the supplied HTML reference. Purely decorative
   (aria-hidden) — the section needs position:relative + overflow:hidden
   so the illustration's negative top/right offset doesn't add extra
   scroll width, especially at mobile widths. */
#about {
	position: relative;
	overflow: hidden;
}
.dc-about-decor {
	position: absolute;
	top: -46px;
	right: -40px;
	width: 330px;
	height: 330px;
	opacity: 0.7;
	pointer-events: none;
}
@media (max-width: 480px) {
	/* Scale down on phones so it doesn't dominate the section — at full
	   330px it would sit almost as wide as the entire mobile column. */
	.dc-about-decor {
		width: 180px;
		height: 180px;
		top: -24px;
		right: -24px;
	}
}
/* Same decorative-illustration treatment, matching the reference, for
   the other 3 homepage sections that had one (Core Values top-left,
   Services bottom-left, Testimonials bottom-left) plus the Appointment
   section (top-right) — each with its own position/size/opacity per
   the reference. */
#values,
#services,
#testimonials,
#appointment {
	position: relative;
	overflow: hidden;
}
.dc-values-decor {
	position: absolute;
	top: -26px;
	left: -26px;
	width: 320px;
	height: 320px;
	opacity: 0.66;
	pointer-events: none;
}
.dc-services-decor {
	position: absolute;
	bottom: -44px;
	left: -44px;
	width: 320px;
	height: 320px;
	opacity: 0.6;
	pointer-events: none;
}
.dc-testimonials-decor {
	position: absolute;
	bottom: -26px;
	left: -18px;
	width: 280px;
	height: 280px;
	opacity: 0.7;
	pointer-events: none;
}
.dc-appointment-decor {
	position: absolute;
	top: -30px;
	right: -26px;
	width: 300px;
	height: 300px;
	opacity: 0.64;
	pointer-events: none;
}
@media (max-width: 480px) {
	.dc-values-decor {
		width: 170px;
		height: 170px;
		top: -14px;
		left: -14px;
	}
	.dc-services-decor {
		width: 170px;
		height: 170px;
		bottom: -24px;
		left: -24px;
	}
	.dc-testimonials-decor {
		width: 150px;
		height: 150px;
		bottom: -14px;
		left: -10px;
	}
	.dc-appointment-decor {
		width: 160px;
		height: 160px;
		top: -16px;
		right: -14px;
	}
}
/* Stretch the About columns so the portrait fills the full height of
   the text column (heading down to the last credential row), same
   fix pattern as the hero and appointment map. */
.dc-about-grid {
	align-items: stretch !important;
}
.dc-about-image-col {
	display: flex;
	flex-direction: column;
}
.dc-about-image {
	flex: 1;
	margin: 0;
}
.dc-about-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
@media (max-width: 782px) {
	/* The "stretch to match text column height" behavior only makes
	   sense side-by-side on desktop — once the columns stack, the
	   image was inheriting an oversized height (~780px, taller than
	   the viewport). A portrait aspect-ratio at full mobile width is
	   still very tall (682px wide -> 852px tall at 4:5), so cap the
	   height directly instead and let object-fit:cover crop it. */
	.dc-about-grid {
		align-items: normal !important;
	}
	.dc-about-image {
		flex: none;
		max-height: 420px;
	}
	.dc-about-image img {
		height: 100%;
	}
}
.dc-hero-badge-stat {
	position: absolute;
	left: -1.6rem;
	bottom: 2.6rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: 1rem 1.25rem;
	box-shadow: 0 18px 40px -16px rgba(12, 34, 54, 0.3);
	display: flex;
	align-items: center;
	gap: 0.875rem;
}
/* WP applies its vertical block-gap as margin-top on the second
   paragraph (2nd child) of a constrained-layout group — reads as an
   oversized gap between "Years of" and "Surgical Experience" in this
   compact badge card. */
.dc-hero-stat-text > p:last-child {
	margin-top: 2px !important;
}
.dc-hero-badge-fellowship {
	position: absolute;
	right: -1.1rem;
	top: 2.1rem;
	background: var(--wp--preset--color--ink);
	color: #fff;
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.8rem 1.1rem;
	box-shadow: 0 18px 40px -16px rgba(12, 34, 54, 0.5);
}
/* Same WP default block-gap-as-margin-top issue as .dc-hero-stat-text
   above — "FIAGES Certified" (2nd paragraph) picked up an oversized
   ~29px gap instead of sitting close under its "Fellowship" label. */
.dc-hero-badge-fellowship > p:last-child {
	margin-top: 2px !important;
}
@media (max-width: 782px) {
	/* Let the portrait use the column's full width — the badges overlap
	   its corners the same way on mobile as on desktop (see below), so
	   there's no need to reserve any side gutter for them here. */
	.dc-hero-portrait-frame {
		max-width: 100%;
		padding: 0;
	}
	/* Keep both badges in their original desktop position (overlapping
	   the image's bottom-left / top-right corners, per the base
	   .dc-hero-badge-stat / .dc-hero-badge-fellowship rules above)
	   instead of stacking them below the image. Their negative offsets
	   are small enough relative to the section's own side padding that
	   they stay within the viewport at every mobile width down to
	   320px — verified, no horizontal overflow. */
	.dc-hero-badge-stat,
	.dc-hero-badge-fellowship {
		display: flex;
	}
	/* .dc-hero-badge-stat is an icon+text ROW by design ("8+" next to a
	   text column) and stays that way. .dc-hero-badge-fellowship is a
	   vertical label/value pair ("Fellowship" above "FIAGES
	   Certified") — inheriting flex's default row direction crammed
	   both lines side-by-side into a narrow box, and since
	   overflow-wrap:break-word disables flexbox's usual "don't shrink
	   below the longest word" protection, "Fellowship" broke mid-word
	   instead of wrapping normally. */
	.dc-hero-badge-fellowship {
		flex-direction: column;
	}
	/* The badges now overlap a smaller mobile portrait (down from a much
	   wider desktop image), so their desktop-sized text reads oversized
	   relative to the photo. Scale it down; all these are inline
	   font-size styles, so !important is needed to win over them. */
	.dc-hero-badge-stat > p:first-child {
		font-size: 15px !important;
	}
	.dc-hero-stat-text > p:first-child {
		font-size: 11px !important;
	}
	.dc-hero-stat-text > p:last-child {
		font-size: 10px !important;
	}
	.dc-hero-badge-fellowship > p:first-child {
		font-size: 9px !important;
	}
	.dc-hero-badge-fellowship > p:last-child {
		font-size: 10px !important;
	}
}
@media (max-width: 480px) {
	/* The fixed 46px font-size (not the fluid clamp() other headings
	   use) combined with hardcoded <br> breaks meant for desktop's
	   3-line layout wraps to 5 total lines at phone width. 32px keeps
	   "Expert Minimally" (the longest segment) comfortably within the
	   column's ~275px width. */
	.dc-hero-heading {
		font-size: 32px !important;
	}
}
/* Stats bar: 4-column grid on desktop, auto-scrolling marquee on
   mobile (swapped via display, not rebuilt with JS breakpoint logic). */
.dc-stats-marquee {
	display: none;
}
@media (max-width: 782px) {
	/* The vertical dividers between the 4 stat columns only make sense
	   side-by-side on desktop — once WP stacks the columns full-width
	   on mobile, a left border reads as a stray vertical line down the
	   side of each stacked stat instead of a divider. */
	.dc-stats-bar .wp-block-column {
		border-left: none !important;
	}
	/* WP's flex-layout support sets body .is-layout-flex{display:flex},
	   which beats a plain single-class selector on specificity — same
	   fix already needed elsewhere in this file. */
	.dc-stats-columns {
		display: none !important;
	}
	.dc-stats-marquee {
		display: block;
		overflow: hidden;
		/* Fade the edges so items don't hard-cut at the section boundary. */
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.dc-stats-marquee-track {
		display: flex;
		width: max-content;
		animation: dc-stats-marquee-scroll 18s linear infinite;
	}
	.dc-stats-marquee-item {
		flex: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 28px;
		white-space: nowrap;
	}
	.dc-stats-marquee-value {
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 700;
		font-size: 28px;
		line-height: 1;
	}
	.dc-stats-marquee-label {
		margin-top: 6px;
		color: var(--wp--preset--color--muted-on-dark);
		font-weight: 500;
		font-size: 13px;
		letter-spacing: 0.02em;
	}
	@keyframes dc-stats-marquee-scroll {
		from {
			transform: translateX(0);
		}
		to {
			/* The track renders the same stats twice back to back, so
			   -50% is exactly one full set — the loop point is seamless. */
			transform: translateX(-50%);
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.dc-stats-marquee-track {
			animation: none;
			overflow-x: auto;
		}
	}
}
@media (max-width: 480px) {
	/* Same wrapping problem as the Hero heading: "Meet Dr. Digvijay
	   Singh" (the longest of the 3 hardcoded <br> segments) doesn't
	   fit the ~275px column at the standard 28px heading size, adding
	   extra sub-wrapped lines on top of the intended 3. */
	.dc-about-heading {
		font-size: 24px !important;
	}
	/* isStackedOnMobile:false (added earlier to keep all 4 credential
	   cards in 2 rows of 2 instead of 4 stacked rows) forces each card
	   down to ~131px at true phone widths — far too narrow for labels
	   like "EDUCATION" or "FELLOWSHIP", which broke mid-word. Revert
	   to full-width stacking just below this breakpoint; 2-per-row
	   still holds fine from 480px up through tablets. */
	#about .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
	}
	#about .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Credential pills */
.dc-pill {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	background: var(--wp--preset--color--surface);
	padding: 7px 13px;
	border-radius: var(--wp--custom--radius--sm);
	display: inline-block;
}

/* About credential grid */
.dc-credential-card {
	display: flex;
	gap: 14px;
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: 15px 16px;
}
@media (max-width: 782px) {
	/* At mobile column widths "MBBS, DNB (Gen. Surgery)" wraps to 2
	   lines while the other 3 cards' shorter values stay on 1, leaving
	   mismatched box heights. Give every card the 2-line card's height
	   so all 4 stay the same size regardless of value text length. */
	.dc-credential-card {
		min-height: 108px;
	}
}
.dc-credential-icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
/* WP applies its vertical block-gap as margin-top on the value paragraph
   (2nd child of the constrained group) — default clamp() gap reads as a
   large gap between the label and value; pull it in to a tight 2px. */
.dc-credential-text > p:last-child {
	margin-top: 2px !important;
}

/* Core values horizontal scroll-snap track */
.dc-values-track {
	display: flex;
	align-items: stretch;
	gap: 24px;
	margin-top: 2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 6px 2px 12px;
	/* Override WP's constrained-layout width/centering so the track's
	   left edge lines up with the section heading above it. */
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.dc-values-track::-webkit-scrollbar {
	display: none;
}
.dc-value-card {
	flex: 0 0 264px;
	width: 264px;
	height: 200px;
	/* WP applies its vertical block-gap as margin-top on non-first
	   children of a "default" layout group; this track is a flex row
	   using its own gap for spacing, so that margin has to be zeroed. */
	margin-top: 0 !important;
	box-sizing: border-box;
	scroll-snap-align: start;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 20px;
}
.dc-value-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--sm);
	background: #fbeedf;
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-left: 0;
	margin-right: auto;
}
.dc-value-title {
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--ink);
	margin: 12px 0 0;
}
.dc-value-desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--body-2);
	margin: 9px 0 0;
}
.dc-values-nav-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--border-2);
	color: var(--wp--preset--color--ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}
.dc-values-nav-btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
@media (max-width: 782px) {
	/* User asked for exactly one full card visible per view, no peek
	   of the next one — a fixed 264px card left very little breathing
	   room next to the track's own edges on narrow phones anyway.
	   Sizing relative to the track's own width fills it edge to edge. */
	.dc-value-card {
		flex: 0 0 100%;
		width: auto;
		max-width: 400px;
	}
}

/* Service cards */
.dc-grid-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 18px;
}
@media (max-width: 480px) {
	/* Match the other section headings' mobile size (24px, same as
	   .dc-about-heading) instead of the smaller 18px this used to need.
	   The hardcoded <br> has been removed (see the pattern file) so the
	   text reflows naturally at this size — any size above 18px wraps
	   to 3 lines instead of 2 regardless (this text is simply longer
	   than the other headings' segments), so there's no smaller-wrap
	   trade-off to make by going straight to 24px. WP's generated
	   .has-x-large-font-size utility class carries !important, so this
	   needs it too. */
	.dc-services-heading {
		font-size: 24px !important;
	}
}
.dc-service-title {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 22px 0 0;
}
.dc-service-desc {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--wp--preset--color--body-2);
	margin: 11px 0 0;
}
.dc-service-card {
	/* WP applies its vertical block-gap as margin-top on non-first
	   children of a "default" layout group; this grid uses its own gap
	   for spacing, so that margin has to be zeroed (same fix as the
	   Core Values cards). */
	margin-top: 0 !important;
	background: linear-gradient(160deg, var(--wp--preset--color--base) 0%, #f0f5fb 100%);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: 30px 26px 28px;
	transition: all 0.2s ease;
}
.dc-service-card:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 22px 46px -24px rgba(12, 34, 54, 0.28);
	transform: translateY(-3px);
	background: linear-gradient(160deg, var(--wp--preset--color--base) 0%, #fbf1e8 100%);
}
.dc-service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--accent);
	color: #fff;
	box-shadow: 0 10px 22px -8px rgba(224, 138, 77, 0.5);
	font-size: 30px;
}

/* Testimonials */
.dc-grid-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.dc-testimonial-card {
	/* WP applies its vertical block-gap as margin-top on non-first
	   children of a "default" layout group; this grid uses its own gap
	   for spacing, so that margin has to be zeroed (same fix as the
	   Core Values and Services cards). */
	margin-top: 0 !important;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 30px 28px;
}
.dc-testimonial-stars {
	color: var(--wp--preset--color--accent);
	font-size: 17px;
	letter-spacing: 2px;
}
.dc-testimonial-quote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
}
.dc-testimonial-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e2eaf2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--wp--preset--color--body-2);
}
@media (max-width: 782px) {
	/* On mobile the grid becomes a horizontal scroll-snap carousel
	   (auto-advanced by testimonials-carousel.js); each card fills the
	   full track width so exactly one card is visible per view, no
	   peek of the next one. testimonials-carousel.js reads the card's
	   own rendered width for its scroll step, so no JS change needed
	   here. */
	.dc-grid-testimonials {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 6px 2px 12px;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.dc-grid-testimonials::-webkit-scrollbar {
		display: none;
	}
	.dc-testimonial-card {
		flex: 0 0 100%;
		max-width: 400px;
		scroll-snap-align: center;
	}
}

/* Why choose us checklist */
.dc-grid-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 18px 40px;
}
.dc-why-item {
	/* WP applies its vertical block-gap as margin-top on non-first
	   children of a "default" layout group; this grid uses its own gap
	   for spacing, so that margin has to be zeroed (same fix as the
	   Core Values, Services, and Testimonials cards). */
	margin-top: 0 !important;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dc-why-check {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(224, 138, 77, 0.16);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
}

/* Blog cards */
.dc-grid-blog {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.dc-grid-blog {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.dc-grid-blog {
		grid-template-columns: 1fr;
	}
}
/* The Query Loop wraps each post in its own <li class="wp-block-post">,
   which gets WP's default vertical block-gap margin-top on every post
   after the first — same recurring fix as the other card grids. */
.dc-grid-blog .wp-block-post {
	margin-top: 0 !important;
}
.dc-blog-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	transition: all 0.2s ease;
}
.dc-blog-card:hover {
	box-shadow: 0 20px 44px -24px rgba(12, 34, 54, 0.3);
	transform: translateY(-3px);
}
/* The category tag's textColor:accent only colors the wrapper — the
   post-terms block's inner <a> tag gets its own color from the theme's
   global link style, overriding the intended orange. Scoped to exclude
   .dc-blog-grid-tag: that variant sits on its own orange pill
   background and needs white text instead (see .dc-blog-grid-tag a
   below) — this rule and that one used to have equal specificity, and
   this one (appearing later in the file) was winning, making the pill
   text invisible (orange-on-orange). */
.dc-blog-card .wp-block-post-terms:not(.dc-blog-grid-tag) a {
	color: var(--wp--preset--color--accent) !important;
}
/* Clamp title/excerpt to a fixed number of lines (with a matching
   min-height) so every card is the same size regardless of how long
   its title or excerpt text happens to be — not just within a row. */
.dc-blog-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 54px;
}
.dc-blog-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 46px;
}
.dc-blog-cover-placeholder {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-image: repeating-linear-gradient(135deg, #dce6ef 0 12px, #e7eef5 12px 24px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dc-blog-cover-placeholder .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.dc-blog-cover-placeholder .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Appointment form */
.dc-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
}
@media (max-width: 480px) {
	.dc-form-row {
		grid-template-columns: 1fr;
	}
}
.dc-form-field {
	display: block;
}
.dc-form-field input,
.dc-form-field select,
.dc-form-field textarea {
	/* Without border-box, width:100% + padding + border pushes the
	   actual rendered width ~33px past the field's own column, causing
	   it to overlap the field next to it. */
	box-sizing: border-box;
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid var(--wp--preset--color--border-2);
	border-radius: var(--wp--custom--radius--sm);
	font-size: 15px;
	font-family: inherit;
	color: var(--wp--preset--color--heading);
	background: #fbfdfe;
	outline: none;
}
.dc-form-field input:focus,
.dc-form-field select:focus,
.dc-form-field textarea:focus {
	border-color: var(--wp--preset--color--accent);
}
/* Stretch both columns to the same height so the map can fill it,
   from the section heading down to where the form ends. WP forces
   .wp-block-columns{align-items:normal!important}, so this needs
   !important to actually win (same fix as the hero section). */
.dc-appointment-grid {
	align-items: stretch !important;
}
.dc-appointment-map-col {
	display: flex;
	flex-direction: column;
}
.dc-appointment-map {
	flex: 1;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 24px 50px -30px rgba(12, 34, 54, 0.3);
}
.dc-appointment-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 440px;
	border: 0;
}

/* Same default vertical-rhythm margin-top already zeroed for the
   homepage and single-post template sections — the Blog listing (and
   the Category archive, which reuses these same classes) had the same
   ~29px unintended gap between sections. The Featured Article section
   also had no explicit top/bottom padding of its own, so — like the
   single-post Cover Image section — it was falling back to WP core's
   low-specificity has-background default (20px). */
.dc-blog-header,
.dc-blog-featured-section,
.dc-blog-articles {
	margin-top: 0;
}
.dc-blog-featured-section {
	padding-top: 0;
	padding-bottom: 0;
}

/* Blog page header — real surgical-team photo (layer 0) under a dark
   gradient overlay (layer 1) and an accent glow (layer 2), with the
   heading content on top (layer 3). Same layering as the Contact page
   header, so the two stay visually consistent. */
.dc-blog-header {
	position: relative;
	overflow: hidden;
}
.dc-blog-header-bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.dc-blog-header-bg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* The photo is already dark, so a slightly lighter overlay than the
   Contact header's (0.82->0.9) still keeps the white heading crisp
   while letting the surgical scene show through. */
.dc-blog-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 34, 54, 0.72), rgba(12, 34, 54, 0.86));
	z-index: 1;
}
.dc-blog-header::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 138, 77, 0.45), transparent 70%);
	z-index: 2;
}
.dc-blog-header-content {
	position: relative;
	z-index: 3;
}
/* The breadcrumb "Home" link's own anchor color comes from the theme's
   global link style (styles.elements.link, ink) which wins over the
   paragraph's muted-on-dark textColor — same override pattern already
   used for the blog card category tag link. */
.dc-blog-header a {
	color: var(--wp--preset--color--muted-on-dark) !important;
}
.dc-blog-header a:hover {
	color: var(--wp--preset--color--base) !important;
}

/* Author initials badge — same idea as the header's dc-logo-mark, but
   circular for the blog author byline. */
.dc-author-avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: 'Spectral', serif;
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.dc-author-avatar-sm {
	width: 32px;
	height: 32px;
	font-size: 12px;
}

/* A single real link (wp:read-more) stretched to cover its whole card,
   so the entire card is clickable while keeping a visible, separate
   "Read more/article" label as a non-interactive visual cue.
   WP core's `.wp-block-read-more { width: fit-content }` otherwise
   collapses this to a near-zero-width box even with inset:0 set —
   needs an explicit width/height to actually stretch. */
.dc-stretched-link {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
}

/* Featured article card */
.dc-blog-featured-card {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: 0 24px 50px -34px rgba(12, 34, 54, 0.35);
	transition: all 0.2s ease;
}
.dc-blog-featured-card:hover {
	box-shadow: 0 30px 60px -30px rgba(12, 34, 54, 0.4);
	transform: translateY(-3px);
}
.dc-blog-featured-grid {
	/* WP forces .wp-block-columns{align-items:normal!important}; stretch
	   the image column to match the content column's height. */
	align-items: stretch !important;
}
.dc-blog-featured-media {
	display: flex;
	flex-direction: column;
}
.dc-blog-featured-cover {
	aspect-ratio: unset;
	flex: 1;
	min-height: 320px;
}
.dc-blog-featured-body {
	padding: 46px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Featured card on mobile: the 44px desktop padding + 28px (x-large)
   title left almost no room in a 273px-wide card, forcing the title
   to 4 lines and the date/read-time badges to break mid-word ("2
   min"/"read"). Shrink padding, drop the title to a mobile-sized 19px,
   and let the meta row wrap as whole badges (not mid-text) as a
   fallback on the narrowest phones where even the reduced padding
   doesn't leave enough room for both badges side by side. */
@media (max-width: 782px) {
	.dc-blog-featured-body {
		padding: 28px 20px;
	}
	.dc-blog-featured-body .wp-block-post-title {
		font-size: 19px !important;
	}
	.dc-blog-featured-body > div:first-child {
		flex-wrap: wrap;
	}
}
.dc-blog-featured-tag,
.dc-blog-grid-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	/* When a real featured image is set, wp:post-featured-image renders
	   a sibling before this tag, making the tag the layout's 2nd child
	   — WP's default block-gap then lands as an extra ~29-32px
	   margin-top on it (same recurring bug fixed elsewhere in this
	   file). Cards without a featured image have no such sibling, so
	   the tag is the 1st/only child and never got this margin —
	   misaligning the tag between the two card states. Zero it so
	   position:absolute's own top:14px is the only thing that counts. */
	margin-top: 0 !important;
}
.dc-blog-featured-tag a,
.dc-blog-grid-tag a {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base) !important;
	font-weight: 700;
	padding: 6px 13px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}
.dc-blog-featured-author,
.dc-blog-grid-author {
	flex-wrap: nowrap;
}
/* The name/speciality group has no custom blockGap, so WP's default
   clamp() block-gap lands as margin-top on the speciality line — same
   fix pattern as the About section's credential cards. */
.dc-blog-author-text > p:last-child {
	margin-top: 2px !important;
}
.dc-blog-featured-cta,
.dc-blog-grid-cta {
	/* WP's flex-layout support sets `.is-layout-flex > :is(*, div){margin-left:0}`,
	   which edges out a plain single-class selector on specificity — needs
	   !important to actually push this item to the row's far right. */
	margin-left: auto !important;
	/* This used to also carry position:relative, which meant it — not
	   the card — became .dc-stretched-link's containing block: the
	   "whole card clickable" link got trapped inside this small CTA
	   box instead of covering the card, and it didn't even line up
	   with the visible "Read more" text within that box, so NEITHER
	   the card nor the visible text was actually clickable (confirmed
	   via elementFromPoint). margin-left:auto doesn't need position
	   set at all to work as a flex item, so this is a no-op removal —
	   the card itself (.dc-blog-card / .dc-blog-featured-card, both
	   already position:relative) is now correctly the stretched link's
	   containing block. */
}

/* Category filter chips */
.dc-blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.dc-blog-filter-chip {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 13px;
	padding: 9px 16px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1.5px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	cursor: pointer;
	transition: all 0.18s ease;
}
.dc-blog-filter-chip.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Load more (real query-pagination-next, hides itself when no next page) */
.dc-blog-load-more .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 30px;
	border: 1.5px solid var(--wp--preset--color--border-2);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.dc-blog-load-more .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--ink);
}
.dc-blog-load-more .wp-block-query-pagination-next::after {
	content: 'expand_more';
	font-family: 'Material Symbols Rounded';
	font-feature-settings: 'liga';
	font-size: 19px;
	line-height: 1;
}

/* Category archive: "no posts in this category" fallback message */
.dc-archive-empty {
	padding: 40px 0;
}
.dc-archive-empty a {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Contact page header — real photo background (layer 0), dark gradient
   overlay (::before, layer 1), accent glow (::after, layer 2), content
   group explicitly lifted above all three (layer 3). */
.dc-contact-header {
	position: relative;
	overflow: hidden;
}
.dc-contact-header-bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.dc-contact-header-bg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
}
.dc-contact-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 34, 54, 0.82), rgba(12, 34, 54, 0.9));
	z-index: 1;
}
.dc-contact-header::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 138, 77, 0.45), transparent 70%);
	z-index: 2;
}
.dc-contact-header-content {
	position: relative;
	z-index: 3;
}
.dc-contact-header-content a {
	color: var(--wp--preset--color--muted-on-dark) !important;
}
.dc-contact-header-content a:hover {
	color: var(--wp--preset--color--base) !important;
}

/* Contact info cards (Call / Email / Visit) */
.dc-contact-cards {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 24px 50px -34px rgba(12, 34, 54, 0.3);
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 782px) {
	.dc-contact-cards {
		grid-template-columns: 1fr;
	}
}
.dc-contact-card-col {
	position: relative;
	/* WP applies its default block-gap as margin-top on non-first grid
	   children, which — combined with the grid's default
	   align-items:stretch — shrinks that card's visible height by the
	   same amount. Same recurring fix as the other card grids. */
	margin-top: 0 !important;
	padding: 32px 30px;
	gap: 18px;
	transition: background 0.2s ease;
}
.dc-contact-card-col:hover {
	background: #fbf6f1;
}
.dc-contact-card-divider {
	border-left: 1px solid var(--wp--preset--color--border);
}
@media (max-width: 782px) {
	.dc-contact-card-divider {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
}
.dc-contact-card-icon {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fbeedf;
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 27px;
}
.dc-contact-card-value {
	margin-top: 5px;
	font-size: 17px;
}
/* The email address is longer than the other two cards' values and
   wraps to 2 lines at the shared 17px size on desktop, breaking
   mid-word ("...gmail.co"/"m"). 15px is the largest size that keeps
   it on one line within the card's ~238px text column. */
.dc-contact-card-value-email {
	font-size: 15px;
}

/* Info cards on mobile: 17px bold value text overflowed the narrow
   139px text column (icon + gap eat into the 273px card), forcing
   ugly mid-word wraps (e.g. the email breaking as "...gm/ail.com").
   Sizing down lets "Sahayog Hospital" fit on one line; the long email
   still wraps but no longer needs to squeeze as hard. */
@media (max-width: 782px) {
	.dc-contact-card-value {
		font-size: 15px;
	}
	.dc-contact-card-text > p:first-child,
	.dc-contact-card-text > p:last-child {
		font-size: 13px;
	}
}
/* The sub-note line (3rd paragraph) has no custom blockGap, so WP's
   default clamp() block-gap lands as a large margin-top — same
   recurring fix as the About credential cards. */
.dc-contact-card-text > p:last-child {
	margin-top: 3px !important;
}

/* Form description: hardcoded <br> doesn't fit the narrower mobile column
   width, forcing an awkward wrap. Let it reflow naturally and nudge the
   size down slightly so it still balances to 3 lines instead of 4. */
@media (max-width: 782px) {
	.dc-contact-form-desc br {
		display: none;
	}
	.dc-contact-form-desc {
		font-size: 15px !important;
	}
}

/* Consultation hours bar under the contact page's map */
.dc-contact-hours-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--sm);
	background: rgba(224, 138, 77, 0.18);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}
.dc-contact-hours-value {
	margin-top: 3px;
	font-size: 15.5px;
}

/* ===== Single post article template ===== */

/* Same default vertical-rhythm rule already zeroed for the homepage
   sections applies here too — each top-level section on this template
   picked up an extra ~29px margin-top on top of its own deliberate
   padding, stacking up to ~145px of unintended gap by the bottom of
   the page. */
.dc-article-header-section,
.dc-article-cover-section,
.dc-article-body-section,
.dc-author-bio-section,
.dc-related-section {
	margin-top: 0;
}
/* None of these outer sections declare their own top/bottom padding
   in the pattern (only the inner wrapper div does, or — for the Cover
   section — only left/right at all) — but WP core ships a low-
   specificity fallback (`:where(.wp-block-group.has-background){
   padding: 1.25em 2.375em }`) that fills in a default 20px top/bottom
   for any group with a background color. That silently stacks on top
   of each inner wrapper's own deliberate padding. Zero it so the
   inner wrapper's padding is the only padding that counts. */
.dc-article-header-section,
.dc-article-cover-section,
.dc-author-bio-section {
	padding-top: 0;
	padding-bottom: 0;
}
/* Deliberate breathing room below the cover image, on top of the
   Article Body section's own 56px top padding. */
.dc-article-cover-section {
	padding-bottom: 40px;
}

.dc-article-header a {
	color: var(--wp--preset--color--body-2) !important;
}
.dc-article-header a:hover {
	color: var(--wp--preset--color--ink) !important;
}
.dc-article-tag a {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base) !important;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}
.dc-article-byline {
	flex-wrap: nowrap;
}
/* The role line (2nd paragraph) has no custom blockGap, so WP's
   default clamp() block-gap lands as a large margin-top — same
   recurring fix as the About credential cards / Blog featured card. */
.dc-article-byline-text > p:last-child {
	margin-top: 2px !important;
}
.dc-article-meta {
	/* WP's flex-layout support sets
	   .is-layout-flex > :is(*, div){margin-left:0}, which beats a plain
	   single-class selector on specificity — same fix already needed
	   for the blog card CTAs. */
	margin-left: auto !important;
}
/* On mobile the byline's 3 children (avatar, name/role, date/read-time)
   had no room to sit side by side in a nowrap row, so instead of the
   row wrapping, the TEXT inside each child wrapped into unreadable
   fragments (e.g. "General &"/"Minimal"/"Access"/"Surgeon"). Let the
   row wrap as whole units instead, and drop the date/read-time group
   to its own full-width line below rather than squeezing it to the
   right of a wrapped name/role block. */
@media (max-width: 782px) {
	.dc-article-byline {
		flex-wrap: wrap;
	}
	.dc-article-byline-text {
		min-width: 160px;
	}
	.dc-article-meta {
		margin-left: 0 !important;
		margin-top: 10px;
		width: 100%;
	}
}

/* Cover image — wider aspect ratio than the blog grid's placeholder */
.dc-article-cover {
	aspect-ratio: 21 / 9;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 26px 56px -30px rgba(12, 34, 54, 0.4);
}

/* Article body grid */
.dc-article-grid {
	align-items: flex-start !important;
}
.dc-article-sidebar {
	position: sticky;
	top: 96px;
}
.dc-article-toc,
.dc-article-cta {
	border-radius: var(--wp--custom--radius--md);
}
.dc-article-toc {
	border: 1px solid var(--wp--preset--color--border);
	padding: 22px;
}
.dc-article-toc-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 14px;
}
.dc-article-toc-list a {
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--body);
	text-decoration: none;
}
.dc-article-toc-list a:hover {
	color: var(--wp--preset--color--ink);
}
.dc-article-cta {
	position: relative;
	overflow: hidden;
}
.dc-article-cta::before {
	content: "";
	position: absolute;
	top: -50px;
	right: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 138, 77, 0.22), transparent 70%);
}
.dc-article-cta > * {
	position: relative;
}
.dc-article-tags a {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--body-2);
	background: var(--wp--preset--color--surface);
	padding: 7px 13px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	margin: 0 8px 8px 0;
}

/* Article body typography (real post content, not template chrome) */
.dc-article-content {
	font-size: 17.5px;
	line-height: 1.78;
	color: var(--wp--preset--color--body);
	max-width: 680px;
}
.dc-article-content h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	margin: 40px 0 0;
}
/* Sub-section heading — clearly subordinate to h2 (used for the
   numbered sub-points and FAQ questions in longer posts). */
.dc-article-content h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 28px 0 0;
}
.dc-article-content p {
	margin: 16px 0 0;
}
.dc-article-content p:first-child {
	margin-top: 0;
}
.dc-article-lead {
	font-size: 19px !important;
	line-height: 1.7 !important;
	color: var(--wp--preset--color--heading) !important;
}
.dc-article-checklist {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dc-article-checklist li {
	position: relative;
	padding-left: 32px;
	margin: 0;
}
.dc-article-checklist li::before {
	content: "check_circle";
	font-family: "Material Symbols Rounded";
	font-feature-settings: "liga";
	position: absolute;
	left: 0;
	top: 1px;
	font-size: 20px;
	color: var(--wp--preset--color--accent);
}
.dc-article-checklist strong {
	color: var(--wp--preset--color--ink);
}
.dc-article-quote {
	margin: 36px 0 0;
	padding: 8px 0 8px 24px;
	border-left: 3px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: var(--wp--preset--color--heading);
}
.dc-article-callout-label .dc-icon {
	font-size: 19px;
	vertical-align: -4px;
	margin-right: 4px;
}

/* Author bio */
.dc-author-bio-photo img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.dc-author-bio-photo {
	flex: none;
}
/* "constrained" layout's own width:100% (meant for normal document
   flow) fights a flex row's auto-sizing — flex:1 + min-width:0 lets
   this take the remaining space next to the photo and wrap its own
   text instead of overflowing the row. */
.dc-author-bio-text {
	flex: 1;
	min-width: 0;
}
/* Cap the photo+text row to a compact width and center it within the
   section, instead of the text stretching to fill the full 820px
   content width. 680px (rather than a tighter cap) is also what lands
   the bio paragraph at exactly 2 lines. */
.dc-author-bio-row {
	max-width: 680px;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* On mobile the photo+text row kept the bio paragraph squeezed into a
   ~163px column next to the 88px photo (8 lines of narrow text next
   to a small square photo). Stack them and center, a more natural fit
   for a short bio card at this width. */
@media (max-width: 782px) {
	.dc-author-bio-row {
		flex-wrap: wrap;
	}
	/* WP's flex-layout support sets
	   .is-layout-flex > :is(*, div){margin:0}, which beats a plain
	   single-class selector on specificity — same fix already needed
	   for the article meta / blog card CTAs. */
	.dc-author-bio-photo {
		margin: 0 auto !important;
	}
	.dc-author-bio-text {
		min-width: 100%;
		text-align: center;
		margin-top: 14px;
	}
}

/* Site-wide mobile section padding. Every top-level section across
   Homepage, Blog, Contact, and the Single Post template got 140px
   left/right padding as inline block styles (highest specificity, so
   these need !important to win). That's too wide on phones — cap it
   at 50px below the standard 782px mobile breakpoint everywhere. */
@media (max-width: 782px) {
	#about,
	#values,
	#services,
	#testimonials,
	#why,
	#blog,
	#appointment,
	.dc-hero,
	.dc-stats-bar,
	.dc-footer-row,
	.dc-footer-bottom,
	.dc-blog-header-content,
	.dc-blog-featured-wrap,
	.dc-blog-articles,
	.dc-contact-header-content,
	.dc-contact-info-wrap,
	#contact-form,
	.dc-article-header,
	.dc-article-cover-section,
	.dc-article-grid,
	.dc-author-bio,
	.dc-related-wrap {
		padding-left: 50px !important;
		padding-right: 50px !important;
	}
}