/* ==========================================================================
   Footer (REQ-6 / LYC-127 / FR-7)

   Source of truth: designs/html/design-tokens.css, .site-footer block.
   Token names are translated to the production registry (see _tokens.css):
     --space-N      -> raw px values matching the mockup spacing scale
     --container-wide -> --content-width   (1380px)
     --gutter         -> --content-margin  (30px)
     --rule-width     -> 1px
   ========================================================================== */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-quarter-white);
  padding: 64px var(--content-margin) 40px; /* space-16 / gutter / space-10 */
  /* margin-top removed 2026-04-15 - compounded with .home-section:last-child
     padding-bottom to produce ~280 px of dead air. Each template template-part
     owns its own trailing rhythm. */
  width: 100%;
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* ==========================================================================
   Footer email capture (REQ-22 / LYC-143)

   Compact inline form above the 4-col link grid. Submits GET to
   /subscribe/?source=footer&email={email}. The subscribe template picks
   up ?email= and prefills its MC4WP field.
   ========================================================================== */

.footer-signup {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 1fr);
  gap: 32px; /* space-8 */
  align-items: center;
  padding-bottom: 32px; /* space-8 */
  margin-bottom: 32px; /* space-8 */
  border-bottom: 1px solid rgba(247, 243, 227, 0.12); /* quarter-white @ 12% */
}

.footer-signup__copy {
  min-width: 0;
}

.footer-signup__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-quarter-white);
  margin: 0 0 4px;
  letter-spacing: 0;
  text-transform: none;
}

.footer-signup__p {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-satin-linen);
  margin: 0;
  letter-spacing: 0.04em;
}

.footer-signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* space-2 */
  align-items: stretch;
  width: 100%;
}

.footer-signup-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  font-family: var(--font-body-serif);
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-white);
  background: rgba(247, 243, 227, 0.08); /* quarter-white @ 8% on dark footer */
  border: 1px solid rgba(247, 243, 227, 0.28); /* quarter-white @ 28% */
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.footer-signup-form input[type="email"]::placeholder {
  color: var(--color-shuttle-gray-soft);
  opacity: 1;
}

.footer-signup-form input[type="email"]:hover {
  border-color: rgba(247, 243, 227, 0.48);
}

.footer-signup-form input[type="email"]:focus,
.footer-signup-form input[type="email"]:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 2px;
  border-color: var(--color-satin-linen);
  background: rgba(247, 243, 227, 0.12);
}

.footer-signup-form .btn-sm {
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .footer-signup {
    grid-template-columns: 1fr;
    gap: 16px; /* space-4 */
  }

  .footer-signup-form {
    flex-direction: column;
    align-items: stretch;
  }

  /* Override the desktop `flex: 1 1 220px` (flex-basis that becomes
   * height when the flex container flips to column on mobile). Use
   * an explicit tap-target-friendly height instead. */
  .footer-signup-form input[type="email"] {
    flex: 0 0 auto;
    min-height: 44px;
    height: 44px;
  }

  .footer-signup-form .btn-sm {
    width: 100%;
  }
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; /* space-10 */
  padding-bottom: 40px; /* space-10 */
  border-bottom: 1px solid rgba(247, 243, 227, 0.12); /* quarter-white @ 12% */
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Brand lockup column ---- */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand .pillar,
.footer-brand .lyceum-symbol {
  width: 48px;
  height: 40px;
  color: var(--color-white);
}

.footer-brand .wordmark,
.footer-brand .lyceum-wordmark {
  height: 24px;
  width: auto;
  margin-top: 12px; /* space-3 */
  color: var(--color-white);
}

.footer-brand .tagline {
  font-family: var(--font-ui);
  font-style: italic;
  color: var(--color-satin-linen);
  font-size: 13px;
  margin-top: 8px; /* space-2 */
  letter-spacing: 0.05em;
}

/* ---- Link columns ----
   LYC-697: column headings demoted from <h4> to <h3> so the document
   outline goes H1 → H2 (sr-only "Site footer") → H3 (column headings)
   without skipping a level. Selector keeps both for cache-safety during
   deploy. */
.footer-col h4,
.footer-col h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-satin-linen);
  margin: 0 0 16px; /* space-4 */
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* space-2 */
}

.footer-col a {
  color: var(--color-quarter-white);
  text-decoration: none;
  font-family: var(--font-body-serif);
  font-size: 16px;
  transition: color 0.15s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--color-satin-linen);
  text-decoration: underline;
}

