/* NexDerm global styles — mobile-first, editorial, restrained.
   Uses only the approved palette via tokens.css variables. */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--nd-white);
  color: var(--nd-charcoal);
  font-family: var(--nd-font-interface);
  font-size: var(--nd-text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--nd-font-editorial);
  font-weight: 400;
  line-height: 1.08;
  color: inherit;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--nd-text-h1); }
h2 { font-size: var(--nd-text-h2); }
h3 { font-size: var(--nd-text-h3); }
h4 { font-family: var(--nd-font-interface); font-size: var(--nd-text-body-lg); font-weight: 600; line-height: 1.3; }

p { margin: 0 0 1.1em; max-width: 68ch; }

a {
  color: var(--nd-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--nd-transition-fast);
}

a:hover { color: var(--nd-charcoal); }

ul, ol { padding-left: 1.2em; margin: 0 0 1.1em; }

/* Visible focus everywhere — gold ring per design system */
:focus-visible {
  outline: 3px solid var(--nd-gold);
  outline-offset: 4px;
  border-radius: 1px;
}

/* Visually hidden, available to assistive tech (WP convention) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nd-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--nd-teal);
  color: var(--nd-white);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}

.nd-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html { scroll-behavior: smooth; }

/* ---------- Layout ---------- */

.nd-container,
.nd-container--wide,
.nd-container--content {
  margin-inline: auto;
  padding-inline: var(--nd-gutter);
  width: 100%;
}

.nd-container { max-width: calc(var(--nd-wide) + 2 * 2.5rem); }
.nd-container--wide { max-width: calc(var(--nd-media-wide) + 2 * 2.5rem); }
.nd-container--content { max-width: calc(var(--nd-content) + 2 * 2.5rem); }

.nd-section { padding-block: var(--nd-section-standard); }
.nd-section--compact { padding-block: var(--nd-section-compact); }
.nd-section--editorial { padding-block: var(--nd-section-editorial); }

/* Section tone variants */
.nd-tone-silver { background: var(--nd-silver); }
.nd-tone-teal { background: var(--nd-teal); color: var(--nd-white); }
.nd-tone-ink { background: var(--nd-ink); color: var(--nd-white); }
.nd-tone-teal a:not(.nd-button),
.nd-tone-ink a:not(.nd-button) { color: var(--nd-white); }
.nd-tone-teal a:not(.nd-button):hover,
.nd-tone-ink a:not(.nd-button):hover { color: var(--nd-silver); }
.nd-tone-teal :focus-visible,
.nd-tone-ink :focus-visible { outline-color: var(--nd-gold); }

.nd-tone-teal h2,
.nd-tone-teal h3,
.nd-tone-ink h2,
.nd-tone-ink h3 { color: var(--nd-white); }

/* Slate is too light for small text on Soft Silver (3.98:1) — use charcoal there */
.nd-tone-silver .nd-text-slate,
.nd-tone-silver .nd-small,
.nd-tone-silver .nd-proof span,
.nd-tone-silver .nd-figure__caption { color: var(--nd-charcoal); }

.nd-hero-title { font-size: var(--nd-text-display); }

/* Anchored sections land clear of the viewport top */
[id] { scroll-margin-top: 2rem; }

/* ---------- Page intro band ---------- */

.nd-page-intro { padding-block: var(--nd-section-compact) 0; }

.nd-page-intro h1 {
  font-size: var(--nd-text-h1);
  max-width: 16em;
}

.nd-page-intro .nd-lead { margin-bottom: 0; }

/* ---------- FAQ ---------- */

.nd-faq { border-top: var(--nd-rule); max-width: 46rem; }

.nd-faq details { border-bottom: var(--nd-rule); }

.nd-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  font-family: var(--nd-font-editorial);
  font-size: var(--nd-text-body-lg);
  line-height: 1.35;
}

.nd-faq summary::-webkit-details-marker { display: none; }

