/* Halden Orthodontics, footer.css (builder F, 2 Nov): the x02 footer (S10, S11, D18). Replaces the .foot rules that lived in
   base.css. The form devices (D14) stay in devices.css.

   One painted ground, so no seam can show: .foot paints the body from --foot-curve down, and .foot__curve is ONE ellipse
   (1.6 times the width, its edge meeting x = 0 exactly --foot-curve down) laid over it. The two overlap everywhere except
   the outermost pixel at each side, so no row is ever shared by two antialiased edges (the old svg curve plus a body block
   left a light line at fractional pixel offsets and browser zoom).

   Hover and focus come from the measured devices: the D02 text roll (0.8s, the underline link timing) and the D03 corner
   arrow, which slides in with a colour lift from --ink-3-dark to full ink. Reduced motion: colour only. */

.foot { position: relative; z-index: 2; isolation: isolate; overflow: clip; margin-top: calc(-1 * var(--foot-curve));
  padding-top: calc(var(--foot-curve) + var(--gap-64)); color: var(--ink-invert);
  background: linear-gradient(var(--anchor), var(--anchor)) 0 var(--foot-curve) / 100% 100% no-repeat; }
/* the curve rises over the band above it, so the last band of a page keeps its full bottom space plus the curve */
main > .band:last-child { padding-bottom: calc(var(--pad-sec) + var(--foot-curve)); }
.foot__curve { position: absolute; z-index: -1; top: 0; left: calc(50% - var(--foot-ellipse-w) / 2); width: var(--foot-ellipse-w);
  height: calc(var(--foot-curve) * var(--foot-ellipse-k)); border-radius: var(--r-circle); background: var(--anchor); pointer-events: none; }
.foot__in { container-type: inline-size; background-color: var(--anchor); }   /* the content always sits below the curve: its
   real ground, declared, so contrast readers resolve the dark ground (anchor over anchor, so no edge can show) */

.foot__lbl { display: block; margin: 0 0 var(--gap-16); color: var(--ink-3-dark); font-family: var(--t-c2-family); font-size: var(--t-c2-size);
  line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); text-align: left; }

/* ---- footer link: roll + corner arrow + colour lift ------------------------------------------------------------ */
.flink { display: inline-flex; align-items: center; gap: var(--gap-8); min-height: var(--gap-32); color: var(--ink-3-dark);
  transition: color var(--dur-fast) var(--ease-io); }
.flink .roll > span { transition: transform var(--dur-link) var(--ease-out); }
.flink .ico-corner { opacity: 0; transform: translate(calc(-1 * var(--gap-8)), var(--gap-8)); transition: opacity var(--dur-fast) var(--ease-io), transform var(--dur-link) var(--ease-out); }
.flink:hover, .flink:focus-visible { color: var(--ink-invert); }
.flink:hover .roll > span, .flink:focus-visible .roll > span { transform: translateY(-100%); }
.flink:hover .ico-corner, .flink:focus-visible .ico-corner { opacity: 1; transform: none; }
.flink--strong, .flink--big { color: var(--ink-invert); }
.flink--u { gap: var(--gap-8); padding-bottom: 2px; border-bottom: 1px solid var(--ink-invert); min-height: 24px; color: var(--ink-invert);
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.flink--u .ico-corner { opacity: 1; transform: none; }
.flink--u:hover .ico-corner, .flink--u:focus-visible .ico-corner { transform: translate(2px, -2px); }

/* ---- top: the call block and the form -------------------------------------------------------------------------- */
.foot__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-40); padding-bottom: calc(var(--gap-64) + var(--gap-32)); }
.foot__call { display: grid; align-content: start; justify-items: start; gap: var(--gap-16); }
.foot__call .foot__lbl { margin: 0; }
.flink--big .ico-corner { width: calc(var(--icon) * 1.5); height: calc(var(--icon) * 1.5); }
.foot__hrs { color: var(--ink-3-dark); font-family: var(--t-p3-family); font-size: var(--t-p3-size); line-height: 1.5; letter-spacing: var(--t-p3-track); }
.foot__form { display: grid; align-content: start; gap: var(--gap-40); }
.foot__form .radios legend { color: var(--ink-3-dark); }

