/* ==========================================================================
   MRI Dental Classic -- Template #2 layout & typography CSS.
   Loaded after the parent's assets/css/mri.css (enqueued as a dependency in
   functions.php), so rules here only need to add/override what makes this
   template read as a different design: centered composition, two-tier
   header, plaque hero, arches, hairline lists, minimal ornament.

   Per the recorded iOS Safari lessons (2026-09-23 EXECUTED report,
   Addendum 4): no backdrop-filter anywhere, no CSS mask-image icons, no
   will-change, no animation-fill-mode:both. The only "icon" here is a plain
   CSS ::before square (the gold diamond), not a mask or webfont glyph.
   ========================================================================== */

/* -----------------------------------------------------------------------
   0. Wordmark colour -- the practice's own logo green, used ONLY on pure
   white (main header tier), per brief. Darkened slightly from the source
   mark (#697B68 -> #5C6E5A) for contrast headroom: 5.48:1 on white,
   comfortably clear of the 4.5:1 minimum.
   -------------------------------------------------------------------- */
:root {
	--sfd-wordmark-green: #5C6E5A;
}

/* -----------------------------------------------------------------------
   1. Header -- fix round 1 rebuild, 2026-09-28.

   Exactly ONE sticky element: the outer <header class="sfd-header-part">
   that WordPress generates for the template-part reference (className set in
   templates/front-page.html etc). The old inner ".sfd-header" div was ALSO
   sticky, and two nested sticky boxes at top:0 produced a sub-pixel seam
   that showed scrolled content through during scroll -- fix round 1's first
   bug. There is no second positioned wrapper now.

   A single CSS Grid (.sfd-header__grid) holds four direct children --
   spacer, lockup, cta button, nav -- and grid-template-areas (not DOM order)
   places them: two rows on desktop (spacer/lockup/cta, then nav centered
   below), one row on mobile (lockup beside the nav block's own hamburger
   toggle). Compact-on-scroll hides the utility bar and the nav row
   entirely, leaving only the logo row -- the only way to fit the requested
   <=84px desktop / <=64px mobile total with a ~44px/~36px mark.
   -------------------------------------------------------------------- */
.sfd-header-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
	transition: none; /* only children's padding/size/display change; the header box itself does not animate */
}

