/*
Theme Name: Brookhaven Family Dentistry
Theme URI: http://localhost:8881
Author: Dentivolve
Description: Custom block theme reproducing the Brookhaven Family Dentistry homepage. Light, premium, community-focused dental practice design built with native Gutenberg blocks.
Version: 1.4.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brookhaven
*/

/* Never allow sideways scroll on small screens */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/* ---- Sticky header ---- */
.bh-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Wordmark */
.bh-wordmark {
	font-family: "Clearface Bold", "Playfair Display", Georgia, "Times New Roman", serif;
	color: var(--wp--preset--color--brand-blue);
	font-weight: 700;
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1.02;
	text-align: center;
	white-space: nowrap;
	margin: 0 24px;
	flex: 0 0 auto;
}

/* Header row: equal-width side slots keep the wordmark centered */
.bh-header-row {
	width: 100%;
}
.bh-slot {
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
}
.bh-slot-right {
	justify-content: flex-end;
}
.bh-nav {
	flex: 1 1 0;
	min-width: 0;
}
.bh-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
}
.bh-nav-right .wp-block-navigation__container {
	justify-content: flex-end;
}
/* The hamburger nav only appears on mobile */
.bh-nav-mobile {
	display: none !important;
}

/* Top nav links */
.bh-nav a,
.bh-nav .wp-block-navigation-item__content {
	font-family: "Clearface Bold", "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(15px, 1.35vw, 19px);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}
.bh-nav a:hover {
	text-decoration: underline;
}

/* Hero image rounded corners + badge overlay */
.bh-hero-media {
	position: relative;
	aspect-ratio: 1 / 0.96;
}
.bh-hero-media .wp-block-image:not(.bh-badge),
.bh-hero-media .wp-block-image:not(.bh-badge) figure {
	height: 100%;
	margin: 0;
}
.bh-hero-media .wp-block-image:not(.bh-badge) img {
	border-radius: 34px;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.bh-badge {
	position: absolute;
	right: -26px;
	bottom: -44px;
	width: 150px;
	height: 150px;
	margin: 0;
	z-index: 2;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.07));
	pointer-events: none;
}

/* Service tooth illustrations */
.bh-service-icon {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.bh-service-icon img {
	width: 120px;
	height: 120px;
	object-fit: contain;
}

/* Get in touch floating tooth icon */
.bh-getintouch-icon {
	margin-top: -44px !important;
}
.bh-getintouch-icon img {
	width: 78px;
	height: 84px;
}

/* ============================================================
   Community page — static initiatives + dated news feed
   ============================================================ */

/* Centered hero title */
.bh-comm-title {
	text-align: center;
	line-height: 1.02;
	letter-spacing: -0.5px;
}

/* Rounded, cover-cropped images in the alternating rows */
.bh-comm-img img {
	width: 100%;
	height: 100%;
	border-radius: 14px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
}
.bh-comm-img figure,
.bh-comm-img .wp-block-image {
	margin: 0;
	height: 100%;
}
/* Aspect ratios per row keep the cropped look from the design */
.bh-comm-row .wp-block-column.bh-comm-img {
	align-self: stretch;
}

/* Uppercase "statement" headings used in the initiatives rows */
.bh-comm-statement {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.08;
}

/* ---- News feed (Query Loop of community_update) ---- */
.bh-comm-feed .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

/* Each entry is an image | text pair; alternate the side every other post */
.bh-comm-feed .wp-block-post-template > li {
	margin: 0;
	padding: 48px 0;
	border-top: 1.5px solid #cdcdcd;
}
.bh-comm-feed .wp-block-post-template > li:first-child {
	border-top: none;
}
.bh-comm-feed .bh-comm-entry {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.bh-comm-feed .wp-block-post-template > li:nth-child(even) .bh-comm-entry {
	direction: rtl;
}
.bh-comm-feed .wp-block-post-template > li:nth-child(even) .bh-comm-entry > * {
	direction: ltr;
}

/* Featured image inside the feed */
.bh-comm-feed .wp-block-post-featured-image {
	margin: 0;
}
.bh-comm-feed .wp-block-post-featured-image img {
	width: 100%;
	border-radius: 14px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
}

/* Date sits above the headline as small caps */
.bh-comm-feed .bh-comm-date {
	display: block;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-blue);
	margin-bottom: 6px;
}
.bh-comm-feed .bh-comm-headline {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
}
.bh-comm-feed .bh-comm-headline a {
	color: inherit;
	text-decoration: none;
}

/* ============================================================
   About page — Our Roots / Mission sections + team grid
   ============================================================ */

/* Blue in-page anchor sub-nav under the header */
.bh-about-subnav a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.2px;
}
.bh-about-subnav a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Two-column copy/image sections */
.bh-about-section {
	gap: 48px;
}
.bh-about-section.wp-block-columns {
	margin-top: var(--wp--preset--spacing--40);
}

