/* ========================================================================================
 * custom.css — SITE PERSONALIZATION LAYER (loads last, after framework.css).
 *
 * Keep this thin: only site-specific brand additions and overrides. The design
 * tokens, .section system, and template/component CSS live in framework.css.
 * New sections should use the .section / .section--* utilities (defined in
 * framework.css) rather than baking spacing or colors into per-section names.
 * ======================================================================================== */

/* ============================================================
   Blog enhancements: post meta, Latest News slider, single post
   ============================================================ */

/* --- Post card meta (date) --- */
.post-item-meta{
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color);
	letter-spacing: 0.02em;
}
.post-item-meta .post-date i{
	color: var(--accent-color);
	margin-right: 6px;
}

/* --- Latest News slider (home) --- */
.our-blog .blog-slider{
	position: relative;
}
.our-blog .blog-slider .swiper{
	overflow: hidden;
	padding-bottom: 10px;
}
.our-blog .blog-slider .swiper-slide{
	height: auto;
}
.our-blog .blog-slider .swiper-slide .blog-item{
	height: 100%;
}
.blog-slider-nav{
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 36px;
}
.blog-slider-nav button{
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}
.blog-slider-nav button:hover{
	background: var(--button-color);
	border-color: var(--button-color);
	color: var(--button-text-color);
}
.blog-slider-nav button.swiper-button-disabled{
	opacity: 0.4;
	cursor: default;
}

/* --- Single blog post --- */
.blog-single-page{
	padding: 80px 0;
}
.blog-single-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-color);
}
.blog-single-meta i{
	color: var(--accent-color);
	margin-right: 6px;
}
.blog-single-meta a{
	color: var(--text-color);
}
.blog-single-meta a:hover{
	color: var(--accent-color);
}
.blog-single-image{
	margin-bottom: 36px;
	border-radius: 20px;
	overflow: hidden;
}
.blog-single-image img{
	width: 100%;
	height: auto;
	display: block;
}
.blog-single-body{
	color: var(--text-color);
	font-size: 17px;
	line-height: 1.75;
}
.blog-single-body h2{
	font-size: 32px;
	margin: 36px 0 16px;
	color: var(--primary-color);
}
.blog-single-body h3{
	font-size: 24px;
	margin: 30px 0 14px;
	color: var(--primary-color);
}
.blog-single-body p{
	margin-bottom: 20px;
}
.blog-single-body a{
	color: var(--accent-color);
	text-decoration: underline;
}
.blog-single-body ul,
.blog-single-body ol{
	margin: 0 0 20px 20px;
}
.blog-single-body li{
	margin-bottom: 8px;
}
.blog-single-body img{
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	margin: 10px 0 24px;
}
.blog-single-back{
	margin-top: 40px;
}
.blog-single-back a i{
	margin-right: 8px;
}
.blog-single-nav{
	margin-top: 50px;
	padding-top: 26px;
	border-top: 1px solid var(--divider-color);
}
.blog-single-nav a{
	display: inline-block;
	color: var(--primary-color);
	font-weight: 700;
}
.blog-single-nav a span{
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent-color);
	margin-bottom: 4px;
}
.blog-single-nav a:hover{
	color: var(--accent-color);
}

@media only screen and (max-width: 767px){
	.blog-single-page{ padding: var(--section-space-sm) 0; }
	.blog-single-body{ font-size: 16px; }
	.blog-single-body h2{ font-size: 26px; }
	.blog-single-body h3{ font-size: 21px; }}

/* ============================================================
   Blog typography weight + slider image guard + contact sidebar
   ============================================================ */

/* --- Heavier headings for blog content --- */
.blog-single-body h2,
.blog-single-body h3,
.blog-single-body h4{
	font-weight: 800;
	letter-spacing: -0.01em;
}
.blog-single-body h2{ line-height: 1.2; }
.blog-single-body h3{ line-height: 1.25; }
.blog-item .post-item-content .content-subtitle,
.our-blog .blog-item .content-subtitle{
	font-weight: 700;
}

/* --- Home slider: fixed SQUARE image container, image contained --- */
.our-blog .blog-slider .swiper-slide{
	display: flex;
	height: auto;
}
.our-blog .blog-slider .swiper-slide .blog-item{
	width: 100%;
	margin-bottom: 0;
	height: 100%;
	align-items: center;
}
/* Override the base rules that tie the image box to the full card height,
   which let it grow unbounded. The image box is a fixed square, inset from
   the card edges with matching padding and fully rounded corners. */
