/*
 * modules/site/module.css — served at /m/site.css
 *
 * This module's own stylesheet. It exists to style the markup in header.html and
 * footer.html, which public/css/site.css knows nothing about, and to let this
 * site deviate from the install-wide theme without a deploy.
 *
 * WHERE THIS SITS, most specific last:
 *
 *     /css/site.css  →  /theme/theme.css  →  /m/site.css  →  inline :root tokens
 *
 * So this file wins over both the platform stylesheet and the active theme. That
 * is the point — but it also means a literal value here overrides the theme
 * silently. ALWAYS PREFER var(--site-*): a hardcoded colour stops responding to
 * theme.json and to this module's own manifest overrides, which is exactly the
 * coupling the token layer exists to avoid.
 *
 * Available tokens: --site-primary, --site-accent, --site-paper, --site-ink,
 * --site-muted, --site-font, --site-font-size, --site-heading-weight,
 * --site-radius, --site-max-width.
 *
 * Served by a ROUTE, not express.static, so a disabled module stops serving its
 * stylesheet along with everything else. It is no-cache with an ETag from the
 * file's mtime, so an edit shows on the next reload.
 */

/* ------------------------------------------------------------- skip link ----
 * Keyboard and screen-reader users land on this before the nav. Visually hidden
 * until focused — not `display: none`, which would take it out of the tab order
 * and defeat the purpose.
 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--site-paper);
  color: var(--site-ink);
  border-radius: 0 0 var(--site-radius) 0;
}

.skip-link:focus {
  left: 0;
}

.site-header-contents {
  display: flex;
  max-width: var(--site-max-width);
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between;
}

.site-header {
  display: block !important;
  gap: 0px;
  padding: 1rem 5vw;
  border-bottom: 3px solid var(--site-primary, #1F2937);
}

.site-footer {
  padding: 1rem 0;
  margin: 0 auto;
  text-align: left;
  max-width: var(--site-max-width);
}

/* ------------------------------------------------------------------ logo ----
 * The header brand is an inline image (header.html). The intrinsic size is
 * 540x132 (2x); render it small so it is crisp on high-DPI screens.
 */
.site-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-brand .site-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 720px) {
  .site-brand .site-logo {
    height: 26px;
  }
}

/* ----------------------------------------------------------------- footer ----
 * The two-column footer in footer.html. site.css styles .site-footer itself;
 * everything below is markup this module introduced.
 */
.foot-cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  max-width: var(--site-max-width);
  margin: 0 auto 2rem;
  text-align: left;
  justify-content: space-between;
}

.foot-brand-link {
  display: inline-block;
  line-height: 0;
}

.foot-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}

/* Defined here, not borrowed: `.muted` exists in admin.css, and the admin
 * stylesheet is deliberately never loaded by a public view — that separation is
 * what keeps a module or theme from restyling the admin panel, and a test
 * asserts it. A public page needs its own class. */
.foot-note {
  color: var(--site-muted);
  font-size: 0.9em;
  margin: 0;
}

.foot-heading {
  font-weight: var(--site-heading-weight);
  font-size: 0.85em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--site-muted);
  margin: 0 0 0.6rem;
}

.foot-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.foot-legal {
  max-width: var(--site-max-width);
  margin: 0 auto;
  color: var(--site-muted);
  font-size: 0.9em;
}

/* One breakpoint, because two columns at 2fr/1fr are unreadable on a
 * phone. Stacking is enough; there is no need for an intermediate step. */
@media (max-width: 720px) {
  .foot-cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (width < 760px) {
  .legal-doc table {
    min-width: auto;
  }
  .site-footer {
    margin: 0 1rem;
  }
  .site-nav, .module-bar {
     flex-wrap: wrap;
  }
}

@media (width > 768px) {
  .foot-cols {
    display: inline-flex !important;
    width: 100%;
  }
  .foot-nav {
    gap: 1rem !important;
    flex-direction: row !important;
  }
}
/* pdx-legal-fullwidth: legal pages use the full site width (matches header/footer) */
.hero-inner,.sec-inner,.sec-inner.legal-doc,.legal-doc{max-width:var(--site-max-width,1200px)!important;width:100%;margin-left:auto;margin-right:auto}
.hero-inner h1{max-width:none}
.legal-doc table{width:100%}

/* pdx-funnel-btn-text: funnel.css colors every #app link green, which hid the label on the green done button */
body.funnel #app a.f-btn{color:#fff}