/* Pride Dental Group · components
   Loaded after styles.css. Defines NO colours of its own: every colour here is a
   variable from styles.css, so light and dark come from one place and this file
   can never fight the palette. It replaces site-refresh.css, which redefined the
   variables with the old greys and forced the footer with !important. */

/* ---------- Base ---------- */
body { background: var(--bg-secondary); color: var(--text-primary); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { letter-spacing: -.01em; color: var(--text-primary); }
/* One heading scale for the whole page. */
h1 { font-weight: 800; letter-spacing: -.03em; }
h2 { font-weight: 700; letter-spacing: -.02em; }
h3 { font-weight: 600; }
p { color: var(--text-secondary); }
a { color: var(--accent-text); }
.container { max-width: 1120px; }

/* ---------- Buttons: one style, both themes ---------- */
.btn { border-radius: 10px; padding: .85rem 1.4rem; font-weight: 600; font-size: 1rem; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.btn:active { transform: scale(.98); }
.btn-primary, .nav-appointment-btn, .map-actions .directions-btn, .directions-btn, .intake-cta {
    background: var(--btn-bg) !important; color: var(--btn-text) !important; box-shadow: none !important; border: 0 !important;
}
.btn-primary:hover, .nav-appointment-btn:hover, .directions-btn:hover, .intake-cta:hover {
    background: var(--btn-hover) !important; color: var(--btn-text) !important; transform: none; box-shadow: none !important;
}
.btn-secondary { background: var(--bg-primary) !important; color: var(--text-primary) !important; border: 1.5px solid var(--border-color) !important; }
.btn-secondary:hover { border-color: var(--sand-deep) !important; color: var(--sand-deep) !important; background: var(--bg-primary) !important; }

/* ---------- Navbar ---------- */
.navbar, .navbar.scrolled { background: var(--bg-primary) !important; backdrop-filter: none; box-shadow: none !important; border-bottom: 1px solid var(--border-color) !important; }
.nav-container { max-width: 1120px; }
.nav-logo { color: var(--text-primary); font-weight: 700; font-size: 1.1rem; }
.nav-link { color: var(--text-primary) !important; font-weight: 500; font-size: .95rem; }
.nav-link:hover, .nav-link.active { color: var(--sand-deep) !important; }
.nav-link::after { background: var(--sand-deep) !important; }
.nav-appointment-btn { border-radius: 10px !important; padding: 11px 18px; font-size: .95rem; }
.nav-toggle .bar { background: var(--text-primary); }
.nav-menu.active { background: var(--bg-primary) !important; border-top: 1px solid var(--border-color); box-shadow: var(--shadow-lg); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--bg-secondary) 0%, var(--bg-accent) 100%) !important; padding: 130px 0 70px; min-height: auto; }
.hero::before, .hero::after { display: none !important; }
.hero-container { max-width: 1120px; }
.hero-content h1 { font-weight: 800 !important; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.08; margin-bottom: 1.1rem; color: var(--text-primary); text-wrap: balance; }
.hero-content > p { font-size: 1.15rem; max-width: 34rem; margin-bottom: 1.8rem; }
.hero-buttons { gap: .8rem; margin-bottom: 1.8rem; }
.hero-buttons .btn { padding: 1rem 1.5rem; font-size: 1.05rem; }
.hero-features { gap: .6rem; flex-wrap: wrap; }
.hero-features .feature { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 999px; padding: .5rem .9rem; color: var(--text-secondary); }
.hero-features .feature i { color: var(--sand-deep) !important; }
.google-reviews-badge { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

/* ---------- Sections: the page ground with bands one tone up, in both themes ---------- */
section { scroll-margin-top: 80px; }
.services, .doctors-profiles, .office-tour-section, .reviews-section, .insurance, .appointment-section { padding: 64px 0 !important; background: var(--bg-secondary) !important; }
.doctors-profiles, .insurance { background: var(--bg-primary) !important; }
.section-header { margin-bottom: 2.2rem; }
.section-header h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: .6rem; }
.section-header p { font-size: 1.1rem; max-width: 40rem; margin: 0 auto; }