/* X (Twitter) social link — glyph-only (LYC-599 / LYC-699 / LYC-717).
 *
 * Per D-X-ICON the "Follow on X" text label was dropped; only the X
 * glyph renders. WCAG 2.5.5 Target Size (Enhanced) requires a 44x44
 * minimum hit area, so the anchor itself becomes the tap target via
 * fixed dimensions + flex centering, and the SVG renders at 28x28
 * inside it (the remaining 8px on each axis is "padding" supplied by
 * flex centering rather than literal padding so the box-model stays
 * predictable inside the .footer-col li flex column).
 *
 * Focus ring uses the Claret accent token to match the footer signup
 * input focus treatment (consistent footer accent across all
 * interactive surfaces). The hover/focus underline + satin-linen color
 * shift inherited from `.footer-col a` is suppressed here — there is
 * no text to underline, and the icon brightness change carries the
 * hover affordance. */
.footer-social-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Pull the 44x44 box back toward the visual baseline of the
   * surrounding 16px serif links so the column rhythm is preserved
   * (44 - ~24px line-box ≈ 20px; split top/bottom via negative margin
   * with a guard so the tap target itself is never visually clipped). */
  margin: -10px 0;
}
.footer-social-x svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.footer-social-x:hover svg,
.footer-social-x:focus-visible svg {
  opacity: 1;
}
/* Override `.footer-col a:hover, .footer-col a:focus-visible` — no
 * text to underline; the focus ring + icon-brightness change carry
 * the affordance instead. Selector specificity matches the inherited
 * rule (one class + one pseudo), so order in the cascade wins. */
.footer-col a.footer-social-x:hover,
.footer-col a.footer-social-x:focus-visible {
  text-decoration: none;
  color: var(--color-quarter-white);
}
.footer-social-x:focus {
  outline: none;
}
.footer-social-x:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Bottom row: trust line + copyright ---- */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* space-4 */
  justify-content: space-between;
  align-items: center;
  padding-top: 32px; /* space-8 */
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-satin-linen);
}

.footer-trust {
  font-style: italic;
}

/* ---- JTN umbrella one-liner ---- */
.jtn-umbrella {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-satin-linen);
  text-align: center;
  margin-top: 24px; /* space-6 */
  opacity: 0.8;
}

/* ==========================================================================
   Footer inline subscribe (LYC-722 / LYC-696)

   Replaces the archive-page CTA-to-/subscribe/ banner with an inline
   MC4WP AJAX form when the `footer_inline_subscribe` feature flag is
   on. The .footer-subscribe wrapper holds a state machine driven by
   the [data-state] attribute (idle | submitting | success | error)
   flipped by assets/js/footer-subscribe.js on MC4WP DOM events.

   Style budget:
     - Match `.btn-primary.btn-sm` from _components.css (claret bg,
       satin-linen text, 14px UI font) for the submit.
     - Reuse footer accent treatment (Claret focus ring, satin-linen
       hover) so this surface reads as part of the footer family.
     - Mobile single-column at <=640px with full-width input + button.
   ========================================================================== */

.footer-subscribe {
  background: var(--color-footer-bg);
  color: var(--color-quarter-white);
  padding: 56px var(--content-margin); /* space-14 / gutter */
  border-top: 1px solid rgba(247, 243, 227, 0.12); /* quarter-white @ 12% */
  width: 100%;
}

.footer-subscribe__inner {
  max-width: 640px; /* narrower than .footer-inner so the form reads as a focused capture, not a band */
  margin: 0 auto;
  text-align: center;
}

.footer-subscribe__h {
  font-family: var(--font-body-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0 0 8px; /* space-2 */
  letter-spacing: 0;
}

.footer-subscribe__sub {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-satin-linen);
  margin: 0 0 24px; /* space-6 */
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.footer-subscribe__form-wrap {
  margin: 0 0 16px; /* space-4 */
}

.footer-subscribe__trust {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-satin-linen);
  letter-spacing: 0.04em;
  margin: 0;
  opacity: 0.85;
}

/* ---- MC4WP form skeleton inside .footer-subscribe ----
   MC4WP wraps each field in <p>. We display: contents the <p> nodes
   so the inputs flow into the flex row directly. */
.footer-subscribe form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* space-2 */
  align-items: stretch;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  max-width: 480px;
}

.footer-subscribe form > p,
.footer-subscribe form .mc4wp-form-fields,
.footer-subscribe form .mc4wp-form-fields > p {
  display: contents;
}