.nd-faq summary::after {
  content: "+";
  content: "+" / "";
  font-family: var(--nd-font-interface);
  color: var(--nd-gold);
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--nd-transition-fast);
}

.nd-faq details[open] summary::after { transform: rotate(45deg); }

.nd-faq details > div { padding: 0 0.25rem 1.25rem; max-width: 60ch; }

/* ---------- Finder ---------- */

.nd-finder {
  margin-top: 2.5rem;
  border: var(--nd-rule);
  border-radius: var(--nd-radius-small);
  padding: 1.5rem;
  max-width: 34rem;
  background: var(--nd-white);
}

.nd-finder label {
  display: block;
  font-weight: 600;
  font-size: var(--nd-text-small);
  margin-bottom: 0.5rem;
}

.nd-finder select {
  font: inherit;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--nd-slate);
  border-radius: var(--nd-radius-small);
  background: var(--nd-white);
  color: var(--nd-charcoal);
}

.nd-finder__result { margin-top: 1rem; }

.nd-finder__disclaimer {
  font-size: var(--nd-text-label);
  color: var(--nd-slate);
  margin: 0.9rem 0 0;
}

/* ---------- Condition / treatment definition lists ---------- */

.nd-topics {
  display: grid;
  gap: var(--nd-grid-gap);
  margin: 2rem 0 0;
}

@media (min-width: 48em) {
  .nd-topics { grid-template-columns: repeat(2, 1fr); }
}

.nd-topics > div {
  border-top: var(--nd-rule);
  padding-top: 1rem;
}

.nd-topics h3 {
  font-size: var(--nd-text-body-lg);
  font-family: var(--nd-font-interface);
  font-weight: 600;
}

/* Eyebrow label above headings — uppercase, tracked, restrained */
.nd-eyebrow {
  display: block;
  font-family: var(--nd-font-interface);
  font-size: var(--nd-text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nd-slate);
  margin-bottom: 1rem;
}

.nd-tone-teal .nd-eyebrow,
.nd-tone-ink .nd-eyebrow { color: var(--nd-silver); }

/* Fine gold rule — the primary use of Warm Gold (2–4% budget) */
.nd-rule-gold {
  border: 0;
  border-top: 2px solid var(--nd-gold);
  width: 3.5rem;
  margin: 0 0 1.5rem;
}

.nd-lead {
  font-size: var(--nd-text-body-lg);
  line-height: 1.6;
  max-width: 34em;
}

.nd-text-slate { color: var(--nd-slate); }

/* Same-tone neighbours read as one undivided void; keep a boundary. */
.nd-tone-silver + .nd-tone-silver,
.nd-tone-teal + .nd-tone-teal { border-top: var(--nd-rule); }
.nd-measure { max-width: 46em; }
.nd-cta-row--flush { margin-top: 0; }
.nd-small { font-size: var(--nd-text-small); }

/* ---------- Buttons ---------- */

.nd-button,
.wp-element-button,
.wp-block-button__link {
  display: inline-block;
  font-family: var(--nd-font-interface);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 0.875rem 1.75rem;
  border-radius: var(--nd-radius-small);
  border: 1px solid var(--nd-teal);
  background: var(--nd-teal);
  color: var(--nd-white);
  cursor: pointer;
  transition:
    background-color var(--nd-transition-fast),
    border-color var(--nd-transition-fast),
    color var(--nd-transition-fast),
    transform var(--nd-transition-fast);
}

.nd-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
  background: var(--nd-charcoal);
  border-color: var(--nd-charcoal);
  color: var(--nd-white);
  transform: translateY(-1px);
}

.nd-button--secondary {
  background: transparent;
  border-color: var(--nd-teal);
  color: var(--nd-teal);
}

.nd-button--secondary:hover {
  background: var(--nd-teal);
  color: var(--nd-white);
}

/* Secondary on dark surfaces */
.nd-tone-teal .nd-button--secondary,
.nd-tone-ink .nd-button--secondary {
  border-color: var(--nd-white);
  color: var(--nd-white);
  background: transparent;
}

