/* ============================================================
   footer.css — AtomicRoute
   Scoped under .ar-footer / .ar-cta-band. Loaded after styles.css.

   WHY THE OVER-SPECIFIC SELECTORS:
   styles.css styles the header menu with bare element selectors
   (nav, nav ul, nav ul li, nav a, footer ul, footer li). Those also
   match this footer, and at tablet width they apply position: fixed
   and display: none, which hides the entire footer nav. The
   footer.ar-footer nav.ar-footer-nav ... chains below exist only to
   outrank that. Do not simplify them. The permanent fix is scoping
   those rules in styles.css to `header nav`.
   ============================================================ */

.ar-footer,
.ar-cta-band {
  --ar-red: #e11b22;
  --ar-red-lift: #ff4d5a;
  --ar-ink: #ffffff;
  --ar-mute: rgba(255, 255, 255, 0.66);
  --ar-line: rgba(255, 255, 255, 0.09);
  --ar-surface: rgba(255, 255, 255, 0.03);
  font-family: var(--font-figtree, "Figtree", sans-serif);
}

/* ============================================================
   Conversion band (opt-in)
   ============================================================ */
.ar-cta-band {
  background:
    radial-gradient(90% 160% at 12% 0%, rgba(225, 27, 34, 0.22) 0%, rgba(225, 27, 34, 0) 62%),
    #101012;
  border-top: 1px solid var(--ar-line);
  padding: 0 !important;
}

.ar-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
  /* Vertical only. The horizontal gutter belongs to .container on the
     same element; a `padding: 44px 0` shorthand here would reset it to 0
     and flush the content against the viewport edge below the container
     max-width. Never use the shorthand on a .container element. */
  padding-block: 44px;
}

.ar-cta-copy h2 {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ar-ink);
}

.ar-cta-copy p {
  margin: 8px 0 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ar-mute);
}

.ar-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--ar-red);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.ar-cta-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.ar-cta-btn:hover {
  background: #c8161c;
}

.ar-cta-btn:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   Footer shell
   ============================================================ */
.ar-footer {
  position: relative;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(225, 27, 34, 0.1) 0%, rgba(225, 27, 34, 0) 55%),
    #08080a;
  color: var(--ar-mute);
  padding: 0 !important;
  margin: 0;
  border-top: 1px solid var(--ar-line);
}

.ar-footer-inner {
  /* Vertical only — see the note on .ar-cta-inner. This element also
     carries .container, which owns padding-inline. */
  padding-block: 64px 26px;
}

/* Fallback gutter in case .container ever ships without one. Applied to
   the inner element, so every row inside inherits the same edge. */
@supports not (padding-block: 1px) {
  .ar-footer-inner { padding: 64px 24px 26px; }
  .ar-cta-inner { padding: 44px 24px; }
}

/* Reset list styling inherited from styles.css */
.ar-footer ul,
.ar-footer li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}

/* ============================================================
   Brand row
   ============================================================ */
.ar-footer-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--ar-line);
}

.ar-footer-logo img {
  display: block;
  height: 34px;
  width: auto;
}

.ar-footer-tagline {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ar-mute);
}

.ar-footer-demo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--ar-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ar-footer-demo svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s ease;
}

.ar-footer-demo:hover {
  background: var(--ar-red);
  border-color: var(--ar-red);
}

.ar-footer-demo:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   Link grid
   ============================================================ */
.ar-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  padding: 44px 0 38px;
  align-items: start;
}

.ar-footer-col {
  display: flex;
  flex-direction: column;
  gap: 34px;
  min-width: 0;
}

/* Group heading gets a short red rule above the label so a 47-link
   footer scans as eight blocks rather than one wall of text. */
.ar-fcol-title {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 0 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ar-ink);
  cursor: default;
  pointer-events: none;
  overflow-wrap: anywhere;
}

.ar-fcol-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ar-red);
}

/* --- Neutralize header nav rules leaking into the footer nav ----------- */
footer.ar-footer nav.ar-footer-nav {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  transform: none !important;
  inset: auto !important;
  padding: 0 !important;
}

footer.ar-footer nav.ar-footer-nav ul.ar-fcol-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

footer.ar-footer nav.ar-footer-nav ul.ar-fcol-list li {
  display: block !important;
}

