/* ============================================================
   brand.css — Allen Chiropractic Wellness Center
   Overrides template :root vars + base typography per brief §3.
   Load AFTER all template CSS (assets/css/style.css + color2.css).
   Fine-tuning will happen on server post-publish (Task 10d).
   ============================================================ */

/* ---- Allen Brand Palette (brief §3) ---------------------- */
:root {
  /* color2.css (style2 / index2) theme vars */
  --theme-color: #1F4FB5;        /* Allen orange — primary CTAs, accent rules, active nav */
  --secondary-color: #163A78;    /* Allen heading text — dark charcoal-navy */

  /* style.css template palette overrides */
  --color1: #2B2F38;              /* body text (matches template default) */
  --color2: #5A6472;              /* muted text (was #666666) */
  --color3: #163A78;              /* heading text */
  --color4: #E8F1FC;              /* warm background tint (10% orange) */
  --color5: #1F4FB5;              /* primary accent (re-aimed to Allen orange) */
  --color6: #E8F1FC;              /* warm tint for hover/divider blocks */
  --color7: #163A78;              /* deep ink */
  --color11: #1F4FB5;             /* CTA / link accent */

  /* Status colors (brief §3) */
  --allen-success: #3c763d;
  --allen-error:   #a94442;

  /* Round-1 working palette (B-light + green) — provisional, adjust during walk */
  --allen-royal:    #1F4FB5;  /* primary accent / buttons / active nav / links */
  --allen-navy:     #163A78;  /* headings / footer / deep ink */
  --allen-green:    #2E8B6F;  /* accent: icons, dividers, holistic band */
  --allen-green-dk: #1F7A5F;  /* green buttons / green text (AA on white) */
  --allen-orange:   #EC7001;  /* sparing logo accent ONLY — outline pills/dots, never white-text button */
}

/* ---- Typography (brief §3) ------------------------------- */
/* Display: Raleway 600/700 · Body: Roboto 400/500
   (Google Fonts self-hosted is a server post-publish concern;
    for now we declare via @font-face fallback to system stack.) */

body,
p,
.body-text,
input, textarea, select, button {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  color: var(--color1);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.sec-title h1, .sec-title h2, .sec-title h3,
.main-menu .navigation > li > a {
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--secondary-color);
}

h1 { font-size: 2.5rem; }     /* 40px desktop */
h2 { font-size: 2rem; }       /* 32px */
h3 { font-size: 1.5rem; }     /* 24px */
small, .small { font-size: 0.875rem; }

@media (max-width: 767px) {
  h1 { font-size: 1.875rem; } /* 30px mobile */
}

/* ---- Targeted Allen-only touch-ups ----------------------- */
/* Topbar + footer chrome tend to lock colors via hex literals
   in style.css — re-anchor a handful to the Allen palette
   without going full selector-spelunk. */

