/* ==========================================================================
   Dakyworld — cookie consent UI

   Kept in its own file rather than folded into site.css for one reason: this
   stylesheet has to be able to paint before anything measures the visitor. If
   the banner's styling depended on the main stylesheet, a slow or failed load
   of that stylesheet would leave the banner unstyled — and an unstyled banner
   is one nobody reads, which makes the consent it collects worthless.

   The design rules below are legal requirements, not taste:

   - Accept and Reject are the same size, the same shape and the same visual
     weight, side by side, on the first layer. A Reject button that is smaller,
     greyer, or one click further away than Accept is the most commonly
     enforced dark pattern in EU cookie cases (EDPB Guidelines 03/2022 on
     deceptive design; the CNIL fines against Google and Meta in December 2021
     were on exactly this point). Accept carries the brand blue because it is
     the affirmative action; Reject carries an equally solid border and
     identical padding, so neither reads as the default.
   - Nothing on the page is blocked. The banner sits at the bottom, does not
     cover the content, and the site stays fully usable while it is open.
     Consent obtained by making a site unusable until you agree is not freely
     given (Art 4(11) and Recital 42 GDPR).
   - The preferences panel is a modal dialog with a focus trap, because a modal
     that leaks focus to the page behind it cannot be used with a keyboard or
     a screen reader.
   ========================================================================== */

.dw-consent,
.dw-consent * {
  box-sizing: border-box;
}

/* --- the banner ----------------------------------------------------------- */