.our-blog .blog-slider .blog-item .post-featured-image,
.our-blog .blog-slider .blog-item .post-featured-image figure,
.our-blog .blog-slider .blog-item .post-featured-image a{
	height: auto;
}
.our-blog .blog-slider .blog-item .post-featured-image{
	padding: 20px;
}
.our-blog .blog-slider .blog-item .post-featured-image a,
.our-blog .blog-slider .blog-item .post-featured-image img{
	border-radius: 24px;
}
.our-blog .blog-slider .blog-item .post-featured-image img{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-height: none;
	object-fit: cover;
}
.our-blog .blog-slider .post-item-content p{
	font-size: 14px;
	line-height: 1.6;
}

/* --- Blog "Learn More" links: use the site's rotated arrow (not the +) --- */
.our-blog .post-readmore-btn a,
.page-blog .post-readmore-btn a,
.blog-slider .post-readmore-btn a{
	padding-right: 24px;
}
.our-blog .post-readmore-btn a::before,
.page-blog .post-readmore-btn a::before,
.blog-slider .post-readmore-btn a::before{
	content: "\f061"; /* Font Awesome: fa-arrow-right */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	color: currentColor;
	-webkit-font-smoothing: antialiased;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	/* Rotated -45deg so it points to the upper-right, matching .btn-default. */
	transform: translate(0, -50%) rotate(-45deg);
}
.our-blog .post-readmore-btn a:hover::before,
.page-blog .post-readmore-btn a:hover::before,
.blog-slider .post-readmore-btn a:hover::before{
	/* Straighten to point directly right on hover, like the buttons. */
	transform: translate(0, -50%) rotate(0deg);
	filter: none;
}

/* --- Reusable contact sidebar (blog single + service detail) --- */
.blog-sidebar,
.service-sidebar .contact-sidebar,
.contact-sidebar{
	position: sticky;
	top: 100px;
}
.contact-sidebar{
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	padding: 34px;
}
.contact-sidebar-logo{
	margin-bottom: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--divider-color);
}
.contact-sidebar-logo img{
	max-width: 120px;
	width: 100%;
	height: auto;
}
.contact-sidebar-info .content-subtitle{
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 22px;
	color: var(--primary-color);
}
.contact-sidebar-list{
	list-style: none;
	margin:0px;
	padding: 0;
}
.contact-sidebar-list li{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--divider-color);
}
.contact-sidebar-list li:last-child{
	border-bottom: 0;
}
.contact-sidebar-list li > i{
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--accent-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.contact-sidebar-label{
	display: block;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-color);
	margin-bottom: 2px;
	line-height: 1;
}
.contact-sidebar-list li a{
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-color);
	word-break: break-word;
	transition: color 0.3s ease-in-out;
}
.contact-sidebar-list li a:hover{
	color: var(--accent-color);
}
.contact-sidebar-form{
	border-top: 1px solid var(--divider-color);
	padding: 24px;
	background: white;
	border-radius: 24px;
}
.contact-sidebar-email a{
	font-size: 15px;
}

/* When the contact sidebar sits inside the service-detail .service-sidebar
   wrapper, let the inner box own the sticky + styling. */
.service-sidebar > .contact-sidebar{
	position: static;
}

@media only screen and (max-width: 991px){
	.blog-sidebar,
	.contact-sidebar{
		position: static;
		top: auto;
		margin-top: 40px;
	}}

/* ============================================================
   Blog filter bar: search + category selector
   ============================================================ */
.blog-filter-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 50px;
}
.blog-search-form{
	position: relative;
	flex: 1 1 320px;
	max-width: 520px;
}
.blog-search-form input[type="search"]{
	width: 100%;
	height: 56px;
	padding: 0 56px 0 24px;
	border: 1px solid var(--divider-color);
	border-radius: 9999px;
	background: var(--white-color);
	color: var(--primary-color);
	font-family: var(--default-font);
	font-size: 16px;
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.blog-search-form input[type="search"]:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.blog-search-form button{
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--button-color);
	color: var(--button-text-color);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease-in-out;
}
.blog-search-form button:hover{
	background: var(--button-hover-color);
}
.blog-category-filter{
	position: relative;
	flex: 0 0 auto;
}
.blog-category-filter select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 56px;
	min-width: 220px;
	padding: 0 46px 0 24px;
	border: 1px solid var(--divider-color);
	border-radius: 9999px;
	background: var(--white-color);
	color: var(--primary-color);
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.3s ease-in-out;
}
.blog-category-filter select:focus{
	outline: none;
	border-color: var(--accent-color);
}
.blog-category-caret{
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 13px;
	color: var(--accent-color);
}
@media only screen and (max-width: 575px){
	.blog-filter-bar{
		flex-direction: column;
		align-items: stretch;
	}
	.blog-search-form,
	.blog-category-filter,
	.blog-category-filter select{
		max-width: none;
		width: 100%;
	}}

