/* V25: requested hero spacing, quieter navigation, Home carousel and beige appearance. */

/* Keep the opening label in place and lower the following copy by about 2 mm. */
body[data-page="home"] .hero-section .hero-copy > .eyebrow {
  font-size: 13px !important;
  line-height: 18px;
  margin-bottom: 22px;
}
@media (min-width: 821px) and (max-height: 740px) {
  body[data-page="home"] .hero-section .hero-copy > .eyebrow { margin-bottom: 18px; }
}
@media (max-width: 820px) {
  body[data-page="home"] .hero-section .hero-copy > .eyebrow {
    font-size: 12px !important;
    line-height: 14px;
    margin-bottom: 10px;
  }
}

/* Solid surfaces and a restrained active link replace the header's glow and lift. */
.site-header {
  background: var(--warm);
  border-bottom-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header :is(.nav-button,.nav-cta,.desktop-theme-toggle,.menu-trigger) {
  box-shadow: none !important;
  text-shadow: none;
  filter: none;
  background-image: none;
  transform: none !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.site-header .desktop-nav .nav-button {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  border-radius: 8px;
}
.site-header .desktop-nav .nav-button.active {
  color: var(--blue);
  background: transparent;
  border-color: transparent;
}
.site-header .desktop-nav .nav-button::after {
  display: block;
  inset: auto 13px 3px;
  width: auto;
  height: 2px;
  border-radius: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.site-header .desktop-nav .nav-button.active::after { transform: scaleX(1); }
.site-header .desktop-nav .nav-button:hover { color: var(--blue); background: var(--menu-row); }
.site-header .nav-cta { background: var(--blue); color: #fff; border-radius: 10px; }
.site-header .nav-cta:hover { background: var(--blue-dark); }
.site-header :is(.desktop-theme-toggle,.menu-trigger) { background: var(--paper); border-color: var(--line); }
.site-header :is(a,button):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Home only: distinct side controls, visible guidance and native touch scrolling. */
body[data-page="home"] .treatment-carousel { --carousel-control: 60px; --carousel-gap: 16px; }
body[data-page="home"] .treatment-carousel-caption { margin-bottom: 16px; }
body[data-page="home"] .treatment-carousel-caption p {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft-surface);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
body[data-page="home"] .treatment-carousel-caption p > span {
  display: inline-block;
  font-size: 23px;
  line-height: 1;
  color: var(--blue);
}
body[data-page="home"] .treatment-carousel.is-hint-visible .treatment-carousel-caption p > span {
  animation: treatment-swipe-hint 1.15s ease-in-out 1;
}
body[data-page="home"] .treatment-carousel-arrow {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  opacity: 1;
  box-shadow: 0 3px 9px rgb(23 40 64 / 9%);
  transition: background-color .18s ease, border-color .18s ease;
}
body[data-page="home"] .treatment-carousel-arrow svg { width: 28px; height: 28px; }
body[data-page="home"] .treatment-carousel-arrow:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); }
body[data-page="home"] .treatment-carousel-arrow:disabled {
  background: var(--soft-surface);
  color: var(--muted);
  border-color: var(--muted);
  box-shadow: none;
  opacity: 1;
}
body[data-page="home"] #home-treatment-track {
  scroll-behavior: auto;
  scrollbar-color: var(--blue) var(--menu-row);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
body[data-page="home"] #home-treatment-track > * { scroll-snap-stop: always; }
body[data-page="home"] #home-treatment-track:is(.is-scrolling,.is-dragging) { scroll-snap-type: none; }
body[data-page="home"] #home-treatment-track.is-dragging,
body[data-page="home"] #home-treatment-track.is-dragging * { cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] #home-treatment-track { cursor: grab; }
}
@media (max-width: 820px) {
  body[data-page="home"] .treatment-carousel { --carousel-control: 44px; --carousel-gap: 12px; }
  body[data-page="home"] .treatment-carousel-arrow svg { width: 23px; height: 23px; }
  body[data-page="home"] .treatment-carousel-caption { gap: 10px; }
  body[data-page="home"] .treatment-carousel-caption p { padding: 8px 10px; font-size: 13px; gap: 8px; }
}
@keyframes treatment-swipe-hint {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(6px); }
  65% { transform: translateX(-6px); }
}