/* ---- the menu: three link columns and the office block --------------------------------------------------------- */
.foot__grid { display: grid; grid-template-columns: 3fr 1.3fr; gap: var(--gap-40); padding: var(--gap-48) 0 var(--gap-64);
  border-top: 1px solid var(--hairline-dark); }
.foot__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-24); }
.foot__col ul { display: grid; gap: var(--gap-8); justify-items: start; }
.foot__col .flink { font-family: var(--t-p1-family); font-size: var(--t-p1-size); line-height: var(--t-p1-lh); font-weight: var(--t-p1-weight);
  letter-spacing: var(--t-p1-track); }

.foot__office { display: grid; align-content: start; justify-items: start; gap: var(--gap-24); padding-left: var(--gap-32);
  border-left: 1px solid var(--hairline-dark); }
.foot__office .foot__lbl { margin: 0; }
.foot__adr { display: grid; justify-items: start; gap: var(--gap-16); font-style: normal; }
.foot__street { font-family: var(--t-p1-family); font-size: var(--t-p1-size); line-height: 1.25; font-weight: var(--t-p1-weight);
  letter-spacing: var(--t-p1-track); color: var(--ink-invert); }
.foot__dl { display: grid; gap: 0; width: 100%; margin: 0; }
.foot__dl > div { display: grid; grid-template-columns: calc(var(--gap-48) + var(--gap-8)) 1fr; align-items: center; gap: var(--gap-12); }
.foot__dl dt { color: var(--ink-3-dark); font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); }
.foot__dl dd { margin: 0; min-height: var(--gap-32); display: flex; align-items: center; font-family: var(--t-p2-family); font-size: var(--t-p2-size);
  font-weight: var(--t-p2-weight); line-height: var(--t-p2-lh); color: var(--ink-invert); }
.foot__hours { width: 100%; border-collapse: collapse; font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: 1.4; }
.foot__hours caption { caption-side: top; margin-bottom: var(--gap-8); }
.foot__hours th, .foot__hours td { padding: var(--gap-8) 0; border-top: 1px solid var(--hairline-dark); vertical-align: top; }
.foot__hours th { text-align: left; font-weight: var(--t-c2-weight); color: var(--ink-3-dark); padding-right: var(--gap-16); }
.foot__hours td { text-align: right; font-weight: var(--t-p2-weight); color: var(--ink-invert); white-space: nowrap; }

/* ---- base row: the trading line, Back to top, the credit ------------------------------------------------------- */
.foot__base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap-24); padding: var(--gap-24) 0;
  border-top: 1px solid var(--hairline-dark); font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight);
  letter-spacing: var(--t-c2-track); }
.foot__up { display: inline-flex; align-items: center; gap: var(--gap-12); min-height: 48px; color: var(--ink-invert); }
.foot__ring { display: grid; place-items: center; width: var(--circ); height: var(--circ); border: 1px solid var(--ink-3-dark);
  border-radius: var(--r-circle); transition: background-color var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io),
  color var(--dur-fast) var(--ease-io); }
.foot__arrows { display: grid; width: var(--icon); height: var(--icon); overflow: hidden; }
.foot__arrows svg { grid-area: 1 / 1; width: var(--icon); height: var(--icon); transition: transform var(--dur-link) var(--ease-out); }
.foot__arrows svg + svg { transform: translateY(100%); }
.foot__up:hover .foot__ring, .foot__up:focus-visible .foot__ring { background: var(--ground-light); border-color: var(--ground-light); color: var(--anchor); }
.foot__up:hover .foot__arrows svg, .foot__up:focus-visible .foot__arrows svg { transform: translateY(-100%); }
.foot__up:hover .foot__arrows svg + svg, .foot__up:focus-visible .foot__arrows svg + svg { transform: none; }
.foot__credit { justify-self: end; }
.foot__credit a { display: inline-flex; align-items: center; gap: var(--gap-8); min-height: 24px; color: var(--ink-invert);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1px no-repeat;
  transition: background-size var(--dur-link) var(--ease-out); }
