/* ============================================================
   BetaDocta footer   (assets/css/bd-foot.css)

   Loads AFTER bd-core.css, which is the locked token file and is not
   edited. Everything here overrides the old .bd-foot block that still
   lives there, so each rule is written as `.bd-foot ...` to out-weigh
   bd-core's `.bd-ink a` and `.bd-foot nav a`.

   The footer is a dark band, so every colour here comes from the
   theme-invariant tokens --on-ink, --on-ink-soft, --on-ink-line and
   --teal-on-ink. --text and --text-soft are ink-coloured and would be
   invisible here; they are never used in this file.

   Measured against the band (--ink #07262b):
     --on-ink       #f4f2ee                 14.22 : 1
     --on-ink-soft  rgba(244,242,238,.72)    7.95 : 1
     --teal-on-ink  #5fc3d2                  7.74 : 1
   Every one of those clears 4.5:1, so there is no "quiet" grey in
   here that is quietly unreadable.

   Three rows, in the order somebody reads them:
     .bd-foot__say    what this is, and the two things you may need now
     .bd-foot__grid   the link columns, equal width, always one row
     .bd-foot__base   the legal note and who built it
   ============================================================ */

.bd-foot{
  padding-block: var(--s5) var(--s3);
  border-top: 1px solid var(--on-ink-line);
}

/* One wrap, three rows, one gap. The old footer had the note's spacing
   set by a margin on the note and the columns' spacing set by a grid
   gap, so the two never matched. */
.bd-foot .bd-foot__inner{
  display: grid;
  gap: var(--s4);
}

/* ---------- row 1: the say ----------------------------------
   The lede and the two live links. These were inside the column grid
   and left a tall empty cell under the Emergency button; they are now
   their own row, so there is nothing below them to leave empty. */
.bd-foot .bd-foot__say{
  display: grid;
  gap: var(--s3);
}
.bd-foot .bd-foot__line{
  margin: 0;
  max-width: 32ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--on-ink);
}
.bd-foot .bd-foot__acts{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
}

/* The language switch, same shape as the Emergency button beside it so
   the pair reads as one set of two choices rather than a button and a
   stray link. */
.bd-foot .bd-foot__lang{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .5rem .75rem;
  border: 1px solid var(--on-ink-line);
  border-radius: var(--r);
  font-size: .94rem;
  font-weight: 650;
  color: var(--on-ink);
  text-decoration: none;
}
.bd-foot .bd-foot__lang:hover,
.bd-foot .bd-foot__lang:focus-visible{
  border-color: var(--on-ink);
  color: var(--on-ink);
}

/* ---------- row 2: the link columns -------------------------
   bd-shell.js appends <nav data-staff-nav> to .bd-foot__grid when a
   clinician is signed in. The class name and the "container of <nav>
   children" shape are therefore load bearing and are kept. */
.bd-foot .bd-foot__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: var(--s3);
  border-top: 1px solid var(--on-ink-line);
  border-bottom: 1px solid var(--on-ink-line);
}
.bd-foot .bd-foot__grid > nav{
  display: grid;
  gap: .25rem;
  align-content: start;
  min-width: 0;
}

/* Stacked on a phone, so each group gets a rule of its own instead of
   two groups sharing a row and a third sitting alone. */
.bd-foot .bd-foot__grid > nav + nav{
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--on-ink-line);
}

/* The headings. They were .875rem uppercase at opacity .75, which at
   this size reads as a floating label; now they are plain weight-600
   sentence case at full contrast, sitting directly on their list. */
.bd-foot .bd-foot__h{
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--on-ink);
}

.bd-foot .bd-foot__grid nav a{
  color: var(--on-ink-soft);
  text-decoration: none;
  font-size: .94rem;
  line-height: 1.35;
  padding-block: .4rem;
  overflow-wrap: break-word;
}
.bd-foot .bd-foot__grid nav a:hover,
.bd-foot .bd-foot__grid nav a:focus-visible{
  color: var(--on-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- row 3: the note and the maker -------------------- */
.bd-foot .bd-foot__base{
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  border: 0;
}
.bd-foot .bd-foot__note{
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 76ch;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--on-ink-soft);
}
.bd-foot .bd-foot__by{
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--on-ink-soft);
}
.bd-foot .bd-foot__by a{
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--on-ink-line);
}
.bd-foot .bd-foot__by a:hover,
.bd-foot .bd-foot__by a:focus-visible{
  border-bottom-color: var(--on-ink);
}

/* ============================================================
   Desktop. 720px is where three columns of links stop being a
   squeeze.
   ============================================================ */
@media (min-width: 720px){

  /* The say row: words on the left, the two live links on the right,
     on one line. */
  .bd-foot .bd-foot__say{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s4);
  }
  .bd-foot .bd-foot__acts{ justify-content: flex-end }

  /* Wider here than on a phone: at 32ch this sentence broke into three
     short lines with the whole middle of the band empty beside it. */
  .bd-foot .bd-foot__line{ max-width: 46ch }

  /* grid-auto-flow:column with 1fr auto columns, NOT a fixed
     repeat(3, ...). Three columns become four the moment bd-shell.js
     appends the staff nav, every column stays the same width, and
     nothing can wrap to a second row. That orphan row was the
     client's "looks accidental". */
  .bd-foot .bd-foot__grid{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--s4);
    row-gap: 0;
    padding-block: var(--s4);
  }
  .bd-foot .bd-foot__grid > nav + nav{
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .bd-foot .bd-foot__base{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s4);
  }
  .bd-foot .bd-foot__by{ text-align: right; white-space: nowrap }
}