/* Section images: rounded, cover-cropped to the column */
.bh-about-photo img {
	width: 100%;
	border-radius: 2px;
	object-fit: cover;
	display: block;
}
.bh-about-section .bh-about-img:first-child .bh-about-photo img {
	aspect-ratio: 17 / 15;
}

/* Anchor offset so sticky header doesn't cover jumped-to sections */
#our-roots,
#our-dental-mission,
#our-community-mission,
#meet-the-team,
#brighten-your-smile {
	scroll-margin-top: 120px;
}

/* ---- Meet the Team grid (Query Loop of bfd_team_member) ---- */
.bh-team-grid .wp-block-post-template {
	gap: 40px 24px;
}
.bh-team-card {
	text-align: center;
}

/* Circular photo; the gray disc shows through as a placeholder when a member
   has no featured image yet. */
.bh-team-photo {
	width: 180px;
	height: 180px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #e7e2d8;
	overflow: hidden;
}
.bh-team-photo .wp-block-post-featured-image,
.bh-team-photo figure {
	margin: 0;
	width: 100%;
	height: 100%;
}
.bh-team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.bh-team-name {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	margin: 0 auto 8px;
}
.bh-team-role {
	color: var(--wp--preset--color--ink);
}
.bh-team-role a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

/* Responsive */
@media (max-width: 781px) {
	/* About: stack copy/image sections, photo on top */
	.bh-about-section.wp-block-columns {
		gap: 28px !important;
	}
	.bh-about-section .bh-about-img {
		order: -1;
	}
	.bh-team-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Community: stack every alternating row, photo on top */
	.bh-comm-row,
	.bh-comm-feed .bh-comm-entry {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	.bh-comm-row.wp-block-columns {
		flex-direction: column;
	}
	.bh-comm-row .bh-comm-img {
		order: -1;
	}
	.bh-comm-feed .wp-block-post-template > li:nth-child(even) .bh-comm-entry,
	.bh-comm-feed .wp-block-post-template > li:nth-child(even) .bh-comm-entry > * {
		direction: ltr;
	}
	.bh-comm-feed .wp-block-post-template > li {
		padding: 34px 0;
	}

	/* Header: collapse the split nav into a single hamburger, keep wordmark centered */
	.bh-nav-left,
	.bh-nav-right {
		display: none !important;
	}
	.bh-nav-mobile {
		display: flex !important;
		flex: 0 0 auto;
	}
	.bh-wordmark {
		white-space: normal;
		font-size: clamp(28px, 7.5vw, 40px);
		margin: 0 8px;
	}
	.bh-header {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Hamburger button styling */
	.bh-nav-mobile .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--ink);
	}

	/* Hero: stack with the photo ABOVE the headline */
	.bh-hero-imgcol {
		order: -1;
		margin-bottom: 46px;
	}
	.bh-hero-cols {
		gap: 0 !important;
	}
	.bh-hero-cols,
	.bh-hero-cols > .wp-block-column {
		min-width: 0;
	}
	.bh-hero-cols h1 {
		overflow-wrap: break-word;
		hyphens: auto;
	}
	.bh-hero-media {
		aspect-ratio: 1 / 1.02;
	}
	.bh-badge {
		right: 10px;
		bottom: -24px;
		width: 118px;
		height: 118px;
	}

	/* Tighten section padding on small screens */
	main.wp-block-group,
	.bh-getintouch,
	.bh-footer {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}

/* ============================================================
   Service pages  (/services/<procedure>-atlanta/)
   Standalone pages split out of the old Services accordion.
   Palette + type scale mirror live.css so they read as one site.
   ============================================================ */

/* --- hero band ------------------------------------------------ */

.service-hero {
	background: #f4e8de;
	text-align: center;
	padding: 44px 30px 48px;
	margin-bottom: 0;
}

/* Breadcrumb bar. Inherits background, color, font, line-height and
   font-size from .subnav in live.css so it is identical to the jumplink bar
   on /services/; only the layout differs (inline text, not flex links). */

.subnav.service-crumb {
	display: block;
	text-align: center;
	padding: 20px;
}

.subnav.service-crumb a {
	color: #fff;
	text-decoration: none;
	padding: 0;
}

.subnav.service-crumb a:hover {
	text-decoration: underline;
}

/* --- Google rating, sits above the service title ---------------- */

.service-hero__reviews {
	margin: 13px 0 0;
	font-size: 15px;
	line-height: 1;
}

.service-hero__reviews a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #2a2a2a;
	text-decoration: none;
}

