/* ==========================================================================
   Rivergate Dental - demonstration site stylesheet

   Self-contained. Shares nothing with the MareCraftAI marketing site, and
   nothing with the Northline sample either. If two samples in the portfolio
   look like one studio's house style, the portfolio argues against the
   website tiers it exists to sell.

   Identity: calm and clinical. Cool near-white ground, one deep sage accent,
   humanist sans in sentence case, large soft radii, generous leading, wide
   margins. Where Northline is dark, condensed, uppercase and square, this is
   light, humanist, sentence-case and rounded. The two differ by type
   classification and by shape, not by hue.

   Theme is locked light, for the same reason Northline is locked dark: the
   brand has one identity, and following prefers-color-scheme would mean
   maintaining two. Contrast verified in the locked mode.

   No cream. An earlier draft used a warm off-white with a clay accent, which
   is within a hex or two of the palette every AI-built "warm premium" site
   uses. The ground here is cool, and the warmth comes from spacing and
   letterforms instead.
   ========================================================================== */

/* Self-hosted: the files come from @fontsource via site/build.mjs. */
@font-face{ font-family: "Figtree"; src: url("/assets/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face{ font-family: "Source Sans 3"; src: url("/assets/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root{
  --paper:     #F5F7F4;
  --surface:   #FFFFFF;
  --surface-2: #ECF1EC;
  --wash:      #E4EEE8;

  --line:      #DCE3DD;
  --line-soft: #EAEFE9;

  --ink:       #17251F;
  --body-ink:  #42514A;
  --muted:     #5E6D65;

  /* One accent, used everywhere and never diluted. Hue 158 at 39% saturation,
     deliberately a different hue family from MareCraftAI's 184 at 83% rather
     than a tint of it. */
  --sage:      #2F6B55;
  --sage-deep: #245442;

  --display: "Figtree", system-ui, -apple-system, sans-serif;
  --text: "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* Shape lock: soft everywhere. Cards 18px, large surfaces 28px, anything
     interactive is a full pill. */
  --r:      18px;
  --r-lg:   28px;
  --r-pill: 999px;

  --wrap: 1140px;
  --measure: 64ch;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  --shadow: 0 1px 2px rgba(23,37,31,.04), 0 12px 28px -18px rgba(23,37,31,.28);
  --shadow-lift: 0 2px 4px rgba(23,37,31,.05), 0 20px 40px -22px rgba(23,37,31,.34);

  --t: .2s ease;
}

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

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

body{
  margin: 0;
  background: var(--paper);
  color: var(--body-ink);
  /* Leading 1.75. The single most effective thing about this identity is that
     the text has room to breathe. */
  font: 400 clamp(1.0625rem, 1rem + .2vw, 1.125rem)/1.75 var(--text);
  color-scheme: light;
  overflow-x: hidden;
}

img,svg{ max-width: 100%; display: block; }
a{ color: inherit; }

::selection{ background: var(--wash); color: var(--ink); }

:focus-visible{
  outline: 3px solid var(--sage);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--sage);
  color: #fff;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r) 0;
  font: 600 1rem/1 var(--display);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-link:focus{ left: 0; }

/* --- type ----------------------------------------------------------------
   Sentence case throughout. Northline shouts in condensed capitals; this
   speaks at a normal volume, which is most of the difference between them. */
h1,h2,h3{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1{ font-size: clamp(2.35rem, 1.6rem + 3.2vw, 3.9rem); letter-spacing: -.025em; }
h2{ font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem); }
h3{ font-size: clamp(1.15rem, 1.05rem + .55vw, 1.4rem); line-height: 1.25; }

h4{
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--sage);
  margin: 0;
}

p{ margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child{ margin-bottom: 0; }

.lede{
  font-size: clamp(1.15rem, 1.05rem + .55vw, 1.35rem);
  line-height: 1.65;
  color: var(--body-ink);
  max-width: 46ch;
}
.muted{ color: var(--muted); }

/* --- demo banner --------------------------------------------------------- */
.demo-banner{
  background: var(--ink);
  color: #E8EFE9;
}
.demo-banner__inner{
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .85rem var(--gutter);
}
.demo-banner p{
  margin: 0;
  max-width: 100ch;
  font-size: .9rem;
  line-height: 1.6;
  color: #C6D4CB;
}
.demo-banner strong{
  font-family: var(--display);
  font-weight: 700;
  color: #FFFFFF;
  margin-right: .3rem;
}
.demo-banner a{ color: #FFFFFF; text-underline-offset: .2em; }

/* --- header --------------------------------------------------------------
   Slim, light, sticky. 64px, one line, sentence case. */
.masthead{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead__inner{
  height: 68px;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.mark{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-right: auto;
  flex: 0 0 auto;
  min-height: 44px;
}
/* A single simple geometric mark: two rounded arcs, which is a shape a clinic
   can own without being an illustration. */
.mark__glyph{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 32%, var(--sage) 0 38%, transparent 39%),
    conic-gradient(from 220deg, var(--sage) 0 32%, var(--wash) 32% 100%);
  flex: 0 0 auto;
}
.mark__name{
  font: 700 1.22rem/1 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
}

.nav{
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.9rem);
}
.nav a{
  font: 500 1rem/1 var(--display);
  color: var(--muted);
  text-decoration: none;
  padding: .6rem .2rem;
  border-radius: var(--r-pill);
  transition: color var(--t);
  white-space: nowrap;
}
.nav a:hover{ color: var(--ink); }
.nav a[aria-current="page"]{ color: var(--sage); font-weight: 600; }

/* --- buttons: full pill, per the shape lock ------------------------------ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 600 1.02rem/1 var(--display);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t),
              box-shadow var(--t), transform var(--t);
}
.btn--primary{
  background: var(--sage);
  color: #FFFFFF;
  box-shadow: var(--shadow);
}
.btn--primary:hover{ background: var(--sage-deep); box-shadow: var(--shadow-lift); }
.btn--quiet{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--quiet:hover{ border-color: var(--sage); color: var(--sage); }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity: .5; cursor: not-allowed; }
.btn[disabled]:active{ transform: none; }

.masthead .btn{ padding: .6rem 1.25rem; min-height: 44px; font-size: .98rem; flex: 0 0 auto; }

/* --- rhythm --------------------------------------------------------------
   Airy. Density dial is 3, and the spacing is where that shows. */
.band{ padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem); }
.band--tight{ padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.band--tinted{ background: var(--surface-2); }

.section-head{ max-width: 44ch; margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.section-head h2{ margin-bottom: .85rem; }

/* --- hero ----------------------------------------------------------------
   A contained hero: the content sits inside a large rounded surface inset
   from the page edges, rather than bleeding to them. Northline's hero is a
   full-bleed dark poster; this is the opposite composition on purpose. */
.hero{ padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.hero__inner{
  position: relative;
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 88% 8%, var(--wash) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--line-soft);
  padding: clamp(2.25rem, 1.5rem + 5vw, 5rem) clamp(1.5rem, 1rem + 4vw, 4.5rem);
  overflow: hidden;
}
.hero h1{ max-width: 17ch; margin-bottom: 1.25rem; }
.hero .lede{ margin-bottom: 2rem; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- at a glance ---------------------------------------------------------
   Soft rounded tiles rather than rule-divided columns. */
.glance{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.glance > div{
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 1.35rem 1.5rem;
}
.glance h4{ margin-bottom: .3rem; }
.glance p{
  margin: 0;
  font: 600 1.1rem/1.35 var(--display);
  color: var(--ink);
}

/* --- bento ---------------------------------------------------------------
   Five cells for five items, deliberately uneven: two wide, three narrow.
   Cards are used here because elevation genuinely separates one appointment
   type from another. */
.bento{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.15rem;
}
.bento > article{
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  box-shadow: var(--shadow);
  transition: box-shadow var(--t), transform var(--t);
  grid-column: span 2;
}
.bento > article:nth-child(1),
.bento > article:nth-child(2){ grid-column: span 3; }
.bento > article:hover{ box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.bento h3{ margin-bottom: .55rem; }
.bento p{ margin: 0; color: var(--muted); }
.bento > article:nth-child(1){ background: var(--wash); border-color: transparent; }

/* --- stack ---------------------------------------------------------------
   What happens at a visit. A vertical sequence with a sage rail rather than
   numbered steps, because the reader can count and the order is obvious. */
.stack{
  display: grid;
  gap: 0;
  max-width: 68ch;
  border-left: 2px solid var(--line);
  padding-left: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}
.stack > div{ position: relative; padding-block: clamp(1.1rem, .8rem + 1vw, 1.7rem); }
.stack > div::before{
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2.25rem) - 7px);
  top: calc(clamp(1.1rem, .8rem + 1vw, 1.7rem) + .5rem);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sage);
  border: 3px solid var(--paper);
}
.stack h3{ margin-bottom: .4rem; }
.stack p{ margin: 0; }

/* --- split panel --------------------------------------------------------- */
.split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(1.75rem, 2vw + 1rem, 4rem);
  align-items: start;
}
.panel{
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow);
}
.panel--wash{ background: var(--wash); border-color: transparent; box-shadow: none; }
.panel h3{ margin-bottom: .8rem; }
.panel ul{ margin: 0; padding-left: 1.15rem; }
.panel li{ margin-bottom: .5rem; }
.panel li::marker{ color: var(--sage); }
.panel li:last-child{ margin-bottom: 0; }

/* --- prose --------------------------------------------------------------- */
.prose{ max-width: var(--measure); }
.prose h2{ margin-top: 2.75rem; margin-bottom: .85rem; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ margin-top: 2rem; margin-bottom: .5rem; }
.prose ul{ padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li{ margin-bottom: .5rem; }
.prose li::marker{ color: var(--sage); }

.note{
  background: var(--wash);
  border-radius: var(--r);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  max-width: var(--measure);
}
.note p{ margin-bottom: .8rem; }
.note p:last-child{ margin-bottom: 0; }

/* --- form ---------------------------------------------------------------- */
.form{ display: grid; gap: 1.4rem; max-width: 34rem; }
.field{ display: grid; gap: .4rem; }
.field label{
  font: 600 1rem/1.3 var(--display);
  color: var(--ink);
}
.field input,
.field textarea,
.field select{
  font: 400 1.0625rem/1.5 var(--text);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .8rem 1rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea{ min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: 0;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--wash);
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--muted); }
.field .hint{ font-size: .95rem; color: var(--muted); margin: 0; }

.form-note{
  background: var(--wash);
  border-radius: var(--r);
  padding: 1.1rem 1.35rem;
  max-width: 34rem;
  margin: 0 0 1.75rem;
}
.form-note p{ margin: 0; }

/* --- details ------------------------------------------------------------- */
.details{ display: grid; gap: 1.75rem; }
.details h4{ margin-bottom: .3rem; }
.details p{ margin: 0; }
.details__phone{
  font: 700 clamp(1.35rem, 1.1rem + 1vw, 1.7rem)/1.2 var(--display);
  color: var(--sage);
  letter-spacing: -.01em;
}

/* --- footer -------------------------------------------------------------- */
.footer{
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem);
}
.footer__inner{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(1.75rem, 3vw, 3.5rem);
  align-items: start;
}
.footer h4{ margin-bottom: .8rem; }
.footer p{ color: var(--muted); font-size: 1rem; }
.footer nav{ display: grid; gap: .3rem; }
.footer nav a{
  font: 500 1rem/1.4 var(--display);
  color: var(--muted);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--t);
}
.footer nav a:hover{ color: var(--sage); }
.footer__base{
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.footer__base p{ font-size: .95rem; max-width: 84ch; color: var(--muted); }
.footer__base a{ color: var(--sage); }

/* ==========================================================================
   Chat dock
   Same four behaviour hooks as the shared /chat-launcher.js, styled to this
   identity. The widget injects .marecraft-messages, its bubbles and a bare
   input into #sample-chat; the main site's chat CSS is not loaded here, so
   all of it is styled below.
   ========================================================================== */
.chat-dock{
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 60;
}
.chat-dock__toggle{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.5rem;
  min-height: 48px;
  background: var(--sage);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--r-pill);
  font: 600 1.02rem/1 var(--display);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: background var(--t), transform var(--t);
}
.chat-dock__toggle:hover{ background: var(--sage-deep); }
.chat-dock__toggle:active{ transform: translateY(1px); }

