/*
 * Mahan master design system v4.
 * This file is loaded after the legacy homepage stylesheet so its tokens and
 * shared components become the stable contract for every future page.
 */
:root {
  --mahan-ink: #29252b;
  --mahan-muted: #6f6871;
  --mahan-plum: #4b3c4d;
  --mahan-plum-deep: #29242b;
  --mahan-dusty: #9e8ba1;
  --mahan-lavender: #ddd4df;
  --mahan-lavender-soft: #eee9ef;
  --mahan-wash: #f7f5f7;
  --mahan-white: #ffffff;
  --mahan-line: rgba(53, 43, 56, 0.14);
  --mahan-radius: 0px;
  --mahan-shell: min(1180px, calc(100% - 48px));
  --mahan-space-section: clamp(72px, 8vw, 128px);
}

body.home {
  --mh-ink: var(--mahan-ink);
  --mh-muted: var(--mahan-muted);
  --mh-plum: var(--mahan-plum);
  --mh-plum-dark: var(--mahan-plum-deep);
  --mh-dusty: var(--mahan-dusty);
  --mh-pastel: var(--mahan-lavender);
  --mh-pastel-soft: var(--mahan-lavender-soft);
  --mh-wash: var(--mahan-wash);
  --mh-white: var(--mahan-white);
  --mh-line: var(--mahan-line);
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #6e5174;
  outline-offset: 3px;
}

.mahan-pattern-shell {
  width: var(--mahan-shell);
  margin-inline: auto;
}

.mahan-pattern-heading,
.mahan-pattern-location,
.mahan-pattern-consultation {
  padding-block: var(--mahan-space-section);
}

.mahan-pattern-heading > p,
.mahan-pattern-location p {
  max-width: 680px;
  color: var(--mahan-muted);
}

.mahan-pattern-heading h2,
.mahan-pattern-location h2,
.mahan-pattern-consultation h2 {
  max-width: 760px;
  color: var(--mahan-ink);
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.028em;
}