.service-hero__reviews a:hover .service-hero__reviews-count {
	text-decoration: underline;
}

.service-hero__stars {
	color: #e8a33d;
	font-size: 17px;
	letter-spacing: 1px;
}

.service-hero__rating {
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-weight: 700;
	font-size: 17px;
}

.service-hero__title {
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
	margin: 0;
}

.service-hero__sub {
	font-size: 17px;
	line-height: 1.6;
	color: #2a2a2a;
	max-width: 600px;
	margin: 10px auto 0;
}

.service-hero__cta {
	margin: 18px 0 0;
}

/* Vertical rhythm inside the hero. These need the extra .service-hero
   qualifier: WordPress global styles (:root :where(...)) tie on specificity
   with a single class and are printed after the theme stylesheet, so a bare
   .service-hero__title { margin: 0 } loses and the H1 keeps a ~48px
   block-end margin. */

.service-hero .service-hero__title {
	margin: 0 0 10px;
}

.service-hero .service-hero__sub {
	margin: 0 auto;
}

.service-hero .service-hero__cta {
	margin: 18px 0 0;
}

.service-hero .service-hero__reviews {
	margin: 13px 0 0;
}

/* --- shared button -------------------------------------------- */

.service-btn,
.service-hero__cta .wp-block-button__link,
.service-cta .wp-block-button__link {
	display: inline-block;
	background: #29499b;
	color: #fff;
	text-decoration: none;
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 28px;
	border-radius: 5px;
	transition: background 0.2s ease-in;
}

.service-btn:hover,
.service-hero__cta .wp-block-button__link:hover,
.service-cta .wp-block-button__link:hover {
	background: #1d3576;
	color: #fff;
}

/* wp:buttons is a flex row; centre it and reproduce the old <p> spacing so the
   converted CTAs sit exactly where the hand-written HTML did. */

.service-hero__cta.wp-block-buttons,
.service-cta .wp-block-buttons {
	justify-content: center;
}

.service-cta .wp-block-buttons {
	margin: 18px 0 0;
}

/* The question is a wp:paragraph now, so it picks up block paragraph spacing.
   Restore the hand-written 14px, matching the .service-hero overrides above. */

.service-cta .service-cta__q {
	margin: 0 0 14px;
}

/* --- explanation column --------------------------------------- */

.service-copy {
	box-sizing: border-box;
	max-width: 820px;
	margin: 0 auto;
	padding: 64px 30px 0;
}

.service-copy h2 {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 14px;
}

.service-copy p {
	font-size: 17px;
	line-height: 1.7;
	color: #2a2a2a;
	margin: 0 0 20px;
}

.service-copy ol,
.service-copy ul {
	font-size: 17px;
	line-height: 1.7;
	color: #2a2a2a;
	margin: 0 0 20px;
	padding-left: 22px;
}

.service-copy li {
	margin-bottom: 10px;
}

/* --- video ----------------------------------------------------- */

.service-video {
	box-sizing: border-box;
	max-width: 820px;
	margin: 64px auto 0;
	padding: 0 30px;
}

/* Native wp:embed inside .service-video. We deliberately omit WordPress's
   wp-has-aspect-ratio classes so the rule below still governs the geometry
   exactly as it did for the hand-written iframe. */

.service-video .wp-block-embed {
	margin: 0;
}

.service-video .wp-block-embed__wrapper {
	line-height: 0;
}

.service-video iframe,
.service-video .bfd-yt {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 20px;
}

/* vertical (Shorts) uploads must not be letterboxed into 16:9 */
.service-video--portrait iframe,
.service-video--portrait .bfd-yt {
	aspect-ratio: 9 / 16;
	max-width: 360px;
	margin: 0 auto;
}

/* Two or more videos in one row, separated by a vertical rule. Both are
   pinned to a common height and their widths fall out of their own aspect
   ratios, so a portrait Short and a 16:9 upload line up cleanly. The row is
   allowed to run wider than the 760px text column so the portrait does not
   end up tiny. */