/* ============================================================
   Stats row — review / offer highlights (used on /implants)
   ============================================================ */
.stats-row{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(11, 11, 56, .10);
	padding: 24px 8px;
	margin: 30px 0;
	max-width: 560px;
}
.stats-row .stat-item{
	flex: 1;
	min-width: 110px;
	text-align: center;
	padding: 6px 18px;
}
.stats-row .stat-item + .stat-item{
	border-left: 1px solid #ececf5;
}
.stats-row .stat-value{
	display: block;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-color);
	margin-bottom: 8px;
}
.stats-row .stat-label{
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6a6a80;
}
@media only screen and (max-width: 575px){
	.stats-row{ max-width: 100%; }
	.stats-row .stat-item{ flex: 0 0 100%; padding: 14px 18px; }
	.stats-row .stat-item + .stat-item{ border-left: 0; border-top: 1px solid #ececf5; }}


/* ============================================================
   Offer advantage cards — centered responsive flex grid (/implants)
   Wraps 3 -> 2 -> 1 and always stays centered (flex-wrap + justify-center,
   cards capped by min/max-width so a lone wrapped card centers, not stretches).
   ============================================================ */
.offer-cards{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin-top: 44px;
}
.offer-card{
	flex: 1 1 280px;
	min-width: 280px;
	max-width: 360px;
	background: #fff;
	border: 1px solid #efeff7;
	border-radius: 20px;
	padding: 38px 30px;
	text-align: center;
	box-shadow: 0 14px 34px rgba(11, 11, 56, .07);
	transition: transform .25s ease, box-shadow .25s ease;
}
.offer-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 24px 46px rgba(11, 11, 56, .12);
}
.offer-card__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: rgba(94, 94, 238, .10);
	color: var(--accent-color);
	font-size: 28px;
}
.offer-card__title{
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 12px;
	color: var(--primary-color);
}
.offer-card p{
	margin: 0;
	font-size: 16px;
}
@media only screen and (max-width: 575px){
	.offer-card{ min-width: 100%; max-width: 100%; padding: 30px 24px; }}


/* ============================================================
   CTA offer section — transparent-primary gradient overlay + white text
   (the "Hurry and do not miss out on our dental implant offer!" section)
   ============================================================ */
.cta-section{
	position: relative;
	isolation: isolate;
}
.cta-section::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(120deg,
		rgba(var(--primary-rgb), .92) 0%,
		rgba(var(--primary-rgb), .62) 100%);
}
.cta-section > .container{
	position: relative;
	z-index: 1;
}
.cta-section .section-title :is(.eyebrow-text, .content-header, h1, h2, h3, h4, h5, h6, p){
	color: var(--white-color);
}


/* ============================================================
   CTA offer form — white rounded container + little header (/implants)
   ============================================================ */
.cta-form-wrap{
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 36px 34px;
	box-shadow: 0 24px 50px rgba(11, 11, 56, .18);
}
.cta-form-title{
	font-family: var(--heading-font, inherit);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--primary-color);
	margin-bottom: 22px;
}
@media only screen and (max-width: 575px){
	.cta-form-wrap{ padding: 28px 22px; }}


/* full-height hero review box */
.cta-item{
	height: 100%;
}


/* Clickable mega-menu column titles (Services nav) */
.anchor-nav__mega-title--link{ text-decoration: none; color: inherit; display: block; }
.anchor-nav__mega-title--link:hover{ color: var(--accent-color); }


/* Service CTA: centered call-to-action column (vertically centered via row align-items-center) */
.cta-text-col{ text-align: center; }
.cta-text-col .stats-row{ margin-left: auto; margin-right: auto; }
.cta-call-btn{ margin: 24px 0 4px; }


/* Emergency page: checklists + tinted section */
.ac-section--tint{ background: var(--secondary-color); }
.ac-check-list{ list-style: none; margin: 0 0 24px; padding: 0; }
.ac-check-list li{ position: relative; padding-left: 32px; margin-bottom: 12px; line-height: 1.5; }
.ac-check-list li::before{ content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent-color); position: absolute; left: 0; top: 3px; font-size: 13px; }
.ac-check-list--center{ display: inline-block; text-align: left; }
.ac-check-list--grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; }
@media (max-width: 600px){ .ac-check-list--grid{ grid-template-columns: 1fr; }}


