/*
Theme Name: fgMatchBox Child — Glendale Dental Associates
Template: fgmatchbox
Author: Firegang Dental Marketing
Description: Glendale Dental Associates brand layer (Tier-1, runtime token overrides). No build.
Version: 0.2
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand colors (Figma style guide) */
    --primaryColor: #6E4E32;
    --primaryHover: #6E4E32;
    --secondaryColor: #6E4E32;
    --secondaryHover: #5A3F28;
    --black: #303030;
    --footerBg: #303030;
    --brown: #6E4E32;
    --blue: #8496A4;
    --tan: #FFF6EB;
    --offWhite: #FFFEF9;

    /* Fonts — Lato headings, Inter body (Google) */
    --headingFont: 'Lato', sans-serif;
    --bodyFont: 'Inter', sans-serif;
    --headingFontWeight: 400;

    /* Type scale — cap = Figma desktop px; mid = cap/1920*100 */
    --dispFontSize: clamp(40px, 5.208vw, 100px);
    --h2FontSize:   clamp(30px, 2.292vw, 44px);
    --h3FontSize:   clamp(22px, 1.458vw, 28px);
    --h4FontSize:   clamp(20px, 1.25vw, 24px);
    --bodyFontSize: clamp(16px, 0.938vw, 18px);

    /* Line heights (Figma) */
    --dispLineHeight: 100%;
    --h2LineHeight: 115%;
    --h3LineHeight: 125%;
    --h4LineHeight: 125%;
    --bodyLineHeight: 150%;

    /* Buttons (Figma CTA: Inter 600 / 2.4px tracking / pill / 6px lift) */
    --btnBorderRadius: 40px;
    --btnFontWeight: 600;
    --btnLetterSpc: 2.4px;

    --focusColor: #6E4E32;
}

/* Buttons use the body sans (Inter), not the heading font. */
.btn {
    font-family: var(--bodyFont);
}

/* ============================================================
   HEADER — Figma 2928:1917
   Transparent white-on-hero (home default); solid white on scroll / hover /
   interior. Book Now flips white↔brown with the state and lifts 6px on hover.
   ============================================================ */

/* Bar → 140px side gaps at 1920, fluid below. */
#header .header-holder {
    width: calc(100% - clamp(48px, 14.583vw, 280px));
    max-width: none;
    min-width: 0;
}

/* Vertical rhythm: 24 top / 24 between rows / 24 bottom. */
#header {
    padding: 24px 0;
    transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
#header .locNavBtns {
    gap: 24px;
}

/* Logo — 446×90 @1920, sized by height, both duo-logos stacked & cross-faded. */
#header .logo-block {
    flex: 0 0 auto;
    max-width: none;
}
#header .logo-block .sLogo {
    position: relative;
    width: auto;
    height: clamp(40px, 6vw - 25px, 90px);
    aspect-ratio: 446 / 90;
}
#header #logo img#mLogo,
#header #logo img#scLogo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
    transition: opacity .4s ease;
}

/* Contact row — address↔phone 48px, icon→text 16/14, Inter 16. */
#header .conBlock {
    gap: clamp(20px, 2.5vw, 48px);
    align-items: center;
    justify-content: flex-end;
    padding: 0;
}
#header .headAdd,
#header .phoneBlock {
    align-items: center;
    gap: 16px;
    padding: 0;
    line-height: 1.5;
}
#header .phoneBlock {
    gap: 14px;
}
#header .headAdd a,
#header .phoneBlock a {
    font-size: 16px;
    font-weight: 400;
    transition: color .4s ease;
}
#header .headAdd i,
#header .phoneBlock i {
    transition: color .4s ease;
}

/* Nav row — link gap 48, nav→button gap 48. */
#header .navBtns {
    gap: clamp(20px, 2.5vw, 48px);
    align-items: center;
    justify-content: flex-end;
}
#header .navBtns .btn-block {
    padding-right: 0;
}
#header #nav {
    gap: clamp(16px, 2.5vw, 48px);
}
#header #nav > li {
    padding: 0;
}
#header #mainNav a,
#header #nav a {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: clamp(1px, 0.125vw, 2.4px);
    text-transform: uppercase;
    transition: color .4s ease;
}
#header #nav > li > a {
    padding: 6px 0;
}
#header #nav > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--brown);
    transform: scaleX(0);
    transition: transform .25s ease;
}
#header #nav > li > a:hover::after {
    transform: scaleX(1);
}

/* Book Now — pill, Overline type, 16/32 padding, lifts 6px on hover. */
#header .opener-form {
    overflow: visible;
}
#header .booking-opener {
    border-radius: var(--btnBorderRadius);
    padding: 16px 32px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    transition: transform .3s ease, background-color .4s ease, color .4s ease;
}
#header .booking-opener:hover {
    transform: translateY(-6px);
}

/* State — over the hero (home default): white on transparent. */
body.home #header {
    background-color: transparent;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
body.home #header #mainNav a,
body.home #header .headAdd a,
body.home #header .phoneBlock a {
    color: #fff;
}
body.home #header .booking-opener {
    background-color: #fff;
    color: var(--black);
}

/* Contact icons — Blue #8496A4 (Figma nav) in every header state. */
body #header .headAdd i,
body #header .phoneBlock i {
    color: var(--blue);
}

/* Book Now keyboard focus — white on the transparent home header, dark on the solid
   states (home hover/scrolled + interior). Framework suppresses the outline. */
body.home #header .booking-opener:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: none;
}

/* Submenu drops below the nav item's hover underline (it was overlapping it); a
   transparent ::before bridges the gap so the hover stays connected. */
/* Dropdown drifted 10px right of its parent (framework left:10px) — align the card
   flush under the nav item so the fly-out lines up with it (Ali). */
#header #nav > li.menu-item-has-children > .sub-menu {
    top: calc(100% + 4px);
    left: 0;
}
#header #nav > li.menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}
/* Nested (3rd-level) fly-out goes to the right of its parent, not down onto the list. */
#header #nav .sub-menu li.menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
}

/* Dropdown caret on any nav item with a fly-out — pointing DOWN on the top row,
   RIGHT on nested submenu items. currentColor so it flips with the header state. */
#header #nav > li.menu-item-has-children::after {
    content: "";
    flex: 0 0 auto;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}
#header #nav .sub-menu li.menu-item-has-children {
    position: relative;
}
#header #nav .sub-menu li.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
}

/* ============================================================
   HERO — static_promo_banner (Figma 2849:11908)
   Video bg + centered white Lato heading rotating "Your Comfort"⇄"Your Health"
   (CSS keyframes, no JS). #promoBanner-scoped to out-specify the section's own
   CSS, which loads after this sheet.
   ============================================================ */