.service-videos {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
	max-width: 980px;
	margin: 64px auto 0;
	padding: 0 30px;
}

/* Each video is a shrinkable flex item carrying its own aspect ratio, with a
   starting width that puts both at a common height of 368px (368 x 16/9 =
   654, 368 x 9/16 = 207). A portrait clip beside a 16:9 upload therefore
   lines up exactly as before. When two 16:9 videos are paired the row would
   be wider than the column, so the items shrink together and the aspect
   ratios bring their heights down with them, still matched. */

.service-videos .service-video {
	margin: 0;
	padding: 0;
	max-width: 100%;
	min-width: 0;
	flex: 0 1 654px;
	aspect-ratio: 16 / 9;
}

.service-videos .service-video--portrait {
	flex: 0 1 207px;
	aspect-ratio: 9 / 16;
}

/* A native embed nests the video two levels down (figure > wrapper), and both
   need a height for the video to fill the item. */
.service-videos .service-video .wp-block-embed,
.service-videos .service-video .wp-block-embed__wrapper {
	height: 100%;
}

.service-videos .service-video iframe,
.service-videos .service-video .bfd-yt {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
}

.service-videos__rule {
	flex: none;
	align-self: stretch;
	width: 2px;
	background: #161616;
}

@media (max-width: 860px) {
	/* stack, and turn the divider on its side */
	.service-videos {
		flex-direction: column;
		gap: 40px;
	}

	/* Stacked, each video is full width and as tall as its own shape needs,
	   so the side-by-side flex basis and aspect ratio are handed back. */
	.service-videos .service-video,
	.service-videos .service-video--portrait {
		width: 100%;
		flex: none;
		aspect-ratio: auto;
	}

	.service-videos .service-video .wp-block-embed,
	.service-videos .service-video .wp-block-embed__wrapper {
		height: auto;
	}

	.service-videos .service-video iframe,
	.service-videos .service-video .bfd-yt {
		height: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.service-videos .service-video--portrait iframe,
	.service-videos .service-video--portrait .bfd-yt {
		aspect-ratio: 9 / 16;
		max-width: 300px;
		margin: 0 auto;
	}

	.service-videos__rule {
		align-self: stretch;
		width: auto;
		height: 2px;
	}
}

/* live.css loads last and zeroes block margins inside .wrap / .layout
   (".wrap > :where(.wp-block-group)"). These carry enough specificity to
   restore the breathing room around the video row on the service pages. */

.wrap > .wp-block-group.service-video,
.layout > .wp-block-group.service-video,
.wrap > .wp-block-group.service-videos,
.layout > .wp-block-group.service-videos {
	margin-block-start: 64px;
}

.wrap > .wp-block-group.service-videos__summaries,
.layout > .wp-block-group.service-videos__summaries {
	margin-block-start: 48px;
}

.wrap > .wp-block-group.service-videos + .wp-block-group.service-videos,
.layout > .wp-block-group.service-videos + .wp-block-group.service-videos {
	margin-block-start: 72px;
}

/* ----------------------------------------------------------------
   Services page built from native blocks (editable without code)
   ----------------------------------------------------------------
   The Services page used to be Custom HTML so that the exact live
   markup survived. It is now core blocks so the client can edit it
   in WordPress. These rules key off STRUCTURE rather than the live
   site's class names, so a row still looks right when an author adds
   a plain Heading + link and never touches the Advanced > CSS class
   field. The class-based rules in live.css still apply to the
   existing rows; these simply make the classes optional.
   ---------------------------------------------------------------- */

/* Subnav: children are now paragraph blocks wrapping the link, rather
   than bare anchors, so drop the paragraph margin and let the anchor
   carry the height (vertical padding does nothing on an inline box). */
.subnav p {
	margin: 0;
}

.subnav p > a {
	display: block;
}

/* Service list rows: any h2 directly inside the accordion group. */
.service-accordion > h2 {
	border-top: 2px solid #000;
	margin: 0;
	padding: 10px;
}

.service-accordion > h2 > a {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	padding: 20px 30px;
	background: #fff;
	border: none;
	color: #29499B;
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.service-accordion > h2 > a::after {
	content: "";
	position: absolute;
	right: 0;
	top: 37px;
	width: 25px;
	height: 2px;
	border-top: 5px solid;
}

.service-accordion > h2 > a::before {
	content: "";
	position: absolute;
	right: 10px;
	top: 27px;
	width: 1px;
	height: 25px;
	border-right: 5px solid;
}

/* core/image adds .wp-block-image, whose core margin would otherwise
   beat live.css's bare `figure { margin: 0 }` on specificity. Core also
   sets the image to vertical-align: bottom, which removes the baseline
   descender gap under the picture. The live site leaves its img inline
   and therefore has that gap, so put it back rather than silently
   tightening the row by ~9px. */
.layout figure.wp-block-image {
	margin: 0;
}

.layout figure.wp-block-image img {
	vertical-align: baseline;
}

/* ----------------------------------------------------------------
   Team photos: crop any upload to a circle, automatically
   ----------------------------------------------------------------
   live.css sizes team photos with `width: 100%; height: auto`, so the
   rendered height follows whatever shape was uploaded. A photo that is
   not exactly square therefore renders as an oval and makes its card a
   different height from the rest of the row, which nudges the whole
   grid out of line. That forced whoever adds a team member to resize
   the picture by hand before uploading.

   Pinning the box to 1:1 and letting the browser crop with object-fit
   removes that step: any photo, any dimensions, comes out the same
   size as everyone else's. Cropping from the top rather than the
   centre keeps faces in frame on tall portrait shots.

   Existing photos are all within a few percent of square already, so
   this changes them only by making the circles perfectly round. */

#team .bfd-team img,
.modal__photo img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
}

/* --- FAQ accordion --------------------------------------------- */

.service-faq {
	box-sizing: border-box;
	max-width: 820px;
	margin: 0 auto;
	padding: 56px 30px 0;
}

.service-faq__title {
	font-size: 34px;
	font-weight: 600;
	text-align: center;
	margin: 0 0 24px;
}

.service-faq .js-accordion__header,
.service-faq .minimalist__title {
	margin: 0;
}

.service-faq .minimalist__title button,
.service-faq .js-accordion__header button {
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	color: #29499b;
	line-height: 1.3;
}

.service-faq .ac__text p:last-child {
	margin-bottom: 0;
}

/* --- FAQ on the native Details block ---------------------------
   Dr. Kokabi edits these directly, so they are wp:details rather than the
   van11y accordion (which needs hand-written markup). The visuals below
   restate live.css's .minimalist-accordion rules: those key the +/- off
   [aria-expanded], which <details> does not have, so we key off [open].
   Values are copied from the live accordion's computed styles, not guessed. */

.service-faq__list {
	border-bottom: 2px solid #000;
}

.service-faq .wp-block-details {
	border-top: 2px solid #000;
	margin: 0;
	padding: 10px;
}

.service-faq .wp-block-details > summary {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	padding: 20px 30px;
	background: #fff;
	border: none;
	color: #29499b;
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	list-style: none;
}

.service-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* horizontal bar — present open and closed */

.service-faq .wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 37px;
	width: 25px;
	height: 2px;
	border-top: 5px solid;
}