/* Constrain + center the hero intro paragraph */
.hero-content .section-title p { max-width: 600px; margin: auto; }


/* Emergency "What Are Dental Emergencies" — tight small-card question grid */
.ac-q-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ac-q-card{ background: var(--white-color); border: 1px solid var(--divider-color); border-radius: 14px; padding: 18px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--primary-color); box-shadow: 0 6px 18px rgba(11, 11, 56, .05); }
.ac-q-note{ margin-top: 20px; font-style: italic; color: var(--text-color); }
@media (max-width: 600px){
	.ac-q-grid{ gap: 10px; }
	.ac-q-card{ padding: 14px; font-size: 14px; }}


/* Dark ghost button variant — outlined/dark text, for light backgrounds
   (mirror of .btn-highlighted which is white-on-dark). */
.btn-default.btn-ghost-dark{
	background-color: transparent;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	padding: 18px 60px 18px 30px;
}
.btn-default.btn-ghost-dark:hover{
	background-color: var(--primary-color);
	color: var(--white-color);
}

/* GSAZ: Services mega menu — 4-column horizontal panel */
.anchor-nav__dropdown--mega .anchor-nav__dropdown-inner {
	width: min(940px, calc(100vw - 3rem));
	gap: 0 2rem;
	padding: 1.5rem 2rem;
}
.anchor-nav__dropdown--mega .anchor-nav__mega-col {
	flex: 1 1 0;
}
/* ============================================================
   About image — lock the box to the mask's aspect ratio.

   .about-img figure applies mask-image: about-image-bg-shape.svg with
   mask-size: cover. That SVG is 602x668 (aspect 0.9012). The home body used
   to hardcode style="width:608px;height:622px" (aspect 0.9775), so `cover`
   scaled the mask to 608x674.7 and clipped 26.3px off the top AND bottom --
   slicing through the shape's bottom-right notch, the cut-out that makes room
   for the .company-experience badge.

   Matching the box aspect to the mask means `cover` scales with zero overflow
   at any width, so the notch always registers. width:100% also removes the old
   fixed 608px, which overflowed horizontally on phones.

   object-fit: cover keeps the photo undistorted (framework.css sets the img to
   width/height 100% with no object-fit; the current office.jpg is a 348x348
   square and was being stretched).
   ============================================================ */
.about-img{
	aspect-ratio: 602 / 668;
	width: 100%;
}
.about-img img{
	object-fit: cover;
}

/* ============================================================
   How It Work accordion — step-number marker position.

   The home's how-it-work accordion migrated from the bespoke
   .faq-accordion.how-work-accordion ruleset to the shared
   .accordion-list--plain primitive. 13 of its 19 rules were
   declaration-identical; the primitive omits these two, which
   position the numbered step marker (1. 2. 3.) against the
   button's baseline. Restore them so the migration is visually
   a no-op. Drop this block if exact reference-theme parity is
   ever preferred over preserving the current appearance.
   ============================================================ */
.how-it-work .accordion-list--plain .accordion-header .accordion-button span{
	top: -3px;
	transform: translateY(50%);
}


/* 2026-07-13: Front-page quick-links band — seat the card on the dark hero
   (extend the hero image behind it + trim the gap below) so it stops hanging
   onto white, flatten the Google review box, tighten card padding. Matches the
   GSAZ band. Scoped via :has(.our-cta-box) = home-only (post 7); desktop only
   so the stacked mobile band keeps framework's spacing. */