/* Hero box — Figma 940 @1920 (48.96vw). */
#promoBanner {
    height: min(48.96vw, 940px);
}

/* Darken the daytime video a bit more (parent ships 50%) so white copy reads. */
#promoBanner::before {
    background-color: rgba(41, 41, 41, 0.62);
}

/* Content centered; parent's top padding biases it ~58% down per Figma. */
#promoBanner .promo-holder .container {
    justify-items: center;
}
#promoBanner .slide_content.center {
    width: 100%;
    text-align: center;
}

/* Heading — plain white Lato Display, sentence case, centered. */
#promoBanner h2.banH {
    display: block;
    width: 100%;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
    -moz-text-stroke: 0;
    margin-bottom: 24px;
}

/* Subtext — Lato 28 (H3 Subheader), white, centered. */
#promoBanner .s_content p {
    font-family: var(--headingFont);
    font-size: clamp(18px, 1.458vw, 28px);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    letter-spacing: 0;
}

/* Rotating heading — 1em clip window; the two phrases stack and translate
   together so one slides up and out as the next slides in, then loops. */
#promoBanner .banH .heroRotate {
    display: inline-block;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    vertical-align: bottom;
}
#promoBanner .banH .heroRotate > span {
    display: block;
    height: 1em;
    line-height: 1;
    animation: heroTextRotate 6s ease-in-out infinite;
}
@keyframes heroTextRotate {
    0%, 42%  { transform: translateY(0); }
    50%, 92% { transform: translateY(-100%); }
    100%     { transform: translateY(0); }
}

/* No hero buttons on this design. */
#promoBanner .btn-block {
    display: none;
}

/* ============================================================
   DIFFERENTIATOR BAR — new_diff (Figma 7302:2642)
   White, pt-100 with NO bottom padding — the section below owns the gap.
   Heading over 3 wood-grain-textured cards with an 80px icon + brown-check items.
   ============================================================ */

/* Homepage new_diff section. The interior diff WIDGET (.widget.widget-diff) shares
   the SAME card styling — grouped selectors keep home + interior identical. ⚠️ Their
   markup differs: the section wraps each card in .diffBox > .spWrap, the widget's
   .diffBox IS the card (no .spWrap). Same 100px-top / 0-bottom spacing + white bg on
   both. */
.diff,
.widget.widget-diff {
    padding: 100px 0 0;
    background-color: var(--white);
}
/* Interior widget only: match the homepage diff container width (the framework
   renders `.container` wider in the af-widgets context) + a faint grey top line
   (mockup #edf0f2, content width) — the one intended difference from the section. */
.widget.widget-diff {
    position: relative;
}
.widget.widget-diff .container {
    width: min(85.417vw, 1640px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
.widget.widget-diff::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(85.417vw, 1640px);
    height: 4px;
    background-color: #edf0f2;
}
/* wrap_col=12 = full width, but the framework `wrap_col_offset` is a select with NO
   0/empty option (choices 1-6, default 1) so it renders an offset-lg-N that shoves
   the whole block right. The value can't express "no offset", so neutralize it here
   for both the section + the widget wrapper. */
.diff .container > [class*="offset-lg-"],
.widget.widget-diff .container > [class*="offset-lg-"] {
    margin-left: 0;
}
.diff .heading,
.widget.widget-diff .heading {
    text-align: center;
    margin-bottom: clamp(32px, 2.917vw, 56px);
}
.diff .heading h1,
.widget.widget-diff .heading h2 {
    margin: 0;
    font-family: var(--headingFont);
    font-size: var(--h3FontSize);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
}
.diff .row.flex,
.widget.widget-diff .row.flex {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
}
.diff .diffBox,
.widget.widget-diff .diffBox {
    flex: 1 1 0;
    max-width: none;
    padding: 0;
}
/* The card — homepage on .spWrap, widget on .diffBox itself (later declaration wins
   for the widget, giving it the 40/25 padding the section's .diffBox keeps at 0). */
.diff .diffBox .spWrap,
.widget.widget-diff .diffBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    height: 100%;
    padding: 40px 25px;
    border: 1px solid rgba(110, 78, 50, 0.1);
    border-radius: 10px;
    background-color: var(--offWhite);
    background-image: url(/wp-content/uploads/2026/08/diff_bar_card_bg.jpg);
    background-size: cover;
    background-position: center;
}
.diff .diffImg img,
.widget.widget-diff .diffImg img {
    width: 80px;
    height: 80px;
}
.diff .diffContent,
.widget.widget-diff .diffContent {
    padding: 0;
}
.diff .diffList,
.widget.widget-diff .diffList {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.diff .diffList li,
.widget.widget-diff .diffList li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: var(--bodyFont);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--black);
}
.diff .diffList li i,
.widget.widget-diff .diffList li i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--brown);
    font-size: 18px;
    line-height: 1.5;
}
/* Right spacer = the checkmark width, so the text (not check+text) centers under
   the icon even when it wraps. */
.diff .diffList li::after,
.widget.widget-diff .diffList li::after {
    content: "";
    flex: 0 0 20px;
}
.diff .diffList li a,
.widget.widget-diff .diffList li a {
    color: var(--black);
    text-decoration: none;
}
.diff .diffList li a:hover,
.widget.widget-diff .diffList li a:hover {
    text-decoration: underline;
}

/* ============================================================
   INTRO NEWS BLOCK — fw_content_half #intro (Figma 7219:1499)
   Photo right, copy left (Lato heading + brown divider + Inter body + ADA/DOCS
   logos). Tooth outline (17595) bleeds top-left; vertical line motif (17596) right.
   ============================================================ */
#intro.half-content {
    position: relative;
    overflow: visible;
    padding: clamp(64px, 7.292vw, 140px) 0;
    background-color: var(--white);
    background-image: url(/wp-content/uploads/2026/08/news_block_bg.svg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: min(63.958vw, 1228px) auto;
}
/* 140px side gutters (matches header + mockup) — drive the gutter, not a width. */
#intro .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
/* Line motif, gutter right of the photo (Figma x=1820), bottom-flush. auto 100%
   makes it fill the vw-scaled box so it scales like the photo (no top clipping). */