/* vertical bar — closed only, making the "+" */

.service-faq .wp-block-details:not([open]) > summary::before {
	content: "";
	position: absolute;
	right: 10px;
	top: 27px;
	width: 1px;
	height: 25px;
	border-right: 5px solid;
}

.service-faq .wp-block-details > p {
	max-width: 700px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 781px) {
	.service-faq .wp-block-details > summary {
		font-size: 27px;
		line-height: 1.2;
	}
}

/* --- video summaries (expandable) -------------------------------
   Native wp:details blocks so the copy stays editable in the editor. They
   sit below the video row rather than inside it: .service-videos pins each
   video to its own aspect ratio, so a portrait clip's column is only ~207px
   wide and would squeeze the text. Visuals follow live.css's minimalist
   accordion (navy Clearface header, +/- glyph on the right, rules between)
   at a smaller size, since these sit under a video rather than heading
   their own section. */

.service-videos__summaries {
	box-sizing: border-box;
	max-width: 820px;
	margin: 48px auto 0;
	padding: 0 30px;
}

.service-video__summary {
	border-top: 2px solid #161616;
}

.service-video__summary:last-child {
	border-bottom: 2px solid #161616;
}

.service-video__summary > summary {
	box-sizing: border-box;
	display: block;
	position: relative;
	padding: 14px 34px 14px 0;
	color: #29499b;
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.service-video__summary > summary::-webkit-details-marker {
	display: none;
}

/* horizontal bar — present open and closed */

.service-video__summary > summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 16px;
	height: 3px;
	background: currentColor;
	transform: translateY(-50%);
}

