/* som-consent.css — the consent banner (see assets/js/som-consent.js).
   Palette as the rest of the site: ink #1A1A1A, accent #C19A4E, hairline #D1C9BD,
   page #F9F6F1, muted #696059.

   Deliberately a bottom sheet rather than a full-screen overlay: a wall that blocks the page
   until someone answers is what makes people click "accept" without reading, and under GDPR
   consent obtained that way is not consent. Both answers are one click, side by side, with
   the same weight. */

#som-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998; /* under the accessibility toolbar, which must stay reachable */
  padding: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

#som-consent[hidden] {
  display: none;
}

.som-consent-panel {
  pointer-events: auto;
  width: min(760px, 100%);
  background: #F9F6F1;
  border: 1px solid #D1C9BD;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.16);
  padding: 22px 24px;
}

.som-consent-title {
  margin: 0 0 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C19A4E;
}

.som-consent-body {
  margin: 0 0 16px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #4A443C;
  max-width: 68ch;
}

.som-consent-body a {
  color: #1A1A1A;
  text-decoration: none;
  border-bottom: 1px solid #C19A4E;
  padding-bottom: 1px;
}

.som-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.som-consent-btn {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid #D1C9BD;
  background: transparent;
  color: #1A1A1A;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Accept and reject look the same on purpose. A grey "reject" next to a gold "accept" is a
   dark pattern, and a regulator reads it as one. */
/* Save carries the same weight as Accept — it is the same kind of act — but a class of its
   own, so nothing has to guess which button it is holding. */
.som-consent-save,
.som-consent-reject,
.som-consent-accept {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #F9F6F1;
}

.som-consent-btn:hover,
.som-consent-btn:focus-visible {
  border-color: #C19A4E;
  color: #C19A4E;
}

.som-consent-save:hover,
.som-consent-save:focus-visible,
.som-consent-reject:hover,
.som-consent-reject:focus-visible,
.som-consent-accept:hover,
.som-consent-accept:focus-visible {
  background: #C19A4E;
  border-color: #C19A4E;
  color: #1A1A1A;
}

.som-consent-btn:focus-visible {
  outline: 2px solid #C19A4E;
  outline-offset: 2px;
}

/* --- Per-category detail --- */
.som-consent-details {
  border-top: 1px solid #D1C9BD;
  margin: 0 0 16px;
  padding-top: 14px;
}

.som-consent-details[hidden] {
  display: none;
}

.som-consent-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1A1A1A;
  cursor: pointer;
}

.som-consent-row input {
  margin-top: 3px;
  accent-color: #C19A4E;
  width: 16px;
  height: 16px;
  flex: none;
}

.som-consent-row input:disabled {
  opacity: 0.5;
  cursor: default;
}

.som-consent-note {
  color: #696059;
  font-size: 13px;
}

@media (max-width: 560px) {
  .som-consent-panel {
    padding: 18px 16px;
  }

  .som-consent-btn {
    flex: 1 1 45%;
    padding: 12px 14px;
    text-align: center;
  }
}