#intro::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: clamp(24px, 4.375vw, 84px);
    width: 16px;
    height: min(51.667vw, 992px);
    background: url(/wp-content/uploads/2026/08/news_block_graphic.svg) bottom center / auto 100% no-repeat;
    pointer-events: none;
    z-index: 2;
}
/* Photo — 812² square, 20px radius, soft shadow, right of its column. */
#intro .image.nImgRt {
    height: auto;
    justify-items: end;
}
#intro .image.nImgRt img {
    height: clamp(300px, 42.292vw, 812px);
    width: auto;
    border-radius: 20px;
    box-shadow: 0 50px 60px rgba(0, 0, 0, 0.05), 0 30px 40px rgba(0, 0, 0, 0.10);
    object-fit: cover;
    object-position: center;
}
/* Copy — 536 wide, inset 138 from the content edge (not the full bootstrap col). */
#intro .text > div {
    justify-self: start;
    width: clamp(300px, 27.917vw, 536px);
    max-width: 100%;
    margin-left: clamp(0px, 7.188vw, 138px);
}
/* Heading — Lato, with a 200×2 brown divider (framework h2::after re-flowed below). */
#intro .text h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 32px;
    font-family: var(--headingFont);
    font-size: var(--h2FontSize);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
}
#intro .text h2::after {
    content: "";
    display: block;
    width: 200px;
    height: 2px;
    margin: 32px 0 0;
    background-color: var(--brown);
}
/* Body — Inter 18. */
#intro .text p {
    margin: 0;
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.5;
    color: var(--black);
}
/* ADA + DOCS logos — flex row 56px below the body; height/gap scale with the vw
   so the row fits the narrowing copy column (~1220px). flex-wrap is a safety net. */
#intro .text .assoc-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 2.4vw, 46px);
    margin-top: 56px;
}
#intro .text .assoc-logos img {
    margin: 0;
    height: clamp(52px, 5.03vw, 80px);
    width: auto;
}

/* ============================================================
   FEATURED SERVICES — freeform #featServ (Figma 7230:1064)
   Full-width dark band: building photo (17585) + 74% black overlay, 4 right-
   aligned white Lato links with → arrows. cover/overlay added here (template
   sets only the raw background-image).
   ============================================================ */
#featServ.freeForm {
    position: relative;
    padding: clamp(100px, 8.229vw, 158px) 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Dark overlay so white copy reads. 0.74 = the mockup's measured darkening (158→41 lum). */
#featServ.freeForm::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.74);
    z-index: 0;
}
/* Content above the overlay; 140px gutters like the header/intro. */
#featServ .container {
    position: relative;
    z-index: 1;
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
#featServ .container > div {
    justify-content: flex-end;
}
/* Four service links stacked, right-aligned, each with a trailing → arrow. */
#featServ .featServList {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(24px, 2.5vw, 48px);
}
/* Display scale w/ a 28px floor (not global --dispFontSize, which the hero uses) so
   the longest link doesn't wrap on phones — 28 is the max that fits the 375 QA width. */
#featServ .featServList a {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.667vw, 32px);
    color: var(--white);
    font-family: var(--headingFont);
    font-size: clamp(28px, 5.208vw, 100px);
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}
#featServ .featServList a .arrow {
    transition: transform 0.25s ease;
}
#featServ .featServList a:hover .arrow {
    transform: translateX(12px);
}

/* ============================================================
   NEWS BLOCKS — #news1 (image left) + #news2 (image right), fw_content_half
   (Figma 7248:2098 / 2089). The intro recipe minus logos, mirrored per side.
   Vertical rhythm: 140 above news1, ~80 between, 100 below news2.
   ⚠️ Parent fw_content_half.min.css ships #news1/#news2 rules and loads AFTER
   the child, so section + mobile-image rules need a `body` prefix to win.
   ============================================================ */
/* news1 shadow overflows its 40px bottom padding → BOTH fixes: content-visibility
   visible (beats the inline `auto`'s paint containment) + z-index 1 (above news2 so
   its white bg doesn't cover the overhang). */
body #news1.half-content {
    position: relative;
    overflow: visible;
    background-color: var(--white);
    padding: clamp(64px, 7.292vw, 140px) 0 clamp(24px, 2.083vw, 40px);
    content-visibility: visible !important;
    z-index: 1;
}
body #news2.half-content {
    position: relative;
    overflow: visible;
    background-color: var(--white);
    padding: clamp(24px, 2.083vw, 40px) 0 clamp(80px, 5.208vw, 100px);
    z-index: 0;
}
/* 140px gutters, like the header/intro/freeform. */
#news1 .container,
#news2 .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
/* Photo — 812² square, 20px radius, soft shadow; left in news1, right in news2
   (grids so justify-items positions the picture). */
#news1 .image.nImgLt {
    display: grid;
    justify-items: start;
    height: auto;
}
#news2 .image.nImgRt {
    justify-items: end;
    height: auto;
}
#news1 .image img,
#news2 .image img {
    height: clamp(300px, 42.292vw, 812px);
    width: auto;
    margin: 0;
    border-radius: 20px;
    box-shadow: 0 50px 60px rgba(0, 0, 0, 0.05), 0 30px 40px rgba(0, 0, 0, 0.10);
    object-fit: cover;
    object-position: center;
}
/* Copy — 536 wide, inset 138 from the outer edge (news1 right, news2 left). */
#news1 .text > div {
    justify-self: end;
    width: clamp(300px, 27.917vw, 536px);
    max-width: 100%;
    margin-right: clamp(0px, 7.188vw, 138px);
}
#news2 .text > div {
    justify-self: start;
    width: clamp(300px, 27.917vw, 536px);
    max-width: 100%;
    margin-left: clamp(0px, 7.188vw, 138px);
}
/* Heading — Lato, with a 200×2 brown divider below it. */
#news1 .text h2,
#news2 .text h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 32px;
    font-family: var(--headingFont);
    font-size: var(--h2FontSize);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
}
#news1 .text h2::after,
#news2 .text h2::after {
    content: "";
    display: block;
    width: 200px;
    height: 2px;
    margin: 32px 0 0;
    background-color: var(--brown);
}
/* Body — Inter 18. */
#news1 .text p,
#news2 .text p {
    margin: 0;
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.5;
    color: var(--black);
}
/* Line motif in the gutter on each block's image side — left for news1, right for
   news2 — bottom-flush + scaling, same as #intro's line. */
#news1::after,
#news2::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 16px;
    height: min(51.667vw, 992px);
    background: url(/wp-content/uploads/2026/08/news_block_graphic.svg) bottom center / auto 100% no-repeat;
    pointer-events: none;
    z-index: 2;
}
/* Flip so brown sits at the bottom / blue at top (opposite news2) — James. */
#news1::after {
    left: clamp(24px, 4.375vw, 84px);
    transform: scaleY(-1);
}
#news2::after {
    right: clamp(24px, 4.375vw, 84px);
}