/* vertical bar — closed only, making the "+" */

.service-video__summary:not([open]) > summary::before {
	content: "";
	position: absolute;
	right: 6.5px;
	top: 50%;
	width: 3px;
	height: 16px;
	background: currentColor;
	transform: translateY(-50%);
}

.service-video__summary > p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.65;
}

@media (max-width: 781px) {
	.service-video__summary > summary {
		font-size: 18px;
	}
}

/* --- closing call CTA ------------------------------------------ */

.service-cta {
	box-sizing: border-box;
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
	padding: 44px 30px 72px;
}

.service-cta__q {
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
}

/* --- hub page: service rows -------------------------------------
   Visually 1:1 with the live site's van11y accordion. The structural
   classes (.minimalist-accordion / __title / __header) come straight
   from live.css; these rules only restore what a <button> got from the
   global `button` rule in live.css:51 and draw the same "+" glyph that
   .minimalist-accordion__header[aria-expanded="false"] draws there.
   ---------------------------------------------------------------- */

.service-accordion__link {
	box-sizing: border-box;
	font-weight: 400;
	line-height: 1;
	padding: 20px 30px;
	text-decoration: none;
	cursor: pointer;
}

.service-accordion__link::after {
	content: "";
	position: absolute;
	right: 0;
	top: 37px;
	width: 25px;
	height: 2px;
	border-top: 5px solid;
}

.service-accordion__link::before {
	content: "";
	position: absolute;
	right: 10px;
	top: 27px;
	width: 1px;
	height: 25px;
	border-right: 5px solid;
}

@media (max-width: 767px) {
	.subnav.service-crumb {
		display: block;
		font-size: 16px;
		padding: 14px 20px;
		line-height: 1.4;
	}
}

@media (max-width: 700px) {
	.service-faq .minimalist__title button,
	.service-faq .js-accordion__header button {
		font-size: 19px;
	}

	.service-copy h2,
	.service-faq__title {
		font-size: 27px;
	}
}

/* Homepage: video box in the "Why Are We Called BFD" section. Sits in a
   half-width .layout__child, so .service-video (max-width 820, own margins
   and padding) is not reusable here. .rounded iframe in live.css already
   supplies the 20px corner radius. */

.home-video iframe,
.home-video .bfd-yt {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Plain-styled inline links.

   Contextual internal links added for SEO. On the new service pages they are
   ordinary links, but the Home, Location & Hours and Community pages replicate
   https://brookhavenfamilydentistry.com, where those paragraphs are plain text.
   So links there inherit the body color and drop the underline, keeping the
   pages pixel-identical to the live site (FIDELITY.md).

   .link--plain is the hook. The body-class rules repeat it as a fallback in
   case the block editor drops the class when an author re-saves one of these
   paragraphs. */

.link--plain,
body.home .layout__child > p > a,
body.page-id-13 .layout__child > p > a,
body.page-id-17 .layout__child > p > a {
	color: inherit;
	text-decoration: none;
}

/* ============================================================
   Contact page  (/contact/)
   Structure follows the standalone mock; every colour, font and
   control here comes from the existing site -- Clearface serif,
   navy #29499b, cream #f4e8de, and .util__button from live.css.
   The mock's Playfair Display and its own palette are not used.
   ============================================================ */

/* --- hero ------------------------------------------------------ */

.contact-hero {
	background: #f4e8de;
	border-bottom: 1px solid #e4dbd2;
	padding: 64px 0;
}

.contact-hero__inner {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 64px;
	align-items: center;
}

.contact-eyebrow {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #29499b;
	font-weight: 700;
	margin: 0 0 12px;
}

.contact-hero h1 {
	font-size: clamp(31px, 4.4vw, 54px);
	line-height: 1.05;
	margin: 0 0 18px;
}

.contact-lead {
	font-size: 18px;
	line-height: 1.65;
	margin: 0;
	max-width: 40em;
}

.contact-callcard {
	background: #29499b;
	color: #fff;
	border-radius: 16px;
	padding: 30px 32px;
}

.contact-callcard__kicker {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
	margin: 0 0 10px;
}

.contact-callcard__number {
	display: block;
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 38px;
	line-height: 1.1;
	color: #fff;
	text-decoration: none;
	margin-bottom: 14px;
}

.contact-callcard__number:hover { text-decoration: underline; }
.contact-callcard p { font-size: 15px; line-height: 1.6; margin: 0; opacity: 0.92; }

/* --- body grid ------------------------------------------------- */

.contact-body {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 64px;
	align-items: start;
	padding-top: 64px;
	padding-bottom: 64px;
}

.contact-body h2 {
	font-size: 32px;
	line-height: 1.15;
	margin: 0 0 20px;
}

.contact-card {
	background: #fff;
	border: 1px solid #e0d8cf;
	border-radius: 16px;
	padding: 36px 38px;
	box-shadow: 0 10px 30px rgba(22, 22, 22, 0.05);
}

/* --- form ------------------------------------------------------ */

.contact-form { display: flex; flex-direction: column; gap: 22px; }

/* Fuel the Frontline nomination form. Reuses .contact-field / .contact-row /
   .contact-error styling above; only the wrapper and the "or call" line are
   its own. Kept off .contact-form because that class carries the appointment
   form's browser validation. */
.nomination-form { display: flex; flex-direction: column; gap: 18px; }

.nomination-form__call {
  font-size: 16px;
  margin: 14px 0 0;
}

.contact-note {
	background: #f4e8de;
	border: 1px solid #29499b;
	border-radius: 12px;
	padding: 16px 18px;
}

.contact-note p { font-size: 17px; line-height: 1.6; margin: 0; }
.contact-note__title {
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 21px;
	line-height: 1.2;
	margin-bottom: 8px !important;
}

.contact-field { border: 0; padding: 0; margin: 0; min-width: 0; }

.contact-field > label,
.contact-field > legend {
	display: block;
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: #29499b;
	margin: 0 0 8px;
	padding: 0;
}

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 17px;
	padding: 12px 14px;
	border: 1px solid #d3d7e0;
	border-radius: 8px;
	background: #fff;
	color: #161616;
}

