/* ==========================================================================
   STILLMIND MENTAL HEALTH · INNER PAGES

   Everything that is not the home page: six services, four practice pages,
   five legal pages, and the 404.

   These do no seam work and no parallax. The home page earns its scenes by
   being the thing people land on; a service page is something you arrive at
   already deciding, and the job there is to be readable. So the atmosphere
   layer shows through (these sections are transparent, unlike the paper
   bands on the home page, which have to be flat to protect a measured
   boundary) and nothing moves on scroll except the page.

   The shared chrome in here comes from tools/pagegen.py. Editing the header
   or footer means editing tools/pages/_shell.html and re-running it, not
   editing sixteen files by hand.
   ========================================================================== */

/* --------------------------------------------------------------------
   Page head

   The header is position: fixed and about 74px tall at its shortest, so
   the first line of every page has to start below it. The home page does
   not need this because its first section is a full-height hero that the
   header deliberately floats over.
   -------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding-top: clamp(7.5rem, 14vw, 11rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-head__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: var(--measure);
}

.page-head h1 { margin: 0; }

.page-head .lead { margin: 0; }

/* Where you are, and the way back up. Two levels only: this site is two
   deep at its deepest, and a trail that says Home for a page reached from
   the home page is furniture. */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
  font-size: var(--t-xs);
  color: var(--c-text-3);
}

.crumb a {
  color: var(--c-text-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}

.crumb a:hover { color: var(--c-brand); text-decoration-color: currentColor; }

.crumb__sep { color: var(--c-text-3); }

/* --------------------------------------------------------------------
   Body
   -------------------------------------------------------------------- */

.page-body { padding-bottom: clamp(3rem, 7vw, 5.5rem); }

/* The gap between blocks, applied inside .container rather than on
   .page-body, whose only child is the container itself. */
.page-body .container > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }

.page-section {
  max-width: var(--measure);
  scroll-margin-top: 7rem;
}

.page-section > h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--s-4);
}

.page-section > h3 {
  font-size: var(--t-h4);
  margin: var(--s-6) 0 var(--s-3);
}

.page-section p { margin: 0 0 var(--s-4); color: var(--c-text-2); }
.page-section p:last-child { margin-bottom: 0; }

.page-section .link { white-space: normal; }

/* Plain bulleted lists. base.css strips list markers site-wide because
   every list on the home page is a layout, so pages that carry real prose
   lists put them back. */
.page-list {
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--c-text-2);
}

.page-list li {
  position: relative;
  padding-left: var(--s-5);
}

.page-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-sage);
}

/* --------------------------------------------------------------------
   At a glance

   Renders only the rows that have facts. Duration is missing from every
   service until Sam supplies appointment lengths, so the panel simply
   does not carry that row yet: a half-empty specification table reads as
   an unfinished site, and an invented number reads as a real one.
   -------------------------------------------------------------------- */

.glance { max-width: var(--measure); }

.glance > .core {
  display: grid;
  gap: var(--s-4) var(--s-6);
}

@media (min-width: 620px) {
  .glance > .core { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.glance h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-sage);
}

.glance dl { margin: 0; display: contents; }

.glance__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.glance dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.glance dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text);
}

/* --------------------------------------------------------------------
   Callout

   For the one thing on a page that is not prose: a crisis note, a
   controlled-substance caveat, a compliance disclaimer.
   -------------------------------------------------------------------- */

.callout {
  max-width: var(--measure);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-paper-sunk);
  box-shadow: var(--ring-hairline);
}

.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

.callout h2,
.callout h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-h4);
}

.callout p { margin: 0 0 var(--s-3); color: var(--c-text-2); }
.callout p:last-child { margin-bottom: 0; }

.callout--crisis {
  background: var(--c-crisis-bg);
  box-shadow: inset 0 0 0 1px var(--c-crisis-border);
}

.callout--crisis h2,
.callout--crisis h3 { color: var(--c-crisis); }

/* The one panel on a page that is the action rather than a note about it.
   Sage tint so it reads as an invitation, and it sits above the prose
   rather than after it: someone who arrives already decided should not
   have to read the cancellation policy to find the way in. */
.callout--action {
  background: var(--c-brand-soft);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  scroll-margin-top: 7rem;
}

.callout--action > h2 { font-size: var(--t-h3); }

.callout__actions { margin-top: var(--s-5); }

/* The address in plain text under the button. A mailto: link does nothing
   at all on a device with no mail client set up, and it fails silently, so
   the address has to be readable and copyable without one. */
.callout__aside {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-3);
}

