/* ============================================================================
   footer.css — Modern Mountain shared site footer.

   Self-contained and safe on every page: uses Daybreak tokens when present,
   with OKLCH fallbacks so it renders correctly even where tokens.css is not
   loaded (e.g. the home page bundle). Markup is identical on every page.

   DEFENSIVE BY DESIGN. The home page bundle used to ship bare `footer{}` and
   `nav{}` element rules that reached straight into this component: a class
   selector only wins for the properties it actually declares, so anything left
   unstated was taken over. That produced a `--paper` panel on the page canvas,
   a row-flex footer with the copyright floated mid-height, column titles beside
   their lists, and — below 768px — `nav{display:none}` deleting both link
   columns outright. Those bundle rules are now scoped to `header nav`, but the
   guard stays: every layout-critical property below is declared explicitly so
   no future bare element rule can take this component over again.

   Layout ladder:
     >1080px   brand | Explore | Company | Contact
     <=1080px  brand across the top, three columns beneath
     <=680px   two columns, Contact spanning
     <=420px   single column, base bar stacked
============================================================================ */

/* ---- Root ---------------------------------------------------------------
   `footer.mm-footer` (0,1,1) outranks any bare `footer` rule on every
   property, including the ones a hijacking stylesheet would try to set. */
footer.mm-footer{
  display:block;
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:min(100% - 2rem, var(--shell-max, 1320px));
  margin:clamp(4rem, 8vw, 6.5rem) auto 0;
  padding:clamp(2.25rem, 4vw, 3rem) 0 clamp(1.75rem, 3vw, 2.4rem);
  border-top:1px solid var(--rule, oklch(1 0 0 / 0.12));
  background:transparent;
  font-family:var(--ff-body, "Geist", system-ui, sans-serif);
  color:var(--ink-soft, oklch(0.80 0.008 252));
  flex-wrap:nowrap;
  gap:normal;
}
.mm-footer *{box-sizing:border-box}

/* ---- Column grid -------------------------------------------------------- */
.mm-footer .mm-footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr));
  gap:clamp(1.75rem, 3.2vw, 3.25rem);
  align-items:start;
  width:100%;
  margin:0;
  padding:0;
}

/* ---- Brand -------------------------------------------------------------- */
.mm-footer .mm-footer-brand{display:block;min-width:0}
.mm-footer .mm-footer-logo{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin:0;
  padding:0;
  font-family:var(--ff-display, "Bricolage Grotesque", system-ui, sans-serif);
  font-size:clamp(1rem, .95rem + .2vw, 1.12rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--ink, oklch(0.96 0.006 250));
  text-decoration:none;
}
.mm-footer .mm-footer-logo img{
  flex:0 0 auto;
  display:block;
  width:2.4rem;
  height:2.2rem;
  object-fit:contain;
}
/* Was .48rem — 7.68px computed, below the legibility floor. */
.mm-footer .mm-footer-logo small{
  display:block;
  margin-top:.45rem;
  font-family:var(--ff-body, "Geist", system-ui, sans-serif);
  font-size:clamp(.62rem, .58rem + .14vw, .7rem);
  font-weight:600;
  letter-spacing:.22em;
  line-height:1;
  color:var(--ink-faint, oklch(0.62 0.008 255));
}
.mm-footer .mm-footer-tagline{
  margin:1.1rem 0 0;
  max-width:min(100%, 26ch);
  color:var(--ink-soft, oklch(0.80 0.008 252));
  font-size:clamp(.88rem, .84rem + .2vw, .95rem);
  line-height:1.55;
}

/* ---- Assessment CTA -----------------------------------------------------
   Outlined, not filled: the docked finale button sits directly above this,
   and two solid blue calls to action stacked together fight each other. */
