/* ==========================================================================
   Highest Health Homeopathy — shared design tokens
   Concept review build, 2026-09-22.

   One palette, three directions. Concepts A/B/C inherit everything here and
   override only the variables under "Per-concept hooks" at the bottom.
   Palette values are the LIVE site's own CSS custom properties, so the
   concepts stay recognisably Highest Health rather than a new brand.
   ========================================================================== */

:root {
  /* ---- Brand palette (from the live site's custom properties) ---- */
  --purple-deep:     #493B68;  /* anchor colour, per brief */
  --purple-mid:      #5A4B82;
  --navy:            #2D2A5E;
  --navy-light:      #4A4580;
  --lavender-light:  #F4F0F8;
  --rose:            #B08FA0;
  --rose-btn:        #C9A8B8;
  --rose-dark:       #9A7A8A;
  --cream:           #F8F6F3;
  --white:           #FFFFFF;
  --ink:             #3A3A4A;
  --muted:           #7A7A8A;
  --border:          #E8E4E0;
  --footer-bg:       #3D3970;

  /* Derived tints — kept few on purpose, so sections stay predominantly light */
  --purple-wash:     #EFEBF5;
  --navy-wash:       #EEF1F8;
  --cream-deep:      #F2EEE8;

  /* ---- Type scale (fluid, clamped — no media queries needed) ---- */
  --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
  --step-5:  clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

  /* ---- Spacing ---- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.625rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  --measure: 62ch;
  --radius:  14px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(45, 42, 94, 0.05), 0 4px 14px rgba(45, 42, 94, 0.05);
  --shadow-md: 0 2px 6px rgba(45, 42, 94, 0.06), 0 18px 46px rgba(45, 42, 94, 0.09);

  --ease: cubic-bezier(0.22, 0.68, 0.3, 1);

  /* ---- Per-concept hooks (each concept overrides these) ---- */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --display-weight: 500;
  --display-spacing: -0.015em;
  --page-bg: var(--white);
  --accent: var(--purple-deep);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  line-height: 1.14;
  color: var(--navy);
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-s); max-width: var(--measure); text-wrap: pretty; }

a { color: var(--purple-deep); text-underline-offset: 3px; }

/* Visible keyboard focus everywhere — accessibility baseline */
:focus-visible {
  outline: 3px solid var(--purple-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--purple-deep); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, 820px); }

.section { padding-block: var(--section-y); }

.section--cream     { background: var(--cream); }
.section--lavender  { background: var(--lavender-light); }
.section--navywash  { background: var(--navy-wash); }
.section--purple {
  background: var(--purple-deep);
  color: #EDE8F3;
}
.section--purple h2,
.section--purple h3 { color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-dark);
  margin: 0 0 var(--space-xs);
}
.section--purple .eyebrow { color: var(--rose-btn); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: #55556a;
}
.section--purple .lede { color: #D9D2E6; }

/* ==========================================================================
   Buttons / links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
  /* 44px minimum tap target */
  min-height: 48px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--purple-deep);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--purple-mid); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--purple-deep);
  border-color: rgba(73, 59, 104, 0.3);
}
.btn--ghost:hover { border-color: var(--purple-deep); background: rgba(73, 59, 104, 0.05); }

.section--purple .btn--primary { background: #fff; color: var(--purple-deep); }
.section--purple .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.section--purple .btn--ghost:hover { background: rgba(255,255,255,0.1); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--purple-deep);
  text-decoration: none;
  min-height: 44px;
}
.arrow-link::after { content: "→"; transition: transform 0.2s var(--ease); }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(4px); }
.section--purple .arrow-link { color: #fff; }

/* ==========================================================================
   Placeholder media — honest, labelled, and deliberately designed
   No stock photography, no fabricated imagery of a real person.
   ========================================================================== */

.ph {
  position: relative;
  /* Centred, not bottom-anchored: a tall placeholder's label was falling below
     the fold in the hero, so the panel read as an empty box rather than as a
     deliberate placeholder. Centring guarantees the label is visible in any
     crop, at any aspect ratio. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 78% 12%, var(--lavender-light) 0%, transparent 60%),
    linear-gradient(155deg, var(--cream) 0%, var(--cream-deep) 48%, #E6DFF0 100%);
  border: 1px solid rgba(73, 59, 104, 0.16);
  isolation: isolate;
}
.ph::before {
  /* botanical line-art motif, drawn in CSS-embedded SVG — no external asset */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23493B68' stroke-width='1.1' stroke-linecap='round' opacity='0.26'%3E%3Cpath d='M200 375 C200 250 200 160 200 60'/%3E%3Cpath d='M200 300 C150 292 116 258 110 210 C160 214 194 250 200 300Z'/%3E%3Cpath d='M200 300 C250 292 284 258 290 210 C240 214 206 250 200 300Z'/%3E%3Cpath d='M200 216 C158 208 130 178 125 138 C167 144 195 176 200 216Z'/%3E%3Cpath d='M200 216 C242 208 270 178 275 138 C233 144 205 176 200 216Z'/%3E%3Cpath d='M200 140 C172 132 154 110 151 82 C179 88 197 112 200 140Z'/%3E%3Cpath d='M200 140 C228 132 246 110 249 82 C221 88 203 112 200 140Z'/%3E%3Ccircle cx='200' cy='58' r='13'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 88% 118%;
  background-size: min(62%, 320px);
  z-index: -1;
}
.ph__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--purple-deep);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(73, 59, 104, 0.16);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  margin: var(--space-s);
  line-height: 1.35;
  text-align: center;
  max-width: calc(100% - 2 * var(--space-s));
  box-shadow: 0 2px 10px rgba(45, 42, 94, 0.07);
}