footer.ar-footer nav.ar-footer-nav ul.ar-fcol-list li a {
  position: relative !important;
  display: block !important;
  padding: 5px 0 !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45 !important;
  color: var(--ar-mute);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

footer.ar-footer nav.ar-footer-nav ul.ar-fcol-list li a:hover {
  color: var(--ar-red-lift);
  transform: translateX(3px);
}

/* ============================================================
   Legal row
   ============================================================ */
/* Final row: copyright hard left, legal links hard right. */
.ar-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ar-line);
}

.ar-legal-links {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  margin-left: auto !important;
}

.ar-legal-links li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 14px !important;
}

.ar-legal-links a,
.ar-legal-btn {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ar-mute);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ar-legal-links a:hover,
.ar-legal-btn:hover {
  color: var(--ar-red-lift);
}

.ar-legal-btn {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
}

/* ============================================================
   Copyright, back to top, social
   ============================================================ */
/* Social row. Back to top is taken out of the flow so the icons stay
   optically centered on the container, not on the leftover space. */
.ar-footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--ar-line);
}

.ar-footer-copy {
  margin: 0;
  font-size: 13.5px;
  color: var(--ar-mute);
}

.ar-to-top {
  position: absolute;
  right: 0;
  top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--ar-mute);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ar-to-top svg {
  width: 14px;
  height: 14px;
}

.ar-to-top:hover {
  color: var(--ar-ink);
  border-color: rgba(255, 255, 255, 0.4);
  background: var(--ar-surface);
}

/* Label and icons travel together so the pair stays optically centered. */
.ar-social-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ar-follow-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ar-mute);
  white-space: nowrap;
}

.ar-footer-social {
  display: flex !important;
  justify-content: center;
  gap: 10px;
}

.ar-footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ar-mute);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ar-footer-social a:hover {
  background: var(--ar-red);
  border-color: var(--ar-red);
  color: #ffffff;
}

.ar-footer-social svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   Focus visibility
   ============================================================ */
.ar-footer a:focus-visible,
.ar-footer button:focus-visible,
.ar-cta-band a:focus-visible {
  outline: 2px solid var(--ar-red-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .ar-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }
}

@media (max-width: 768px) {
  .ar-cta-inner {
    padding-block: 34px;
    flex-direction: column;
    align-items: flex-start;
  }

  .ar-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .ar-footer-inner {
    padding-block: 40px 22px;
  }

  .ar-footer-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 24px;
  }

  .ar-footer-demo {
    width: 100%;
    justify-content: center;
  }

  .ar-footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 0 16px;
  }

  /* Groups become accordion rows; the column wrapper stops adding gaps. */
  .ar-footer-col {
    display: block;
    gap: 0;
  }

  .ar-fcol {
    border-bottom: 1px solid var(--ar-line);
  }

  .ar-fcol-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    min-height: 52px;
    padding: 14px 0 !important;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    pointer-events: auto;
    cursor: pointer;
  }

  /* The red rule is a desktop device; on mobile the chevron carries it. */
  .ar-fcol-title::before {
    display: none;
  }

  .ar-fcol-title::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 2px;
    border-right: 1.6px solid var(--ar-mute);
    border-bottom: 1.6px solid var(--ar-mute);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }

  .ar-fcol[data-open] .ar-fcol-title {
    color: var(--ar-red-lift);
  }

  .ar-fcol[data-open] .ar-fcol-title::after {
    border-color: var(--ar-red-lift);
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  footer.ar-footer nav.ar-footer-nav ul.ar-fcol-list {
    display: none !important;
  }

  footer.ar-footer nav.ar-footer-nav .ar-fcol[data-open] ul.ar-fcol-list {
    display: flex !important;
    gap: 0 !important;
    padding: 0 0 12px !important;
  }

  /* 44px minimum tap target, WCAG 2.5.5 */
  footer.ar-footer nav.ar-footer-nav ul.ar-fcol-list li a {
    padding: 11px 0 !important;
    font-size: 14.5px;
  }

  footer.ar-footer nav.ar-footer-nav ul.ar-fcol-list li a:hover {
    transform: none;
  }

  /* Back into the flow on mobile: an absolutely positioned control
     would overlap the centered icons at narrow widths. */
  .ar-footer-bottom {
    flex-direction: column;
    gap: 18px;
  }

  .ar-to-top {
    position: static;
    order: -1;
  }

  .ar-social-group {
    flex-direction: column;
    gap: 12px;
  }

  /* Stack instead of splitting left and right; at 360px the two rows
     would otherwise collide into an unreadable single line. */
  .ar-footer-legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .ar-legal-links {
    justify-content: center;
    margin-left: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-footer *,
  .ar-cta-band * {
    transition: none !important;
  }
}