/*
 * The cookie banner.
 *
 * A file rather than inline styles, for the same reason the configuration is a
 * JSON block rather than generated JavaScript: no inline anything, so a
 * Content-Security-Policy stays possible.
 *
 * Everything is namespaced under .consent and nothing here is a global rule, so
 * dropping this into a project cannot restyle the site around it. It carries
 * fallbacks for every token it borrows from /static/styles.css, so it renders
 * the same whether or not that stylesheet is on the page.
 */

.consent {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 1rem;
  font-family: var(--font-body, 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gremco-text, #0F172A);
}

.consent__panel {
  position: relative;
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
  /* Room for the accent bar drawn by ::before below. */
  padding: 1.5rem;
  border: 1px solid var(--gremco-border, #E2E8F0);
  border-radius: var(--radius-xl, 16px);
  background: var(--gremco-surface, #FFFFFF);
  color: var(--gremco-text, #0F172A);
  /* A real shadow rather than a border: the banner sits over content and has
     to read as being in front of it. */
  box-shadow: var(--shadow-xl, 0 20px 60px rgb(0 0 0 / 15%));
  overflow: hidden;
}

.consent__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gremco-orange, #E86A1A), var(--gremco-orange-light, #F28C4E));
}

.consent__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading, 'Lexend', sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--gremco-navy, #0F2440);
}

.consent__body {
  margin: 0 0 0.75rem;
  color: var(--gremco-text-secondary, #475569);
}

.consent__policy {
  display: inline-block;
  margin-bottom: 0.875rem;
  font-weight: 600;
  color: var(--gremco-orange-dark, #C45510);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast, 120ms ease-out);
}

.consent__categories {
  margin: 0 0 1.25rem;
  border: 1px solid var(--gremco-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  background: var(--gremco-warm, #F8F6F3);
  overflow: hidden;
}

.consent__category {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gremco-border, #E2E8F0);
}

.consent__category:last-child {
  border-bottom: 0;
}

.consent__category input {
  /* 1.15rem rather than the default: the checkbox is the control the whole
     dialog exists for, and the default is a small target on a phone. */
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--gremco-orange, #E86A1A);
}

.consent__category input:disabled {
  /* Necessary is shown as on and not editable. Dimmed, not hidden: the visitor
     should see everything that runs, including what they cannot refuse. */
  opacity: 0.55;
}

.consent__category-name {
  display: block;
  font-family: var(--font-heading, 'Lexend', sans-serif);
  font-weight: 600;
  color: var(--gremco-navy, #0F2440);
  cursor: pointer;
}

.consent__category-info {
  margin: 0.15rem 0 0;
  color: var(--gremco-text-secondary, #475569);
  font-size: 0.875rem;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.consent__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-heading, 'Lexend', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  /* 44px of touch target, which is the smallest a control should be on a
     phone - and this one is shown to every visitor on every device. */
  min-height: 44px;
  transition: background-color var(--transition-base, 200ms ease-out),
    border-color var(--transition-base, 200ms ease-out),
    color var(--transition-base, 200ms ease-out),
    transform var(--transition-spring, 160ms ease-out),
    box-shadow var(--transition-base, 200ms ease-out);
}

.consent__button:active {
  transform: scale(0.97);
}

/*
 * Accept and reject are the same size and the same weight on purpose.
 *
 * A refusal that is smaller, quieter or further away than an acceptance is not
 * a free choice, and several supervisory authorities have said exactly that.
 * If this ever needs restyling, that symmetry is the part to keep.
 */
.consent__button--primary {
  background: var(--gremco-orange, #E86A1A);
  color: #FFFFFF;
  border-color: var(--gremco-orange, #E86A1A);
}

.consent__button--secondary {
  background: var(--gremco-navy, #0F2440);
  color: #FFFFFF;
  border-color: var(--gremco-navy, #0F2440);
}

.consent__button--quiet {
  background: transparent;
  color: var(--gremco-orange-dark, #C45510);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Preferences is the only control that may be quieter: it opens a choice
     rather than making one. */
  margin-right: auto;
}

@media (hover: hover) and (pointer: fine) {
  .consent__policy:hover {
    color: var(--gremco-orange, #E86A1A);
  }

  .consent__button--primary:hover {
    background: var(--gremco-orange-dark, #C45510);
    border-color: var(--gremco-orange-dark, #C45510);
    box-shadow: 0 4px 12px rgb(232 106 26 / 25%);
  }

  .consent__button--secondary:hover {
    background: var(--gremco-navy-light, #1A3A5C);
    border-color: var(--gremco-navy-light, #1A3A5C);
    box-shadow: var(--shadow-md, 0 4px 16px rgb(0 0 0 / 8%));
  }

  .consent__button--quiet:hover {
    color: var(--gremco-orange, #E86A1A);
  }
}

.consent__button:focus-visible {
  /* Never remove this. The dialog traps focus, so a visitor navigating by
     keyboard with no visible focus ring would be stuck in an invisible box. */
  outline: 2px solid var(--gremco-orange, #E86A1A);
  outline-offset: 2px;
}

.consent__policy:focus-visible {
  outline: 2px solid var(--gremco-orange, #E86A1A);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

@media (max-width: 480px) {
  .consent {
    padding: 0.75rem;
  }

  .consent__panel {
    padding: 1.25rem;
  }

  .consent__actions {
    flex-direction: column-reverse;
  }

  .consent__button {
    width: 100%;
  }

  .consent__button--quiet {
    margin-right: 0;
  }
}

@media (prefers-color-scheme: dark) {
  .consent__panel {
    background: var(--gremco-navy-deep, #091828);
    border-color: var(--gremco-navy-light, #1A3A5C);
    color: var(--gremco-neutral, #F1F5F9);
  }

  .consent__title,
  .consent__category-name {
    color: var(--gremco-neutral, #F1F5F9);
  }

  .consent__body,
  .consent__category-info {
    color: var(--gremco-slate-light, #94A3B8);
  }

  .consent__policy {
    color: var(--gremco-orange-light, #F28C4E);
  }

  .consent__categories {
    background: rgb(255 255 255 / 4%);
    border-color: var(--gremco-navy-light, #1A3A5C);
  }

  .consent__category {
    border-color: var(--gremco-navy-light, #1A3A5C);
  }

  .consent__button--primary {
    background: var(--gremco-orange, #E86A1A);
    color: #FFFFFF;
    border-color: var(--gremco-orange, #E86A1A);
  }

  .consent__button--secondary {
    background: transparent;
    color: var(--gremco-neutral, #F1F5F9);
    border-color: var(--gremco-border-strong, #CBD5E1);
  }

  .consent__button--quiet {
    color: var(--gremco-orange-light, #F28C4E);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .consent__panel {
    animation: consent-in 160ms ease-out;
  }

  @keyframes consent-in {
    from { transform: translateY(-0.5rem); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}