.nd-tone-teal .nd-button--secondary:hover,
.nd-tone-ink .nd-button--secondary:hover {
  background: var(--nd-white);
  color: var(--nd-teal);
  border-color: var(--nd-white);
}

/* Primary on teal surface needs contrast flip */
.nd-tone-teal .nd-button--primary {
  background: var(--nd-white);
  border-color: var(--nd-white);
  color: var(--nd-teal);
}

.nd-tone-teal .nd-button--primary:hover {
  background: var(--nd-silver);
  border-color: var(--nd-silver);
  color: var(--nd-teal);
}

/* Quiet text link with gold hover detail */
.nd-link-quiet {
  font-family: var(--nd-font-interface);
  font-weight: 600;
  font-size: var(--nd-text-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--nd-gold);
  padding-bottom: 3px;
  transition: border-color var(--nd-transition-fast), color var(--nd-transition-fast);
}

.nd-link-quiet:hover { border-color: currentColor; }

/* ---------- Utility bar ---------- */

.nd-utility {
  background: var(--nd-charcoal);
  color: var(--nd-white);
  font-size: var(--nd-text-label);
  letter-spacing: 0.04em;
}

.nd-utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  padding-block: 0.55rem;
  text-align: center;
}

.nd-utility a {
  color: var(--nd-white);
  text-decoration: none;
  font-weight: 600;
}

.nd-utility a:hover { color: var(--nd-silver); }

.nd-utility__note { color: var(--nd-silver); }

.nd-utility__sep {
  color: var(--nd-gold);
  user-select: none;
}

@media (max-width: 40em) {
  .nd-utility__note--secondary { display: none; } /* keep bar to one line on small phones */
  .nd-utility__sep { display: none; } /* if the bar still wraps, a dot would dangle at a line end */
  .nd-utility__inner { gap: 0.35rem 0.9rem; }
}

/* ---------- Editorial imagery ---------- */

.nd-figure { margin: 0; }

.nd-figure--frame img,
.nd-figure--frame .nd-placeholder {
  border-radius: var(--nd-radius-small);
}

.nd-figure__caption {
  font-size: var(--nd-text-small);
  color: var(--nd-slate);
  padding-top: 0.6rem;
  border-top: var(--nd-rule);
  margin-top: 0.75rem;
  max-width: 38em;
}

/* Editorial offset: image extends slightly beyond text column on wide screens */
@media (min-width: 64em) {
  .nd-figure--offset-right { margin-right: calc(-1 * clamp(0rem, 4vw, 4rem)); }
  .nd-figure--offset-left { margin-left: calc(-1 * clamp(0rem, 4vw, 4rem)); }
}

/* Development placeholder — clearly labeled, never shippable */
.nd-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(97, 105, 111, 0.08) 0 12px,
      rgba(97, 105, 111, 0.16) 12px 24px
    ),
    var(--nd-silver);
  border: 1px dashed var(--nd-slate);
  color: var(--nd-charcoal);
  text-align: center;
  padding: 1.5rem;
  width: 100%;
  min-height: 14rem;
}