/* Cards */
.service-card, .insurance-card, .doctor-profile, .office-map, .modern-appointment-form, .review-slide, .review-content,
.footer-contact-card, .doctor-bio-card, .verification-badge, .cigna-verification, .map-actions, .tour-description {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary);
}
.service-card:hover, .insurance-card:hover, .doctor-profile:hover { transform: none !important; border-color: var(--sand) !important; box-shadow: var(--shadow-md) !important; }
.service-card h3, .insurance-card h4, .doctor-profile h3, .doctor-info h3, .form-header h3 { color: var(--text-primary) !important; }
.service-card li, .insurance-card li, .doctor-summary, .doctor-description, .review-text { color: var(--text-secondary) !important; }
.service-card li::before, .insurance-card li::before { color: var(--sand-deep) !important; }
.expand-icon { color: var(--text-light) !important; }
.doctor-profile-header:hover { background: var(--bg-secondary) !important; }

/* Icon tiles, everywhere an icon sits in a square: sand-pale tile, sand-deep icon.
   The dark tokens turn that into the dark sand-pale with sand. */
.service-icon, .doctor-avatar, .doctor-icon, .footer-card-icon,
.insurance-features .feature i, .tour-features i, .office-tour-section .feature i, .office-features i {
    background: var(--sand-pale) !important; color: var(--sand-deep) !important; box-shadow: none !important; border: 0 !important;
}
.service-icon i, .doctor-avatar i, .doctor-icon i, .footer-card-icon i { color: var(--sand-deep) !important; }
.doctor-specialties span, .highlight-item { background: var(--sand-pale) !important; color: var(--sand-deep) !important; border: 0 !important; }
.verified-label, .verification-text { color: var(--sand-deep) !important; }

/* Doctors: three photographs as one set */
.doctor-bio-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--radius); border: 1px solid var(--border-color); display: block; }
.doctor-info p, .doctor-summary { font-size: 1rem !important; }

/* Reviews */
.reviews-rating .stars i, .review-slide .stars i, .google-reviews-badge .stars i { color: var(--sand) !important; -webkit-text-stroke: .6px var(--sand-deep); }
.review-content { padding: 1.5rem !important; }
.dot { background: var(--border-color) !important; width: 12px; height: 12px; }
.dot.active { background: var(--sand-deep) !important; }
.reviews-carousel .carousel-btn, .carousel-nav button { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; width: 40px; height: 40px; font-size: 14px; }

/* Video tour */
.video-wrapper { border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important; border: 1px solid var(--border-color); overflow: hidden; }

