/* Danbe Dental - interior chassis (wave A).
   Loaded AFTER tokens.css and site.css on the 13 interior pages only.

   Scope law (v2-specs/interiors-plan.md, file ownership): this file adds the
   interior-only primitives. It never restyles anything site.css already owns;
   index.html and site.css are read-only for every wave agent. Page-group CSS
   (int-team, int-info, int-services, int-procedures, int-lab) is written by the
   later waves and loaded after this file.

   What lives here
     .int-main       the header offset every interior page needs
     .int-title      the flat title strip (hanoverendo-int/00 + mvendo-int/00)
     .int-well       the interior content well (1120/1060, hanoverendo-int/00)
     .int-sheet      the floating white sheet primitive
     .int-backrow    the back-pill row (hanoverendo-int/03)
     .int-prefooter  the shared appointment band, stamped by tools/inject_prefooter.py
     .dw-sub a.is-current   drawer sub-link active marker (class B, see below)

   The washed canvas continues on interiors through the homepage's OWN mechanism:
   wrap interior sections in <div class="canvas"> and give each section the
   .band class, exactly as index.html does. Nothing is redefined here. */

:root {
  /* Warm light grey title surface. The precedent strips are flat rgb(239,239,239);
     Danbe's structural greys are warm (--grey-footer #6e6a65), so the strip keeps
     the precedent's luminance with the flavor's warm cast. */
  --int-title-bg:   #efece8;
  --int-title-pad:  20px;    /* hanoverendo-int/00: .section-container padding 20px 0 */
  --int-title-gap:  5px;     /* hanoverendo-int/00: H1 margin-bottom 5px */
  --int-well:       1120px;  /* hanoverendo-int/00 Mechanism: authored px, centred */
  --int-well-pad:   30px;    /* 1120 - 60 = the 1060px content column */
  --int-sheet-pad:  30px;    /* homepage contact-panel padding */
  --int-pf-card-w:  352px;   /* humphries-int/08 NAP card */
}

/* ---------------------------------------------------------------------------
   Header offset. The fixed header reserves no space (both precedents open every
   interior page with an in-flow spacer exactly one header tall). Same mechanism,
   one rule: the offset IS the header-height token, so it can never drift from
   the bar it clears.
   --------------------------------------------------------------------------- */
.int-main { padding-top: var(--header-h); }

/* ---------------------------------------------------------------------------
   TITLE STRIP : hanoverendo-int/00 (104px flat strip, serif page name) cross-
   checked against mvendo-int/00 (107px). Flat quiet band, no imagery, no
   breadcrumbs, no kicker: this strip is the entire interior hero.
   Height is content-derived: 20 + line box + 5 + 20.
   Display size is the fluid mechanism hanoverendo authors, calc(20px + 2svw),
   clamped so the phone size is explicit: 28px at 390 (x0.57 of the 48.8px
   desktop size, the family's one-scaled-display law).
   --------------------------------------------------------------------------- */