.nd-placeholder strong {
  font-size: var(--nd-text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nd-placeholder span {
  font-size: var(--nd-text-small);
  color: var(--nd-slate);
  max-width: 26em;
}

.nd-placeholder--portrait { aspect-ratio: 4 / 5; }
.nd-placeholder--landscape { aspect-ratio: 3 / 2; }
.nd-placeholder--square { aspect-ratio: 1; min-height: 0; }

/* Verification badge for prototype-only unresolved facts */
.nd-verify {
  display: inline-block;
  vertical-align: middle;
  background: var(--nd-gold);
  color: var(--nd-ink);
  font-family: var(--nd-font-interface);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--nd-radius-small);
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* ---------- Split layouts (hero, features) ---------- */

.nd-split {
  display: grid;
  gap: var(--nd-grid-gap);
  align-items: center;
}

@media (min-width: 56em) {
  .nd-split { grid-template-columns: 7fr 5fr; }
  .nd-split--media-left { grid-template-columns: 5fr 7fr; }
  .nd-split--media-left > .nd-split__media { order: -1; }
}

.nd-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

/* ---------- Stat / proof list ---------- */

.nd-proof {
  display: grid;
  gap: var(--nd-grid-gap);
  padding: 0;
  margin: 2.5rem 0 0;
  list-style: none;
}

@media (min-width: 48em) {
  .nd-proof { grid-template-columns: repeat(3, 1fr); }
}

.nd-proof li {
  border-top: 2px solid var(--nd-gold);
  padding-top: 1rem;
}

.nd-proof strong {
  display: block;
  font-family: var(--nd-font-editorial);
  font-size: var(--nd-text-h3);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.nd-proof span { color: var(--nd-slate); font-size: var(--nd-text-small); }
.nd-tone-teal .nd-proof span, .nd-tone-ink .nd-proof span { color: var(--nd-silver); }

/* ---------- Service goal list ---------- */

.nd-goals {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: var(--nd-rule);
}

.nd-goals li { border-bottom: var(--nd-rule); }

.nd-tone-teal .nd-goals,
.nd-tone-teal .nd-goals li { border-color: rgba(255, 255, 255, 0.22); }

.nd-goals a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--nd-transition-standard), color var(--nd-transition-fast);
}

.nd-goals__text {
  display: block;
  font-family: var(--nd-font-editorial);
  font-size: var(--nd-text-h3);
  line-height: 1.3;
}

.nd-goals a::after {
  content: "→";
  content: "→" / ""; /* decorative; hide from assistive tech */
  font-family: var(--nd-font-interface);
  font-size: 1rem;
  color: var(--nd-gold);
}

.nd-goals a:hover { padding-left: 0.75rem; }

.nd-goals small {
  display: block;
  font-family: var(--nd-font-interface);
  font-size: var(--nd-text-small);
  line-height: 1.5;
  color: var(--nd-slate);
  margin-top: 0.3rem;
}

.nd-tone-teal .nd-goals small { color: var(--nd-silver); }

/* ---------- Journey (patient experience) ---------- */

.nd-journey {
  counter-reset: journey;
  display: grid;
  gap: var(--nd-grid-gap);
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .nd-journey { grid-template-columns: repeat(3, 1fr); }
}

.nd-journey li {
  counter-increment: journey;
  border-top: var(--nd-rule);
  padding-top: 1.25rem;
}

.nd-journey li::before {
  content: "0" counter(journey);
  content: "0" counter(journey) / "";
  font-family: var(--nd-font-editorial);
  font-size: var(--nd-text-h3);
  color: var(--nd-gold);
  display: block;
  margin-bottom: 0.5rem;
}

.nd-journey h3 { font-size: var(--nd-text-body-lg); font-family: var(--nd-font-interface); font-weight: 600; }

/* ---------- Testimonials ---------- */

.nd-quotes {
  display: grid;
  gap: var(--nd-grid-gap);
  margin-top: 2.5rem;
}

@media (min-width: 56em) {
  .nd-quotes { grid-template-columns: repeat(3, 1fr); }
}

.nd-quote {
  margin: 0;
  border-left: 2px solid var(--nd-gold);
  padding-left: 1.25rem;
}

.nd-quote p {
  font-family: var(--nd-font-editorial);
  font-size: var(--nd-text-body-lg);
  line-height: 1.5;
}

.nd-quote footer {
  font-size: var(--nd-text-small);
  color: var(--nd-slate);
}

/* ---------- Before / after ---------- */

.nd-ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--nd-white);
}

.nd-ba-pair figure { margin: 0; position: relative; }

