/**
 * Client-Specific Theming & Customizations
 *
 * Aesthetic Dentistry (Dr. William J. Bennett III)
 * Multi-location practice: Orland Park, Frankfort, Oak Lawn
 */


/* ========================================================================
   GOOGLE FONTS
   Jost (headings/logo) — weights 300, 400, 500
   Poppins (body) — weights 200, 300, 500
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Poppins:wght@200;300;500&display=swap');


/* ========================================================================
   CSS VARIABLES — Aesthetic Dentistry brand palette
   ======================================================================== */

:root {
  /* ===== BRAND PALETTE ===== */
  --brand-charcoal-green: #535B56;       /* Primary brand color */
  --brand-copper: #BD8F63;               /* Accent / CTA */
  --brand-taupe: #A2968D;                /* Tertiary / subtle */
  --brand-linen: #F5F2EF;                /* Light background */

  /* ===== PRIMARY BRAND COLORS ===== */
  --primary-color: #535B56;              /* Charcoal Green */
  --primary-color-dark: #3E4540;         /* Darker charcoal for hover */
  --primary-color-light: #6E7771;        /* Lighter charcoal for accents */
  --primary-color-bright: #7A8480;       /* Brighter shade for button hover states */

  /* Override Bootstrap's primary color to match brand */
  --bs-primary: #535B56;
  --bs-primary-rgb: 83, 91, 86;

  /* Override Bootstrap's default link colors so prose <a> links pick up the
     copper accent instead of Bootstrap's #0d6efd blue. RGB pair is needed
     because Bootstrap renders links via rgba(var(--bs-link-color-rgb), ...). */
  --bs-link-color: #BD8F63;                /* Copper */
  --bs-link-color-rgb: 189, 143, 99;
  --bs-link-hover-color: #9E764F;          /* Darker copper */
  --bs-link-hover-color-rgb: 158, 118, 79;


  /* ===== SECONDARY / ACCENT COLORS ===== */
  --secondary-color: #A2968D;            /* Warm Taupe */
  --accent-color: #BD8F63;               /* Copper */
  --accent-color-dark: #9E764F;          /* Darker copper for hover */
  --accent-color-light: #D0A883;         /* Lighter copper */


  /* ===== UI ELEMENT COLORS ===== */
  --link-color: var(--accent-color);
  --link-hover-color: var(--accent-color-dark);
  --button-color: var(--accent-color);
  --button-hover-color: var(--accent-color-dark);


  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: var(--primary-color);
  --bg-secondary: var(--brand-linen);
  --bg-light: var(--brand-linen);
  --hero-bg-color: var(--brand-linen);                   /* Homepage hero section background */
  --sidebar-bg: rgba(83, 91, 86, 0.95);                  /* Charcoal green mobile sidebar */

  /* Homepage hero video overlay — softer, warmer gradient corners so the
     looping footage reads through more clearly than a heavy brand wash.
     Corner 1 (top-left) = darkened brand near-black; Corner 2 (bottom-right) = Copper. */
  --hero-overlay-corner-1: rgba(47, 51, 47, 0.72);
  --hero-overlay-corner-2: rgba(189, 143, 99, 0.55);
  --hero-overlay-tint:    rgba(47, 51, 47, 0.32);


  /* ===== TEXT COLORS ===== */
  /* Note: --brand-taupe (#A2968D) is reserved for decorative/large-display use
     only — it does not meet WCAG AA on white at body sizes. Body/secondary text
     must use the darker derivatives below. */
  --text-primary: #2F332F;               /* Near-black with green undertone */
  --text-secondary: #6D6259;             /* Darker taupe derivative — AA on white */
  --text-light: #7A6F66;                 /* Muted darker taupe — AA on white */
  --text-white: #ffffff;


  /* ===== TYPOGRAPHY ===== */
  --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-headings: 'Jost', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Heading font weights — Jost Light is the brand default */
  --heading-font-weight: 300;


  /* ===== SPACING ===== */
  --section-padding: 4rem;
  --section-padding-mobile: 2rem;


  /* ===== BORDER RADIUS ===== */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-pill: 30px;


  /* ===== SHADOWS ===== */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(47, 51, 47, 0.075);
  --box-shadow: 0 0.5rem 1rem rgba(47, 51, 47, 0.12);
  --box-shadow-lg: 0 1rem 3rem rgba(47, 51, 47, 0.16);
}


