/*
 * Nafasi theme. Loaded after Bootstrap. Every colour is a variable here,
 * so the palette changes in one place.
 *
 * Brand source: "Nafasi - Brand Guide" (approved Canva identity, 2026-10-16).
 * Contrast rules: text is Deep Teal; Clay is for large text, icons and rules only;
 * Sage is decoration only; primary buttons are Teal with Cream labels.
 * Fonts are NOT specified by the guide yet: system stack is a placeholder.
 */
:root {
  --nafasi-cream: #FAF7F0;
  --nafasi-sand: #E8DCCB;
  --nafasi-sage: #A8B8A3;
  --nafasi-teal: #1F4F4B;
  --nafasi-clay: #C97860;

  /* Derived states (not brand colours): teal darkened ~10%, sand tints. */
  --nafasi-teal-dark: #1a4440;
  --nafasi-teal-darker: #163a37;
  --nafasi-sand-soft: #F2EBE0;
  --nafasi-white: #FFFFFF;
  --nafasi-muted: #3d6461; /* teal tint for secondary text: 6.4:1 on cream */

  --nafasi-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nafasi-radius: .75rem;
  --nafasi-radius-lg: 1.25rem;
  --nafasi-shadow: 0 1px 2px rgba(31, 79, 75, .06), 0 4px 16px rgba(31, 79, 75, .06);

  --bs-body-bg: var(--nafasi-cream);
  --bs-body-color: var(--nafasi-teal);
  --bs-body-font-family: var(--nafasi-font);
  --bs-emphasis-color: var(--nafasi-teal);
  --bs-secondary-color: var(--nafasi-muted);
  --bs-heading-color: var(--nafasi-teal);
  --bs-primary: #1F4F4B;
  --bs-primary-rgb: 31, 79, 75;
  --bs-link-color: #1F4F4B;
  --bs-link-color-rgb: 31, 79, 75;
  --bs-link-hover-color: #163a37;
  --bs-link-hover-color-rgb: 22, 58, 55;
  --bs-border-color: var(--nafasi-sand);
  --bs-border-radius: var(--nafasi-radius);
  --bs-border-radius-lg: var(--nafasi-radius-lg);
  --bs-focus-ring-color: rgba(31, 79, 75, .35);
  --bs-tertiary-bg: var(--nafasi-sand-soft);
}