.chat-dock__panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(370px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  max-height: min(540px, calc(100vh - 130px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 10px rgba(23,37,31,.06), 0 28px 60px -26px rgba(23,37,31,.45);
  overflow: hidden;
}
.chat-dock__panel[hidden]{ display: none; }
.chat-dock__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--wash);
}
.chat-dock__title{
  margin: 0;
  font: 700 1.05rem/1 var(--display);
  color: var(--ink);
}
.chat-dock__close{
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 .2rem;
  cursor: pointer;
  transition: color var(--t);
}
.chat-dock__close:hover{ color: var(--ink); }

#sample-chat{ display: flex; flex-direction: column; min-height: 0; flex: 1; }
.marecraft-messages{
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-height: 8rem;
}
.marecraft-message{
  padding: .7rem 1rem;
  border-radius: var(--r);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 88%;
}
.marecraft-message--user{
  align-self: flex-end;
  background: var(--sage);
  color: #FFFFFF;
  border-bottom-right-radius: 6px;
}
.marecraft-message--assistant{
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
#sample-chat input{
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--text);
  padding: 1rem 1.25rem;
  min-height: 52px;
  width: 100%;
}
#sample-chat input::placeholder{ color: var(--muted); }
#sample-chat input:focus{ outline: 0; background: var(--paper); }
#sample-chat input:disabled{ color: var(--muted); }