.mahan-pattern-eyebrow {
  margin-bottom: 22px;
  color: var(--mahan-plum) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mahan-pattern-consultation {
  color: var(--mahan-ink);
  background: var(--mahan-lavender);
}

.mahan-pattern-eyebrow,
.mh-kicker {
  letter-spacing: 0.15em;
}

.mh-heading .mh-kicker,
.mh-why__copy .mh-kicker,
.mh-faq__intro .mh-kicker,
.mh-consultation__copy .mh-kicker,
.mh-arrival__copy .mh-kicker {
  margin-bottom: 24px;
}

/* Hero fallback remains intentional when data saving or reduced motion is set. */
.mh-hero__media {
  background: #d9d3da url("../media/mahan-clinic-hero-poster.webp") center / cover no-repeat;
}

.mh-hero__media video {
  background: #d9d3da url("../media/mahan-clinic-hero-poster.webp") center / cover no-repeat;
}

.mh-proof__review {
  padding: 0 0 24px;
  text-align: center;
}

.mh-proof__review .mh-google-review-link {
  margin-top: 4px;
  padding: 10px 0;
  color: var(--mh-plum-dark);
  font-size: 0.74rem;
}

/* A single form surface: the shortcode wrapper no longer creates a card inside a card. */
.mh-consultation__form .mahan-form-wrap {
  max-width: none;
  margin: 22px 0 14px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.mh-consultation__form .mahan-form {
  margin: 0;
}

.mh-consultation__form .mahan-form input,
.mh-consultation__form .mahan-form textarea,
.mh-consultation__form .mahan-form select {
  min-height: 50px;
  border-radius: 0;
  font-size: 0.94rem;
}

.mh-consultation__form .mahan-form textarea {
  min-height: 118px;
}

.mh-consultation__form .mahan-form .is-invalid {
  border-color: #9b3042;
  box-shadow: 0 0 0 2px rgba(155, 48, 66, 0.14);
}

.mh-consultation__form .mahan-form.is-submitting button {
  cursor: progress;
  opacity: 0.8;
}

.mh-consultation__form .mahan-notice {
  max-width: none;
  margin: 18px 0;
  border-radius: 0;
}

/* The visual treatment gallery is static on small screens, not a disguised slider. */
@media (max-width: 820px) {
  .mh-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin-right: 0;
    padding: 0;
    scroll-snap-type: none;
  }

  .mh-results-grid figure {
    min-width: 0;
  }

  .mh-mobile-actions {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    bottom: 0 !important;
    transform: translate3d(0, 0, 0);
    gap: 8px;
    padding: 9px 11px !important;
    padding-bottom: 9px !important;
  }

  body.home .mp-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  .mp-shell {
    width: min(100% - 32px, 520px);
  }

  .mh-hero__media {
    background-image: url("../media/mahan-clinic-hero-mobile-poster.webp");
  }

  .mh-hero__media video {
    background-image: url("../media/mahan-clinic-hero-mobile-poster.webp");
  }

  .mh-home h1 {
    max-width: 340px;
    font-size: clamp(2rem, 8.45vw, 2.35rem);
    line-height: 1.11;
  }

  .mh-home h2 {
    font-size: clamp(1.45rem, 6.15vw, 1.65rem);
    line-height: 1.21;
  }

  .mh-heading .mh-kicker,
  .mh-why__copy .mh-kicker,
  .mh-faq__intro .mh-kicker,
  .mh-consultation__copy .mh-kicker,
  .mh-arrival__copy .mh-kicker {
    margin-bottom: 22px;
  }

  .mh-proof__review {
    padding: 2px 0 18px;
    text-align: left;
  }

  .mh-proof__review .mh-google-review-link {
    font-size: 0.71rem;
  }

  .mh-results-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mh-results-grid figcaption {
    display: flex;
    align-items: center;
    padding: 16px 18px;
  }

  .mh-results-grid span {
    display: inline;
    margin-top: 0;
  }

  .mh-consultation__form {
    padding: 28px 20px 24px;
  }

  .mh-consultation__form .mahan-form {
    gap: 13px;
  }

  .mh-consultation__form .mahan-form label {
    font-size: 0.72rem;
  }

  .mh-consultation__form .mahan-form input,
  .mh-consultation__form .mahan-form textarea,
  .mh-consultation__form .mahan-form select {
    font-size: 16px;
  }

  .mh-consultation__form .mahan-form textarea {
    min-height: 104px;
  }

  .mh-mobile-actions {
    grid-template-columns: 0.86fr 1.14fr;
  }

  .mh-mobile-actions a {
    min-height: 48px;
    font-size: 0.72rem;
  }

  .mp-footer {
    padding-top: 48px;
  }

  .mp-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
    padding-bottom: 34px;
  }

  .mp-footer__top > :first-child {
    grid-column: 1 / -1;
  }

  .mp-footer__top p,
  .mp-footer__top a {
    font-size: 0.78rem;
  }

  .mp-footer__bottom {
    gap: 14px;
    padding-top: 18px;
  }

  .mp-footer__bottom div {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-hero__media video {
    display: block !important;
  }
}

/* Audit refinements: keep the long desktop proposition readable, leave a
 * genuine clearance above the fixed mobile bar, and make the mobile menu a
 * comfortable target without altering the visual design language. */
@media (min-width: 1200px) {
  .mh-hero__media {
    width: 45%;
  }

  .mh-hero__copy {
    width: 55%;
    max-width: 710px;
    padding-bottom: 82px;
  }

  .mh-home h1 {
    max-width: 700px;
    font-size: clamp(3.25rem, 3.65vw, 4.4rem);
    line-height: 1.04;
  }
}

@media (max-width: 960px) {
  .mp-nav-toggle {
    width: 44px;
    height: 44px;
  }
}

.mahan-form-choice-hint {
  margin: -3px 0 3px;
  color: var(--mahan-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.mahan-required-marker {
  color: inherit;
}