/*
 * site-footer.css - the site-wide footer bar: "COMING 2026" and the signup
 * prompt on the left, the domain in the middle, partner inquiries on the right.
 *
 * Lifted from the heyvoter.com home page so every Hey Voter surface ends the
 * same way. One markup, two layouts:
 *
 *   .hv-footer           flows at the end of the document. The default, and
 *                        what a long scrolling page wants.
 *   .hv-footer--fixed    pinned to the bottom of the viewport, for a page that
 *                        is one screen tall. A page asking for this must
 *                        reserve var(--hv-footer-height) of its own bottom
 *                        padding, because a fixed bar covers what is under it.
 *
 * Below the narrow breakpoint the signup and partner links move into a
 * hamburger menu and only "COMING 2026" stays on the bar.
 *
 * Requires shared/tokens.css. Contains no colour of its own.
 * Hard rule: zero em or en dashes anywhere in this file. Hyphens only.
 */

.hv-footer {
  /* The anchor for the mobile menu, which hangs off the top edge. Doing it
     this way rather than pinning the menu to the viewport is what lets the
     same markup work flowed and fixed. */
  position: relative;
  height: var(--hv-footer-height);
  /* Stated rather than left at the initial value, because a host page styling
     the bare `footer` element hits this one too: landing/index.html gives its
     own footer a 30px top margin and centred text, and both leaked straight
     into the bar. A shared component cannot assume it is the only footer on
     the page. */
  margin: 0;
  padding: 0 var(--hv-chrome-pad-x);
  text-align: left;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;

  font-family: var(--hv-font-body);
  font-size: var(--hv-footer-size);
  font-weight: 600;
  letter-spacing: var(--hv-footer-tracking);
  text-transform: uppercase;

  color: var(--hv-ink-muted);
  background: var(--hv-navy-950);
}

/* Pinned variant. The gradient lets page content show through as it scrolls
   under the bar, which is why it is not the flat fill used when flowed. */
.hv-footer--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  background: linear-gradient(to top, var(--hv-navy-950-veil), var(--hv-navy-950-clear));
  backdrop-filter: blur(4px);
}

.hv-footer__left {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.hv-footer__coming {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hv-orange);
  white-space: nowrap;
}

.hv-footer__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--hv-radius-pill);
  background: var(--hv-orange);
  box-shadow: 0 0 0 4px var(--hv-orange-halo);
}

/* The one sentence-case control on an otherwise all-caps bar, so it reads as a
   button rather than as more label. */
.hv-footer__signup {
  font-family: var(--hv-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--hv-ink);
  background: transparent;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-pill);
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--hv-transition), border-color var(--hv-transition), color var(--hv-transition);
}
.hv-footer__signup:hover,
.hv-footer__signup:focus-visible {
  background: var(--hv-orange);
  border-color: var(--hv-orange);
  color: var(--hv-ink);
  outline: none;
}

.hv-footer__domain {
  justify-self: center;
  color: var(--hv-ink-muted);
}

.hv-footer__partner {
  justify-self: end;
  color: var(--hv-ink-muted);
  text-decoration: none;
  transition: color var(--hv-transition);
}
.hv-footer__partner:hover,
.hv-footer__partner:focus-visible {
  color: var(--hv-orange);
  outline: none;
}

/* Hamburger and its dropdown are narrow-screen only. */
.hv-footer__menu-toggle,
.hv-footer__menu {
  display: none;
}

/* ============================================================
   Narrow screens. Mirrors --hv-chrome-narrow-max, which a media
   query cannot read.
   ============================================================ */
@media (max-width: 720px) {
  .hv-footer {
    grid-template-columns: auto 1fr auto;
    font-size: 11px;
    height: auto;
    padding: 10px var(--hv-chrome-pad-x);
  }

  /* COMING 2026 takes the middle; the two links move into the menu. */
  .hv-footer__left {
    grid-column: 2;
    justify-self: center;
  }
  .hv-footer__signup,
  .hv-footer__partner {
    display: none;
  }
  /* The domain is already in the address bar. Dropped rather than crowded. */
  .hv-footer__domain {
    display: none;
  }

  .hv-footer__menu-toggle {
    display: inline-flex;
    grid-column: 1;
    justify-self: start;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hv-line);
    border-radius: 10px;
    color: var(--hv-ink);
    cursor: pointer;
    transition: background var(--hv-transition), border-color var(--hv-transition);
  }
  .hv-footer__menu-toggle:hover,
  .hv-footer__menu-toggle:focus-visible {
    background: var(--hv-fill-hover);
    border-color: var(--hv-line-bright);
    outline: none;
  }
  .hv-footer__menu-toggle[aria-expanded="true"] {
    background: var(--hv-orange);
    border-color: var(--hv-orange);
  }

  /* Three bars, the outer two drawn by pseudo-elements. */
  .hv-footer__menu-icon,
  .hv-footer__menu-icon::before,
  .hv-footer__menu-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .hv-footer__menu-icon { position: relative; }
  .hv-footer__menu-icon::before,
  .hv-footer__menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .hv-footer__menu-icon::before { top: -6px; }
  .hv-footer__menu-icon::after  { top: 6px; }

  /* Opens upwards off the bar's top edge, anchored to the hamburger's side. */
  .hv-footer__menu {
    position: absolute;
    left: var(--hv-chrome-pad-x);
    bottom: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 8px;
    background:
      radial-gradient(400px 120px at 0% 0%, var(--hv-orange-wash) 0%, var(--hv-orange-clear) 60%),
      linear-gradient(160deg, var(--hv-navy-900) 0%, var(--hv-navy-800) 100%);
    border: 1px solid var(--hv-line-soft);
    border-radius: var(--hv-radius-md);
    box-shadow: var(--hv-shadow-menu);
    z-index: 20;
  }
  .hv-footer__menu[hidden] { display: none; }

  .hv-footer__menu-item {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: var(--hv-ink);
    background: transparent;
    border: none;
    border-radius: var(--hv-radius-sm);
    padding: 10px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--hv-transition), color var(--hv-transition);
  }
  .hv-footer__menu-item:hover,
  .hv-footer__menu-item:focus-visible {
    background: var(--hv-fill-hover-soft);
    color: var(--hv-orange);
    outline: none;
  }
}