/* Selected direction: Deep teal. Shared by all pages and all four languages. */
:root {
  --paper: #f8faf9;
  --white: #ffffff;
  --ink: #183b3a;
  --muted: #526966;
  --teal: #0f766e;
  --deep: #123e3a;
  --mint: #e9f3ef;
  --lime: #d9eee5;
  --line: #d6e4df;
  --berry: #9b2c68;
  --berry-hover: #7f2255;
  --on-deep: #d6e7e1;
  --control-border: #78938c;
  --image-surface: #eef1ed;
  --soft-hover: #f0f6f3;
  --header-surface: #fffffff5;
}

/* Light navigation with the two colors of the clinic's identity. */
.topline { background: var(--mint); }
.header, .mobile-dock { background: var(--header-surface); }
.brand-symbol, .brand-name { color: var(--teal); }
.brand-name .brand-accent { color: var(--berry); }
.brand-sub { color: var(--muted); }
.language-select {
  width: 146px;
  max-width: none;
  padding-left: 34px;
  background: transparent url('./assets/globe.svg') no-repeat 8px center;
  background-size: 20px 20px;
}
.navlinks a:hover, .footer-links a:hover, .footer-languages a:hover {
  color: var(--berry);
}
.text-link { border-color: var(--control-border); }
.text-link:hover { color: var(--berry); border-color: var(--berry); }
.button.light { border-color: var(--control-border); }
.button.light:hover { background: var(--mint); }

/* Berry identifies booking actions on light surfaces; teal remains the link color. */
.button:not(.light), .booking .button {
  color: var(--white);
  background: var(--berry);
  border-color: var(--berry);
}
.button:not(.light):hover, .booking .button:hover {
  background: var(--berry-hover);
  border-color: var(--berry-hover);
}
.mini-book { color: var(--berry); border-color: var(--berry); }
.mini-book:hover { color: var(--white); background: var(--berry); }

/* The main screen follows the selected dark teal / pale mint combination. */
.signature-hero { background: var(--deep); color: var(--white); }
.signature-copy h1 { color: var(--white); }
.signature-copy h1 em { color: var(--lime); }
.signature-copy .eyebrow,
.signature-copy > p,
.signature-copy .hero-consult-price,
.hero-assurance,
.hero-secondary { color: var(--on-deep); }
.signature-copy .eyebrow::before { background: var(--lime); }
.hero-secondary { border-color: var(--control-border); }
.hero-secondary:hover { color: var(--white); border-color: var(--white); }
.hero-assurance > span { border-color: var(--control-border); }
.signature-copy .button:not(.light) {
  color: var(--deep);
  background: var(--lime);
  border-color: var(--lime);
}
.signature-copy .button:not(.light):hover {
  background: var(--white);
  border-color: var(--white);
}
.signature-photo { background: var(--image-surface); }
.signature-doctor, .portrait-tag {
  color: var(--ink);
  background: var(--header-surface);
}
.portrait-dot { background: var(--teal); }
.confidence-symbol, .strip-arrow { color: var(--teal); }
.circle-link { border-color: var(--control-border); }

/* Neutral, cool surfaces keep photographs and long-form information prominent. */
.about, .clinic-journal {
  background: var(--mint);
  border-color: var(--line);
}
.services-grid, .journal-topics, .journal-link { border-color: var(--line); }
.service-card:hover, .service-card.featured:hover {
  background: var(--soft-hover);
  border-color: var(--teal);
}
.service-card .service-icon {
  background: var(--mint);
  border-color: var(--line);
}
.step-num, .doctor-card .doctor-role { color: var(--teal); }
.price-panel, .calculator { border-color: var(--teal); }
.price-row, .estimate-result { border-color: var(--line); }
.map-review, .prep-note, .prep-health { background: var(--mint); }
.map-review { border-color: var(--line); }
.hair-visual-labels,
.hair-example-before,
.hair-example-after,
.patient-video video { background: var(--deep); }
.hair-visual figcaption,
.hair-case .hair-case-photos figcaption {
  color: var(--ink);
  background: var(--mint);
  border-color: var(--line);
}
.hair-case .hair-case-photos img { background: var(--mint); }
.live-map { background: var(--mint); }

/* Booking stays light, with readable labels and visible field boundaries. */
.booking { background: var(--mint); color: var(--ink); }
.booking .eyebrow, .booking .eyebrow::before { color: var(--teal); }
.booking .eyebrow::before { background: var(--teal); }
.booking p, .booking label { color: var(--muted); }
.booking-meta { border-color: var(--line); }
.booking input, .booking select {
  color: var(--ink);
  background: var(--white);
  border-color: var(--control-border);
}
.booking input::placeholder { color: var(--muted); opacity: 1; }
.booking select option, .booking .country-code.is-enhanced option {
  color: var(--ink);
  background: var(--white);
}
.booking .country-code.is-enhanced select { color: transparent; }
.booking .consent-field input { accent-color: var(--teal); }
.booking .consent-field label { color: var(--ink); }
.form-result { border-color: var(--control-border); }
.form-result[data-state="success"] { background: var(--mint); }
.form-result a { color: var(--teal); }
#message-draft { color: var(--ink); background: var(--white); border-color: var(--control-border); }
.copy-message { color: var(--teal); border-color: var(--control-border); }
.booking .button:disabled { opacity: .7; }

/* Focus colors remain distinct on both dark and light backgrounds. */
:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 4px;
}
.signature-copy :focus-visible { outline-color: var(--lime); }
.signature-photo :focus-visible { outline-color: var(--teal); }
::selection { color: var(--white); background: var(--teal); }

@media (max-width: 1100px) {
  .navlinks { background: var(--white); }
}

@media (max-width: 600px) {
  .language-select {
    width: 132px;
    padding-left: 28px;
    background-position: 3px center;
    background-size: 18px 18px;
  }
}

@media (max-width: 380px) {
  .nav .brand-symbol { display: none; }
  .nav .brand-name { font-size: 1.25rem; }
}

@media print {
  body:has(.preparation-guide) { background: white; color: black; }
}