/* ============================================================
   REVIEWS — reviews section (.reviews, Figma 7250:2242)
   Full-width waiting-room photo (17598) under a 74% black overlay (mockup-sampled,
   same scrim as Featured Services), centered white Lato heading + Splide-looped
   white testimonial + author with the Google icon. Two big blue outlined quote
   marks (quote_graphic 17594) frame it — opening top-left, closing (flipped)
   bottom-right. ⚠️ reviews.min.css loads AFTER this sheet and the section has no
   id/class ACF hook, so shells are `body .reviews` to out-order it.
   ============================================================ */
/* Photo bg is set inline from ACF → cover it; 74% black scrim via an inset shadow
   (paints over the photo, below content) so both pseudos stay free for the quote
   marks. overflow + content-visibility overridden so the marks can overhang the
   top/bottom edges — defeats the inline CV:auto paint-containment (same trap as
   #news1's shadow); z-index:5 (base) keeps the overhang above the white neighbours.
   --black fallback behind the photo. */
body .reviews {
    color: var(--white);
    background-color: var(--black);
    background-size: cover;
    background-position: center;
    overflow: visible;
    content-visibility: visible !important;
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.74);
}
/* Blue quote marks at the 140 gutter — 249×197 @1920 scaling with the viewport;
   opening top-left, closing bottom-right (flipped). They OVERHANG the section's
   top/bottom edges (negative offsets), per the mockup. Above the scrim, below text. */
body .reviews::before,
body .reviews::after {
    content: "";
    position: absolute;
    width: clamp(120px, 12.969vw, 249px);
    aspect-ratio: 249 / 197;
    background: url(/wp-content/uploads/2026/08/quote_graphic.svg) center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}
body .reviews::before {
    top: calc(-1 * clamp(24px, 2.083vw, 40px));
    left: clamp(24px, 7.292vw, 140px);
}
body .reviews::after {
    right: clamp(24px, 7.292vw, 140px);
    bottom: calc(-1 * clamp(24px, 2.083vw, 40px));
    transform: rotate(180deg);
}
/* Heading + testimonial sit above the quote marks; kill the stray 32px bottom
   margin on .heading so the only title→quote gap is the h2's 32. */
body .reviews .heading,
body .reviews .container {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}
/* Heading — Lato 44 (site h2), white, centered; 32 above the quote. */
body .reviews .heading h2 {
    margin: 0 auto 32px;
    font-family: var(--headingFont);
    font-size: var(--h2FontSize);
    font-weight: var(--headingFontWeight);
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--white);
}
/* Quote — Inter 18/1.5, white, centered. */
body .reviews .rQuote p {
    margin: 0 0 24px;
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    font-weight: 400;
    line-height: 1.5;
    color: var(--white);
}
/* Author — Inter 600 uppercase white, with the multicolor Google icon beside it
   (48px asset scaled to 24). */
body .reviews .testimony p.tName {
    margin: 0;
    color: var(--white);
    letter-spacing: 2px;
}
body .reviews .testimony p.tName a {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    line-height: 0;
}
body .reviews .testimony p.tName img {
    width: 24px;
    height: 24px;
}

/* ============================================================
   LOCATION / MAP — .section-location (Figma 7251:2285 "Desktop/Map Block")
   Single-location, half-width map: copy left (Lato heading + brown-icon
   address/phone/hours + Contact Us pill), Google map right (812² @1920, matches
   the news photos' clamp). Faint pin outline (map_block_bg 17593) behind the copy;
   140/140 vertical padding; vertical line motif in the right gutter. Scoped to
   plain `.section-location` (NOT body.home) so the interior Full-Width-Map renders
   identically. location enqueues no CSS → styled entirely here.
   ============================================================ */
.section-location {
    position: relative;
    padding: clamp(64px, 7.292vw, 140px) 0;
    background: var(--white) url(/wp-content/uploads/2026/08/map_block_bg.svg) left top / min(35vw, 672px) auto no-repeat;
}
/* Interior Full-Width-Map widget = same 140/140 as the homepage section (the
   .widget context otherwise forces an asymmetric 120/150 that a .widget-scoped
   selector is needed to beat). */
.widget.section-location {
    padding: clamp(64px, 7.292vw, 140px) 0;
}
/* 140px gutters; copy vertically centered against the taller map. */
.section-location .map-block {
    display: flex;
    align-items: center;
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    margin: 0 auto;
}
.section-location .map-block > .address,
.section-location .map-block > .mapWrp {
    display: block;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0;
}
/* Copy — 536 wide, inset 138 from the gutter (news-block recipe). ⚠️ The framework
   ships a 140px L/R padding on .address-holder that only !important beats; it was
   shrinking the content box 536→256 and wrapping the heading/address/hours. */
.section-location .address-holder {
    width: clamp(300px, 27.917vw, 536px);
    max-width: 100%;
    margin-left: clamp(0px, 7.188vw, 138px);
    padding: 0 !important;
}
/* Heading — Lato 44 (site h2), black, 32 below (renders as p.h4). */
.section-location .address-holder .h4 {
    margin: 0 0 32px;
    font-family: var(--headingFont);
    font-size: var(--h2FontSize);
    font-weight: var(--headingFontWeight);
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
}
/* Contact rows — brown icon + Inter 18 text, 24 between rows. */
.section-location address {
    margin: 0;
    font-style: normal;
}
.section-location .row-place {
    margin: 0 0 24px;
}
.section-location .row-tel {
    margin: 0 0 24px;
}
.section-location address .row,
.section-location .row-tel,
.section-location .shedule .row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.section-location .pin {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    font-size: 18px;
    line-height: var(--bodyLineHeight);
}
/* Icon color — Blue #8496A4 (mockup). Target the <i> directly; the framework
   colors the FontAwesome glyph itself, so a color on the .pin parent won't reach it. */
.section-location .pin i {
    color: var(--blue);
}
.section-location .inf {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--bodyFont);
    color: var(--black);
}
/* Address + phone at the body font size + line height — incl. the inner text
   <span>s (the framework pins the address span to 16px). */
.section-location .inf,
.section-location .place a,
.section-location .place a span,
.section-location .tel a,
.section-location .tel a span {
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
}
/* Hours — same body size/line-height. ⚠️ The framework ships
   `.section-location .address .shedule dl` (0,3,1) hard-set to 16px/24px, so beat it
   with a (0,4,1) chain on the dl + dt + dd (home + interior share this markup). */