.int-title {
  position: relative;
  background: var(--int-title-bg);
  padding: var(--int-title-pad) var(--gutter-phone);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.int-title h1 {
  margin: 0 0 var(--int-title-gap);
  font-family: var(--font-display); font-weight: 400;
  font-size: 48px;                                   /* fallback */
  font-size: clamp(28px, calc(20px + 2svw), 52px);
  line-height: 1.2;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   CONTENT WELL + SHEETS. The interior well is authored px and simply re-centres
   (hanoverendo-int/00 Mechanism); the 1060px column is the measured inner width.
   Sheets use the homepage's own surface vocabulary: panel fill, --shadow-plate,
   square corners (the homepage plate and contact panels both carry no radius).
   --------------------------------------------------------------------------- */
.int-well {
  width: 100%; max-width: var(--int-well); margin: 0 auto;
  padding: 50px var(--int-well-pad);
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.int-sheet {
  width: 100%;
  background: var(--panel-fill);
  box-shadow: var(--shadow-plate);
  padding: var(--int-sheet-pad);
}
/* a sheet that carries media to its own edge (the homepage plate's 15px frame) */
.int-sheet--flush { background: var(--plate-fill); padding: 15px; }

/* back pill row : hanoverendo-int/03. The pill atom is site.css's; the label is
   sentence case and the width is intrinsic, never stretched. */
.int-backrow { margin: 0; display: flex; justify-content: center; }

/* ---------------------------------------------------------------------------
   DRAWER SUB-LINK ACTIVE MARKER (class B, a11y floor).
   site.css styles `.dw-list > li > a.is-current`, which covers every top-level
   drawer row and the Services group link. A service page's exact drawer row is
   one level deeper, inside .dw-sub, where the marker had no style. This adds the
   same colour treatment, nothing else. It cannot affect index.html, whose drawer
   carries no sub-link marker.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .dw-sub a.is-current { color: var(--azure-on-dark); font-weight: 700; }
}

/* ---------------------------------------------------------------------------
   SHARED PREFOOTER APPOINTMENT BAND
   Anatomy: hanoverendo-int/03's shared pre-footer contact band carrying
   humphries-int/08's NAP-card + form pairing, on Danbe's deep ink-blue surface
   (the flavor bans gold). Card 352 and form ~678 inside the 1120 well, exactly
   as humphries measures them.

   CLASS B (family anti-pattern fix, authorised in interiors-plan.md): humphries
   and hanoverendo both `display:none` this whole band below 1024px, taking the
   form, the card and the map off every phone. Ours survives, single column.
   Nothing else about the band changes.

   CLASS A (ordered by the interiors plan): the recipe's Google mini-map at the
   card foot is replaced by a pointer line to office-info.html. The live map has
   one home on this site, contact.html.
   --------------------------------------------------------------------------- */
.int-prefooter {
  background: var(--ink);
  padding: var(--band-pad) var(--band-frame);
}
.int-pf-well {
  width: 100%; max-width: var(--int-well); margin: 0 auto;
  padding: 0 var(--int-well-pad);
  display: grid;
  grid-template-columns: minmax(0, var(--int-pf-card-w)) minmax(0, 1fr);
  gap: var(--contact-gap);
  align-items: start;
}

.int-pf-card {
  background: var(--white); box-shadow: var(--shadow-plate);
  padding: 15px 15px 30px;                    /* humphries-int/08 card padding */
  text-align: left;
}
.int-pf-lead {
  margin: 0 0 14px;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--muted-ink);
}
.int-pf-name {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-practice); line-height: var(--lh-practice); color: var(--ink);
}
.int-pf-micro {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 6px;
  font-size: var(--size-micro); font-weight: 700; color: var(--body-ink);
}
.int-pf-micro .gl { width: 22px; height: 22px; fill: currentColor; flex: none; }
.int-pf-micro .gl path[stroke] { fill: none; }
/* line-height and link colour match the homepage's own NAP block (.ct-lines);
   these are inline links inside a block of text, the same register index.html
   already ships, so they keep the homepage treatment rather than a divergent one. */
.int-pf-lines { margin: 0; font-size: var(--size-body); line-height: 30px; }
.int-pf-lines a { color: var(--azure-deep); text-decoration: underline; }
/* class B (wave R): the Directions and tel links ride 22px line boxes. The
   padding+negative-margin pair widens each hit area to 44px without moving a
   pixel of layout; the overlap falls only on non-interactive text. Scoped
   here so the approved homepage contact band stays untouched. */
.int-pf-lines a { display: inline-block; padding-block: 11px; margin-block: -11px; }
/* same device for the consent toggle: its label is one 18px line at desktop
   width, so it grows downward only, onto the non-interactive fine print,
   never up toward the textarea. */
.int-pf-form .consent label {
  display: inline-block;
  padding-top: 4px; margin-top: -4px;
  padding-bottom: 22px; margin-bottom: -22px;
}
/* the pointer line is a standalone control, so it takes a real 44px target */
.int-pf-point {
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline);
  font-size: var(--size-body); line-height: 26px;
}
.int-pf-point a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  color: var(--azure-deep); text-decoration: underline;
}

/* the form panel reuses the homepage form anatomy wholesale: .f2, .fld,
   .consent, .fine, .form-status and the .pill--block submit are site.css's and
   are chassis-safe. Only the panel it sits on is authored here. */
.int-pf-form {
  background: var(--white); box-shadow: var(--shadow-plate);
  padding: var(--int-sheet-pad);
}

/* ---------------------------------------------------------------------------
   TABLET : the band stacks where the precedents delete it (class B).
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .int-pf-well { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .int-pf-card { max-width: none; }
}

/* mobile header tier: the offset follows the bar */
@media (max-width: 900px) {
  .int-main { padding-top: var(--header-h-mobile); }
  .int-well { padding: 40px var(--int-well-pad); gap: 32px; }
}

/* ---------------------------------------------------------------------------
   PHONE : house mobile law. Cut the side gutter, keep the band vertical rhythm
   at the phone token, never rescale a component.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .int-title { padding: var(--int-title-pad) var(--gutter-phone); }
  .int-well { padding: 32px var(--gutter-phone); }
  .int-sheet { padding: var(--gutter-phone); }
  .int-prefooter { padding: var(--band-pad) 0; }
  .int-pf-well { padding: 0 var(--gutter-phone); }
  .int-pf-form { padding: var(--gutter-phone); }
  .int-pf-card { padding: 15px 15px 24px; }
}