@media (min-width: 992px){
	.hero.bg-image:has(.our-cta-box) .hero-section{ padding-bottom: 235px; }
	.hero:has(.our-cta-box){ padding-bottom: 30px; }
	.cta-content-box{ padding: 40px; }
}
.our-cta-box .review-trigger .anchor-reviews-widget{ border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* 2026-07-13: band alignment + dividers to match GSAZ — vertically center the
   Google review column, and move dividers to BETWEEN cards (after Google, after
   Special Offers) with none trailing. Home-only, desktop-only. */
@media (min-width: 992px){
	.our-cta-box .review-trigger{ height: 100%; display: flex; align-items: center; }
	.our-cta-box .cta-item{ border-right: 0; }
	.our-cta-box .cta-content-box > .col-lg-4 + .col-lg-4{ border-left: 1px solid var(--divider-color); }
}

/* 2026-07-13: .company-experience badge ("13+ Years") had a hardcoded vestigial
   SADC photo (about-sadc-header…jpg) baked into framework.css:969. Drop the
   wrong image for a clean on-brand fill; the navy ::before overlay stays. Swap
   background-image for a real BR photo here if one is provided. */
.company-experience{ background-image: var(--bg-experience) !important; background-color: var(--primary-color); }


/* ==== PORTED FROM GSAZ (2026-07-15): Contact page "Connect With Our Office"
   card grid + detail/social/form styling. Token-driven; .ac-panel chrome
   already present in primitives.css. Matches the shared contact design. ==== */
/* =======================================================================
   CONTACT PAGE — "Connect With Our Office" two-column layout.
   Sits between the page-header hero and the Google map. Left = section
   heading + a 2×2 grid of detail cards (contact / find us / follow us /
   hours); right = the CTM form inside a card wrapper. Detail/form cards
   reuse the .ac-panel primitive for their chrome (border + shadow + radius).
   ======================================================================= */
.ac-contact-intro{ margin-bottom: 40px; }
.ac-contact-intro .content-header{ margin: 18px 0; }
.ac-contact-intro p{ max-width: 34em; }

/* 2×2 detail-card grid (collapses to one column on narrow viewports). */
.ac-detail-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.ac-detail-card{
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 28px;
}

/* Card header: icon + title on one line. */
.ac-detail-head{
	display: flex;
	align-items: center;
	gap: 12px;
}
.ac-detail-label{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-color);
	opacity: 0.55;
}
.ac-detail-icon{
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: rgba(var(--accent-rgb), 0.10);
	color: var(--accent-color);
	font-size: 15px;
}

/* Card body: value(s) sit below the header. */
.ac-detail-value{
	font-size: 14px;
	font-weight: 500;
	color: var(--primary-color);
	line-height: 1.55;
	word-break: break-word;
	transition: color 0.3s ease-in-out;
}
a.ac-detail-value:hover{ color: var(--accent-color); }

/* Hours: label left, time right; second row divided from the first. */
.ac-detail-row--split{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ac-detail-row--split + .ac-detail-row--split{
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--divider-color);
}
.ac-detail-day{ font-size: 16px; font-weight: 600; color: var(--text-color); }
.ac-detail-time{ font-size: 16px; font-weight: 700; color: var(--primary-color); white-space: nowrap; }

/* Follow-us icon buttons (looped from Site Config via [ac_social_icons]). */
.ac-social-row{ display: flex; flex-wrap: wrap; gap: 12px; }
.ac-social-btn{
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: rgba(var(--accent-rgb), 0.10);
	color: var(--accent-color);
	font-size: 16px;
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.ac-social-btn:hover{ background: var(--accent-color); color: var(--white-color); }

/* Follow-us strip below the card grid: a divider, then label + icons (no card). */
.ac-contact-social{
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--divider-color);
}
.ac-contact-social .ac-detail-label{ margin-bottom: 0; }

/* Right-column form card. */
.ac-contact-form-head{ margin-bottom: 28px; }
.ac-contact-form-head .content-header{ color: var(--accent-color); margin-bottom: 8px; }
.ac-contact-form-head p{ margin: 0; }

@media (max-width: 991px){
	/* Stack the form below the info column. */
	.ac-contact-form-card{ margin-top: 40px; }
}
@media (max-width: 575px){
	.ac-detail-grid{ grid-template-columns: 1fr; }
}


/* ============================================================
   CARD-GRID-FIX-20260717
   .offer-card grids that live in a Bootstrap `.row > .col-*`
   (New Patients, Patient Forms, Dental Insurance, Advanced
   Technology, Patient Reviews). The component was built for the
   .offer-cards FLEX container; dropped into a plain Bootstrap row
   the cards render at natural height with NO vertical gutter
   (--bs-gutter-y:0), so wrapped rows touch and card bottoms /
   buttons do not line up. Give these grids a consistent vertical
   gutter, equal-height cards, and bottom-aligned CTAs.
   Does NOT match the .offer-cards flex layout (e.g. block 27405465).
   ============================================================ */
.row:has(> [class*="col-"] > .offer-card){
	row-gap: 1.5rem;                 /* match the 24px horizontal gutter */
}
.row > [class*="col-"] > .offer-card{
	height: 100%;                    /* fill the equal-height Bootstrap column */
	display: flex;
	flex-direction: column;
}
.row > [class*="col-"] > .offer-card > .offer-card__icon{
	align-self: center;              /* keep the icon centered under flex-column */
}
.row > [class*="col-"] > .offer-card > .btn-default{
	margin-top: auto;                /* pin the CTA to the card bottom */
	align-self: center;              /* keep natural button width, centered */
}

/* CareCredit financing card (/new-patients) — extra breathing room below the copy */
.offer-card--carecredit{
	padding-bottom: 60px;
}