/* Cookie consent banner.
   Loaded by index.html and 404.html. The 404 page does not load style.css, so every
   colour here falls back to the literal brand value if the token is not defined. */

.consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 999;
  padding: 18px 20px;
  background: var(--charcoal, #13100e);
  border-top: 2px solid var(--orange, #f88000);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
}
.consent-banner[hidden] { display: none; }

.consent-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.consent-copy strong {
  display: block;
  margin-bottom: 5px;
  color: var(--cream, #f8f0d8);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.consent-copy p {
  margin: 0;
  color: #d9cab8;
  font-size: .78rem;
  line-height: 1.6;
}
.consent-copy a { color: var(--orange, #f88000); }

.consent-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.consent-actions button {
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.consent-accept {
  color: var(--cream, #f8f0d8);
  background: var(--red, #d83020);
}
.consent-accept:hover {
  color: var(--charcoal, #13100e);
  background: var(--orange, #f88000);
}
.consent-decline {
  color: var(--cream, #f8f0d8);
  background: transparent;
  border-color: rgba(248, 240, 216, .35);
}
.consent-decline:hover { border-color: var(--cream, #f8f0d8); }

.consent-banner button:focus-visible,
.consent-reopen:focus-visible {
  outline: 2px solid var(--orange, #f88000);
  outline-offset: 3px;
}

/* Footer link that lets a visitor change their mind — consent must be as easy to
   withdraw as it was to give. */
.consent-reopen {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.consent-reopen:hover { color: var(--orange, #f88000); }

@media (max-width: 760px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .consent-actions { justify-content: stretch; }
  .consent-actions button { flex: 1; }
}