/* ==========================================================================
   Responsive. Rivergate's own pass: the main site's mobile fixes live in a
   stylesheet this page never loads.
   ========================================================================== */
@media (max-width: 940px){
  .split{ grid-template-columns: 1fr; }
  .bento{ grid-template-columns: repeat(4, 1fr); }
  .bento > article{ grid-column: span 2; }
  .bento > article:nth-child(1),
  .bento > article:nth-child(2){ grid-column: span 4; }
  .footer__inner{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  /* Four sentence-case labels fit across 375px without condensing, so the nav
     wraps onto its own row rather than collapsing into a menu button. */
  .masthead__inner{
    height: auto;
    flex-wrap: wrap;
    padding-block: .65rem;
    gap: .5rem .9rem;
  }
  .masthead .btn{ order: 2; }
  .nav{
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: .35rem;
    border-top: 1px solid var(--line-soft);
    padding-top: .35rem;
  }
  .nav a{
    font-size: .95rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .bento{ grid-template-columns: 1fr; }
  .bento > article,
  .bento > article:nth-child(1),
  .bento > article:nth-child(2){ grid-column: auto; }

  .glance{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }

  .hero{ padding-top: 1rem; }
  .hero__inner{ border-radius: var(--r); }

  .btn{ width: 100%; }
  .hero__actions{ flex-direction: column; align-items: stretch; }
  .masthead .btn{ width: auto; }
}

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

/* Single spacing utility, so a one-off gap does not become an inline style. */
.mt{ margin-top: 1.75rem; }

/* Both this practice's name and its call to action are long words. At 375px
   they overflow one row and the button drops to a line of its own, giving a
   three-row header that pushes the hero most of a screen down. Trimming the
   brand and the button just enough to share one row is worth more than the
   couple of points of type size it costs. */
@media (max-width: 720px){
  .mark__name{ font-size: 1.05rem; }
  .mark__glyph{ width: 22px; height: 22px; }
  .masthead .btn{ padding: .55rem 1rem; font-size: .92rem; }
}