/* ========================================================================
   TYPOGRAPHY — apply brand fonts
   ======================================================================== */

body {
  font-family: var(--font-family-base);
  font-weight: 300;
  line-height: var(--line-height-base);
  color: var(--text-primary);
}

/* Heading typography. Heading color for h1–h4 is set by clue.css (--primary-color);
   intentionally not duplicated here. h5/h6 inherit body text color. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-headings);
  font-weight: var(--heading-font-weight);
  letter-spacing: 0.01em;
}

/* Headings inside white-text containers (hero, dark CTA bands) must inherit
   the parent's white color rather than fall back to clue.css's primary color. */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6 {
  color: inherit;
}


/* ========================================================================
   LOGO SIZING
   Width-capped + height:auto so the SVGs scale down on narrow viewports
   without us having to set a numeric height attribute on the <img>.
   ======================================================================== */

.footer-logo {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
}


/* ========================================================================
   CLIENT-SPECIFIC CSS OVERRIDES
   ======================================================================== */


/* ========================================================================
   SERVICE AVAILABILITY BADGE (Phase 5)
   Rendered by partials/service-availability.njk on every individual
   service page. Shows whether the service is offered at the active
   location (available) or, when not, points to the sister location
   that does offer it. Colors use the Aesthetic Dentistry palette:
   Charcoal Green for the positive state, Copper for the cross-link
   state — both against a soft Linen background.
   ======================================================================== */

.service-availability {
  background: var(--brand-linen, #F5F2EF);
  border-top: 1px solid rgba(83, 91, 86, 0.12);
  border-bottom: 1px solid rgba(83, 91, 86, 0.12);
}

.service-availability-lead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--brand-charcoal-green, #535B56);
}