.dw-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000; /* above the header, the mobile nav and any overlay */
  padding: 16px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: dw-consent-rise .38s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes dw-consent-rise {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

.dw-consent__inner {
  max-width: 1180px;
  margin: 0 auto;
  background: #ffffff;
  color: #08101f;
  border: 1px solid #dfe4eb;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(8, 16, 31, .22);
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

.dw-consent__copy {
  flex: 1 1 340px;
  min-width: 0;
}

.dw-consent__title {
  margin: 0 0 6px;
  font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.dw-consent__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: #636f82;
}

.dw-consent__text a {
  color: #3157ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dw-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* --- buttons -------------------------------------------------------------- */

/* One shared shape. The difference between accept and reject is colour only,
   never size — see the note at the top of this file. */
.dw-consent__btn {
  appearance: none;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.dw-consent__btn:hover { transform: translateY(-1px); }
.dw-consent__btn:active { transform: none; }

.dw-consent__btn:focus-visible {
  outline: 3px solid #3157ff;
  outline-offset: 3px;
}

.dw-consent__btn--accept {
  background: #3157ff;
  border-color: #3157ff;
  color: #ffffff;
}
.dw-consent__btn--accept:hover { background: #2545e0; border-color: #2545e0; }

.dw-consent__btn--reject {
  background: #ffffff;
  border-color: #08101f;
  color: #08101f;
}
.dw-consent__btn--reject:hover { background: #08101f; color: #ffffff; }

/* The third action is genuinely secondary — it opens a panel, it does not
   record a decision — so it is allowed to look quieter than the other two. */
.dw-consent__btn--settings {
  background: transparent;
  border-color: transparent;
  color: #636f82;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-inline: 8px;
}
.dw-consent__btn--settings:hover { color: #08101f; }

/* --- the preferences dialog ----------------------------------------------- */

.dw-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 16, 31, .55);
  animation: dw-consent-fade .2s ease both;
}

@keyframes dw-consent-fade { from { opacity: 0 } to { opacity: 1 } }

.dw-consent-modal__panel {
  width: min(620px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  background: #ffffff;
  color: #08101f;
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(8, 16, 31, .4);
  /* No bottom padding: the pinned action bar supplies it instead, so that its
     opaque background reaches the true bottom of the panel. Left here, the
     30px below the bar is scrollable area, and the text of the last category
     rides up into the gaps between the buttons. */
  padding: 30px 30px 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dw-consent-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.dw-consent-modal__title {
  margin: 0;
  font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.dw-consent-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #636f82;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.dw-consent-modal__close:hover { color: #08101f; }
.dw-consent-modal__close:focus-visible { outline: 3px solid #3157ff; outline-offset: 2px; }

.dw-consent-modal__intro {
  margin: 0 0 20px;
  font-size: .9rem;
  line-height: 1.6;
  color: #636f82;
}
.dw-consent-modal__intro a { color: #3157ff; text-decoration: underline; text-underline-offset: 2px; }

/* --- one category --------------------------------------------------------- */

.dw-consent-cat {
  border: 1px solid #dfe4eb;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  background: #ffffff;
}

.dw-consent-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dw-consent-cat__name {
  margin: 0;
  font-size: .98rem;
  font-weight: 600;
}

.dw-consent-cat__desc {
  margin: 8px 0 0;
  font-size: .85rem;
  line-height: 1.6;
  color: #636f82;
}

.dw-consent-cat__detail {
  margin: 12px 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: #636f82;
  border-top: 1px dashed #dfe4eb;
  padding-top: 12px;
}
.dw-consent-cat__detail dt { font-weight: 600; color: #08101f; }
.dw-consent-cat__detail dd { margin: 0 0 8px; }
.dw-consent-cat__detail dd:last-child { margin-bottom: 0; }

/* The switch is a real checkbox under an opacity-0 overlay, rather than a div
   listening for clicks, so it is reachable by keyboard, announced by a screen
   reader as a checkbox, and driven by its own label. */
.dw-consent-switch {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
}

.dw-consent-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.dw-consent-switch__track {
  position: absolute;
  inset: 0;
  background: #c9d1dc;
  border-radius: 999px;
  transition: background-color .2s ease;
  pointer-events: none;
}

.dw-consent-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(8, 16, 31, .3);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.dw-consent-switch input:checked ~ .dw-consent-switch__track { background: #3157ff; }
.dw-consent-switch input:checked ~ .dw-consent-switch__track::after { transform: translateX(22px); }
.dw-consent-switch input:focus-visible ~ .dw-consent-switch__track { outline: 3px solid #3157ff; outline-offset: 3px; }

/* A category that cannot be switched off says so and looks locked, rather than
   offering a switch that silently refuses to move. */
.dw-consent-cat__locked {
  flex: 0 0 auto;
  /* .72rem is 11.5px. Nothing else in the consent UI goes below 12px and this
     is the one word that tells someone a category cannot be refused, so it is
     the last place to set type smaller than the rest. */
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #636f82;
  background: #edf1f7;
  border-radius: 999px;
  padding: 7px 12px;
  white-space: nowrap;
}

/* Pinned to the bottom of the panel. Describing two categories properly takes
   more room than the dialog has, so the buttons were below the fold and a
   visitor who opened the panel had to scroll to find any way of answering it —
   which is the same objection as a Reject button one click further away than
   Accept, arriving by a different route. */
.dw-consent-modal__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding: 16px 0 30px;
  background: #ffffff;
}

.dw-consent-modal__actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #dfe4eb;
}

.dw-consent-modal__actions .dw-consent__btn { flex: 1 1 auto; }

.dw-consent-modal__meta {
  margin: 18px 0 0;
  font-size: .76rem;
  line-height: 1.6;
  color: #636f82;
}

/* --- the reopen control --------------------------------------------------- */

/* Consent has to be as easy to withdraw as it was to give (Art 7(3) GDPR), so
   this sits in the footer of every page, permanently. */
.dw-consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.dw-consent-reopen:hover { text-decoration: underline; }
.dw-consent-reopen:focus-visible { outline: 2px solid #3157ff; outline-offset: 3px; }

/* In the footer it sits in a list beside seven links and has to read as the
   eighth, so it borrows their behaviour rather than announcing itself as the
   one button in a column of anchors. `font: inherit` above already takes the
   size and colour from the <li>; this is the hover. */
.footer-grid .dw-consent-reopen {
  display: inline-block;
  transition: transform .25s ease, color .25s ease;
}
.footer-grid .dw-consent-reopen:hover {
  color: var(--lime, #b8ff3d);
  transform: translateX(4px);
  text-decoration: none;
}

/* --- narrow screens ------------------------------------------------------- */

@media (max-width: 720px) {
  .dw-consent { padding: 10px; }
  .dw-consent__inner { padding: 20px; border-radius: 16px; gap: 16px; }
  .dw-consent__actions { width: 100%; }
  /* Accept and Reject share the row equally; Settings drops below, full width.
     The two decisions stay adjacent and identically sized on a phone. */
  .dw-consent__btn--accept,
  .dw-consent__btn--reject { flex: 1 1 0; min-width: 0; }
  .dw-consent__btn--settings { flex: 1 0 100%; text-align: center; }
  .dw-consent-modal__panel { padding: 22px 22px 0; border-radius: 18px; }
  .dw-consent-modal__actions { padding-bottom: 22px; }
  .dw-consent-modal__actions .dw-consent__btn { flex: 1 0 100%; }
}

/* --- touch ---------------------------------------------------------------- */

/* The banner's buttons were 42px tall. Two pixels, but they are the two
   buttons the whole mechanism exists for, and a consent choice that is fiddly
   to tap is not one that has been made freely. */
@media (pointer: coarse) {
  .dw-consent__btn { min-height: 44px; }
  .dw-consent-modal__close { min-width: 44px; min-height: 44px; }
  .dw-consent-reopen { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- short screens -------------------------------------------------------- */

/* A phone held sideways is 360px tall and 740px wide, so it matched none of
   the narrow-screen rules above and got the full desktop banner: title, two
   sentences, a link and three buttons, filling most of the screen and covering
   the open navigation panel behind it.

   Keyed on height rather than width, because that is what actually ran out.
   The copy is not cut and no button is hidden — the banner must stay a real
   choice, freely given, on every device — it is set tighter and allowed to
   scroll itself if it still does not fit. */
@media (max-height: 520px) {
  .dw-consent { padding: 8px; }
  .dw-consent__inner {
    padding: 14px 16px;
    gap: 10px 18px;
    border-radius: 14px;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dw-consent__title { font-size: .98rem; margin-bottom: 3px; }
  .dw-consent__text { font-size: .82rem; line-height: 1.5; }
  .dw-consent__actions { gap: 8px; }
  .dw-consent-modal__panel {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* --- motion preference ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dw-consent,
  .dw-consent-modal { animation: none; }
  .dw-consent__btn,
  .dw-consent-switch__track,
  .dw-consent-switch__track::after { transition: none; }
  .dw-consent__btn:hover { transform: none; }
}

/* --- print ---------------------------------------------------------------- */

@media print {
  .dw-consent,
  .dw-consent-modal { display: none !important; }
}