.section-location .address .address-holder .shedule dl,
.section-location .address .address-holder .shedule dt,
.section-location .address .address-holder .shedule dd {
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
}
.section-location .place a,
.section-location .tel a {
    color: var(--black);
    text-decoration: none;
}
.section-location .place a:hover,
.section-location .tel a:hover {
    text-decoration: underline;
}
/* Hours — day | time two-column dl, 8px gap; 56 below (before the button). */
.section-location .shedule {
    margin: 0 0 56px;
}
.section-location .shedule dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 8px;
    row-gap: 0;
    margin: 0;
    font-family: var(--bodyFont);
    color: var(--black);
}
.section-location .shedule dt {
    font-weight: 400;
}
.section-location .shedule dd {
    margin: 0;
}
/* Contact Us — brown pill, white Overline type, lifts 6px on hover. The homepage
   section renders `.btn-primary`; the interior Full-Width-Map widget renders
   `.btn-orange` — style both so they match. */
.section-location .btn.btn-primary,
.section-location .btn.btn-orange {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    border-radius: var(--btnBorderRadius);
    background-color: var(--brown) !important;
    color: var(--white);
    font-family: var(--bodyFont);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .3s ease, background-color .4s ease;
}
.section-location .btn.btn-primary:hover,
.section-location .btn.btn-orange:hover {
    transform: translateY(-6px);
}
/* Keyboard focus — dark ring, visible on the light map section (framework suppresses it). */
.section-location .btn.btn-primary:focus-visible,
.section-location .btn.btn-orange:focus-visible {
    outline: 3px solid var(--black);
    outline-offset: 3px;
    box-shadow: none;
}
/* Map — a true 812×812 square (mockup), right-aligned to the gutter. Cap the width
   at 812 and derive the height from it (aspect-ratio) so it stays square; below
   ~1904px the column is the limit, so it fills the column and stays square. */
.section-location .mapWrp {
    padding: 0;
}
.section-location #map {
    width: 100%;
    max-width: 812px;
    aspect-ratio: 1 / 1;
    margin: 0 0 0 auto !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: none;
}
/* Vertical line motif in the right gutter (Figma x=1820) — continues the news-block
   motif into the map, bottom-flush + scaling like #intro/#news. */
.section-location::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: clamp(24px, 4.375vw, 84px);
    width: 16px;
    height: min(51.667vw, 992px);
    background: url(/wp-content/uploads/2026/08/news_block_graphic.svg) bottom center / auto 100% no-repeat;
    pointer-events: none;
    z-index: 2;
}

/* ============================================================
   FOOTER — Figma 2988:2237 "Desktop/Footer" (1920×367)
   Dark #303030. Logo left, "Leave a Review" + "Contact Us" menus
   grouped right at the 140 gutter. Overline headings (Inter 600),
   white text, one divider above the copyright/legal bar. kindling
   already ships a full stacked+centered mobile footer — see ≤1024.
   ============================================================ */

/* No line at the very top of the footer (mockup has none). */
#footer .footer-holder {
    border-top: none;
}

/* 140px side gutters on both the main row and the bottom bar (base .container is 90vw). */
#footer .footer-holder .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    margin: 0 auto;
}

/* Main row: logo left, menu group right, headings top-aligned. */
#footer .footer-holder > .container {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-bottom: clamp(40px, 2.917vw, 56px);
}

/* Logo — left, vertically centered against the taller menu columns, 300px wide.
   width:auto stops col-lg-3's 25% from squeezing the column narrower than the
   300px logo (which then overflowed into the menus below ~1330px). */
#footer .footer-holder > .container > .foot {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    align-self: center;
}
#footer .footer-holder .footer-logo {
    padding-bottom: 0;
}
#footer .footer-holder .footer-logo img {
    width: 300px;
    margin: 0;
}

/* Empty (no menu assigned) info column — drop it. */
#footer .footer-holder > .container > .infoNav {
    display: none;
}

/* Review + Contact menus grouped right, 16px apart, ending at the gutter.
   Column widths clamp down below 1920 (20.729vw = 398/1920) so the group narrows
   as the viewport shrinks — keeps a gap to the logo down to the ≤1024 stack (loc
   keeps its 340px floor so the address stays on one line). */
#footer .footer-holder > .container > .servNav {
    flex: 0 1 clamp(180px, 20.729vw, 398px);
    max-width: 398px;
    margin-left: auto;
}
#footer .footer-holder > .container > .loc {
    display: block;
    flex: 0 1 clamp(340px, 20.729vw, 398px);
    max-width: 398px;
    min-width: 340px;
    margin-left: 16px;
}

/* Overline headings — Inter 600, 2.4px tracking, 32px to the submenu. */
#footer .footer-holder .infoNav .h3,
#footer .footer-holder .servNav .h3,
#footer .footer-holder .fLocation h3 {
    font-family: var(--bodyFont);
    font-weight: 600;
    letter-spacing: 2.4px;
    margin-bottom: 32px;
}

/* servNav heading sits in an accordion button — flatten it on desktop so it
   lines up with the bare "Contact Us" h3 (mobile restores it as a toggle).
   margin-top:0 kills the global h1..h6/.h3 top margin interior_style leaks onto
   this <span class="h3"> (the framework resets it only for .fLocation h3). */
#footer .footer-holder .servNav .h3 {
    display: block;
    margin-top: 0;
}
/* Desktop: the accordion is inert (menu always open), so shrink the button to its
   text — otherwise its full-column focus ring reads as landing on nothing (Ali). */
#footer .footer-holder .servNav .mod-btn.accordion {
    padding: 0;
    width: fit-content;
}

/* Review links — 24px apart, no block padding. */
#footer .footer-holder .serv-nav li a {
    padding: 0;
}
#footer .footer-holder .serv-nav li:not(:last-child) {
    margin-bottom: 24px;
}

/* Contact block — address / phone / socials on a 24px rhythm; drop the empty practice line. */
#footer .footer-holder .fLocBox .practice {
    display: none;
}
#footer .footer-holder .fLocBox p {
    margin: 0 0 24px;
}
#footer .footer-holder .fLocBox .fAddress a {
    padding: 0;
}
#footer .footer-holder .fLocBox .tel-footer a {
    font-size: 16px;
    text-decoration: none;
}
#footer .footer-holder .fLocBox .tel-footer a:hover {
    text-decoration: underline;
}

/* Social icons — 24px gap, left-aligned under "Contact Us". */
#footer .footer-holder .social {
    gap: 24px;
    margin: 0;
}
#footer .footer-holder .social a {
    padding: 0;
}

/* X logo — the FA subset ships fa-twitter (old bird) not fa-x-twitter, so paint the
   X glyph as an SVG mask on the x.com icon in currentColor (Ali: outdated logo). */