.service-availability-lead i {
  font-size: 1.15rem;
  flex-shrink: 0;
  color: var(--brand-charcoal-green, #535B56);
}

/* Three-up grid of location chips. */
.service-availability-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.service-availability-loc a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(83, 91, 86, 0.18);
  background: #ffffff;
  color: var(--brand-charcoal-green, #535B56);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.service-availability-loc a:hover,
.service-availability-loc a:focus-visible {
  border-color: var(--brand-charcoal-green, #535B56);
  box-shadow: 0 2px 6px rgba(83, 91, 86, 0.15);
  transform: translateY(-1px);
}

.service-availability-loc i {
  font-size: 1rem;
  flex-shrink: 0;
}

.service-availability-loc.is-available i {
  color: var(--brand-charcoal-green, #535B56);
}

.service-availability-loc.is-unavailable a {
  color: #8a8a8a;
  background: rgba(83, 91, 86, 0.04);
}

.service-availability-loc.is-unavailable i {
  color: #b9b9b9;
}

/* Subtle copper accent on the user's current location chip. */
.service-availability-loc.is-current a {
  border-color: var(--brand-copper, #BD8F63);
  box-shadow: inset 0 0 0 1px var(--brand-copper, #BD8F63);
}

.service-availability-loc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
  .service-availability-loc a {
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
  }
  .service-availability-loc i {
    font-size: 0.95rem;
  }
}


/* ========================================================================
   MICROSITES (Phase 6)
   Per-location accent colors, sub-navigation, and helper components for
   the Frankfort and Oak Lawn microsites. Accent colors are derived from
   the Aesthetic Dentistry palette so each location feels distinct while
   staying on-brand.

   - Frankfort  → deeper Copper (#A6753E)        — warm, established feel
   - Oak Lawn   → muted Charcoal Green (#3E4540) — cooler, calm tone
   2026-06-05: Orland Park promoted from primary to peer microsite. All
   three offices now have their own accent palette; the root site keeps
   the default Charcoal Green / Copper palette defined at the top of
   this file for its practice-wide overview pages.
   ======================================================================== */

body.location-orland-park {
  --accent-color: #9B8870;
  --accent-color-dark: #7E6D58;
  --accent-color-soft: rgba(155, 136, 112, 0.10);
}

/* Doctor location chips (used on the root meet-the-doctor page where
   doctors span multiple offices). Each chip links to that office's
   meet-the-team page. */
.doctor-location-chips .doctor-location-chip {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(83, 91, 86, 0.25);
  border-radius: 50px;
  color: var(--brand-charcoal-green, #535B56);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.doctor-location-chips .doctor-location-chip:hover,
.doctor-location-chips .doctor-location-chip:focus-visible {
  background-color: var(--brand-charcoal-green, #535B56);
  color: #fff;
  border-color: var(--brand-charcoal-green, #535B56);
}

body.location-frankfort {
  --accent-color: #A6753E;
  --accent-color-dark: #845A28;
  --accent-color-soft: rgba(166, 117, 62, 0.10);
}

body.location-oak-lawn {
  --accent-color: #3E4540;
  --accent-color-dark: #2A2F2C;
  --accent-color-soft: rgba(62, 69, 64, 0.10);
}

/* ---------- Sub-navigation ---------- */
.microsite-subnav {
  background: var(--accent-color, var(--brand-charcoal-green));
  padding: 0.6rem 0;
  position: relative;
  z-index: 50;
}

.microsite-subnav .container {
  max-width: 1320px;
}

.microsite-subnav-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.microsite-subnav .subnav-link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.microsite-subnav .subnav-link:hover,
.microsite-subnav .subnav-link:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.microsite-subnav .subnav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.25);
  font-weight: 600;
}

.microsite-subnav .subnav-link--secondary {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* ---------- Microsite homepage hero ----------
   The microsite home (`/frankfort/`, `/oak-lawn/`) renders an
   `#frankfort-hero` / `#oak-lawn-hero` band with `text-white` content.
   The accent-color gradient is the fallback background; on top of it
   we layer the same shared background video used on the primary site,
   plus a tinted overlay using the location's accent palette so each
   location still feels distinct. `position: relative` + `overflow:
   hidden` so the absolutely-positioned `.background-video-container`
   inside the hero is contained and clipped to the hero's bounds. */
#orland-park-hero,
#frankfort-hero,
#oak-lawn-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
              var(--accent-color-dark, #845A28) 0%,
              var(--accent-color, #A6753E) 100%);
  color: #fff;
}

/* Per-location hero-overlay tints (consumed by the global overlay rule in
   modern-header-modern.css `.background-video-container-overlay`). Each
   location keeps its accent palette over the shared video footage. */
body.location-orland-park {
  --hero-overlay-corner-1: rgba(75, 65, 50, 0.85);
  --hero-overlay-corner-2: rgba(155, 136, 112, 0.72);
  --hero-overlay-tint:    rgba(47, 51, 47, 0.32);
}
body.location-frankfort {
  --hero-overlay-corner-1: rgba(132, 90, 40, 0.88);
  --hero-overlay-corner-2: rgba(166, 117, 62, 0.78);
  --hero-overlay-tint:    rgba(54, 38, 22, 0.42);
}
body.location-oak-lawn {
  --hero-overlay-corner-1: rgba(42, 47, 44, 0.92);
  --hero-overlay-corner-2: rgba(62, 69, 64, 0.78);
  --hero-overlay-tint:    rgba(28, 31, 29, 0.45);
}

/* ---------- Microsite hero accent ---------- */
body.microsite #inside-header {
  background: var(--accent-color-soft, rgba(189, 143, 99, 0.10));
  border-bottom: 3px solid var(--accent-color, var(--brand-copper));
}

/* Microsite inside-header sits on a LIGHT tinted background, so
   override the global white heading/sub colors to dark text. */
body.microsite #inside-header h1 {
  color: var(--primary-color);
}

body.microsite #inside-header .hp-section-sub {
  color: #555;
}

/* Eyebrow inside the microsite inside-header sits on the light tinted accent
   background, so override clue.css's `#inside-header .hp-eyebrow` white rule
   (which is correct for the primary site's dark gradient header). Specificity
   needs the #id to beat the global rule. */
body.microsite #inside-header .hp-eyebrow {
  color: var(--accent-color, var(--brand-copper));
}

body.microsite .hp-eyebrow,
body.microsite .contact-gallery-eyebrow {
  color: var(--accent-color, var(--brand-copper));
}

/* Make the primary CTA buttons on microsite pages use the location accent
   so calls-to-action visually tie to the active location. */
body.microsite .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

body.microsite .btn-primary:hover,
body.microsite .btn-primary:focus-visible {
  background-color: var(--accent-color-dark);
  border-color: var(--accent-color-dark);
}

body.microsite .btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

body.microsite .btn-outline-primary:hover,
body.microsite .btn-outline-primary:focus-visible {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

/* ---------- Sister-location cards (microsite landing pages) ---------- */
.sister-locations {
  background: var(--brand-linen, #F5F2EF);
}

.sister-location-card {
  background: #fff;
  border: 1px solid rgba(83, 91, 86, 0.10);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(35, 32, 28, 0.04);
}

/* ---------- Microsite "portal coming soon" placeholder ---------- */
.portal-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  background: rgba(162, 150, 141, 0.15);
  color: var(--brand-taupe, #A2968D);
  font-size: 0.9rem;
  font-style: italic;
}


/* ========================================================================
   HOMEPAGE SOFT TINTS — brand-aligned overrides for clue.css defaults
   The base template ships with light blue tints (#f0f5fa, #e4edf6) that
   read as off-brand against the Charcoal Green / Copper / Linen palette.
   ======================================================================== */

/* Tinted section bands (e.g., Emergency Dental Care) — warm linen */
.hp-section-tinted {
  background-color: var(--brand-linen, #F5F2EF);
}

/* Highlight chips ("Same-Day Appointments", etc.) — soft copper */
.hp-chip {
  background: rgba(189, 143, 99, 0.12);
  color: var(--primary-color);
}

/* Technology mini-cards — taupe-tinted border + brand-aligned hover */
.hp-tech-card {
  border-color: rgba(162, 150, 141, 0.30);
}
.hp-tech-card:hover {
  box-shadow: 0 2px 8px rgba(83, 91, 86, 0.12);
}

/* Contact card icon circle — soft copper to echo the chip treatment */
.contact-card-icon {
  background: rgba(189, 143, 99, 0.12);
}


/* ========================================================================
   HEADER LOGO ENTRANCE — choreographed reveal
   The logo is inlined as SVG (see partials/logo-inline-svg.njk) so the
   monogram marks and individual letters can animate independently.
   Choreography:
     1. The whole monogram (.logo-marks group — copper accents + charcoal
        signature stroke) draws in left-to-right via clip-path (0.0s – 1.0s)
     2. AESTHETIC letters fade up one at a time, ~40ms apart (0.55s+)
     3. DENTISTRY letters follow, slightly later (0.75s+)
   Total runtime ~1.5s. Letters use transform-box: fill-box so per-glyph
   translateY anchors at the glyph itself, not the SVG viewBox origin.
   ======================================================================== */

/* Monogram: all marks draw in together as one unified L→R sweep */
@keyframes logoMarksDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Letters: fade + rise, anchored at each glyph */
@keyframes logoLetterIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header-logo .logo-marks {
  animation: logoMarksDraw 1.0s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.header-logo .logo-word use {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: logoLetterIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* AESTHETIC — 9 letters, staggered ~40ms apart, starts at 0.55s */
.header-logo .logo-word-aesthetic use:nth-child(1) { animation-delay: 0.55s; }
.header-logo .logo-word-aesthetic use:nth-child(2) { animation-delay: 0.59s; }
.header-logo .logo-word-aesthetic use:nth-child(3) { animation-delay: 0.63s; }
.header-logo .logo-word-aesthetic use:nth-child(4) { animation-delay: 0.67s; }
.header-logo .logo-word-aesthetic use:nth-child(5) { animation-delay: 0.71s; }
.header-logo .logo-word-aesthetic use:nth-child(6) { animation-delay: 0.75s; }
.header-logo .logo-word-aesthetic use:nth-child(7) { animation-delay: 0.79s; }
.header-logo .logo-word-aesthetic use:nth-child(8) { animation-delay: 0.83s; }
.header-logo .logo-word-aesthetic use:nth-child(9) { animation-delay: 0.87s; }

/* DENTISTRY — 9 letters, staggered, starts at 0.75s (overlaps with AESTHETIC) */
.header-logo .logo-word-dentistry use:nth-child(1) { animation-delay: 0.75s; }
.header-logo .logo-word-dentistry use:nth-child(2) { animation-delay: 0.79s; }
.header-logo .logo-word-dentistry use:nth-child(3) { animation-delay: 0.83s; }
.header-logo .logo-word-dentistry use:nth-child(4) { animation-delay: 0.87s; }
.header-logo .logo-word-dentistry use:nth-child(5) { animation-delay: 0.91s; }
.header-logo .logo-word-dentistry use:nth-child(6) { animation-delay: 0.95s; }
.header-logo .logo-word-dentistry use:nth-child(7) { animation-delay: 0.99s; }
.header-logo .logo-word-dentistry use:nth-child(8) { animation-delay: 1.03s; }
.header-logo .logo-word-dentistry use:nth-child(9) { animation-delay: 1.07s; }


/* ========================================================================
   SUBTLE SCROLL REVEAL — softer fadeInUp + fadeIn
   Animate.css 4 ships fadeInUp with translate3d(0, 100%, 0), which slides
   each element by its entire height. That feels aggressive on tall
   sections. Override with a 24px rise + slight ease so the reveal reads
   as gentle, paigemead-style polish rather than a slideshow.
   ======================================================================== */

@keyframes subtleFadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.animate__animated.animate__fadeInUp {
  animation-name: subtleFadeInUp;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.animate__animated.animate__fadeIn {
  animation-duration: 0.9s;
}


@media (prefers-reduced-motion: reduce) {
  .header-logo .logo-marks,
  .header-logo .logo-word use {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}


/* ========================================================================
   EDITORIAL REFINEMENT — site-wide
   The homepage hero established an editorial, magazine-feel direction:
   squared corners, uppercase tracked CTAs, slightly warmer linen tint.
   These rules carry that direction across the rest of the site so the
   feel is consistent on inside pages, microsites, etc.
   ======================================================================== */

/* Top contact bar — uppercase tracked hours, squared CTAs */
.top-contact-bar {
  background: #ffffff;
  border-bottom: 1px solid rgba(83, 91, 86, 0.12);
}
.top-contact-bar #dynamic-office-hours {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.top-contact-bar .btn,
.header-cta-buttons .btn {
  border-radius: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
}

/* Section eyebrow labels — tighter uppercase tracking, slightly smaller */
.hp-eyebrow {
  letter-spacing: 0.22em;
  font-size: 0.72rem;
}

/* Section headings — slight negative tracking for editorial feel */
.hp-section-heading {
  letter-spacing: -0.005em;
  font-weight: 300;
}

/* Squared button corners across the site */
.btn {
  border-radius: 0;
}

/* Primary / outline-primary CTAs — uppercase tracked editorial style */
.btn-primary,
.btn-outline-primary {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Tinted section bands — slightly warmer linen than the default */
.hp-section-tinted {
  background-color: #F1ECE5;
}

/* Contact cards — squared corners */
.contact-card,
.contact-card-icon {
  border-radius: 0;
}


/* ========================================================================
   SIENNA ACCESSIBILITY WIDGET — brand color overrides
   The widget ships with hard-coded blues (#0848ca header / #0048ff outline /
   #326cff gradient). Repaint with the Aesthetic Dentistry palette so it
   visually belongs to the site. The widget's own rules use !important, so
   these overrides need it too.
   ======================================================================== */

/* Selectors are scoped through `body` to outrank the widget's own CSS,
   which is injected at runtime via JS (later in the DOM than client.css). */

/* Floating launcher button: copper gradient + charcoal-green outline */
body .asw-menu-btn {
  background: var(--brand-copper, #BD8F63) !important;
  background: linear-gradient(96deg, var(--accent-color-light, #D0A883), var(--brand-copper, #BD8F63)) !important;
  outline-color: var(--brand-charcoal-green, #535B56) !important;
  box-shadow: 0 5px 15px rgba(83, 91, 86, 0.18), 0 2px 4px rgba(83, 91, 86, 0.12) !important;
}

/* Panel header bar */
body .asw-menu-header {
  background-color: var(--brand-charcoal-green, #535B56) !important;
}

/* "Reset settings" button at the panel footer */
body .asw-menu-reset-footer-btn {
  background: var(--brand-charcoal-green, #535B56) !important;
}

/* Selected option tile border (active state for any toggle) */
body .asw-selected {
  border-color: var(--brand-copper, #BD8F63) !important;
}

/* ========================================================================
   Multi-location footer + location-picker modals
   ----------------------------------------------------------------------
   Added 2026-06-02 alongside the call-modal / portal-modal sitewide
   pickers and the 3-location footer directory. Each footer card is a
   "this office's details" surface; modal cards are a "pick your office"
   surface. Both share light styling on a dark background.
   ======================================================================== */

.footer-location-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
}

.footer-location-card .footer-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 0.5rem;
}

.footer-hours-list li {
  padding-bottom: 0.15rem;
}

.footer-portal-links .footer-subheading {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 600;
}

.footer-portal-links ul a:hover {
  text-decoration: underline !important;
}

/* Picker modal — sits above the slide menu (z-index 1060–1080 in
   modern-header-modern.css) so it isn't hidden when triggered from
   inside the slide-out nav. Bootstrap's default `.modal` z-index is
   1055 which lands BELOW the slide menu, causing the modal to render
   off-screen / hidden. Backdrop sits between slide-menu and modal.

   Juicer's homepage-only embed injects broad `.modal` rules after this
   stylesheet, including max-width, padding, margin, and position values
   intended for its own UI. This selector is deliberately more specific
   than `.modal`, so our Bootstrap modals keep their full-viewport shell
   without resorting to `!important` centering. */
.location-picker-modal.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  z-index: 2000;
}
.modal-backdrop.show {
  z-index: 1999;
}

.location-picker-modal .modal-content {
  border-radius: 0.75rem;
}

/* Call-Us modal: large tap targets, location name + phone stacked */
.call-location-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding-block: 0.85rem;
}

.call-location-btn .call-location-name {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.call-location-btn .call-location-phone {
  font-size: 0.9rem;
  opacity: 0.92;
}

.location-picker-card {
  background-color: var(--brand-linen, #F5F2EF);
  border: 1px solid rgba(83, 91, 86, 0.12);
  border-radius: 0.5rem;
  transition: box-shadow 0.18s ease;
}

.location-picker-card:hover,
.location-picker-card:focus-within {
  box-shadow: 0 4px 16px rgba(83, 91, 86, 0.12);
}

.location-picker-card h3 {
  color: var(--brand-charcoal-green, #535B56);
}

.location-picker-card address a,
.location-picker-card address {
  color: var(--brand-charcoal-green, #535B56);
}

/* Slide-submenu button reset for the in-nav modal triggers
   (Patient Forms / Pay Online / Patient Login in Patient Center) */
.slide-submenu li button.slide-submenu-link {
  color: inherit;
  cursor: pointer;
}

.slide-submenu li button.slide-submenu-link:focus-visible {
  outline: 2px solid var(--brand-copper, #BD8F63);
  outline-offset: 2px;
}

/* Dr. Hutnik's headshot is a tall portrait — anchor the crop to the top so the
   top of his head is never cut off, on every page the card appears (root "Meet
   Our Doctors" grid, Frankfort homepage, individual bio). Per 2026-06-23 client
   updates: the head-crop fix previously applied only on the Frankfort homepage. */
.hp-people-img--alexander-hutnik img {
  object-position: center top;
}

/* Doctor-card name link — inherit the heading color, copper underline on
   hover/focus. Names link to each doctor's individual bio page so patients can
   click through for more information (per 2026-06-23 client request). */
.hp-people-name-link {
  color: inherit;
  text-decoration: none;
}
.hp-people-name-link:hover,
.hp-people-name-link:focus-visible {
  color: var(--brand-copper, #BD8F63);
  text-decoration: underline;
}