/* A placeholder that has been filled with real temporary photography. The
   panel chrome (tint, botanical motif, caption) gets out of the way so Sam
   is judging the photograph, not the placeholder. The review toolbar already
   tells her the photos are temporary, so no per-image caption is needed. */
.ph--photo {
  background: var(--cream-deep);
  border-color: rgba(73, 59, 104, 0.1);
}
.ph--photo::before { display: none; }
.ph--photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ph-focus, center);
  border-radius: inherit;
}
.ph--photo .ph__label { display: none; }

/* Common aspect ratios */
.ph--portrait  { aspect-ratio: 4 / 5; }
.ph--square    { aspect-ratio: 1 / 1; }
.ph--wide      { aspect-ratio: 16 / 9; }
.ph--banner    { aspect-ratio: 21 / 9; }

@media (max-width: 640px) {
  .ph--banner { aspect-ratio: 4 / 3; }
}

/* Logo / badge placeholder */
.ph-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60px;
  padding: 0.75rem 1.25rem;
  border: 1px dashed rgba(73, 59, 104, 0.32);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--purple-deep);
  background: rgba(255,255,255,0.6);
}
.section--purple .ph-badge {
  color: #EDE8F3;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.07);
}

/* ==========================================================================
   Shared header / footer scaffolding
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 20px rgba(45, 42, 94, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 74px;
}
.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--purple-deep);
  letter-spacing: 0.005em;
}
.brand__sub {
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--space-m); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav__list a:hover { color: var(--purple-deep); border-bottom-color: var(--rose-btn); }

/* nowrap — at tighter desktop widths this button broke onto two lines
   ("Book a" / "Consultation"), which reads as a layout bug to a client. */
.nav__cta { padding: 0.7rem 1.35rem; min-height: 44px; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  /* flex:none — without it a tight header row shrinks the button below the
     44px minimum tap target (measured 40px wide at 375px in concept C). */
  flex: none;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  position: relative;
  display: block; width: 20px; height: 1.6px;
  background: var(--navy);
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 1.6px; background: var(--navy);
  transition: transform 0.24s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: var(--space-s) 1.25rem var(--space-m);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block;
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
  }
  .nav__cta { margin-top: var(--space-s); width: 100%; }
}

/* Persistent mobile booking CTA — brief asks for it "if not intrusive" */
.mobile-book {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.mobile-book .btn { width: 100%; }
@media (max-width: 760px) {
  .mobile-book { display: block; }
  body { padding-bottom: 84px; }
}

.site-footer {
  background: var(--footer-bg);
  color: #D6D1E6;
  padding-block: var(--space-xl) var(--space-m);
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--space-xs); }
.site-footer a { color: #D6D1E6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-l);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-bottom {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  font-size: var(--step--1);
  color: #B7B0CC;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-m); }
}

/* ==========================================================================
   Concept review chrome — the bar shown on each concept page
   ========================================================================== */

.review-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.review-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 52px;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
.review-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.review-bar a:hover { text-decoration: underline; }
.review-bar__tag {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.review-bar__switch { display: flex; align-items: center; gap: 0.4rem; }
.review-bar__switch a {
  min-width: 36px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
}
.review-bar__switch a[aria-current="true"] { background: var(--rose-btn); color: var(--navy); }
.site-header { top: 52px; }

/* The concept header is pinned to top:52px to clear the review bar, so the bar
   must stay exactly 52px tall at every width. Below 560px there isn't room for
   all four items, so the note and the concept name drop out and the row is
   forbidden to wrap — otherwise the bar grows to ~76px and the sticky header
   slides underneath it (the bar is z-index 100, the header 50). */
@media (max-width: 560px) {
  .review-bar__inner {
    flex-wrap: nowrap;
    min-height: 52px;
    gap: 0.75rem;
  }
  .review-bar__note,
  .review-bar__tag { display: none; }
  .review-bar a { white-space: nowrap; }
}