.top-bar { background-color: var(--secondary-color); }
.top-bar, .top-bar a { color: #ffffff; }

.thm-btn,
.btn-style-one,
.btn-style-two {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}


/* Logo size constraints — Allen logo originals are low-quality;
   prevent browser upscaling per [[allen-logos-and-placeholders]]. */
.logo-box img,
.logo img,
.mobile-menu .nav-logo img,
.footer-logo img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* ---- Notes / fine-tuning hints --------------------------- */
/* TODO post-publish (server fine-tuning):
   - Self-host Raleway + Roboto via Cloudflare per brief §3
   - Confirm topbar/CTA contrast against orange (#1F4FB5 fails 4.5:1
     against white for body copy per brief §6 — use for CTAs only)
   - Apply warm tint #E8F1FC to service-card hover + intake-form
     section backgrounds (selectors TBD on live page)
*/

/* Restore topbar vertical height after search-btn removal (Task 10f pass 1) */
.topbar { padding-top: 10px; padding-bottom: 10px; }


/* === Pass 2: hours + bottom-bar + hero gold overrides === */

/* Hours column: collapse vertical spacing to match neighboring <li> rhythm.
   Original template used `<i class="d-block">` to put time on its own line — we removed d-block
   so day+time are inline; this kills the leftover line-height bloat. */
.working-hours span.d-block {
    line-height: 1.8;
    margin: 0;
    padding: 0;
}
.working-hours span.d-block i {
    display: inline;
    padding-left: 4px;
    font-style: normal;
}

/* Bottom-bar logo: Allen's logo-stacked-white.png has different intrinsic dimensions than
   the template's original logo3.png. Constrain so the .logo.v2 panel doesn't push the
   copyright/links row out of vertical alignment. */
.bottom-bar .logo img {
    max-height: 80px;
    width: auto;
}

/* Hero §1: replace template gold (#e5ae58) accents with Allen orange.
   Targets the title :before underline and the decorative circles behind the slide image. */
.sn-main-slider .content-column .title:before,
.sn-main-slider .content-column .inner-column .title:before {
    background-color: var(--theme-color) !important;
}
.sn-main-slider .image-column .circle-layer .circle-one,
.circle-layer .circle-one {
    background-color: var(--theme-color) !important;  /* orange */
}
.sn-main-slider .image-column .circle-layer .circle-two,
.circle-layer .circle-two {
    background-color: var(--secondary-color) !important;  /* navy */
}


/* === Pass 3: §1 hero bg + §2 CTA banner === */

/* §1 Hero — radial gradient using Allen warm tints (center brighter, edge fdebd8) */
.sn-main-slider {
    background: radial-gradient(circle at center, #E8F1FC 0%, #ffffff 100%) !important;
}

/* §2 CTA Banner — fixed 480px slide height (image-controlled by customer; future thumbnail crop) */
.feat-item2 .feat-img {
    min-height: 480px;
    max-height: 480px;
    height: 480px;
}

/* §2 arrows — vertical-center align (remove inherited top margin) */
.feat-caro2.slick-slider > button.slick-arrow,
.feat-caro2 > button.slick-arrow {
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* §2 caption wrapper — clear template max-width + top margin so caption sits on photo cleanly */
.feat-cap2-wrap {
    max-width: none !important;
    margin-top: 0 !important;
}

/* §2 orange accent text -> warm tint (#E8F1FC) so it reads on any photo bg */
.feat-caro2 .thm-clr,
.feat-cap2 .thm-clr,
.feat-cap2-wrap .thm-clr,
.feat-cap2 span.thm-clr {
    color: #E8F1FC !important;
}

/* §2 text shadow on ALL caption text — readable on any background photo OR solid color */
.feat-cap2 span,
.feat-cap2 h2,
.feat-cap2 p,
.feat-cap2 .feat-cap-time,
.feat-cap2-wrap span,
.feat-cap2-wrap h2,
.feat-cap2-wrap p {
    text-shadow: 0 1px 3px rgba(0,0,0,0.65), 0 0 14px rgba(0,0,0,0.45);
}

/* HW-3 (§2 CTA banner): drop the full-image dark overlay so the bg photo shows full-color (R12);
   put a transparent-dark scrim behind the TEXT BOX ONLY so the light caption stays readable
   over any photo. Caption text is #fff/#f3f3f3 + existing text-shadow; scrim is the safety net. */
.feat-item2 .feat-img:before { display: none !important; }
/* §2 CTA caption scrim — applies to ALL slides. Text stays DIRECT children of .feat-cap2 so the
   template typography (h2/p/span sizes, line-heights, span underline accent) is fully preserved.
   Faint scrim + the existing text-shadow carry readability on any customer bg; box hugs the content
   (width:auto, not the template 70%) and the button sits inside the tight box (Clay 2026-06-15). */
.feat-item2 .feat-cap2 {
    display: inline-block;
    width: auto !important;
    max-width: 80% !important;
    background-color: rgba(0,0,0,0.2) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
}


/* === Pass 4: §4 service card carousel === */

/* §4 service-card carousel — owl arrows styled like §2 (vertical center, outside) */
.serv-card-caro.owl-carousel .owl-nav button.owl-prev,
.serv-card-caro.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--theme-color) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 50px !important;
    text-align: center !important;
    display: block !important;
    opacity: 0.95;
    transition: all 0.2s;
}
.serv-card-caro.owl-carousel .owl-nav button.owl-prev { left: -65px; }
.serv-card-caro.owl-carousel .owl-nav button.owl-next { right: -65px; }
.serv-card-caro.owl-carousel .owl-nav button:hover {
    background: var(--secondary-color) !important;
    opacity: 1;
}
.serv-card-caro.owl-carousel .owl-dots { display: none; }
.serv-card-caro .serv-box2 { margin-bottom: 0; }


/* === Pass 5: top-header shadow === */
/* Apply same drop-shadow the sticky menu uses to the always-on top header,
   so the chrome reads as elevated above the page body even before scroll. */
header.style2 {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
}


/* === Pass 6: §4 spacing/arrows + §5 below-photo === */

/* §4 services wrap — visual breathing room below section */
.serv-wrap2 {
    margin-bottom: 2.125rem;
}

/* §5 about-info card moved from photo-overlay to direct-below-photo.
   Override the template's position-absolute + width-auto + button-stretch so the card
   sits as a normal block immediately under the photo, photo-width, no gap, centered text,
   inline-block button (not a full-width orange band). */
.about-info.below-photo {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 35px 30px !important;
    text-align: center !important;
    border-radius: 0 0 10px 10px !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    box-sizing: border-box;
}
.about-info.below-photo h3,
.about-info.below-photo > span,
.about-info.below-photo .d-block {
    text-align: center !important;
}
.about-info.below-photo h3 {
    margin-bottom: 10px !important;
}
.about-info.below-photo > span:not(.d-block) {
    display: block;
    margin-bottom: 20px;
}
.about-info.below-photo .thm-btn {
    display: inline-block !important;
    width: auto !important;
    margin: 18px auto 0 !important;
    padding: 12px 30px !important;
    text-align: center !important;
}
/* Kill any bottom margin/padding under the photo so card sits flush against it. */
.sn-about-img:has(+ .about-info.below-photo),
.col-lg-6:has(.about-info.below-photo) .sn-about-img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Round only the photo's TOP corners so it visually fuses with the card below (no gap). */
.col-lg-6:has(.about-info.below-photo) .sn-about-img img {
    border-radius: 10px 10px 0 0;
    display: block;
    margin-bottom: 0 !important;
}


/* === Pass 7: §5 below-photo sizing + §8 right-button spacing === */
/* (the §5 rules above were upgraded in-place; this marker is for audit trail) */

/* §8 right CTA: paragraph-to-button spacing was tighter than left side. Bump margin. */
.impact-wrap .impact-inner .thm-btn,
.impact-wrap .impact-inner > a.thm-btn {
    margin-top: 25px !important;
}


/* === Pass 8: §5 photo left-align + social-links left === */
.col-lg-6:has(.about-info.below-photo) .sn-about-img,
.about-img:has(+ .about-info.below-photo) {
    padding-left: 0 !important;
}
.sn-about-img .social-links4 {
    left: 0 !important;
}


/* =========================================================
   Inside-page breadcrumb banner (Task 11 — 404 sets standard)
   ========================================================= */
.page-title-inner h1 {
    color: #163A78 !important;
    text-shadow: none;
}
.page-title-inner .breadcrumb,
.page-title-inner .breadcrumb-item,
.page-title-inner .breadcrumb-item a {
    color: #2B2F38 !important;
    text-shadow: none;
}
.page-title-inner .breadcrumb-item a:hover,
.page-title-inner .breadcrumb-item.active {
    color: #1F4FB5 !important;
}


/* =========================================================
   Inside-page Quotes & Facts + CTA strip (Task 11b, about.php)
   ========================================================= */
/* §3 quote+facts section — icons & numbers white on dark bg */
.quote-facts-wrap .flaticon-quotation,
.quote-box-inner .flaticon-quotation {
    color: #ffffff !important;
}
.quote-facts-wrap .fact-box > i.thm-clr,
.quote-facts-wrap .facts-wrap i {
    color: #ffffff !important;
}
.quote-facts-wrap .fact-box-inner span.scndry-clr {
    color: #ffffff !important;
}
/* §4 CTA strip on scndry-bg — white text + white link */
.find-thera-cap,
.find-thera-cap h2,
.find-thera-cap h2.text-color3,
.find-thera-cap a.simple-link,
.find-thera-cap a.simple-link.text-color3 {
    color: #ffffff !important;
}


/* =========================================================
   Dr. Allen profile sidebar (team-detail-info) + meta strip
   Task 11c follow-up — 2026-05-29
   ========================================================= */
/* Cut sidebar card padding in half on all sides */
.team-detail-info {
    padding: 1.09375rem 1.71875rem 1.1875rem !important;
}
/* Email & phone links — visible against scndry-bg (orange) */
.team-detail-info-meta > li a {
    color: #E8F1FC;
    transition: color 0.2s ease;
}
.team-detail-info-meta > li a:hover,
.team-detail-info-meta > li a:focus {
    color: #ffffff;
    text-decoration: underline;
}
/* Meta strip — equal bottom padding to top */
.team-detail-meta {
    padding-bottom: 1.375rem;
}


/* =========================================================
   Holistic Services hub — §3 service card tweaks (Task 12)
   2026-05-29 — overlay lower + larger vertical gap between cards
   ========================================================= */
/* Overlay title: drop it closer to the bottom edge of the image */
.serv-wrap2 .serv-info2 {
    bottom: -1rem;
}
/* Vertical gap between card rows (mrg30 only handles horizontal) */
.serv-wrap2 .serv-box2 {
    margin-bottom: 4.5rem;
}


/* =========================================================
   Service detail (service.php) — sidebar widget padding halved
   per Clay 2026-05-29
   ========================================================= */
/* Scope to .sidebar so only service detail widgets are affected */
.sidebar .widget-box.v3 {
    padding: 1.5625rem 1.40625rem !important;
}
.sidebar .widget-box.v3.request-consult-wrap2 {
    padding: 1.875rem 2.03125rem 2.5rem !important;
}


/* =========================================================
   New Patients page (new-patients.php) tweaks — Task 14
   2026-05-29
   ========================================================= */


/* §4 + §5 combined section — more space between title (h2) and body (p / accordion) */
.newpat-title {
    margin-bottom: 1.75rem !important;
    font-size: 1.75rem !important;
    line-height: 1.25;
}
.newpat-body {
    margin-top: 0;
}

/* §5 accordion — clean styling (no Bootstrap blue defaults) */
.newpat-accordion .card {
    border: 1px solid #eaeaea;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.newpat-accordion .card-header {
    background: #E8F1FC;
    padding: 0;
    border-bottom: 0;
}
.newpat-accordion .card-header .btn-link {
    color: #163A78 !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.newpat-accordion .card-header .btn-link:hover,
.newpat-accordion .card-header .btn-link:focus {
    color: #1F4FB5 !important;
    text-decoration: none;
    box-shadow: none;
}
.newpat-accordion .accordion-icon {
    transition: transform 0.25s ease;
    margin-left: 0.75rem;
    color: #1F4FB5;
}
.newpat-accordion .btn-link[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}
.newpat-accordion .card-body {
    padding: 1.25rem 1.25rem 1.5rem;
    color: #4a4a4a;
    line-height: 1.6;
    background: #fff;
}


/* =========================================================
   New Patients §3 sn-ser-block — Allen palette (CORRECTED 2026-05-29)
   Template defaults: gold circle, gold-hover arrow wedge, white glyphs.
   Override only what's gold → orange. Keep navy wedge default.
   ========================================================= */
/* Circle bg behind icon glyph: gold (#ffb243) → Allen orange */
.sn-ser-block.serv-box4 > i {
    background-color: #1F4FB5 !important;
}
/* Card body bg: white → #fefefe per Clay */
.sn-ser-block.serv-box4 .serv-box4-inner:before {
    background-color: #E8F1FC !important;
}
/* Arrow wedge hover: gold (#ffb446) → Allen orange */
.sn-ser-block.serv-box4 .side-arrow:hover,
.sn-ser-block.serv-box4:hover .side-arrow {
    background-color: #1F4FB5 !important;
}
/* Chevron color: stays white default; on hover goes navy (template's original wedge color) for contrast on orange */
.sn-ser-block.serv-box4 .side-arrow {
    color: #ffffff !important;
}
.sn-ser-block.serv-box4 .side-arrow:hover,
.sn-ser-block.serv-box4:hover .side-arrow {
    color: #ffffff !important;
}


/* §5 accordion top spacing — match eyebrow→title gap from §4 left side */
.newpat-accordion {
    margin-top: 1.25rem;
}


/* ===== Task 15b Shop card fixes (Clay 2026-06-01) ===== */
/* Icon-button basket glyph: white on hover/focus (template set #000 on :focus, no hover rule) */
.prod-img > a.thm-bg,
.prod-img > a.thm-bg:hover,
.prod-img > a.thm-bg:focus,
.prod-img > a.thm-bg i,
.prod-img > a.thm-bg:hover i,
.prod-img > a.thm-bg:focus i { color: #ffffff !important; }
/* Overlay pill text white (where template price sat) */
.prod-info > span.price { color: #ffffff; }


/* ===== Contact page fixes (Clay 2026-06-01) ===== */
.contact-info-box:hover > i { color: #ffffff; }
.about-desc { margin-top: 0; }
.get-time-box > span i { max-width: 60%; flex: 0 0 60%; }

/* Contact: remove bottom spacing on info-card wrap (Clay 2026-06-01) */
.contact-info-wrap { margin-bottom: 0 !important; padding-bottom: 0 !important; }


/* ===== R2 hero motion fixes (index.php §1) — 2026-06-15 (rev2) ===== */
/* Hide the spinning circle-layer entirely: stops rotation AND removes the two accent dots */
.sn-main-slider .image-column .circle-layer { display: none !important; }

/* Let the image column be a normal block so the photo respects column width */
.sn-main-slider .image-column .inner-column { display: block !important; }

/* Photo: rounded square + soft navy shadow, sized naturally to its column (no fixed square) */
.sn-main-slider .image {
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(22,58,120,0.18) !important;
  width: 100% !important;
  height: auto !important;
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}
.sn-main-slider .image img { width: 100% !important; height: auto !important; display: block; }

/* Vertically center the text column against the photo */
.sn-main-slider .slide .row { align-items: center !important; }
.sn-main-slider .content-column .inner-column { padding-top: 0 !important; }

/* Hero CTA buttons: white text on royal bg (black was unreadable) */
.sn-main-slider .btns-box .thm-btn,
.sn-main-slider .btns-box .thm-btn:hover,
.sn-main-slider .btns-box .thm-btn:focus { color: #ffffff !important; }


/* ===== R3 menu + footer font — clean sans matching body (2026-06-15) ===== */
/* Customer saw footer + menu as "Times-New-Roman-like". Cause: the template's Arimo/Nunito
   are pulled via a flaky CSS @import and fall back to the browser DEFAULT SERIF when they fail.
   Fix: force the same clean sans the (liked) body uses, with a hard sans-serif fallback, across
   all header/menu + footer chrome. Icon <i> keep their Flaticon/FA font (own class rules win).
   Body + headings unchanged. NOTE this template's menu is .header-left/.rsnp-mnu, NOT .main-menu. */
:root { --allen-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }

/* Header chrome + all three menus (main / sticky / responsive) */
header.style2,
header.style2 p,
header.style2 a,
.topbar p,
.header-contact,
.logo-contact-menu-wrap .header-left ul li a,
.sticky-menu,
.sticky-menu .header-left ul li a,
.rspn-hdr,
.rspn-hdr .rspn-cnt,
.rsnp-mnu ul li a {
  font-family: var(--allen-sans) !important;
}

/* Footer + bottom bar (override the Nunito widget headings too) */
footer,
footer a,
footer li,
footer span,
footer .working-hours,
footer .widget-title2,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.bottom-bar,
.bottom-bar p,
.bottom-bar a,
.bottom-bar li {
  font-family: var(--allen-sans) !important;
}

/* R6 — SVG service/condition icons (replace flaticon glyphs; recolor baked into SVG) */
.fact-box > img.allen-svc-icon { width: 5.625rem; height: auto; }
.serv-box4 > img.allen-svc-icon { width: 4.375rem; height: auto; }
.serv-box4 > img.allen-svc-icon + .serv-box4-inner { flex: 0 0 calc(100% - 4.375rem); max-width: calc(100% - 4.375rem); padding-left: 1.875rem; }
.fact-box:hover > img.allen-svc-icon { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
@media (max-width: 850px) {
  .fact-box:not(.v2) > img.allen-svc-icon + .fact-box-inner { flex: 0 0 100%; max-width: 100%; padding: 1.875rem 0 0; }
}
@media (max-width: 576px) {
  .fact-box > img.allen-svc-icon { width: 4.5rem; }
}

/* R6 fix — restore fact-box desktop gap+width (matched <i>, broke on <img> swap) + white icons on dark .blue-layer */
.fact-box > img.allen-svc-icon + .fact-box-inner { flex: 0 0 calc(100% - 5.625rem); max-width: calc(100% - 5.625rem); padding-left: 2.1875rem; }
.allen-svc-icon.allen-svc-light { filter: brightness(0) invert(1); }

/* F3 — banner dark text + visible separator on light inside-header-bg2 (post-F2) */
.page-title-inner ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item:before { background-color: #5A6472; top: 15px; }

/* HW-1 §1 hero slide bottom padding */
.sn-main-slider .slide { padding-bottom: 120px; }
/* HW-5 §5 Dr. Allen under-photo card */
.about-info.below-photo > h3 > span.d-block { color: #F7FAFD !important; }
.about-info.below-photo > a.thm-btn { color: #F2F7FE !important; }
/* HW-8 §8 CTA small top text + button text */
.video-impact-wrap .video-box > span.d-block, .video-impact-wrap .impact-inner > span.d-block { color: #E8F1FC !important; }
.video-impact-wrap .thm-btn { color: #F7FAFD !important; }

/* HW-4a §4 carousel prev/next glyph vertically centered in circle */
.serv-card-caro .owl-nav button.owl-prev, .serv-card-caro .owl-nav button.owl-next { display:block; line-height:50px; text-align:center; }
/* HW-N1 top-nav Request Appointment button less bold */
.header-right .thm-btn { font-weight: 500; }
/* HW-N5 inside-page Schedule-CTA right caption background green */
.find-thera-cap { background-color: #2E8B6F; }
/* HW-N5: fill the ENTIRE inside-page Schedule-CTA right column green (left stays the image).
   Row uses align-items-center so the green cap box was shorter than the image column,
   leaving navy (.scndry-bg) showing above/below. Stretch the right col to full row height,
   paint it green, and flex-center the caption so the original centered look is preserved. */
.find-thera-wrap .col-lg-6:has(> .find-thera-cap){
    align-self: stretch !important;
    background-color: #2E8B6F !important;
    display: flex !important;
    align-items: center !important;
}
.find-thera-wrap .col-lg-6:has(> .find-thera-cap) > .find-thera-cap{
    width: 100% !important;
}


/* ===== HW-N3 footer recolor -- lighter palette on the dark blue footer (2026-06-15) ===== */
/* Footer bg = background-texture-blue.jpg under .dark-layer2. Template left heading icons in the
   theme color (royal .thm-clr), list/link text #d7d7d7, and office-hours DARK (no .dark-layer2
   working-hours rule -> inherited body #2B2F38, unreadable). Re-anchor footer text/links/icons/
   hovers to the light palette: sky #F2F7FE (links/body), blue #E8F1FC (icons/bullets), whisper
   #F7FAFD (headings/hover). Scoped to the upper footer; bottom-bar left as-is so the intentional
   dim Login link (inline rgba + royal hover standard) is not clobbered. brand.css loads last. */
footer .widget-title2 { color: #F7FAFD !important; }
footer .widget-box ul > li,
footer .widget-box ul.contact-info-list li,
footer .widget-box ul.contact-info-list li a,
footer .widget-box ul > li a { color: #F2F7FE !important; }
footer .widget-box ul > li a:hover,
footer .widget-box ul > li a:focus,
footer .widget-box ul.contact-info-list li a:hover,
footer .widget-box ul.contact-info-list li a:focus { color: #F7FAFD !important; }
footer .widget-box ul:not(.contact-info-list) > li a:before,
footer .widget-box ul:not(.contact-info-list) > li a:hover:before { color: #E8F1FC !important; }
footer .working-hours > span { color: #F2F7FE !important; }
footer .working-hours > span i { color: #F7FAFD !important; }


/* ===== HW-N3b footer title-icons removed + copyright restyle (Clay 2026-06-15) ===== */
/* Title icons removed from incl.php markup -> reclaim the left padding the absolute icon used. */
footer .widget-title2 { padding-left: 0 !important; }
/* Copyright line: match the dim Login look (rgba .35), lighter weight (~service-link 400),
   hover navy #163A78. Login keeps its inline dim base; CDG/Smart Marketing unified to match. */
.bottom-bar.v3 p,
.bottom-bar.v3 p a { color: rgba(255,255,255,0.35) !important; font-weight: 400 !important; }
.bottom-bar.v3 p a:hover,
.bottom-bar.v3 p a:focus { color: #163A78 !important; }


/* ===== HW-6 §6 First-Visit teaser -- full-color photo + readable text + link color (Clay 2026-06-15) ===== */
/* Remove the 50% black tint on the right-column photo (.storie-wrap:before) -> full color.
   Text is already #fff, so add a text-shadow for contrast on the now-untinted photo. */
.storie-wrap:before { display: none !important; }
.storie-inner > i,
.storie-inner > h2,
.storie-inner > p { text-shadow: 0 1px 8px rgba(0,0,0,0.65); }
/* START ONLINE link -> light mint #EAF6F0 (was scndry navy) + matching readable shadow */
.storie-inner > a,
.storie-inner > a:hover,
.storie-inner > a:focus { color: #EAF6F0 !important; text-shadow: 0 1px 8px rgba(0,0,0,0.65); }


/* ===== HW-N4 preloader -> logo (Clay 2026-06-15) ===== */
/* Preloader glyph swapped to the stacked logo <img> in all page files; size it inside the
   150px ring + vertical-center within .preloader-inner line-height. zoom2 pulse still applies. */
img.preloader-icon { width: 5.5rem; height: auto; vertical-align: middle; }

/* -- §6 home testimonials — contain long quotes (full quote stays in CMS; display capped ~JDH length) -- */
.testi-list-caro .testi-quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
}
.testi-list-caro .testi-quote p { margin-bottom: 0; }

/* =========================================================
   §4 home + §3 hub service cards — unified card design (Task 19 step 4c)
   2026-06-17 — photo wrapped in <a> (plus-icon anchor dropped); the
   image link sits in normal flow so the card keeps its height; the
   on-hover overlay tint is killed; the gentle image zoom is preserved.
   ========================================================= */
.serv-img2 > a {
    position: static !important;
    display: block;
    width: 100%;
    margin: 0 !important;
    line-height: 0;
    font-size: 0;
    transform: none !important;
    opacity: 1 !important;
}
.serv-box2:hover .serv-img2 > a,
.serv-box2.v2:hover .serv-img2 > a {
    transform: none !important;
    opacity: 1 !important;
}
/* kill the blue/dark overlay tint that faded in on hover */
.serv-box2:hover .serv-img2:before,
.serv-box2.v2:hover .serv-img2:before {
    opacity: 0 !important;
}
/* keep the gentle image zoom even though <img> is now nested in the link */
.serv-box2:hover .serv-img2 > a > img {
    -webkit-transform: scale(1.05) rotate(2deg);
    transform: scale(1.05) rotate(2deg);
}

/* =========================================================
   §4 home + §3 hub service cards — refinements (Task 19 step 4c.1)
   2026-06-17 (Clay) — slimmer title bar, smaller title font, and make
   the photo link clickable: the .serv-img2:before hover-tint overlay
   (position:absolute, z-index:1) was sitting over the in-flow photo
   <a> and eating the clicks. pointer-events:none lets clicks through.
   ========================================================= */
.serv-info2 > h3 { font-size: 1.12rem; }
.serv-info2 > h3 a { padding: 0.796875rem 1.09375rem; }
.serv-img2:before,
.serv-box2.v2 .serv-img2:before { pointer-events: none; }


/* === Task 19 testimonials — home §6 label one-line + clickable cards === */
.testi-item-info > span.d-block { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.testi-item-box { position: relative; }
.testi-card-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; }

/* About §3 quote box — Clay 2026-06-18 */
.quote-box-info { padding-left: 2.4375rem; }

/* About sec2 — lead/body spacing — Clay 2026-06-18 */
.about-desc strong { display: block; margin-bottom: 1.25rem; }
.about-desc h3 { margin-top: 1.5rem; margin-bottom: .5rem; }


/* =========================================================
   Dr. Allen left-card new-patient CTA (Task 19 Step D, Clay 2026-06-18)
   .widget-box.v3.thm-bg = royal (#1F4FB5); default .thm-btn is ALSO royal,
   so the button disappeared into the card. Give this CTA a white inverse
   button (navy text) that clearly reads as a button on the royal card,
   plus breathing room above the button and the supporting line.
   Scoped to .nesletter_widget (unique to this block).
   ========================================================= */
.nesletter_widget .nesletter-form h4,
.nesletter_widget .nesletter-form p { color: #ffffff !important; }
.nesletter_widget .nesletter-form p { margin-top: 0.75rem; margin-bottom: 0; }
.nesletter_widget .nesletter-form a.thm-btn {
    margin-top: 1.25rem !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #163A78 !important;
}
.nesletter_widget .nesletter-form a.thm-btn:hover,
.nesletter_widget .nesletter-form a.thm-btn:focus {
    background-color: #163A78 !important;
    border-color: #163A78 !important;
    color: #ffffff !important;
}
/* New Patients — uploaded form-card icon sizing (default flaticon glyph used when empty) */
.serv-box4 img.newpat-form-icon{width:54px;height:54px;object-fit:contain;flex:0 0 auto;margin-right:18px;}


/* =========================================================
   New Patients tweaks — 2026-06-19 (Clay review)
   ========================================================= */
/* §2 secondary-bg button text → white (all .thm-btn.scndry-bg) */
.thm-btn.scndry-bg,
.thm-btn.scndry-bg:hover,
.thm-btn.scndry-bg:focus { color: #ffffff !important; }

/* §3 form cards — title 1.3rem + blurb clamped to 2 lines */
.sn-ser-block.serv-box4 .serv-box4-inner > h3 { font-size: 1.3rem; }
.sn-ser-block.serv-box4 .serv-box4-inner > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* request-consult box fills its container (template style.css caps it at calc(100% - 4.375rem)) — Clay 2026-06-19 */
.request-consult-wrap2 { max-width: 100%; }