/* Solura Dental — the per-install design layer (assets/theme-local.css).
 *
 * A DISTINCT house, not a recolour of the base look: its own voice (Fraunces for
 * display — soft, contemporary, nothing like the base Playfair; Outfit for text),
 * its own palette (porcelain, deep pine-teal, brass-gold — drawn from the practice
 * photography: green panelled walls, oak herringbone, brass sconces), a taller,
 * airier rhythm and quiet gold rules. Controls stay rectangular (house rule).
 * Loads after app.css and overrides tokens + targeted components; deploys of
 * shared code never touch it.
 */

/* ── Type: self-hosted variable fonts (CSP is font-src 'self') ── */
@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* palette */
  --background:        #f7faf8;
  --on-background:     #1a2c2a;
  --primary:           #0f3d38;
  --primary-container: #17544c;
  --on-primary:        #ffffff;
  --secondary:         #8a6a2f;
  --secondary-fixed:   #d9ba79;
  --on-surface-variant:#41504d;
  --surface-stone:     #eef4f1;
  --surface-container: #e9f1ee;
  --hairline:          #d8e4df;
  --mid:               #0f3d38;   /* landing/voice/chat headers read var(--mid) */

  /* voice */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* rhythm: taller, airier than the base */
  --section: 104px;
  --radius: 2px;
}

/* Display type: Fraunces carries the personality — slightly tighter, a touch lighter */
h1, h2, h3, .hero-title, .article-title { letter-spacing: -0.012em; }
body { font-weight: 380; }

/* Buttons: square, quiet, letterspaced small caps; gold accent instead of navy shadow-lift */
.btn { border-radius: 2px; letter-spacing: 0.18em; }
.btn--accent { background: var(--secondary); color: #fff; box-shadow: none; }
.btn--accent:hover { background: #77571f; transform: none; box-shadow: none; }
.btn--primary:hover { background: var(--primary-container); }

/* Eyebrows in brass, with a short gold rule beneath section headings */
.eyebrow { color: var(--secondary); }

/* Cards and bands: flat porcelain surfaces, hairline borders, no drop shadows */
.band--stone { background: var(--surface-stone); }

/* Landing / voice / chat headers: same voice as the site (their own CSS names
   Playfair literally, so these win by specificity or order) */
main.land .brand-word, main.land h1 { font-family: 'Fraunces', Georgia, serif; }
.voice-head .brand-word, .chat-head .brand-word { font-family: 'Fraunces', Georgia, serif; }
main.land .foot a { color: #8a6a2f; }

/* ── The hero as a statement: full-bleed photograph, porcelain wash, badge eyebrow ──
   (Inspiration pass 2026-08-24: headline over ambience, gold italic accent, small badge.) */
.hero { position: relative; overflow: hidden; padding: 0 var(--gutter); }
.hero-inner { position: relative; z-index: 2; min-height: 620px; display: flex; align-items: center; grid-template-columns: none; }
.hero-copy { position: relative; z-index: 3; max-width: 600px; padding: 120px 0 96px; }
.hero-figure { position: absolute; inset: 0; z-index: 1; }
.hero-figure .media, .hero-figure .media--hero { position: absolute; inset: 0; height: 100%; border-radius: 0; box-shadow: none; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(92deg, rgba(246,250,248,.97) 0%, rgba(246,250,248,.90) 36%, rgba(246,250,248,.55) 62%, rgba(246,250,248,.10) 100%); }
.hero .display { font-size: clamp(46px, 5.4vw, 76px); line-height: 1.04; }
/* Badge eyebrow — per-install text, so plain CSS content is the honest place for it */
.hero-copy::before { content: 'Marylebone · Same-day appointments'; display: inline-block;
  font: 600 11.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--primary); border: 1px solid var(--secondary-fixed); background: rgba(255,255,255,.72);
  border-radius: 2px; padding: 8px 14px; }
@media (max-width: 860px) {
  .hero-inner { min-height: 0; }
  .hero-copy { padding: 130px 0 72px; max-width: 100%; }
  .hero-figure::after { background: linear-gradient(180deg, rgba(246,250,248,.96) 0%, rgba(246,250,248,.88) 55%, rgba(246,250,248,.55) 100%); }
}

/* The brand mark was a whisper in a 1200px bar (his note, 2026-08-24): give it presence.
   The bar grows ~12px; the hero clears it comfortably. */
.brand-logo { height: 58px; }
.topbar.is-scrolled .brand-logo { height: 46px; }
@media (max-width: 767px) {
  .brand-logo { height: 42px; }
  .topbar.is-scrolled .brand-logo { height: 36px; }
}

/* ── Hero headline + supporting line: WellHeart's typographic voice (2026-08-25) ──
   Requested change: the 'Seen properly. / Seen today.' block and its supporting
   line take Playfair Display, exactly as the equivalent hero on wellheartclinic.com
   (which runs app.css unthemed, so --serif = 'Playfair Display'). TYPE ONLY —
   size, colour, weight, the gold italic accent and the layout are untouched, and
   the rest of the site keeps Fraunces. Playfair is already self-hosted here
   (assets/fonts/playfair.woff2 + playfair-italic.woff2, @font-face declared in
   app.css), so the strict CSP (font-src 'self') is satisfied — nothing hotlinked. */
.hero .display,
.hero .display-accent,
.hero .hero-support { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }