/* Cookie banner and preferences modal.
   Plain CSS, not part of the Astro build, because it ships with the consent
   script and has to be able to paint before anything else has loaded. */

.cookie-bar {
  position: fixed; inset: auto 0 0; z-index: 90;
  background: var(--panel, #131210);
  color: var(--panel-ink, #f2efe9);
  border-top: 2px solid var(--accent, #ff3b1f);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__inner {
  width: min(1180px, calc(100% - 40px)); margin-inline: auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px 0;
}
.cookie-bar__text {
  flex: 1 1 380px; margin: 0;
  font-size: 0.9rem; line-height: 1.55; color: var(--panel-ink-2, #9b978c);
}
.cookie-bar__text strong { color: var(--panel-ink, #f2efe9); font-weight: 700; }
.cookie-bar__text a { color: var(--accent, #ff3b1f); }
.cookie-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* The bar sits on the dark panel in both themes, so its ghost buttons need the
   panel's own border and ink rather than the page's. */
.cookie-bar .btn--ghost { color: var(--panel-ink, #f2efe9); border-color: rgba(242,239,233,.28); }
.cookie-bar .btn--ghost:hover { background: var(--panel-ink, #f2efe9); color: var(--panel, #131210); }

@media (max-width: 720px) {
  .cookie-bar__inner { padding: 16px 0 18px; gap: 14px; }
  .cookie-bar__actions { width: 100%; }
  /* Three buttons at 390px do not fit in a row, and a wrapped "Accept all"
     on its own line reads as the only option. Equal thirds keeps the choice
     visibly equal. */
  .cookie-bar__actions .btn { flex: 1; justify-content: center; }
}

/* ---------- modal ---------- */

.cookie-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 9, 8, .6); }
.cookie-modal__panel {
  position: relative;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--paper, #f2efe9); color: var(--ink, #14130f);
  border: 1px solid var(--rule-strong, rgba(20,19,15,.42));
  border-radius: var(--radius-lg, 5px);
  padding: 28px;
}
.cookie-modal__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.cookie-modal__head h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.03em; font-weight: 800; }
.cookie-modal__close {
  margin-left: auto; width: 34px; height: 34px; flex: 0 0 auto;
  background: none; border: 1px solid var(--rule, rgba(20,19,15,.16));
  border-radius: var(--radius, 3px); color: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.cookie-modal__close:hover { background: rgba(0,0,0,.05); }
.cookie-modal__intro { margin: 0 0 22px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2, #57544a); }

.cookie-rows { border-top: 1px solid var(--rule, rgba(20,19,15,.16)); }
.cookie-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--rule, rgba(20,19,15,.16));
}
.cookie-row__text { flex: 1; }
.cookie-row h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 750; letter-spacing: -0.02em; }
.cookie-row p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-2, #57544a); }
.cookie-row__always {
  font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, #8a8679);
  white-space: nowrap;
}

/* A switch built from a checkbox, so it is keyboard and screen-reader correct
   without any ARIA of its own. */
.cookie-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; flex: 0 0 auto; }
.cookie-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-toggle__track {
  width: 42px; height: 24px; border-radius: 999px; position: relative;
  background: var(--paper-3, #ded8cc); border: 1px solid var(--rule-strong, rgba(20,19,15,.42));
  transition: background .18s ease, border-color .18s ease;
}
.cookie-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink, #14130f);
  transition: transform .18s ease, background .18s ease;
}
.cookie-toggle input:checked + .cookie-toggle__track { background: var(--accent, #ff3b1f); border-color: var(--accent, #ff3b1f); }
.cookie-toggle input:checked + .cookie-toggle__track::after { transform: translateX(18px); background: #fff; }
.cookie-toggle input:focus-visible + .cookie-toggle__track { outline: 2px solid var(--accent, #ff3b1f); outline-offset: 3px; }
.cookie-toggle__label {
  font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, #8a8679);
}

.cookie-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 560px) {
  .cookie-modal__panel { padding: 22px 18px; }
  .cookie-modal__actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-toggle__track, .cookie-toggle__track::after { transition: none; }
}