.mm-footer .mm-footer-cta{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:1.5rem;
  padding:.72rem 1.15rem;
  border:1px solid var(--rule, oklch(1 0 0 / 0.12));
  border-radius:999px;
  color:var(--ink, oklch(0.96 0.006 250));
  font-size:clamp(.84rem, .8rem + .18vw, .9rem);
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:border-color 220ms var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
             color 220ms var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.mm-footer .mm-footer-cta:hover,
.mm-footer .mm-footer-cta:focus-visible{
  border-color:var(--sky, oklch(0.72 0.14 248));
  color:var(--sky, oklch(0.72 0.14 248));
}
.mm-footer .mm-footer-cta span{font-size:1.05em;line-height:1}

/* ---- Link columns -------------------------------------------------------
   `display`, `margin-left`, `gap` and `font-size` are restated because the
   bundle's bare `nav{}` rule set exactly those four. */
.mm-footer .mm-footer-nav{
  display:block;
  min-width:0;
  margin:0;
  margin-left:0;
  padding:0;
  gap:normal;
  font-size:inherit;
  font-weight:inherit;
}
.mm-footer .mm-footer-col-title{
  display:block;
  margin:0 0 1rem;
  padding:0;
  font-family:var(--ff-body, "Geist", system-ui, sans-serif);
  font-size:clamp(.66rem, .62rem + .14vw, .72rem);
  font-weight:700;
  letter-spacing:.2em;
  line-height:1;
  text-transform:uppercase;
  color:var(--ink-soft, oklch(0.80 0.008 252));
}
.mm-footer .mm-footer-nav ul{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin:0;
  padding:0;
  list-style:none;
}
.mm-footer .mm-footer-nav li{margin:0;padding:0}
.mm-footer .mm-footer-nav a{
  display:inline-block;
  color:var(--ink-soft, oklch(0.80 0.008 252));
  font-size:clamp(.88rem, .84rem + .2vw, .95rem);
  font-weight:500;
  line-height:1.35;
  text-decoration:none;
  transition:color 220ms var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.mm-footer .mm-footer-nav a:hover,
.mm-footer .mm-footer-nav a:focus-visible{
  color:var(--sky, oklch(0.72 0.14 248));
}

/* ---- Contact column -----------------------------------------------------
   A phone number that breaks across lines reads as two broken numbers. */
.mm-footer .mm-footer-contact a[href^="tel:"],
.mm-footer .mm-footer-contact a[href^="mailto:"]{white-space:nowrap}
/* A labelled line: the demo number needs to say what it is, or a visitor
   dials it expecting a person. The label is a sibling of the link, not part
   of it, so the link text stays the number alone for screen readers and for
   the phone's own dial preview. */
.mm-footer .mm-footer-labelled{display:block}
.mm-footer .mm-footer-label{
  display:block;
  margin-bottom:.1rem;
  font-size:clamp(.6rem, .57rem + .12vw, .66rem);
  font-weight:600;
  letter-spacing:.16em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ink-faint, oklch(0.62 0.008 255));
}
/* Email and location are a separate group from the two phone lines, so they
   get air rather than sitting flush under the labelled numbers. */
.mm-footer .mm-footer-labelled + li{margin-top:.95rem}
.mm-footer .mm-footer-place{
  margin:0;
  color:var(--ink-faint, oklch(0.62 0.008 255));
  font-size:clamp(.86rem, .82rem + .2vw, .92rem);
  font-weight:500;
  line-height:1.4;
}

/* ---- Base bar -----------------------------------------------------------
   No width of its own. It used to repeat the root's
   `width:min(100% - 2rem, --shell-max)` plus auto margins while already
   inside it, which inset the closing rule 16px per side from the columns
   above — 1288px against 1320px on desktop, 311px against 343px on mobile. */
.mm-footer .mm-footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem clamp(1rem, 2vw, 1.75rem);
  width:100%;
  margin:clamp(2.25rem, 4vw, 3rem) 0 0;
  padding:clamp(1.1rem, 2vw, 1.4rem) 0 0;
  border-top:1px solid var(--rule, oklch(1 0 0 / 0.12));
  font-size:clamp(.72rem, .68rem + .15vw, .78rem);
  color:var(--ink-faint, oklch(0.62 0.008 255));
}
.mm-footer .mm-footer-copy{margin:0}
.mm-footer .mm-footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(.9rem, 1.6vw, 1.4rem);
  margin:0;
  padding:0;
  list-style:none;
}
.mm-footer .mm-footer-legal a,
.mm-footer .mm-footer-top{
  color:var(--ink-faint, oklch(0.62 0.008 255));
  font-size:inherit;
  text-decoration:none;
  transition:color 220ms var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.mm-footer .mm-footer-legal a:hover,
.mm-footer .mm-footer-legal a:focus-visible,
.mm-footer .mm-footer-top:hover,
.mm-footer .mm-footer-top:focus-visible{
  color:var(--sky, oklch(0.72 0.14 248));
}
.mm-footer .mm-footer-top{margin-left:auto}

/* ---- Focus -------------------------------------------------------------- */
.mm-footer a:focus-visible{
  outline:2px solid var(--sky, oklch(0.72 0.14 248));
  outline-offset:4px;
  border-radius:4px;
}

/* ---- Ladder ------------------------------------------------------------- */
@media (max-width:1080px){
  .mm-footer .mm-footer-inner{grid-template-columns:repeat(3, minmax(0,1fr))}
  .mm-footer .mm-footer-brand{grid-column:1 / -1}
  .mm-footer .mm-footer-tagline{max-width:min(100%, 40ch)}
}
@media (max-width:680px){
  .mm-footer .mm-footer-inner{grid-template-columns:repeat(2, minmax(0,1fr))}
  .mm-footer .mm-footer-contact{grid-column:1 / -1}
  /* 44px minimum touch target, per WCAG 2.5.5. The links carry the height
     themselves rather than the list carrying it as gap, so the whole row is
     tappable and not just the glyphs. */
  .mm-footer .mm-footer-nav ul{gap:0}
  .mm-footer .mm-footer-labelled + .mm-footer-labelled{padding-top:.6rem}
  .mm-footer .mm-footer-nav a{
    display:flex;
    align-items:center;
    min-height:2.75rem;
    padding-block:.25rem;
  }
  .mm-footer .mm-footer-cta{width:100%;justify-content:space-between}
}
/* Deliberately no single-column step. Dropping to one column at phone width
   made the footer 861px tall on a 376px screen — a long scroll past links
   nobody came for. Two columns hold "Help & support" at 15px down to 320px. */
@media (max-width:420px){
  .mm-footer .mm-footer-base{
    flex-direction:column;
    align-items:flex-start;
    gap:.8rem;
  }
  .mm-footer .mm-footer-top{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .mm-footer a,
  .mm-footer .mm-footer-cta{transition:none}
}

/* ---- Docked finale ------------------------------------------------------
   When the home page's invitation docks directly above the footer it already
   supplies the separation, so the footer drops its own large top margin. On a
   short window that difference is what keeps the whole invitation and the
   whole footer on screen together at full scroll. */
.finale-dock + footer.mm-footer{margin-top:clamp(1.5rem, 3vw, 2.75rem)}