#footer .footer-holder .social a[href*="x.com"] i::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Copyright — Minimum 14px, matching the legal links (framework leaves it at body size). */
#footer .footer-holder .copyright {
    font-size: 14px;
}

/* Divider above the copyright/legal bar — match the mockup's opacity. */
#footer .footer-holder .bottom {
    border-top: 2px solid rgba(255, 255, 255, 0.25);
}

/* ============================================================
   FLOATING GOOGLE REVIEWS BUTTON — .google-button-container (footer.php)
   ============================================================ */
/* Full-color Google "G" via native image mode (img_or_ico); trunk sizes .g-image img to 32px. */
.google-button-container .g-image img {
    width: 48px;
    height: 48px;
}

/* ============================================================
   INTERIOR HERO — .promo.bar.bar-title (Figma 3798:1451, 1920×560)
   Tan copy panel (left half) + photo (right half); breadcrumbs top,
   page title bottom, dark #303030 text. interior_style.min.css loads
   AFTER this sheet, so rules are `body`-prefixed to out-specify its
   white-on-photo default (full-bleed photo + black gradient scrim).
   ============================================================ */

/* Two halves instead of the framework's block + full-bleed photo. */
body .promo.bar.bar-title .row.flex {
    display: flex;
    min-height: clamp(360px, 29.17vw, 560px);
}

/* Copy = left half: tan wood-grain texture, breadcrumbs top / title bottom, 140 inset. */
body .promo.bar.bar-title .ban-content {
    order: 1;
    flex: 0 0 50%;
    width: 50%;
    min-height: 0;
    justify-content: space-between;
    background: var(--tan) url(/wp-content/uploads/2026/08/bg_hero_banner.jpg) center / cover no-repeat;
    padding: clamp(32px, 3vw, 42px) clamp(24px, 2.5vw, 48px) clamp(40px, 3.5vw, 56px) clamp(24px, 7.292vw, 140px);
}

/* Photo = right half, full height. */
body .promo.bar.bar-title .ban-image {
    order: 2;
    position: relative;
    inset: auto;
    flex: 0 0 50%;
    width: 50%;
}

/* Title — Lato 44, regular weight, sentence case, dark (framework = 600 uppercase white). */
body .promo.bar.bar-title .tWrap h1,
body .promo.bar.bar-title .tWrap h2 {
    font-weight: var(--headingFontWeight);
    text-transform: none;
    color: var(--black);
}

/* Breadcrumbs — Inter 14, dark. */
body .promo.bar.bar-title .breadcrumbs-block,
body .promo.bar.bar-title .breadcrumbs-block a {
    color: var(--black);
    font-size: 14px;
}

/* ============================================================
   INTERIOR CONTENT — .entry.entry-add (Figma 2849:11789)
   Centered 1088 column; Lato 36/28 headings, Inter 18 body, all
   #303030; cream special-offer card; standard list indent.
   interior_style.min.css loads AFTER this sheet → body:not(.home)-
   scoped to out-specify. (Copy is fgframeb lorem — Kristen imports.)
   ============================================================ */

/* Centered 1088px content column. */
body:not(.home) .main-frame .entry.entry-add {
    max-width: 1088px;
    margin: 0 auto;
    padding: clamp(48px, 4.17vw, 80px) 0 clamp(64px, 7.29vw, 140px);
}

/* Body copy — Inter 18, dark. */
body:not(.home) .entry.entry-add p,
body:not(.home) .entry.entry-add li {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
    color: var(--black);
    margin: 0 0 24px;
}

/* Headings — Lato regular, dark. H2 Title 36, H3 Subheader 28. */
body:not(.home) .entry.entry-add h1,
body:not(.home) .entry.entry-add h2,
body:not(.home) .entry.entry-add .h2 {
    font-family: var(--headingFont);
    font-weight: var(--headingFontWeight);
    font-size: clamp(28px, 1.875vw, 36px);
    line-height: 1.15;
    color: var(--black);
    text-transform: none;
    margin: 0 0 24px;
}
body:not(.home) .entry.entry-add h3,
body:not(.home) .entry.entry-add .h3 {
    font-family: var(--headingFont);
    font-weight: var(--headingFontWeight);
    font-size: var(--h3FontSize);
    line-height: 1.25;
    color: var(--black);
    text-transform: none;
    margin: 0 0 24px;
}

/* Bulleted / numbered lists — restore the standard indent the framework zeroes. */
body:not(.home) .entry.entry-add ul,
body:not(.home) .entry.entry-add ol {
    padding-left: 40px;
}

/* Special offer card — cream, rounded, centered (framework ships brown-filled white
   text + a drop shadow the mockup has neither of). */
body:not(.home) .entry.entry-add .page-offer,
body:not(.home) .bar.bar-title .page-offer {
    background-color: var(--tan);
    color: var(--black);
    border-radius: 20px;
    box-shadow: none;
    text-align: center;
    padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
    margin: 0 0 clamp(32px, 3vw, 56px);
}
body:not(.home) .entry.entry-add .page-offer h2,
body:not(.home) .entry.entry-add .page-offer .h2,
body:not(.home) .bar.bar-title .page-offer h2 {
    font-family: var(--headingFont);
    font-weight: var(--headingFontWeight);
    font-size: var(--h3FontSize);
    line-height: 1.25;
    color: var(--black);
    max-width: 812px;
    margin: 0 auto 24px;
}
body:not(.home) .entry.entry-add .page-offer p,
body:not(.home) .entry.entry-add .page-offer li {
    font-size: 16px;
    color: var(--black);
    max-width: 812px;
    margin: 0 auto;
}

/* Service cards (servBlock/servCard) — the title is an inline span (its margin is
   dropped), so block it out with a 16px gap to the offering items below. */
body:not(.home) .entry.entry-add .servBlock .servCard .h3 {
    display: block;
    margin-bottom: 16px;
}
/* Our Services cards — cream #FFF6EB fill, 1px #ECE6DF border, no shadow, rounded,
   and centered on the page (Ali: were grey #F8F8F8 + drop shadow, left-aligned). */
body:not(.home) .entry.entry-add .servBlock {
    justify-content: center;
}
body:not(.home) .entry.entry-add .servBlock .servCard {
    background-color: var(--tan);
    border: 1px solid #ECE6DF;
    border-radius: 20px;
    box-shadow: none;
}

/* Meet the Doctors / Team photos — the site's 20px round, not the 80px the layout
   ships (Ali: corners too extreme). */
body:not(.home) .entry.entry-add .su-column-inner img {
    border-radius: 20px;
}