.sfd-header__utility { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.sfd-header__utility-inner { max-width: var(--wp--custom--layout--content-size, 1180px); margin-inline: auto; width: 100%; }
.sfd-header__offer { margin: 0; letter-spacing: 0.02em; }
.sfd-header__utility-right {
	gap: 1.25rem;
	margin-left: auto; /* pushes the group to the right edge even if the parent's own
		space-between layout doesn't size it there -- belt-and-braces against the same
		core-CSS-specificity issue documented throughout this file. */
	align-items: baseline; /* hours and phone share one visible text baseline */
}
.sfd-header__hours,
.sfd-header__phone { margin: 0; white-space: nowrap; font-size: inherit; }
.sfd-header__phone a { color: currentColor; text-decoration: none; }
.sfd-header__phone a:hover { text-decoration: underline; }

.sfd-header__grid-wrap { padding-top: 0.85rem; padding-bottom: 0.65rem; transition: padding 160ms ease; }
.sfd-header__grid {
	display: grid !important; /* !important: overrides core's own is-layout-flex inline display rule */
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "spacer lockup cta" "nav nav nav";
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.65rem;
	max-width: var(--wp--custom--layout--content-size, 1180px);
	margin-inline: auto;
	width: 100%;
}
.sfd-header__spacer { grid-area: spacer; }
.sfd-header__lockup-wrap { grid-area: lockup; justify-self: center; margin: 0; }
.sfd-header__cta { grid-area: cta; justify-self: end; display: flex !important; }
.sfd-header__cta-button .wp-block-button__link { padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 1.4rem; padding-right: 1.4rem; font-size: 0.8125rem; white-space: nowrap; }

.sfd-lockup { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.sfd-lockup__mark { height: 72px; width: auto; transition: height 160ms ease; }
.sfd-wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.sfd-wordmark__line1 {
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 600;
	font-size: 34px;
	color: var(--wp--preset--color--navy);
	letter-spacing: 0.04em;
	transition: font-size 160ms ease;
}
.sfd-wordmark__line2 {
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--sfd-wordmark-green);
}

.sfd-nav { grid-area: nav; justify-self: center; padding-top: 0.65rem; border-top: 1px solid var(--wp--preset--color--tan); width: 100%; }
.sfd-nav .wp-block-navigation__container { gap: 1.75rem; justify-content: center; }

/* Sticky-compact state: toggled on .sfd-header-part by assets/js/classic.js on scroll. Only
   padding, height and display change -- never a transform, filter or will-change. Always hides
   the utility bar. On desktop the nav sits on its OWN row below the logo, so it must also hide
   to reach the <=84px budget; on mobile the nav (really just its hamburger toggle -- inline
   links are already hidden responsively by the core Navigation block) shares the LOGO row via
   grid-template-areas, so it costs no extra height there and stays visible/usable while
   scrolled -- see the max-width:767px block below, which cancels the desktop hide rule. */
.sfd-header-part.is-compact .sfd-header__utility,
.sfd-header-part.is-compact .sfd-nav { display: none !important; }
.sfd-header-part.is-compact .sfd-header__grid-wrap { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.sfd-header-part.is-compact .sfd-lockup__mark { height: 44px; }
.sfd-header-part.is-compact .sfd-wordmark__line1 { font-size: 24px; }

@media (max-width: 767px) {
	/* !important: these are core Group blocks with their own "is-layout-flex" utility class,
	   whose display:flex inline rule outranks a plain single-class selector. */
	.sfd-header__utility-right { display: none !important; }
	.sfd-header__spacer,
	.sfd-header__cta { display: none !important; }
	.sfd-header__grid { grid-template-columns: 1fr auto; grid-template-areas: "lockup nav"; column-gap: 0.5rem; }
	.sfd-header__lockup-wrap { justify-self: start; }
	.sfd-nav { justify-self: end; padding-top: 0; border-top: none; width: auto; }
	.sfd-lockup__mark { height: 44px; }
	.sfd-header__utility { padding-top: 0.4rem; padding-bottom: 0.4rem; }
	.sfd-header__grid-wrap { padding-top: 0.6rem; padding-bottom: 0.6rem; }
	/* Trims the resting (non-scrolled) mobile header from ~117px to <=110px, measured during the
	   responsive audit -- utility bar + grid-wrap padding tightened slightly; the mark itself
	   also drops from 48px to 44px, still comfortably legible. Fix round 1. */
	.sfd-wordmark__line1 { font-size: 22px; }
	.sfd-wordmark__line2 { font-size: 10px; letter-spacing: 0.26em; }
	.sfd-header-part.is-compact .sfd-lockup__mark { height: 36px; }
	.sfd-header-part.is-compact .sfd-wordmark__line1 { font-size: 18px; }
	/* Cancel the desktop compact rule: on mobile .sfd-nav shares the logo row (grid-area "nav"
	   beside "lockup"), so hiding it isn't needed to hit the <=64px budget, and the hamburger
	   toggle should stay reachable while scrolled. */
	.sfd-header-part.is-compact .sfd-nav { display: flex !important; }
}

/* -----------------------------------------------------------------------
   2. Hero -- full-bleed photo, centered cream plaque overlapping its
   bottom edge. No transform: the overlap is a plain negative margin.
   -------------------------------------------------------------------- */
.sfd-hero__photo { min-height: 62vh; }
.sfd-hero__photo .wp-block-cover__inner-container { min-height: 62vh; }
.sfd-hero__photo .wp-block-cover__image-background {
	/* Fix round 2: new photo (mother + son, medium shot) -- 50% 30% keeps both faces in the upper
	   half of the band at both 1440 (wide, short crop) and 375 (narrow, tall crop), verified in
	   the contact sheet (preview/hero-candidates.png) and on the live render. Round 1's photo and
	   its object-position (50% 42%, and before that 38% 28%) are gone: that photo was an extreme
	   close-up no crop position could fix -- see images-credits.md fix round 2 note. */
	object-position: 50% 30%;
}

.sfd-hero__plaque {
	position: relative;
	z-index: 2; /* explicit stacking above the hero Cover block's own dim-overlay span, which is
		absolutely positioned to the full cover box and would otherwise show through the
		plaque's top edge (where the negative margin pulls it up over the photo) as a
		translucent grey-navy tint -- found in fix round 1. */
	margin-top: -96px;
	margin-inline: auto;
	padding: 2.75rem clamp(1.5rem, 5vw, 3.5rem) 3rem;
	text-align: center;
	background-color: var(--wp--preset--color--cream) !important; /* belt-and-braces: guarantees
		full opacity regardless of any inherited background-blend/opacity from the cover. */
	box-shadow: var(--wp--custom--shadow--lg);
}
.sfd-hero__plaque .wp-block-buttons { margin-top: 0.5rem; justify-content: center; }

.sfd-chip {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--wp--preset--color--tan);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	white-space: nowrap; /* was wrapping to 2 lines at 375px -- found in fix round 1 */
}

@media (max-width: 767px) {
	.sfd-chip {
		font-size: 0.625rem;
		letter-spacing: 0.05em;
		padding: 0.4rem 0.85rem;
	}
}

@media (max-width: 767px) {
	/* !important: the Cover block writes its 62vh min-height as an INLINE style attribute
	   (source-of-truth is the block's own attributes), and an inline style always beats an
	   external stylesheet rule that lacks !important, regardless of selector specificity.
	   Fix round 1: restored to the brief's 44vh. A bottom-fixed mobile CTA bar overlapping hero
	   content within the viewport is by design (Site Work CLAUDE.md: floating action buttons are
	   excluded from the collision audit) -- round 1 had shrunk this further and hidden the hero's
	   own buttons to avoid that overlap, which the coordinator asked to undo. */
	.sfd-hero__photo,
	.sfd-hero__photo .wp-block-cover__inner-container { min-height: 44vh !important; }
	.sfd-hero__plaque {
		margin-top: -56px;
		padding: 1.75rem 1.25rem 2rem;
	}
	.sfd-chip { margin-bottom: 0.6rem; }
}

/* -----------------------------------------------------------------------
   3. Arches -- the template's signature image shape: rounded top corners
   only, sharp bottom, achieved with a plain border-radius + overflow
   clip (no mask-image). A thin tan hairline border traces the arch outline
   (added fix round 1, so the About photo and the Doctor frame below read as
   the same family of shape).
   -------------------------------------------------------------------- */
.is-style-arch {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--arch);
	border: 1px solid var(--wp--preset--color--tan);
}
.is-style-arch img { display: block; width: 100%; height: auto; }