/* Appointment */
.appointment-content { gap: 2rem; align-items: stretch; }
.modern-appointment-form { padding: 2.5rem 2rem !important; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.form-header h3 { font-size: 1.9rem; }
.form-header p { font-size: 1.05rem; }
.intake-cta { max-width: 22rem; margin: .5rem auto 0 !important; padding: 1.05rem 1.5rem !important; font-size: 1.1rem !important; border-radius: 10px !important; }
.office-map { margin: 0 !important; }
.map-actions .directions-btn, .directions-btn { border-radius: 10px !important; }

/* Floating controls (theme / language) */
.control-label, .control-dropdown, .control-dropdown a { background: var(--bg-primary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
.control-dropdown a:hover, .control-option:hover { background: var(--sand-pale) !important; color: var(--sand-deep) !important; }
.control-label i { color: var(--sand-deep) !important; }

/* Footer: warm ink by day, the dark surface by night. Text stays light in both. */
.footer { background: #1c1714 !important; color: #f4f4f5 !important; border-top: 1px solid rgba(255, 255, 255, .08); padding: 3.5rem 0 1.5rem !important; }
[data-theme="dark"] .footer { background: var(--bg-primary) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer { background: var(--bg-primary) !important; } }
.footer h4, .footer .footer-logo { color: var(--sand) !important; }
.footer p, .footer li, .footer a, .footer-contact-link, .footer-address, .footer-hours { color: #f4f4f5 !important; }
.footer .footer-card-subtitle, .footer-bottom { color: #a8a29e !important; }
.footer a:hover { color: var(--sand) !important; }
.footer-logo svg path, .footer-logo i { fill: var(--sand); color: var(--sand) !important; }
.footer-contact-card { background: #241e19 !important; border-color: rgba(255, 255, 255, .10) !important; box-shadow: none !important; }
[data-theme="dark"] .footer-contact-card { background: #1b1b1e !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-contact-card { background: #1b1b1e !important; } }
.footer-contact-card h4 { color: var(--sand) !important; }
.footer-card-icon { background: #2a2318 !important; }
.footer-card-icon i { color: var(--sand) !important; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .10) !important; }

/* Cookie banner */
.cookie-banner, .cookie-consent { background: var(--bg-primary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
[style*="rgba(46, 125, 50"], .verification-badge, .cigna-verification { border-color: var(--border-color) !important; }

@media (max-width: 768px) {
    .hero { padding: 100px 0 48px; }
    .services, .doctors-profiles, .office-tour-section, .reviews-section, .insurance, .appointment-section { padding: 48px 0 !important; }
    .modern-appointment-form { padding: 2rem 1.25rem !important; }
}

/* styles.css still carries dark-mode rules with higher specificity than the ones
   above ([data-theme="dark"] .btn-primary and friends). These win over them by
   matching their specificity and loading later, so the one button style holds
   at night too, and the page ground is the ground. */
[data-theme="dark"] .btn-primary, [data-theme="dark"] .nav-appointment-btn, [data-theme="dark"] .directions-btn, [data-theme="dark"] .intake-cta, [data-theme="dark"] .btn.btn-primary,
:root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .nav-appointment-btn, :root:not([data-theme="light"]) .directions-btn, :root:not([data-theme="light"]) .intake-cta {
    background: var(--btn-bg) !important; color: var(--btn-text) !important;
}
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .nav-appointment-btn:hover, [data-theme="dark"] .directions-btn:hover, [data-theme="dark"] .intake-cta:hover {
    background: var(--btn-hover) !important; color: var(--btn-text) !important;
}
[data-theme="dark"] body, html[data-theme="dark"] { background: var(--bg-secondary) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body, html:not([data-theme="light"]) { background: var(--bg-secondary) !important; } }

/* The grounds, pinned in dark mode against the older overrides: the nav and the
   cards on the surface, the page on the ground, bands one tone up, the hero on
   its gradient. Same values as by day, through the same variables. */
[data-theme="dark"] .navbar, [data-theme="dark"] .navbar.scrolled, [data-theme="dark"] .nav-menu.active,
:root:not([data-theme="light"]) .navbar, :root:not([data-theme="light"]) .navbar.scrolled { background: var(--bg-primary) !important; border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .hero, :root:not([data-theme="light"]) .hero { background: linear-gradient(160deg, var(--bg-secondary) 0%, var(--bg-accent) 100%) !important; }
[data-theme="dark"] .services, [data-theme="dark"] .office-tour-section, [data-theme="dark"] .reviews-section, [data-theme="dark"] .appointment-section,
:root:not([data-theme="light"]) .services, :root:not([data-theme="light"]) .office-tour-section, :root:not([data-theme="light"]) .reviews-section, :root:not([data-theme="light"]) .appointment-section { background: var(--bg-secondary) !important; }
[data-theme="dark"] .doctors-profiles, [data-theme="dark"] .insurance,
:root:not([data-theme="light"]) .doctors-profiles, :root:not([data-theme="light"]) .insurance { background: var(--bg-primary) !important; }

/* ---------- Phone: measured at 390px, fixed here ---------- */
/* Tap targets at 44px, everywhere a finger lands. */
.nav-appointment-btn { min-height: 44px; }
.reviews-carousel .carousel-btn, .carousel-nav button { width: 44px !important; height: 44px !important; }
.dot { width: 14px !important; height: 14px !important; padding: 12px !important; margin: 0 !important; box-sizing: content-box; background-clip: content-box; }
/* Eleven dots at a 38px hit area is wider than a phone: the row wraps instead of overflowing. */
.carousel-dots, .dots, .review-dots, .dots-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0 !important; max-width: 100% !important; }
.language-close { width: 44px !important; height: 44px !important; }
.cookie-btn { min-height: 44px; font-size: 14px !important; }
/* Nothing under 13px, and the small badge words at 11px, not 9. */
.cigna-text, .source-label { font-size: 13px !important; }
.dental-text { font-size: 11px !important; }
.footer-card-subtitle { font-size: 14px !important; }
@media (max-width: 768px) {
    /* The slide-in menu was leaving an 8px sliver visible at the left edge while closed. */
    .nav-menu:not(.active) { visibility: hidden; left: -110%; }
    .nav-menu.active { visibility: visible; }
    .hero-content h1 { font-size: 2rem; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .hero-features { justify-content: center; }
    .hero-seasonal { max-width: 100%; margin-top: .5rem; }
    .section-header h2 { font-size: 1.7rem; }
    .doctor-bio-photo { aspect-ratio: 1 / 1; }
    .footer { padding: 2.5rem 0 1.25rem !important; }
}

/* ---------- The theme and language controls, on the palette ---------- */
.control-label, .control-dropdown { border: 1px solid var(--border-color) !important; background: var(--bg-primary) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-md) !important; }
.control-label:hover { border-color: var(--sand) !important; }
.control-option { color: var(--text-primary) !important; border-bottom: 1px solid var(--border-color) !important; min-height: 44px; }
.control-option:hover, .control-option.active { background: var(--sand-pale) !important; color: var(--sand-deep) !important; }
[data-theme="dark"] .control-label, [data-theme="dark"] .control-dropdown, :root:not([data-theme="light"]) .control-label, :root:not([data-theme="light"]) .control-dropdown { border-color: var(--border-color) !important; background: var(--bg-primary) !important; }
/* The phone's full-screen language picker: a surface, not a blue wall. */
.language-overlay { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
.language-menu { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; }
.language-header h2 { color: var(--text-primary) !important; font-size: 1.4rem; }
.language-close { background: var(--sand-pale) !important; color: var(--sand-deep) !important; border: 0 !important; }
.language-option { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; min-height: 48px; }
.language-option:hover, .language-option.active { background: var(--sand-pale) !important; border-color: var(--sand) !important; color: var(--sand-deep) !important; }
.language-option .lang-code { color: var(--text-light) !important; }
/* The round phone buttons: the action ones in the button blue, the others in sand. */
.mobile-control-btn, .phone-btn, .language-btn { background: var(--btn-bg) !important; color: var(--btn-text) !important; }
.email-btn, .theme-btn { background: var(--sand-deep) !important; color: #ffffff !important; }

/* ---------- Languages ---------- */
/* Spanish, Polish, French and Italian run a third longer than English: the headline steps down one size so it holds to three or four lines. */
:lang(es) .hero-content h1, :lang(pl) .hero-content h1, :lang(fr) .hero-content h1, :lang(it) .hero-content h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; }
/* Urdu reads right to left. The document direction flips; these are the places that had a hard-coded left. */
[dir="rtl"] .hero-content, [dir="rtl"] .hero-content h1, [dir="rtl"] .hero-content > p, [dir="rtl"] .service-card, [dir="rtl"] .insurance-card, [dir="rtl"] .doctor-info, [dir="rtl"] .footer { text-align: right; }
[dir="rtl"] .nav-logo { flex-direction: row-reverse; }
[dir="rtl"] .service-card li, [dir="rtl"] .insurance-card li { padding-left: 0; padding-right: 1.5rem; }