/* Shortcodes-Ultimate column rows (e.g. "More Technology Photos", team photos) —
   the plugin floats its columns (float:left), so (1) a stray <br> that wpautop drops
   between two columns pushes the 2nd column down ~24px (the reported misalignment),
   and (2) uneven column heights "snag" when more photos are added. Lay the row out
   with flexbox so every column top-aligns, and move the 4% gutter from each column's
   left margin onto column-gap so extra photos wrap cleanly (2-up, 3-up, …) all
   aligned. Spacing is identical to the plugin for a single full row; other su-column
   sizes and su-column-centered are left untouched. */
body:not(.home) .entry.entry-add .su-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 4%;
    row-gap: 1.5em;
}
body:not(.home) .entry.entry-add .su-row > br,
body:not(.home) .entry.entry-add .su-row::after {
    display: none;
}
body:not(.home) .entry.entry-add .su-row .su-column:not(.su-column-centered) {
    margin-left: 0;
}

/* Contact-page form submit — white pill / dark text on the dark .conForm section;
   hover fills tan and lifts 6px like the header Book Now. Framework ships it brown
   (.btn-orange, whose bg needs !important to beat — loads after this sheet). */
.conForm .wpcf7-submit {
    background-color: #fff !important;
    color: var(--black) !important;
    transition: background-color .3s ease, transform .3s ease;
}
.conForm .wpcf7-submit:hover {
    background-color: var(--tan) !important;
    transform: translateY(-6px);
}

/* "New Patient?" legend — 18px (was 24) and vertically centered with the Yes/No radios
   (its 8px bottom margin was offsetting the flex-centered box by 4px). */
.conForm legend {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}
.conForm fieldset .row.flex:has(legend) {
    align-items: center;
}

/* Keyboard focus — white outline on the dark .conForm section (the global
   :focus-visible uses currentcolor [black] + a brown ring, invisible here). */
.conForm input:focus-visible,
.conForm textarea:focus-visible,
.conForm select:focus-visible,
.conForm .wpcf7-submit:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}

/* ============================================================
   BOOK NOW POPUP — #formPop (shared home + interior)
   ============================================================ */

/* Submit button lifts 6px on hover, like the header Book Now. */
#formPop .wpcf7-submit {
    transition: transform .3s ease;
}
#formPop .wpcf7-submit:hover {
    transform: translateY(-6px);
}

/* Phone link in the intro copy underlines on hover. */
#formPop .formPop-desc a:hover {
    text-decoration: underline;
}

/* Close (×) to the top-right — kindling sets both left+14 and right+14, so left wins
   and it lands on the left; drop left so right takes effect (Ali). */
#formPop .formPop-close {
    left: auto;
}

/* "New Patient?" — 18px, on the same line as the Yes/No radios. Chrome coerces a
   fieldset <legend> to display:block (its own line) so flex/inline-block don't help;
   float it instead and drop the following <p>'s clear:left so the radios flow beside
   it. Zero the radio wrap's bottom margin so the row heights match. */
#formPop fieldset:has(legend) > legend {
    float: left;
    width: auto;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 16px 0 0;
    padding: 0;
}
#formPop fieldset:has(legend) > p {
    clear: none;
    margin: 0;
}
#formPop fieldset:has(legend) .wpcf7-form-control-wrap {
    margin-bottom: 0;
}

/* Location Information hours — 16px (was 18). */
#formPop .shedule dt,
#formPop .shedule dd {
    font-size: 16px;
}

/* Input fields — a solid, darker border in place of the washed-out UA 2px inset
   default (Ali: outlines too thin/light). */
#formPop input[type="text"],
#formPop input[type="email"],
#formPop input[type="tel"],
#formPop input[type="number"],
#formPop textarea,
#formPop select {
    border: 2px solid #767676;
}

/* Keyboard focus — visible ring on every field, radio and the Contact Us submit.
   The framework suppresses outlines and the child restores them elsewhere but not
   here, so the No radio + submit showed none (Ali). Brown reads on the white popup. */
#formPop input:focus-visible,
#formPop textarea:focus-visible,
#formPop select:focus-visible,
#formPop .wpcf7-submit:focus-visible {
    outline: 3px solid var(--brown);
    outline-offset: 2px;
    box-shadow: none;
}

/* ============================================================
   BREAKPOINT ≤1450 (mid-desktop)
   ============================================================ */
@media (max-width: 1450px) {
    /* HEADER — shrink the logo + tighten the nav so the links, Book Now and logo
       never collide before the parent's ≤1024 mobile header. */
    #header .logo-block .sLogo {
        height: clamp(30px, 3.8vw, 55px);
    }
    #header #mainNav a,
    #header #nav a {
        font-size: 15px;
        letter-spacing: 1px;
    }
    #header #nav {
        gap: clamp(10px, 1.8vw, 20px);
    }
    #header .navBtns {
        gap: clamp(14px, 1.8vw, 20px);
    }
    #header .booking-opener {
        padding: 14px 24px;
    }
}

/* ============================================================
   BREAKPOINT ≤1024 (tablet + mobile)
   ============================================================ */