/* Beige replaces the old dark appearance. A separate key avoids legacy dark overrides. */
html[data-theme="beige"] {
  color-scheme: light;
  --ink: #302b25;
  --muted: #62584e;
  --blue: #65503c;
  --blue-dark: #47382b;
  --blue-soft: #ebe2d5;
  --red: #8a4137;
  --red-dark: #72342d;
  --warm: #f4eee5;
  --paper: #fffdf9;
  --line: #d6caba;
  --aqua: #e6ede5;
  --text-main: #302b25;
  --text-sub: #62584e;
  --inverse-main: #fffdf9;
  --inverse-sub: #f2eadf;
  --background: var(--warm);
  --foreground: var(--ink);
  --card: #fffdf9;
  --card-foreground: var(--ink);
  --popover: #fffdf9;
  --popover-foreground: var(--ink);
  --primary: var(--blue);
  --primary-foreground: #fffdf9;
  --secondary: #ebe2d5;
  --secondary-foreground: var(--ink);
  --muted-foreground: var(--muted);
  --accent: #ebe2d5;
  --accent-foreground: var(--ink);
  --border: var(--line);
  --input: #9c8d7a;
  --ring: var(--blue);
  --page-backdrop: #f4eee5;
  --surface-wash: #f4eee5;
  --soft-surface: #fffdf9;
  --soft-shadow: 0 12px 32px rgb(63 46 29 / 7%);
  --scene-blue: #cfc3b0;
  --scene-rose: #d8c1b7;
  --menu-panel: #fffdf9;
  --menu-row: #f0e8dc;
  --menu-active: #e8ddce;
  --menu-line: #d6caba;
  --menu-icon: #ebe2d5;
  --menu-label: #302b25;
  --menu-action: #65503c;
  --menu-on-action: #fffdf9;
}
html[data-theme="beige"] body { background: var(--warm); color: var(--ink); }
html[data-theme="beige"] .dental-ambient { opacity: .28; }
html[data-theme="beige"] :is(.hero-section,.inner-hero,.legal-hero,.legal-hero-terms,.home-specialists,.home-credentials,.trust-strip,.services-section,.home-contact,.home-contact-match,.home-visit,.doctors-section,.clinic-gallery,.treatments-list,.treatment-bento-section,.faq-section,.legal-section,.map-section,.full-reviews,.booking-page,.contact-booking-panel) {
  background: var(--warm);
  border-color: var(--line);
}
html[data-theme="beige"] :is(.hero-qualification,.doctor-degree-badge,.hero-proof,.doctor-speciality,.visit-hours,.legal-highlight,.legal-inline-note,.legal-meta span,.qualification-note) {
  --text-main: var(--ink);
  --text-sub: var(--muted);
  background: var(--blue-soft);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="beige"] :is(.hero-qualification,.doctor-degree-badge,.hero-hours-badge,.hero-location-card) :is(strong,span,small,svg) { color: var(--ink); }
html[data-theme="beige"] .hero-photo-details .hero-hours-badge { background: var(--paper); border-color: var(--line); border-left-color: var(--red); }
html[data-theme="beige"] .hero-photo-details .hero-hours-badge > span::before { color: var(--blue); }
html[data-theme="beige"] :is(.hero-location-card,.doctor-card,.treatment-row,.treatment-more,.treatment-more-grid > div,.contact-summary > div,.appointment-form,.legal-nav,.legal-content,.faq-item,.contact-rail,.artie-sheet[data-slot="sheet-content"]) {
  --text-main: var(--ink);
  --text-sub: var(--muted);
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="beige"] :is(.doctor-portrait,.hero-visual)::before { background: var(--blue-soft); }
html[data-theme="beige"] :is(.hero-specialty > span,.home-treatment-copy li,.treatment-bento-copy li,.service-tags span,.doctor-speciality,.credential-copy li) { border-color: var(--line); background: var(--blue-soft); }
html[data-theme="beige"] body[data-page="home"] #qualifications .credential-copy li { background: transparent; }
html[data-theme="beige"] :is(.home-treatment-copy > span,.treatment-bento-copy > span,.doctor-card .doctor-title,.hero-qualification strong,.hero-qualification div > span,.map-view-label) { color: var(--blue); }