.foot__credit .ico-corner { width: calc(var(--icon) * .75); height: calc(var(--icon) * .75); transition: transform var(--dur-link) var(--ease-out); }
.foot__credit a:hover, .foot__credit a:focus-visible { background-size: 100% 1px; }
.foot__credit a:hover .ico-corner, .foot__credit a:focus-visible .ico-corner { transform: translate(2px, -2px); }

/* ---- the signature ending: the practice name across the full width (S2 grammar: words to opposite edges) -------- */
.foot__mark { display: flex; justify-content: space-between; align-items: flex-end; margin: 0; padding: var(--gap-40) 0 .3em;
  font-family: var(--display); font-weight: 400; font-size: calc(100cqi / var(--foot-name-fit)); line-height: var(--t-display-xxl-lh);
  letter-spacing: var(--t-display-xxl-track); white-space: nowrap; color: var(--ink-invert); }
.foot__mark em { font-style: italic; }
.foot__mark .w { display: block; padding: 0 0 .3em; margin-bottom: -.3em; clip-path: inset(-.5em -.3em 0 -.3em); }
.foot__mark .w > * { display: block; transition: transform calc(var(--dur-link) * 1.5) var(--ease-out); }
.foot__mark .w + .w > * { transition-delay: calc(var(--dur-fast) * .4); }
html.js .foot__mark:not(.is-in) .w > * { transform: translateY(160%); }

@media (prefers-reduced-motion: reduce) {
  .flink .roll > span, .flink .ico-corner, .foot__arrows svg, .foot__credit .ico-corner, .foot__mark .w > * { transition: none; transform: none !important; }
  .flink .ico-corner { opacity: 0 !important; }
  .flink--u .ico-corner { opacity: 1 !important; }
  .foot__arrows svg + svg { display: none; }
  .foot__credit a { transition: none; }
  html.js .foot__mark:not(.is-in) .w > * { transform: none; }
}

@media (max-width: 1023px) {
  .foot { padding-top: calc(var(--foot-curve) + var(--gap-40)); }
  .foot__top { grid-template-columns: 1fr; gap: var(--gap-48); padding-bottom: var(--gap-64); }
  .foot__grid { grid-template-columns: 1fr; gap: 0; padding: 0 0 var(--gap-32); border-top: 0; }
  .foot__nav { grid-template-columns: 1fr; gap: 0; }
  .foot__col, .foot__office { padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-dark); }
  .foot__office { border-left: 0; padding-left: 0; }
  .foot__col ul { gap: 0; }
  .flink, .flink--u, .foot__dl dd, .foot__credit a { min-height: 44px; }
  .flink--u { align-items: flex-end; padding-bottom: 4px; }
  .foot__base { grid-template-columns: 1fr; justify-items: start; gap: var(--gap-16); }
  .foot__credit { justify-self: start; }
  .foot__mark { padding-top: var(--gap-24); }
}

/* ---- Halden: the sample sentence in the small print, buttons that look like links, the longer wordmark ---- */
.foot__sample { margin: 0; max-width: 52ch; color: var(--ink-3-dark); font-family: var(--t-c3-family); font-size: var(--t-c3-size); line-height: 1.4; }
.foot__base { grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr); }
button.flink { padding: 0; border: 0; background: none; color: var(--ink-3-dark); font: inherit; cursor: pointer; text-align: left; }
@media (max-width: 1023px) { .foot__base { grid-template-columns: minmax(0, 1fr); } }