/* Cookie banner (includes/consent_banner.php + js/cookie-consent.js). Prefix cc-.
   A small paper card in the corner: navy rule on top, gold hairline under the heading. Both answers are the same size, weight and
   colour on purpose (no dark pattern). Light palette only, like the rest of the public site. */

.cc {
  --cc-navy: var(--primary-color, #0a2342);
  --cc-gold: var(--accent-gold, #c9a46b);
  --cc-ink: #1f2a40;
  --cc-muted: #4f5b73;
  --cc-line: rgba(10, 35, 66, 0.16);
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 1050;
  box-sizing: border-box;
  width: min(25.5rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  padding: 1.15rem 1.25rem 1.1rem;
  background: #fffdf8;
  color: var(--cc-ink);
  font-family: var(--body-font, "Lato", sans-serif);
  font-size: 0.94rem;
  line-height: 1.55;
  border: 1px solid var(--cc-line);
  border-top: 4px solid var(--cc-navy);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(10, 35, 66, 0.08), 0 22px 48px -18px rgba(10, 35, 66, 0.45);
}
.cc[hidden] { display: none; }

.cc__title {
  margin: 0 0 0.55rem;
  padding-bottom: 0.5rem;
  font-family: var(--heading-font, "Playfair Display", serif);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cc-navy);
  background: linear-gradient(var(--cc-gold), var(--cc-gold)) no-repeat 0 100% / 2.75rem 2px;
}
.cc__text { margin: 0 0 0.9rem; }
.cc__more { color: var(--cc-navy); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cc__more:hover { text-decoration-thickness: 2px; }

.cc__panel { margin: 0 0 0.9rem; padding: 0.15rem 0 0; border-top: 1px solid var(--cc-line); }
.cc__panel[hidden] { display: none; }
.cc__row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--cc-line);
}
.cc__check { width: 1.15rem; height: 1.15rem; margin: 0.18rem 0 0; accent-color: var(--cc-navy); }
.cc__rowlabel { font-weight: 700; color: var(--cc-navy); cursor: pointer; }
.cc__tag { margin-left: 0.35rem; font-size: 0.78rem; font-weight: 400; color: var(--cc-muted); }
.cc__why { grid-column: 2; margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--cc-muted); }
.cc__why code { font-size: 0.84em; word-break: break-all; }

.cc__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.cc__btn {
  flex: 1 1 8.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-weight: 700;
  color: var(--cc-navy);
  background: #fff;
  border: 2px solid var(--cc-navy);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.cc__btn[hidden] { display: none; }
.cc__btn:hover { background: var(--cc-navy); color: #fff; }
.cc__btn:active { background: #07182d; color: #fff; }
.cc__btn:focus-visible,
.cc__choose:focus-visible,
.cc__more:focus-visible,
.cc__check:focus-visible { outline: 3px solid var(--cc-navy); outline-offset: 3px; }
.cc__choose {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.4rem 0.35rem;
  font: inherit;
  color: var(--cc-navy);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .cc:not([hidden]) { animation: cc-rise 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
  @keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* phones: a sheet across the bottom, answers side by side */
@media (max-width: 520px) {
  .cc { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; padding: 1rem; }
  .cc__btn { flex: 1 1 calc(50% - 0.3rem); }
  .cc__choose { flex: 1 1 100%; text-align: center; }
}

@media print { .cc { display: none; } }
@media (forced-colors: active) { .cc { border: 2px solid CanvasText; } .cc__btn { border-color: ButtonText; } }