/* ===== SITE FOOTER ===== */
.site-footer {
  background: var(--color-footer-bg);
  color: #ccc;
  margin-top: auto;
}

/* Racing stripe */
.footer-stripe {
  height: 4px;
  background: linear-gradient(90deg, #E84E0F 0%, #E84E0F 60%, #ff7b3a 100%);
}

/* Newsletter CTA. The footer is the one exception to the flat colours of the design system. */
.footer-cta {
  background: linear-gradient(135deg, var(--color-footer-bg) 0%, #2a1a14 40%, #331c10 60%, var(--color-footer-bg) 100%);
  border-bottom: 1px solid var(--color-footer-border);
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -5%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(232,78,15,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.footer-cta-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px var(--padding-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}
.footer-cta-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.footer-cta-subtitle {
  font-size: var(--font-size-md);
  color: var(--color-footer-text);
}
.footer-newsletter {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}
.footer-newsletter-input {
  padding: 12px 18px;
  border: 1.5px solid var(--color-border-strong);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-footer-bg);
  color: #fff;
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  width: 280px;
}
.footer-newsletter-input::placeholder {
  color: var(--color-footer-text-dim);
}
.footer-newsletter-btn {
  padding: 12px 24px;
  background: var(--color-primary-strong);
  color: white;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 600;
  font-size: var(--font-size-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.footer-newsletter-btn:hover {
  background: var(--color-primary-strong-hover);
}
.site-footer :is(a, button, input):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Field and button read as one control, so the ring goes round both. The button shows its
   hover shade when it is the one in focus, otherwise the ring would not say which. */
.footer-newsletter {
  border-radius: var(--radius-sm);
}
.footer-newsletter:has(:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.footer-newsletter :is(input, button):focus-visible {
  outline: none;
}
.footer-newsletter-btn:focus-visible {
  background: var(--color-primary-strong-hover);
}

/* Main footer area */
.footer-main {
  border-bottom: 1px solid var(--color-footer-border);
}
.footer-main-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px var(--padding-desktop);
  display: flex;
  gap: 64px;
}
.footer-brand {
  width: 260px;
  flex-shrink: 0;
}
.footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 14px;
}
.footer-tagline {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-footer-text);
  margin-bottom: 20px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-footer-input-border);
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.footer-social-icon svg {
  width: 18px;
  height: 18px;
}
.footer-social-icon:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.footer-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}
.footer-column-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
}
.footer-column-title::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 8px;
  background: var(--color-primary);
}
.footer-column-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-column-title a:hover {
  color: var(--color-primary);
}
.footer-links {
  list-style: none;
  padding: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  font-size: var(--font-size-sm);
  color: var(--color-footer-text);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover {
  color: var(--color-primary);
}
.footer-cookie-settings {
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-footer-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.footer-cookie-settings:hover {
  color: var(--color-primary);
}

/* Credits bar */
.footer-credits {
  background: var(--color-footer-darker);
}
.footer-credits-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px var(--padding-desktop);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: var(--font-size-xs);
  color: var(--color-footer-text-dim);
}
.footer-credits strong {
  color: var(--color-footer-text);
  font-weight: 600;
}
.footer-credits-sep {
  color: var(--color-footer-border);
}
.footer-heart {
  color: var(--color-primary);
  vertical-align: -1px;
}

/* Newsletter privacy checkbox */
.footer-newsletter-privacy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--font-size-xs);
  color: var(--color-footer-text);
}
.footer-newsletter-privacy input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.footer-newsletter-privacy a {
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}
.footer-newsletter-privacy a:hover {
  color: var(--color-primary);
}

/* Privacy modal */
/* A <dialog> spanning the viewport: the element itself is the dimmed layer that centres the
   card, so the UA's own dialog box (centred, bordered, padded, size-capped) is switched off. */
.privacy-modal-overlay {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
}
.privacy-modal-overlay[open] {
  display: flex;
}
html:has(.privacy-modal-overlay[open]) {
  overflow: hidden;
}
.privacy-modal-overlay::backdrop {
  background: transparent;
}
.privacy-modal {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.privacy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border-light);
}
.privacy-modal-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-dark);
}
.privacy-modal-close {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.privacy-modal-close svg {
  width: 20px;
  height: 20px;
}
.privacy-modal-body {
  padding: 24px;
  overflow-y: auto;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text);
}
.privacy-modal-body .buttons--off-canvas,
.privacy-modal-body .panel--title {
  display: none;
}

/* ===== FOOTER RESPONSIVE ===== */
@media (max-width: 768px) {
  .footer-cta-inner {
    flex-direction: column;
    padding: 24px var(--padding-mobile);
    gap: 16px;
    text-align: center;
  }
  .footer-newsletter-wrapper {
    width: 100%;
    max-width: 480px;
  }
  .footer-newsletter {
    width: 100%;
  }
  .footer-newsletter-input {
    width: 100%;
    min-width: 0;
  }
  .footer-main-inner {
    flex-direction: column;
    padding: 32px var(--padding-mobile);
    gap: 32px;
  }
  .footer-brand {
    width: 100%;
    text-align: center;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .footer-links li {
    margin-bottom: 0;
  }
  .footer-links a,
  .footer-cookie-settings {
    display: inline-block;
    padding-block: 6px;
  }
  .footer-credits-inner {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px var(--padding-mobile);
    text-align: center;
  }
  .footer-credits-sep {
    display: none;
  }
}

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

/* Seedtag's inScreen video ships a transparent full-width layer from the player's top edge
   down that swallows every click below it, footer links included. Player and close button
   are separate elements and stay clickable. */
.st-adunit .background-inscreen-video {
  pointer-events: none !important;
}