/* Doctor section: the S-mark sits ON CREAM inside its own arch frame (fix round 1 -- previously
   the mark image itself was just arch-cropped directly, with no frame, which read as an oddly
   cropped logo rather than "the mark on cream" the brief asked for). The frame is sized well
   past the mark so there is real cream margin on every side, matching a portrait-frame look. */
.sfd-doctor__frame {
	aspect-ratio: 4 / 5;
	max-width: 320px;
	margin-inline: auto;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--tan);
	border-radius: var(--wp--custom--radius--arch);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem;
}
.sfd-doctor__mark-img img { display: block; width: 100%; height: auto; max-width: 180px; }
.sfd-doctor__caption { margin-top: 0.75rem; }

/* -----------------------------------------------------------------------
   4. Sections -- generous, consistent top/bottom rhythm; centered content.
   -------------------------------------------------------------------- */
/* Every anchor a nav link can land on needs scroll-margin-top, or the sticky header (which stays
   on screen at any scroll position) covers the top of the section it just jumped to. Sized to the
   header's RESTING height (compact is shorter, so this errs generous rather than short). Found
   while checking the Doctor section fix round 1 -- not one of the ten listed defects, but the
   same header rebuild made it worth fixing alongside. */
#about, #services, #doctor, #contact, #new-patients, #appointment { scroll-margin-top: 132px; }
@media (max-width: 767px) { #about, #services, #doctor, #contact, #new-patients, #appointment { scroll-margin-top: 112px; } }

.sfd-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
.sfd-section h2 { text-align: center; }
.sfd-about h2,
.sfd-doctor h2,
.sfd-legal h2 { text-align: left; }
/* Inner pages: the page title already opens the page, so the body needs less top padding than a homepage section. */
.sfd-legal,
.sfd-thanks { padding-top: var(--wp--preset--spacing--50); }
.sfd-intro { max-width: var(--wp--custom--measure); margin-inline: auto; color: var(--wp--preset--color--muted); }
.sfd-pull-line { font-family: var(--wp--preset--font-family--display); font-style: italic; font-weight: 500; line-height: 1.4; }
.sfd-transition-line { margin-top: 0.75rem; }

.sfd-rule { border: none; border-top: 1px solid var(--wp--preset--color--tan); width: 64px; margin: 0.75rem auto 1.25rem; }
.sfd-about .sfd-rule,
.sfd-doctor .sfd-rule { margin-left: 0; }

/* -----------------------------------------------------------------------
   5. Hairline service lists -- small gold diamond markers, hairline rules
   between items, no icons.
   -------------------------------------------------------------------- */
.is-style-hairline { list-style: none; margin: 0; padding: 0; }
.is-style-hairline li {
	position: relative;
	padding: 0.65rem 0 0.65rem 1.35rem;
	border-top: 1px solid var(--wp--preset--color--tan);
}
.is-style-hairline li:last-child { border-bottom: 1px solid var(--wp--preset--color--tan); }
.is-style-hairline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05rem;
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}
.sfd-services-columns h3 { text-align: center; margin-bottom: 0.5rem; }