/* Pale panels own dark text, including the footer, booking guide and assistant. */
html[data-theme="beige"] :is(.clinic-story,.values-section,.site-footer,.contact-banner,.home-treatment-more,.results-section,.appointment-section,.treatment-cta-card,.legal-contact-card,.artie-sheet-head,.booking-guide) {
  --text-main: #302b25;
  --text-sub: #62584e;
  background: #e8ddce;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="beige"] :is(.clinic-story,.values-section,.site-footer,.contact-banner,.home-treatment-more,.results-section,.appointment-section,.treatment-cta-card,.legal-contact-card,.artie-sheet-head,.booking-guide) :is(h1,h2,h3,h4,h5,h6,.eyebrow,.legal-kicker,strong,span,a,svg) { color: var(--text-main); }
html[data-theme="beige"] :is(.values-grid article,.footer-patient-guide,.footer-appointment-panel,.client-footer .footer-invitation,.footer-link-button,.legal-contact-card,.contact-banner) { background: var(--paper); border-color: var(--line); }
html[data-theme="beige"] :is(.footer-grid,.footer-bottom,.footer-closing-line,.footer-patient-guide,.footer-hours-highlight,.footer-contact a,.footer-specialists,.footer-link-button) { border-color: var(--line); }
html[data-theme="beige"] .site-footer .footer-link-button:hover { background: var(--blue-soft); border-color: var(--blue); }
html[data-theme="beige"] :is(.story-copy li strong,.client-footer .footer-invitation h2,.client-footer .footer-patient-guide h2,.client-footer .footer-closing-line) { color: var(--ink) !important; }

/* Solid primary actions; secondary actions keep dark labels on white. */
html[data-theme="beige"] :is(.primary-button,.nav-cta,.doctor-cta,.appointment-submit,.static-menu-book,.assistant-button,.artie-composer button,.mobile-action-dock .dock-book,.mobile-action-dock .dock-call) {
  --text-main: #fffdf9;
  --text-sub: #fffdf9;
  background: var(--blue);
  color: #fffdf9;
  border-color: var(--blue);
  box-shadow: none;
}
html[data-theme="beige"] :is(.primary-button,.nav-cta,.doctor-cta,.appointment-submit,.static-menu-book,.assistant-button,.artie-composer button,.mobile-action-dock .dock-book,.mobile-action-dock .dock-call) :is(span,strong,svg) { color: #fffdf9; }
html[data-theme="beige"] :is(.primary-button,.nav-cta,.doctor-cta,.appointment-submit,.static-menu-book):hover { background: var(--blue-dark); color: #fffdf9; border-color: var(--blue-dark); }
html[data-theme="beige"] :is(.secondary-button,.white-button,.outline-light-button,.link-button,.map-below-link,.review-filters button,.assistant-actions a,.artie-suggestions button,.home-treatment-copy > strong,.legal-nav a,.legal-external-links a,.contact-rail .rail-action) {
  --text-main: #302b25;
  --text-sub: #62584e;
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="beige"] :is(.review-filters button.active,.mobile-doctor-tabs button.active,.static-theme-switch button.active) { background: var(--blue-soft); border-color: var(--blue); color: var(--ink); box-shadow: none; }
html[data-theme="beige"] :is(.mobile-doctor-tabs,.mobile-action-dock,.contact-rail) { background: var(--paper); border-color: var(--line); }
html[data-theme="beige"] .mobile-action-dock .dock-whatsapp { background: #e6ede5 !important; color: #2e5141 !important; }
html[data-theme="beige"] .mobile-action-dock .dock-whatsapp :is(span,strong,svg) { color: #2e5141 !important; }
html[data-theme="beige"] .desktop-theme-toggle .theme-moon { display: none; }
html[data-theme="beige"] .desktop-theme-toggle .theme-sun { display: block; }

html[data-theme="beige"] :is(.granite-section,section.reviews-home) {
  --ink: #302b25;
  --text-main: #302b25;
  --text-sub: #62584e;
  --blue: #65503c;
  --red: #8a4137;
  --soft-surface: #fffdf9;
  --line: #d6caba;
  background: #f4eee5;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="beige"] .review-card { background: var(--paper); color: var(--ink); border-color: var(--line); }
html[data-theme="beige"] .review-card.tone-ivory { background: #fffdf9; }
html[data-theme="beige"] .review-card:is(.tone-grey,.tone-blue) { background: #e6ede5; }
html[data-theme="beige"] .review-card.tone-rose { background: #f2e4dc; }
html[data-theme="beige"] :is(.review-card blockquote,.review-author strong,.review-stars,.reviews-intro .google-reviews-title) { color: var(--ink); }
html[data-theme="beige"] .review-arrow { background: var(--paper) !important; color: var(--blue) !important; border-color: var(--blue) !important; }
html[data-theme="beige"] .reviews-home .reviews-actions > .link-button { background: var(--blue); color: #fffdf9; border-color: var(--blue); }

/* Inputs, selected options, guidance and validation remain readable in every booking step. */
html[data-theme="beige"] :is(.booking-survey,.booking-dialog,.appointment-form,.chat-message-body) { --text-main: #302b25; --text-sub: #62584e; color: var(--ink); }
html[data-theme="beige"] :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea,.specialist-choices label > span,.quick-concerns button,.pain-scale label span) { background: var(--paper); border-color: #9c8d7a; color: var(--ink); }
html[data-theme="beige"] :is(input,select,textarea) { color-scheme: light; accent-color: var(--blue); }
html[data-theme="beige"] :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="beige"] .specialist-choices input:checked + span { background: var(--blue-soft); border-color: var(--blue); }
html[data-theme="beige"] .quick-concerns button[aria-pressed="true"],
html[data-theme="beige"] .pain-scale input:checked + span { background: var(--blue); color: #fffdf9; border-color: var(--blue); }
html[data-theme="beige"] .booking-dialog .booking-guide :is(p,li,h2,.eyebrow) { color: var(--ink) !important; }
html[data-theme="beige"] .booking-progress li { border-color: #9c8d7a; color: var(--ink); }
html[data-theme="beige"] .booking-dialog .booking-progress li[aria-current="step"] { background: var(--paper); color: var(--ink) !important; border-color: var(--blue); }
html[data-theme="beige"] .booking-dialog .booking-guide .booking-contact-actions > a { background: var(--paper); border-color: #9c8d7a; color: var(--blue) !important; }
html[data-theme="beige"] .booking-dialog .booking-guide .booking-contact-actions > a:hover { background: var(--blue-soft); }
html[data-theme="beige"] .booking-dialog .booking-guide .booking-contact-actions > a[href^="https://wa.me/"] { background: #e6ede5; color: #2e5141 !important; border-color: #8ca293; }
html[data-theme="beige"] .booking-dialog .booking-guide .booking-contact-actions > a[href^="https://wa.me/"]:hover { background: #d6e3d8; }
html[data-theme="beige"] :is(.booking-dialog,.booking-guide) :is(button,a):focus-visible { outline-color: var(--blue); }
html[data-theme="beige"] .pain-panel,
html[data-theme="beige"] .chat-message.urgent .chat-message-body { background: #f2e4dc; border-color: #b99a8c; color: var(--ink); }
html[data-theme="beige"] .survey-text-button { color: var(--red); }
html[data-theme="beige"] .survey-hours { background: #e6ede5; border-color: #8ca293; color: #2e5141; }
html[data-theme="beige"] .survey-actions .whatsapp-submit { background: #2e5141; border-color: #2e5141; color: #fff; }
html[data-theme="beige"] .survey-topline progress { accent-color: var(--blue); }
html[data-theme="beige"] .survey-topline progress::-webkit-progress-bar { background: var(--blue-soft); }
html[data-theme="beige"] .survey-topline progress::-webkit-progress-value { background: var(--blue); }
html[data-theme="beige"] .survey-topline progress::-moz-progress-bar { background: var(--blue); }
html[data-theme="beige"] :is(.artie-context-strip,.mini-artie,.chat-message-body,.artie-suggestions,.artie-composer,.artie-disclaimer) { background: var(--paper); border-color: var(--line); color: var(--ink); }
html[data-theme="beige"] .chat-message.user .chat-message-body { --text-main: #302b25; --text-sub: #62584e; background: var(--blue-soft); color: var(--ink); }
html[data-theme="beige"] :is(a,button,input,select,textarea,summary):focus-visible { outline-color: var(--blue); }
html[data-theme="beige"] .booking-dialog::backdrop { background: rgb(48 43 37 / 58%); }
html[data-theme="beige"] .static-artie-close { color: var(--ink); background: var(--paper); border-color: #9c8d7a; }
html[data-theme="beige"] .static-artie-close:hover { background: var(--blue-soft); }
html[data-theme="beige"] :is(.service-index,.treatment-number,.degree-mark,.home-treatment-copy > strong b,.treatment-bento-copy strong b) { background: var(--blue); color: #fffdf9; border-color: var(--blue); box-shadow: none; }
html[data-theme="beige"] .about-doctor-tabs button[aria-selected="true"] { background: var(--blue); color: #fffdf9; }
html[data-theme="beige"] .about-doctor-tabs button:last-child[aria-selected="true"] { background: var(--red); color: #fffdf9; }
html[data-theme="beige"] .doctor-portrait { background: var(--blue-soft); }

@media (prefers-reduced-motion: reduce) {
  .site-header :is(.nav-button,.nav-cta,.desktop-theme-toggle,.menu-trigger),
  .site-header .desktop-nav .nav-button::after,
  body[data-page="home"] .treatment-carousel-arrow { transition: none; }
  body[data-page="home"] .treatment-carousel.is-hint-visible .treatment-carousel-caption p > span { animation: none; }
}