.callout__caution {
  padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 var(--c-stone);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------------
   Map

   OpenStreetMap, and not Google Maps, for a reason that is practical
   before it is principled: the Google Maps Embed API requires a
   billing-enabled API key, which this practice does not have, and the
   keyless maps.google.com/?output=embed endpoint is undocumented and
   has been broken by Google before. A map that stops rendering one
   morning on the page whose job is to say where the office is would be
   a bad trade for brand familiarity.

   The second reason is that this map is the first request the site has
   ever made to anyone but the host, and on the contact page of a
   psychiatric practice it matters who that is. OSM's tile servers set
   no cookies and sell nothing; Google is an advertising company and
   the Maps embed sets cookies. referrerpolicy="no-referrer" means the
   tile servers are told an IP wants a square of Indiana and not which
   page asked for it. Attribution is inside the frame, which is what
   the ODbL wants, so there is no credit line out here.

   loading="lazy" is on the iframe and it is a hint rather than a
   promise. Measured: Chrome starts the request on page load anyway at
   both 390 and 1200 wide, because the contact page is short enough
   that the map sits inside the lazy-load margin. It still helps on a
   slow connection and it costs nothing, so it stays, but the true
   statement about this map is that the request carries no referrer and
   no cookies, not that it does not happen. If that distinction ever
   matters more than the map does, the fix is a click-to-load shim and
   not a stronger adjective here.

   The coordinates in the src are a Nominatim geocode of the address
   rather than an estimate from the town centre: OSM way 1472767058,
   38.32512 / -85.80082, and the bbox is about a kilometre across so
   the cross streets are readable. If the address ever changes,
   geocode the new one. Nudging the numbers by hand puts a marker on a
   building that is not this one, which is worse than no map.

   overflow:hidden is what rounds the iframe, since a border-radius on
   the frame itself does not clip what the map paints inside it.
   -------------------------------------------------------------------- */

.map {
  max-width: var(--measure);
  margin: var(--s-5) 0 var(--s-4);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-paper-sunk);
  box-shadow: var(--ring-hairline);
}

.map__frame {
  display: block;
  width: 100%;
  /* The floor is set by OSM's attribution bar, not by the map. At 390
     wide that bar wraps to two lines and eats about 40px off the
     bottom of the frame, so a 15rem map lost a sixth of itself to
     credit text. 17rem leaves the marker and its cross streets clear
     above it. The cap keeps it off the whole screen on a laptop. */
  height: clamp(17rem, 52vw, 22rem);
  border: 0;
}

.map__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}

@media (max-width: 540px) {
  .map__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .map__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Same 44px floor as .related a, and for the same reason: this is an
   inline link sitting next to a button in a wrapping row, so the line
   box alone does not reach the tap target. */
.map__actions .link {
  display: inline-flex;
  align-items: center;
  padding-block: 0.6875rem;
}

/* --------------------------------------------------------------------
   Closing action

   Every page ends the same way, because every page exists to get someone
   to the same place. It resolves into ink so the footer does not start
   against a hard edge, which is the job .services::after does on the home
   page.
   -------------------------------------------------------------------- */

.page-cta {
  position: relative;
  z-index: var(--z-raised);
  isolation: isolate;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
}

/* The fade into ink that used to close this section is gone. The footer
   lifts over it on a rounded edge now, from one rule in footer.css. This
   was one of three copies of the same gradient; see the note in
   bands.css where the first one was. */

.page-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: var(--measure);
}

.page-cta h2 { margin: 0; font-size: var(--t-h3); }
.page-cta p { margin: 0; color: var(--c-text-2); }
.page-cta .btn { margin-top: var(--s-2); }

/* --------------------------------------------------------------------
   Related pages
   -------------------------------------------------------------------- */

.related {
  max-width: var(--measure);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-stone);
}

.related h2 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-sage);
}

.related ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

.related a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  /* 44px is the tap floor and these are inline links in a wrapping row,
     so the padding is what gets them there rather than the line box. */
  padding-block: 0.6875rem;
  color: var(--c-brand);
  font-weight: 600;
}

.related a:hover { color: var(--c-brand-hover); text-decoration: underline; }

/* --------------------------------------------------------------------
   Legal pages

   Long, dense, and read by almost nobody until the one time it matters.
   Narrower measure and a visible last-reviewed date.
   -------------------------------------------------------------------- */

.legal .page-section { max-width: var(--measure); }

.legal-meta {
  margin: var(--s-4) 0 0;
  font-size: var(--t-sm);
  color: var(--c-text-3);
}

/* Drafted here, reviewed by someone qualified before launch. Stated on the
   page rather than only in TODO-SAM.md, because an unreviewed legal notice
   that looks finished is worse than one that says it is not. */
.legal-draft {
  margin-top: var(--s-6);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------
   404
   -------------------------------------------------------------------- */

.notfound { min-height: 60vh; display: flex; align-items: center; }
.notfound .page-head { padding-block: clamp(5rem, 10vw, 8rem); }