body {
  background: var(--nafasi-cream);
  color: var(--nafasi-teal);
  -webkit-font-smoothing: antialiased;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn { min-height: 44px; padding-inline: 1.25rem; font-weight: 600; border-radius: 999px; }
.btn-sm { min-height: 36px; }
.btn-primary {
  --bs-btn-bg: var(--nafasi-teal);
  --bs-btn-border-color: var(--nafasi-teal);
  --bs-btn-color: var(--nafasi-cream);
  --bs-btn-hover-bg: var(--nafasi-teal-dark);
  --bs-btn-hover-border-color: var(--nafasi-teal-dark);
  --bs-btn-hover-color: var(--nafasi-cream);
  --bs-btn-active-bg: var(--nafasi-teal-darker);
  --bs-btn-active-border-color: var(--nafasi-teal-darker);
  --bs-btn-active-color: var(--nafasi-cream);
  --bs-btn-disabled-bg: var(--nafasi-teal);
  --bs-btn-disabled-border-color: var(--nafasi-teal);
  --bs-btn-disabled-color: var(--nafasi-cream);
  --bs-btn-focus-shadow-rgb: 31, 79, 75;
}
.btn-outline-primary {
  --bs-btn-color: var(--nafasi-teal);
  --bs-btn-border-color: var(--nafasi-teal);
  --bs-btn-hover-bg: var(--nafasi-teal);
  --bs-btn-hover-border-color: var(--nafasi-teal);
  --bs-btn-hover-color: var(--nafasi-cream);
  --bs-btn-active-bg: var(--nafasi-teal-dark);
  --bs-btn-active-color: var(--nafasi-cream);
  --bs-btn-disabled-color: var(--nafasi-muted);
  --bs-btn-disabled-border-color: var(--nafasi-sand);
  --bs-btn-focus-shadow-rgb: 31, 79, 75;
}
.btn-link { --bs-btn-color: var(--nafasi-teal); font-weight: 600; }

:focus-visible { outline: 3px solid var(--nafasi-teal); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(31, 79, 75, .3);
  border-color: var(--nafasi-teal);
}

/* ---- Forms -------------------------------------------------------------- */
.form-control, .form-select { min-height: 44px; border-color: #d6c7b2; background-color: var(--nafasi-white); color: var(--nafasi-teal); }
.form-label { font-weight: 600; }
.form-text { color: var(--nafasi-muted); }
.form-check-input { width: 1.25em; height: 1.25em; border-color: #b9a88f; }
.form-check-input:checked { background-color: var(--nafasi-teal); border-color: var(--nafasi-teal); }
.form-check-label { padding-left: .25rem; }
.invalid-feedback, .text-danger { color: #9b2c1c !important; } /* 6.9:1 on cream */
.form-control.is-invalid, .form-select.is-invalid { border-color: #9b2c1c; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Brand lockup ------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--nafasi-teal); }
/* The supplied symbol PNG has a white background; multiply blends it into cream without editing the file. */
.brand-symbol { mix-blend-mode: multiply; height: auto; }
.brand-symbol-sm { width: 34px; }
.brand-symbol-lg { width: 96px; }
.brand-wordmark { font-weight: 600; font-size: 1.6rem; letter-spacing: .02em; line-height: 1; text-transform: lowercase; }
.brand-wordmark-lg { font-size: clamp(3rem, 9vw, 5rem); letter-spacing: .03em; }
.tagline { text-transform: uppercase; letter-spacing: .28em; font-weight: 600; font-size: .85rem; }

/* ---- Layout ------------------------------------------------------------- */
.site-header { background: var(--nafasi-cream); border-bottom: 1px solid var(--nafasi-sand); }
.site-header .nav-link { color: var(--nafasi-teal); font-weight: 600; padding: .75rem .9rem; }
.site-header .nav-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer { background: var(--nafasi-teal); color: var(--nafasi-cream); }
.site-footer a { color: var(--nafasi-cream); }
.site-footer .brand { color: var(--nafasi-cream); }
.site-footer .footer-note { color: #d9e3e1; font-size: .875rem; }

.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-sand { background: var(--nafasi-sand-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 700; color: var(--nafasi-teal); }
.rule-clay { width: 56px; height: 3px; background: var(--nafasi-clay); border: 0; opacity: 1; margin: 1rem 0 1.5rem; }
.rule-clay.mx-auto { margin-inline: auto; }
.audience-line { color: var(--nafasi-clay); font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 600; line-height: 1.4; } /* large text only */
.lead { color: var(--nafasi-teal); }
.text-muted, .text-body-secondary { color: var(--nafasi-muted) !important; }

.hero { padding-block: clamp(3.5rem, 10vw, 7rem); }
.hero h1 { font-weight: 600; }

.card { --bs-card-bg: var(--nafasi-white); --bs-card-border-color: var(--nafasi-sand); border-radius: var(--nafasi-radius-lg); box-shadow: var(--nafasi-shadow); }
.card-flat { box-shadow: none; }
.panel-sand { background: var(--nafasi-sand); border-radius: var(--nafasi-radius-lg); }
.panel-teal { background: var(--nafasi-teal); color: var(--nafasi-cream); border-radius: var(--nafasi-radius-lg); }
.panel-teal h2, .panel-teal h3, .panel-teal p { color: var(--nafasi-cream); }

.feature-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--nafasi-sand); color: var(--nafasi-teal); }
.feature-icon svg { width: 22px; height: 22px; }
.step-number { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nafasi-teal); color: var(--nafasi-cream); font-weight: 700; }

.badge-soft { background: var(--nafasi-sand); color: var(--nafasi-teal); font-weight: 600; border-radius: 999px; padding: .35em .75em; }
.demo-banner { background: var(--nafasi-sand); color: var(--nafasi-teal); font-size: .9rem; text-align: center; padding: .5rem 1rem; }

/* ---- Clinic page -------------------------------------------------------- */
.clinic-header { background: var(--nafasi-sand-soft); border-bottom: 1px solid var(--nafasi-sand); }
.endorsement { font-size: .85rem; color: var(--nafasi-muted); display: inline-flex; align-items: center; gap: .35rem; }
.endorsement img { width: 18px; mix-blend-mode: multiply; }
.service-row { border-bottom: 1px solid var(--nafasi-sand); padding-block: 1.25rem; }
.service-row:last-child { border-bottom: 0; }
.service-meta { color: var(--nafasi-muted); font-size: .95rem; }
.price { font-weight: 700; }
.start-here { color: var(--nafasi-teal); background: var(--nafasi-sand); border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; font-weight: 700; }
.mobile-book-bar { position: sticky; bottom: 0; z-index: 1020; background: var(--nafasi-cream); border-top: 1px solid var(--nafasi-sand); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
.provider-initial { width: 56px; height: 56px; border-radius: 50%; background: var(--nafasi-sage); color: var(--nafasi-teal); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; flex-shrink: 0; }

/* ---- Booking flow ------------------------------------------------------- */
.stepper { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.stepper li { font-size: .85rem; font-weight: 600; color: var(--nafasi-muted); display: flex; align-items: center; gap: .4rem; }
.stepper li .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--nafasi-sand); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; background: var(--nafasi-white); }
.stepper li[aria-current="step"] { color: var(--nafasi-teal); }
.stepper li[aria-current="step"] .dot { border-color: var(--nafasi-teal); background: var(--nafasi-teal); color: var(--nafasi-cream); }
.stepper li.done .dot { border-color: var(--nafasi-teal); color: var(--nafasi-teal); }
.stepper li + li::before { content: ""; width: 14px; height: 2px; background: var(--nafasi-sand); }

.choice { display: block; width: 100%; text-align: left; background: var(--nafasi-white); border: 2px solid var(--nafasi-sand); border-radius: var(--nafasi-radius); padding: .9rem 1rem; color: var(--nafasi-teal); min-height: 44px; }
.choice:hover { border-color: var(--nafasi-sage); }
.choice[aria-pressed="true"], .choice.selected { border-color: var(--nafasi-teal); box-shadow: inset 0 0 0 1px var(--nafasi-teal); }

.date-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.date-strip button { flex: 0 0 auto; width: 72px; scroll-snap-align: start; border: 2px solid var(--nafasi-sand); background: var(--nafasi-white); border-radius: var(--nafasi-radius); padding: .5rem 0; color: var(--nafasi-teal); line-height: 1.2; }
.date-strip button .dow { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; display: block; }
.date-strip button .dom { font-size: 1.35rem; font-weight: 700; display: block; }
.date-strip button[aria-pressed="true"] { background: var(--nafasi-teal); border-color: var(--nafasi-teal); color: var(--nafasi-cream); }
.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.time-grid button { min-height: 44px; border: 2px solid var(--nafasi-sand); background: var(--nafasi-white); color: var(--nafasi-teal); border-radius: 999px; font-weight: 600; }
.time-grid button:hover { border-color: var(--nafasi-teal); }
.time-grid button[aria-pressed="true"] { background: var(--nafasi-teal); border-color: var(--nafasi-teal); color: var(--nafasi-cream); }
.hold-timer { background: var(--nafasi-sand); border-radius: var(--nafasi-radius); padding: .75rem 1rem; font-weight: 600; }
.summary dt { font-weight: 600; }
.summary dd { margin-bottom: .6rem; }
.reminder-preview { background: var(--nafasi-white); border: 1px dashed #c9b79d; border-radius: var(--nafasi-radius); padding: 1rem; }

/* ---- Admin -------------------------------------------------------------- */
.admin-nav { background: var(--nafasi-white); border-bottom: 1px solid var(--nafasi-sand); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--nafasi-teal); --bs-table-border-color: var(--nafasi-sand); }
.status-pill { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .85rem; }
.status-pill::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }

.coming-soon { border: 1px dashed #c9b79d; border-radius: var(--nafasi-radius-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}