.nd-ba-pair figcaption {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: var(--nd-ink);
  color: var(--nd-white);
  font-size: var(--nd-text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.6rem;
}

.nd-disclaimer {
  font-size: var(--nd-text-small);
  color: var(--nd-slate);
  border-top: var(--nd-rule);
  padding-top: 0.75rem;
  margin-top: 1rem;
  max-width: 46em;
}

/* ---------- Insurance panel ---------- */

.nd-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.6rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.nd-plans li {
  border: var(--nd-rule);
  border-radius: var(--nd-radius-small);
  padding: 0.45rem 0.9rem;
  font-size: var(--nd-text-small);
  font-weight: 600;
  background: var(--nd-white);
}

/* ---------- Skin notes / instagram ---------- */

.nd-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 48em) {
  .nd-notes-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Contact ---------- */

.nd-contact-grid {
  display: grid;
  gap: var(--nd-grid-gap);
}

@media (min-width: 56em) {
  .nd-contact-grid { grid-template-columns: 5fr 7fr; }
}

.nd-contact-methods {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.nd-contact-methods li {
  border-top: var(--nd-rule);
  padding: 0.9rem 0;
}

.nd-tone-ink .nd-contact-methods li,
.nd-tone-teal .nd-contact-methods li { border-top: var(--nd-rule-on-dark); }

.nd-contact-form-title {
  font-family: var(--nd-font-interface);
  font-weight: 600;
  font-size: var(--nd-text-body-lg);
  margin-bottom: 0.75rem;
}

.nd-contact-methods strong {
  display: block;
  font-size: var(--nd-text-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nd-slate);
  margin-bottom: 0.15rem;
}

.nd-tone-ink .nd-contact-methods strong,
.nd-tone-teal .nd-contact-methods strong { color: var(--nd-silver); }

/* ---------- Mobile quick-action bar ---------- */

.nd-mobile-actions {
  display: none;
}

@media (max-width: 63.999em) {
  .nd-mobile-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    background: var(--nd-teal);
    border-top: 2px solid var(--nd-gold);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .nd-mobile-actions a {
    flex: 1;
    text-align: center;
    padding: 0.9rem 0.5rem;
    font-family: var(--nd-font-interface);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nd-white);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
  }

  .nd-mobile-actions a:last-child { border-right: 0; }

  .nd-mobile-actions__book {
    background: var(--nd-white);
    color: var(--nd-teal) !important;
  }

  /* Keep page content and footer clear of the fixed bar */
  body { padding-bottom: 4rem; } /* bar measures 56px; 3.2rem left the last line under it */
}

/* ---------- Notices ---------- */

.nd-notice {
  border: var(--nd-rule);
  border-radius: var(--nd-radius-small);
  padding: 0.9rem 1.1rem;
  font-size: var(--nd-text-small);
  color: var(--nd-charcoal);
  background: var(--nd-white);
  max-width: 46em;
}

.nd-tone-ink .nd-notice,
.nd-tone-teal .nd-notice {
  background: transparent;
  color: var(--nd-silver);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ---------- Footer ---------- */

.nd-footer {
  background: var(--nd-ink);
  color: var(--nd-white);
  padding-block: var(--nd-section-compact);
  font-size: var(--nd-text-small);
}

.nd-footer a { color: var(--nd-white); text-decoration: none; }
.nd-footer a:hover { color: var(--nd-silver); text-decoration: underline; }
.nd-footer .nd-text-slate { color: var(--nd-silver); } /* slate on ink is 3.6:1 — below AA */

.nd-footer__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 48em) {
  .nd-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.nd-footer__logo {
  height: 2.1rem;
  width: auto;
  margin-bottom: 1.25rem;
}

.nd-footer__brand {
  font-family: var(--nd-font-interface);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border-left: 2px solid var(--nd-gold);
  padding-left: 0.75rem;
  display: inline-block;
  margin-bottom: 1rem;
}

.nd-footer h2 {
  font-family: var(--nd-font-interface);
  font-size: var(--nd-text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nd-silver);
  margin-bottom: 1rem;
}

.nd-footer ul { list-style: none; padding: 0; margin: 0; }
.nd-footer li { margin-bottom: 0.5rem; }

.nd-footer__legal {
  border-top: var(--nd-rule-on-dark);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  color: var(--nd-silver);
}