.contact-field input:focus,
.contact-field textarea:focus { outline: 2px solid #29499b; outline-offset: 1px; }
.contact-field textarea { resize: vertical; }

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.contact-options { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.contact-options--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }

.contact-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
}

/* live.css:523-556 carries the old site's floating-label form styling:
   `form label span` is absolutely positioned and `form label input` is forced
   to display:block / width:220px. Both land on our checkbox and radio rows, so
   undo them here. live.css loads after style.css, so these need the extra
   class to win. */

.contact-check input[type="checkbox"],
.contact-check input[type="radio"] {
	display: inline-block;
	width: auto;
	min-width: 0;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	flex: none;
	accent-color: #29499b;
}

.contact-check span {
	position: static;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	top: auto;
	left: auto;
	pointer-events: auto;
	font-size: inherit;
	line-height: 1.4;
}

/* honeypot: present for bots, never shown to people */
.contact-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-submit { align-self: flex-start; cursor: pointer; }

.contact-consent { font-size: 13px; color: #5c6270; line-height: 1.5; }

.contact-legal { font-size: 13px; color: #5c6270; margin: 0; }
.contact-legal a { color: #29499b; }

/* --- details column -------------------------------------------- */

.contact-details { display: flex; flex-direction: column; gap: 26px; }

.contact-info {
	background: #f4e8de;
	border-radius: 16px;
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.contact-info__block h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: #6a6155;
	margin: 0 0 6px;
}

.contact-info__phone {
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 26px;
	color: #29499b;
	text-decoration: none;
}

.contact-info__phone:hover { text-decoration: underline; }
.contact-info address { font-style: normal; font-size: 16px; line-height: 1.6; }

.contact-hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 20px;
	margin: 0;
	font-size: 16px;
}

.contact-hours dt { color: #6a6155; }
.contact-hours dd { margin: 0; }

.contact-map { border-radius: 16px; overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 240px; border: 0; }

/* --- navy CTA band --------------------------------------------- */

.contact-cta { background: #29499b; color: #fff; padding: 44px 0; }

.contact-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.contact-cta h2 { font-size: 32px; margin: 0 0 6px; color: #fff; }
.contact-cta p { margin: 0; font-size: 16px; opacity: 0.92; }

.contact-cta__btn {
	flex: none;
	background: #fff;
	color: #29499b;
	border: 2px solid #fff;
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 28px;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.2s ease-in;
}

.contact-cta__btn:hover { background: #f4e8de; color: #29499b; }

/* --- FAQ -------------------------------------------------------- */

.contact-faqs { padding: 64px 0; }
.contact-faqs h2 { font-size: 32px; margin: 0 0 26px; }
.contact-faqlist { display: flex; flex-direction: column; gap: 12px; max-width: 840px; }

.contact-faq {
	border: 1px solid #e0d8cf;
	border-radius: 12px;
	padding: 18px 22px;
	background: #fff;
}

.contact-faq summary {
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 21px;
	color: #29499b;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 32px;
}

.contact-faq summary::-webkit-details-marker { display: none; }

.contact-faq summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	line-height: 1;
}

.contact-faq[open] summary::after { content: '\2013'; }
.contact-faq p { margin: 14px 0 0; font-size: 16px; line-height: 1.7; }

/* --- modal ------------------------------------------------------ */

.contact-modal { position: fixed; inset: 0; z-index: 100; }
.contact-modal[hidden] { display: none; }

.contact-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 22, 22, 0.5);
}

.contact-modal__dialog {
	position: relative;
	margin: 40px auto;
	max-width: 640px;
	max-height: calc(100vh - 80px);
	background: #fff;
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.contact-modal__head {
	background: #f4e8de;
	padding: 26px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex: none;
}

.contact-modal__head h2 { font-size: 28px; margin: 0 0 4px; }
.contact-modal__head p { margin: 0; font-size: 17px; }

.contact-modal__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	/* live.css:51 gives every <button> padding 20px 30px and a 12px right
	   margin, which stretches this into an ellipse. */
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 1px solid #d8cabb;
	background: #fff;
	color: #161616;
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.contact-modal__close:hover { background: #29499b; color: #fff; }
.contact-modal__body { padding: 28px 30px 34px; overflow-y: auto; }
body.contact-modal-open { overflow: hidden; }

/* The modal is printed in the footer template part so it is available on every
   page. The footer is navy with white text, so the modal has to state its own
   colours or the form labels inherit white-on-white. */

.contact-modal { color: #161616; }

/* Navy head and notice rather than cream: on the dark backdrop the cream read
   as washed out. */

.contact-modal__head {
	background: #29499b;
	color: #fff;
}

.contact-modal__head h2,
.contact-modal__head p { color: #fff; }
.contact-modal__head a { color: #fff; }

.contact-modal__close {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.contact-modal__close:hover { background: #fff; color: #29499b; }

.contact-modal .contact-note {
	background: #29499b;
	border-color: #29499b;
	color: #fff;
}

.contact-modal .contact-note a { color: #fff; }

/* --- responsive -------------------------------------------------- */

@media (max-width: 1000px) {
	.contact-hero__inner,
	.contact-body { grid-template-columns: 1fr; gap: 32px; }
	.contact-hero { padding: 40px 0; }
	.contact-body { padding-top: 32px; padding-bottom: 32px; }
}

@media (max-width: 767px) {
	.contact-hero h1 { font-size: 31px; }
	.contact-lead { font-size: 16px; }
	.contact-body h2,
	.contact-cta h2,
	.contact-faqs h2 { font-size: 24px; }
	.contact-card { padding: 20px 18px; }
	.contact-row,
	.contact-options--two { grid-template-columns: 1fr; gap: 18px; }
	.contact-callcard { padding: 22px; }
	.contact-callcard__number { font-size: 30px; }
	.contact-map iframe { height: 180px; }
	.contact-cta__inner { flex-direction: column; align-items: stretch; }
	.contact-cta__btn { width: 100%; }
	.contact-faq summary { font-size: 18px; }
	.contact-modal__dialog {
		margin: 0;
		max-width: none;
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
	.contact-modal__head { padding: 20px; }
	.contact-modal__body { padding: 22px 20px 32px; }
}

/* --- contact form states ---------------------------------------- */

.contact-banner {
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #fdeaea;
	border: 1px solid #d98b8b;
	color: #8a2b2b;
	font-size: 16px;
}

.contact-error {
	margin: 6px 0 0;
	font-size: 15px;
	color: #a33;
}

.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] { border-color: #a33; }

.contact-success {
	border: 1px solid #29499b;
	border-radius: 12px;
	padding: 26px 28px;
	outline: none;
}

.contact-success h3 {
	font-family: 'ITC Clearface W01 Bold', 'Clearface Bold', Georgia, serif;
	font-size: 24px;
	margin: 0 0 10px;
}

.contact-success p { font-size: 17px; line-height: 1.6; margin: 0 0 10px; }
.contact-success p:last-child { margin-bottom: 0; }

.contact-modal .contact-success { border-color: #29499b; }