.sfd-emergency {
	padding: 1.75rem clamp(1rem, 4vw, 2rem);
	margin-top: var(--wp--preset--spacing--60);
	/* Fix round 2: the services section's own padding-bottom (spacing-70, a fluid clamp) left
	   ~70-116px of empty cream below the navy strip before the Doctor section started. This
	   calc() cancels that variable padding and replaces it with a fixed, much smaller gap --
	   48px at 1440, 32px at 375 -- regardless of what spacing-70 actually evaluates to at a
	   given width. */
	margin-bottom: calc(-1 * var(--wp--preset--spacing--70) + 48px) !important; /* !important: a
		core Group-block rule was setting margin-bottom:0 with higher effective priority,
		exactly the same class of issue documented throughout this file. */
	gap: 1.25rem;
	text-align: center;
}
.sfd-emergency p { margin: 0; max-width: 46ch; }
@media (max-width: 767px) {
	.sfd-emergency { margin-bottom: calc(-1 * var(--wp--preset--spacing--70) + 32px) !important; }
}

/* -----------------------------------------------------------------------
   6. Visit / new patients.
   -------------------------------------------------------------------- */
.sfd-visit-columns { text-align: center; }
.sfd-visit-col__label { margin-bottom: 0; }
.sfd-new-patients { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--60); }
.sfd-np-box {
	border-top: 1px solid var(--wp--preset--color--tan);
	padding-top: 1rem;
}
.sfd-np-box p { margin: 0; }

/* -----------------------------------------------------------------------
   7. Closing band + footer.
   -------------------------------------------------------------------- */
.sfd-closing { text-align: center; }
.sfd-closing__badge { margin-bottom: 1.25rem; }

.sfd-footer { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--50); text-align: center; }
.sfd-wordmark-footer { font-family: var(--wp--preset--font-family--accent); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.9375rem; margin: 0 0 1rem; }
.sfd-footer__nav .wp-block-navigation__container { justify-content: center; gap: 1.25rem 1.5rem; }
.sfd-footer__nav a { color: var(--wp--preset--color--gold); }
.sfd-footer__contact { margin: 1rem 0 0.35rem; }
.sfd-footer__contact a { color: var(--wp--preset--color--white); }
.sfd-footer__copyright,
.sfd-footer__credit { margin: 0.2rem 0 0; opacity: 0.85; }
.sfd-footer__credit a { color: var(--wp--preset--color--white); }

/* -----------------------------------------------------------------------
   8. Button style additions this template needs beyond theme.json.
   -------------------------------------------------------------------- */
.is-style-on-navy .wp-block-button__link,
.wp-block-button.is-style-on-navy .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--white);
}
.is-style-on-navy .wp-block-button__link:hover { background-color: var(--wp--preset--color--cream); }
.is-style-outline.is-style-on-navy .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}
.is-style-outline.is-style-on-navy .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

/* -----------------------------------------------------------------------
   9. Mobile sticky CTA (this child's own override, see patterns/mobile-sticky-cta.php).
   -------------------------------------------------------------------- */
.sfd-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding: 0.65rem clamp(1rem, 4vw, 1.5rem);
	/* !important: this block also carries core's own "is-layout-flex" utility class, whose
	   ".wp-block-group.is-layout-flex{display:flex}" inline rule (printed by WordPress itself)
	   is more specific (two classes) than a plain ".sfd-sticky-cta{display:none}" and would
	   otherwise win, showing the mobile bar on desktop too. */
	display: none !important;
}
.sfd-sticky-cta .wp-block-buttons { width: 100%; }
.sfd-sticky-cta .wp-block-button { flex: 1 1 0; min-width: 0; }
.sfd-sticky-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	font-size: 0.6875rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
	/* Left to wrap (not truncated): at 375px two buttons share ~340px, and "SCHEDULE AN
	   APPOINTMENT" in uppercase needs two lines at any font size that still reads comfortably.
	   Two clean lines beats an ellipsis that hides the actual label. */
}

@media (max-width: 767px) {
	.sfd-sticky-cta { display: flex !important; }
	body { padding-bottom: 68px; } /* keeps the sticky bar from covering the footer's last lines */
}