@media (max-width: 1024px) {
    /* HEADER — white in-flow block: logo (space above) → Book Now below it → space;
       Book Now docks into the fixed 56px strip on scroll. (No Figma mobile mockup.) */
    #header .header-holder {
        width: 100%;
        max-width: none;
        height: 56px;
        background: #fff;
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.10);
    }
    body #header,
    body.home #header {
        position: relative;
        height: auto;
        background: #fff;
        border-bottom: none;
        box-shadow: none;
        padding: 56px 32px 56px;
    }
    #header .mobHd {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    /* Logo — centered, with space above it. */
    .mob-logo-section {
        text-align: center;
        margin: 56px auto 0;
        padding: 0;
    }
    #mobLogo img {
        width: min(314px, 80vw);
        height: auto;
    }
    /* Book Now — centered below the logo (32px gap); brown pill. */
    #header .btn-block.mobile-show {
        position: static;
        width: fit-content;
        margin: 32px auto 0;
        transform: none;
    }
    body.home #header .btn-block.mobile-show .booking-opener,
    #header .btn-block.mobile-show .booking-opener {
        border-radius: var(--btnBorderRadius);
        padding: 16px 32px;
        font-size: 16px;
        letter-spacing: 2.4px;
        text-transform: uppercase;
        background-color: var(--primaryColor);
        color: #fff;
    }
    /* Hamburger — dark bars, right 32, centered on the strip. */
    .menu-opener.mobile-show {
        right: 32px;
        top: 6px;
    }
    .menu-opener::before,
    .menu-opener::after,
    body.home .menu-opener::before,
    body.home .menu-opener::after {
        background: var(--black);
    }
    /* Kill matchbox's dock transitions on mobile so there's no scroll-threshold bounce. */
    #header,
    #header .mobHd,
    #header .btn-block.mobile-show,
    #header .btn-block.mobile-show .btn,
    .mob-logo-section,
    #mobLogo img {
        transition: none;
    }

    /* HERO — center the heading + subtext and keep the dark overlay for legibility. */
    #promoBanner::before {
        display: block;
    }
    #promoBanner .promo-holder .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #promoBanner .slide_content {
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
    }
    #promoBanner h2.banH {
        width: 100%;
        text-align: center;
        padding-inline: 0;
    }
    #promoBanner .slide_content > div,
    #promoBanner .s_content {
        display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    /* DIFFERENTIATOR BAR (+ interior widget) — stack cards centered; text centered
       under the icon (the right spacer balances the check, so text not check+text). */
    .diff .row.flex,
    .widget.widget-diff .row.flex {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .diff .diffBox,
    .widget.widget-diff .diffBox {
        width: 100%;
        max-width: 600px;
    }

    /* INTRO NEWS BLOCK — stack (photo top / copy below); photo 85%, .text 48/32/100,
       section pt 100 / pb 0. Tooth + line dropped on mobile. */
    #intro.half-content {
        background-image: none;
        padding: 100px 0 0;
    }
    #intro.half-content .container {
        width: 100%;
        flex-direction: column;
    }
    #intro::after {
        display: none;
    }
    /* Keep the <picture> overflow visible so the shadow isn't clipped at the image bottom. */
    #intro .image.nImgRt {
        justify-items: center;
    }
    #intro .image.nImgRt img {
        width: 85%;
        height: auto;
    }
    #intro .image.nImgRt picture {
        overflow: visible;
    }
    #intro .text {
        padding: 48px 32px 100px;
    }
    #intro .text > div {
        width: 100%;
        margin-left: 0;
    }

    /* NEWS BLOCKS — match the intro block. Lines hidden; news2 top padding 0 so the
       gap between the two stacked blocks is 100px total (news1 .text bottom + 0). */
    #news1::after,
    #news2::after {
        display: none;
    }
    body #news1.half-content {
        padding: 100px 0 0;
    }
    body #news2.half-content {
        padding: 0;
    }
    body #news1.half-content .container,
    body #news2.half-content .container {
        width: 100%;
        flex-direction: column;
    }
    body #news1 .image.nImgLt,
    body #news2 .image.nImgRt {
        padding: 0;
        justify-items: center;
    }
    #news1 .image img,
    #news2 .image img {
        width: 85%;
        height: auto;
        margin: 0 auto;
    }
    #news1 .image picture,
    #news2 .image picture {
        overflow: visible;
    }
    #news1 .text,
    #news2 .text {
        padding: 48px 32px 100px;
    }
    #news1 .text > div,
    #news2 .text > div {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* REVIEWS — hide the framing quote marks on tablet/mobile (James). */
    body .reviews::before,
    body .reviews::after {
        display: none;
    }

    /* LOCATION / MAP — stack full-width with 32px gutters (map over copy — the
       framework's column-reverse); drop the pin bg + line motif. */
    .section-location {
        background-image: none;
    }
    .section-location .map-block {
        align-items: stretch;
        gap: 48px;
        width: 100%;
        padding: 0 32px;
    }
    .section-location .map-block > .address,
    .section-location .map-block > .mapWrp {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .section-location .address-holder {
        width: 100%;
        margin-left: 0;
    }
    .section-location::after {
        display: none;
    }

    /* FOOTER (mobile) — kindling already stacks + centers the footer at ≤1024;
       re-assert the framework values my desktop overrides would otherwise leak in. */
    #footer .footer-holder > .container > .servNav,
    #footer .footer-holder > .container > .loc {
        flex: none;
        max-width: none;
        min-width: 0;
        margin-left: 0;
    }
    #footer .footer-holder .footer-logo img {
        margin: 0 auto;
    }
    #footer .footer-holder .servNav .mod-btn.accordion {
        padding: 0 18px 18px;
        width: 100%;
    }
    #footer .footer-holder .social {
        margin: 0 auto;
    }
    /* Center the open "Leave a Review" submenu links (the framework centers the
       Contact lines but not these); zero servNav's 15px left padding so the whole
       column centers truly, matching the Contact column. */
    #footer .footer-holder .servNav {
        padding-left: 0;
    }
    #footer .footer-holder .serv-nav li a {
        text-align: center;
    }
    #footer .footer-holder > .container > .foot {
        margin-bottom: 48px;
    }
    #footer .footer-holder .bottom .container,
    #footer .footer-holder .bottom .bottom-nav,
    #footer .footer-holder .bottom .copyright {
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    #footer {
        padding-bottom: clamp(110px, 24vw, 130px);
    }
    #formPop {
        overflow: visible;
    }
    #formPop .formPop-grid {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: clamp(16px, 4vw, 24px);
    }

    /* INTERIOR HERO (mobile) — stack: photo band on top, tan copy below. */
    body .promo.bar.bar-title .row.flex {
        flex-direction: column;
        min-height: 0;
    }
    body .promo.bar.bar-title .ban-image {
        order: 1;
        width: 100%;
        flex: 0 0 auto;
        height: clamp(200px, 55vw, 320px);
    }
    body .promo.bar.bar-title .ban-content {
        order: 2;
        width: 100%;
        flex: 0 0 auto;
        gap: 24px;
        padding: 32px;
    }
    body .promo.bar.bar-title .breadcrumbs-block {
        display: none;
    }
    body .promo.bar.bar-title .tWrap {
        width: 100%;
    }

    body:not(.home) .entry.entry-add .servBlock .servCard {
        border-radius: 20px;
    }
}

/* ============================================================
   BREAKPOINT ≤567 (phone)
   ============================================================ */
@media (max-width: 567px) {
    /* INTERIOR HERO (phone) — swap the copy-panel texture to the lighter mobile file. */
    body .promo.bar.bar-title .ban-content {
        background-image: url(/wp-content/uploads/2026/08/bg_hero_banner_mobile.jpg);
    }

    /* DIFFERENTIATOR BAR (+ interior widget) — full-width cards, 32px side gutters. */
    .diff .container,
    .widget.widget-diff .container {
        width: 100%;
        max-width: none;
        padding: 0 32px;
    }
    .diff .diffBox,
    .widget.widget-diff .diffBox {
        max-width: none;
    }
    .diff .diffBox .spWrap,
    .widget.widget-diff .diffBox {
        width: 100%;
    }
}