.footer-subscribe form label:not(.sr-only):not([for="lyceum_hp_email_confirm"]) {
  /* MC4WP-emitted visible label fallback: hide it, the sr-only label
     in the markup carries the accessible name. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-subscribe form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--font-body-serif);
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-white);
  background: rgba(247, 243, 227, 0.08); /* quarter-white @ 8% */
  border: 1px solid rgba(247, 243, 227, 0.28); /* quarter-white @ 28% */
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.footer-subscribe form input[type="email"]::placeholder {
  color: var(--color-shuttle-gray-soft);
  opacity: 1;
}

.footer-subscribe form input[type="email"]:hover {
  border-color: rgba(247, 243, 227, 0.48);
}

.footer-subscribe form input[type="email"]:focus,
.footer-subscribe form input[type="email"]:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 2px;
  border-color: var(--color-satin-linen);
  background: rgba(247, 243, 227, 0.12);
}

.footer-subscribe form input[type="email"][aria-invalid="true"] {
  border-color: var(--color-claret);
  box-shadow: 0 0 0 3px rgba(125, 33, 38, 0.18); /* claret @ 18% */
}

/* ---- Submit button. Matches `.btn-primary.btn-sm` shape; we use the
       MC4WP-emitted submit input rather than a button element. ---- */
.footer-subscribe form input[type="submit"],
.footer-subscribe form button[type="submit"] {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-satin-linen);
  background: var(--color-claret);
  border: 1px solid var(--color-claret);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.footer-subscribe form input[type="submit"]:hover,
.footer-subscribe form button[type="submit"]:hover {
  background: var(--color-claret-dark, #5e1a1e);
  border-color: var(--color-claret-dark, #5e1a1e);
  color: var(--color-white);
}

.footer-subscribe form input[type="submit"]:focus-visible,
.footer-subscribe form button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-satin-linen);
  outline-offset: 2px;
}

/* ---- Honeypot field: off-screen, never visible, never focusable. ---- */
.footer-subscribe .hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---- State machine ---- */

/* Submitting: button disabled appearance, NO opacity drop. */
.footer-subscribe form.is-loading input[type="submit"],
.footer-subscribe form.is-loading button[type="submit"],
.footer-subscribe[data-state="submitting"] form input[type="submit"],
.footer-subscribe[data-state="submitting"] form button[type="submit"] {
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}

.footer-subscribe form.is-loading input[type="email"],
.footer-subscribe[data-state="submitting"] form input[type="email"] {
  cursor: progress;
}

/* Success: MC4WP swaps the form area with its configured success
   response. Fade the response in with the locked microcopy styling. */
.footer-subscribe[data-state="success"] .mc4wp-response,
.footer-subscribe .mc4wp-success {
  color: var(--color-white);
  font-family: var(--font-body-serif);
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
  padding: 16px 0; /* space-4 */
  animation: lyceum-footer-subscribe-fade 240ms ease-out;
}

/* Error: inline error block under the input with Claret left-border
   and tinted background. MC4WP wraps errors in `.mc4wp-error`. */
.footer-subscribe .mc4wp-error,
.footer-subscribe .mc4wp-notice {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--color-claret);
  background: rgba(125, 33, 38, 0.12); /* claret @ 12% */
  color: var(--color-quarter-white);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: left;
  border-radius: 2px;
}

/* Notice (already_subscribed): warmer satin-linen border so the
   "welcome back" message reads as informational rather than error. */
.footer-subscribe .mc4wp-notice {
  border-left-color: var(--color-satin-linen);
  background: rgba(247, 243, 227, 0.08);
}

/* ---- Mobile <=640px: single column, full-width controls. ---- */
@media (max-width: 640px) {
  .footer-subscribe {
    padding: 40px var(--content-margin); /* space-10 / gutter */
  }
  .footer-subscribe__h {
    font-size: 24px;
  }
  .footer-subscribe__sub {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .footer-subscribe form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px; /* space-3 */
  }
  .footer-subscribe form input[type="email"] {
    flex: 0 0 auto;
    width: 100%;
  }
  .footer-subscribe form input[type="submit"],
  .footer-subscribe form button[type="submit"] {
    width: 100%;
  }
}

/* ---- Reduced motion: kill fade animations. ---- */
@media (prefers-reduced-motion: reduce) {
  .footer-subscribe[data-state="success"] .mc4wp-response,
  .footer-subscribe .mc4wp-success {
    animation: none;
  }
  .footer-subscribe form input[type="submit"],
  .footer-subscribe form button[type="submit"],
  .footer-subscribe form input[type="email"] {
    transition: none;
  }
}

@keyframes lyceum-footer-subscribe-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}