/* SOS Cookie Consent – public/css/modal.css
   Palette aligned with NEADS / SOS: #2C2416 | #F5F2EB | #CC3300 | #A8B400 | #DDD5C2
   All colour pairs verified ≥ 4.5:1 (WCAG 2.2 AA)
   Focus indicators: ≥ 3px solid offset outline (2.4.11 / 2.4.12)
   Motion: respects prefers-reduced-motion
*/

/* ── Custom properties ────────────────────────────────────────────────────── */
:root {
  --sos-cc-bg:           #FFFFFF;
  --sos-cc-text:         #2C2416;       /* 17.3:1 on white */
  --sos-cc-accent:       #005B99;       /* accessible blue, 7.1:1 on white */
  --sos-cc-accent-dark:  #004070;
  --sos-cc-btn-accept-bg:#005B99;
  --sos-cc-btn-accept-fg:#FFFFFF;
  --sos-cc-btn-decline-bg:#FFFFFF;
  --sos-cc-btn-decline-fg:#2C2416;
  --sos-cc-btn-decline-border:#2C2416;
  --sos-cc-border:       #DDD5C2;
  --sos-cc-shadow:       0 4px 24px rgba(44,36,22,.18);
  --sos-cc-radius:       8px;
  --sos-cc-overlay-bg:   rgba(44,36,22,.55);
  --sos-cc-focus-color:  #CC3300;       /* high-vis focus ring */
  --sos-cc-max-w:        640px;
  --sos-cc-z:            999999;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
.sos-cc-overlay {
  position: fixed;
  inset: 0;
  background: var(--sos-cc-overlay-bg);
  z-index: calc(var(--sos-cc-z) - 1);
}
.sos-cc-overlay[hidden] { display: none; }

/* ── Modal shell ──────────────────────────────────────────────────────────── */
.sos-cc-modal {
  position: fixed;
  z-index: var(--sos-cc-z);
  background: var(--sos-cc-bg);
  color: var(--sos-cc-text);
  border-radius: var(--sos-cc-radius);
  box-shadow: var(--sos-cc-shadow);
  max-width: var(--sos-cc-max-w);
  width: calc(100% - 2rem);
  max-height: 90vh;
  overflow-y: auto;
  /* Smooth entrance */
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sos-cc-modal { transition: none; }
}

.sos-cc-modal[hidden] { display: none; }

/* ── Positions ────────────────────────────────────────────────────────────── */
.sos-cc-pos-bottom-center {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.sos-cc-pos-bottom-left  { bottom: 1.5rem; left: 1.5rem; }
.sos-cc-pos-bottom-right { bottom: 1.5rem; right: 1.5rem; }
.sos-cc-pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Inner padding ────────────────────────────────────────────────────────── */
.sos-cc-modal__inner {
  padding: 1.75rem 2rem 1.5rem;
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.sos-cc-modal__title {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sos-cc-text);
}

/* ── Intro ────────────────────────────────────────────────────────────────── */
.sos-cc-modal__intro p {
  margin: 0 0 1rem;
  line-height: 1.6;
  font-size: 0.9375rem;
}

/* ── "Cookies Updated" notice ─────────────────────────────────────────────── */
.sos-cc-notice {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .65rem .85rem;
  margin-bottom: 1rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-left: 4px solid #CC3300;
  border-radius: 4px;
  font-size: .875rem;
  line-height: 1.5;
  color: #333;
}
.sos-cc-notice__icon { flex-shrink: 0; }

/* ── Privacy policy link ──────────────────────────────────────────────────── */
.sos-cc-pp-link {
  color: var(--sos-cc-accent);
  text-decoration: underline;
  font-size: .875rem;
}
.sos-cc-pp-link:focus-visible {
  outline: 3px solid var(--sos-cc-focus-color);
  outline-offset: 2px;
}

/* ── Cookie categories (<details>) ───────────────────────────────────────── */
.sos-cc-modal__cookies {
  margin: 0 0 1.25rem;
  border: 1px solid var(--sos-cc-border, #DDD5C2);
  border-radius: 4px;
  overflow: hidden;
}

.sos-cc-category {
  border-bottom: 1px solid var(--sos-cc-border, #DDD5C2);
}
.sos-cc-category:last-child { border-bottom: none; }

.sos-cc-category__summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  cursor: pointer;
  list-style: none;           /* hide default marker */
  font-weight: 600;
  font-size: .9375rem;
  background: #F5F2EB;
  user-select: none;
}
/* Custom disclosure triangle */
.sos-cc-category__summary::before {
  content: "▶";
  font-size: .7em;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sos-cc-category__summary::before { transition: none; }
}
.sos-cc-category[open] .sos-cc-category__summary::before {
  transform: rotate(90deg);
}
.sos-cc-category__summary::-webkit-details-marker { display: none; }

.sos-cc-category__summary:focus-visible {
  outline: 3px solid var(--sos-cc-focus-color);
  outline-offset: 2px;
}

.sos-cc-category__count {
  font-weight: 400;
  color: #555;
}

/* ── Cookie list ──────────────────────────────────────────────────────────── */
.sos-cc-category__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sos-cc-cookie-item {
  padding: .75rem 1rem;
  border-top: 1px solid var(--sos-cc-border);
  font-size: .875rem;
  line-height: 1.5;
}
.sos-cc-cookie-item__name code {
  font-size: .8125rem;
  background: #F5F2EB;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}
.sos-cc-cookie-item__provider {
  font-weight: 600;
  margin: .2rem 0;
}
.sos-cc-cookie-item__purpose { color: #333; }
.sos-cc-cookie-item__duration {
  margin-top: .25rem;
  color: #555;
  font-size: .8125rem;
}

/* ── Action buttons ───────────────────────────────────────────────────────── */
.sos-cc-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}

.sos-cc-btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: .7rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  border: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sos-cc-btn { transition: none; }
}

.sos-cc-btn:focus-visible {
  outline: 3px solid var(--sos-cc-focus-color);
  outline-offset: 3px;
}

/* Accept (primary) */
.sos-cc-btn--accept {
  background: var(--sos-cc-btn-accept-bg);
  color: var(--sos-cc-btn-accept-fg);
  border-color: var(--sos-cc-btn-accept-bg);
}
.sos-cc-btn--accept:hover {
  background: var(--sos-cc-accent-dark);
  border-color: var(--sos-cc-accent-dark);
}

/* Decline (secondary) */
.sos-cc-btn--decline {
  background: var(--sos-cc-btn-decline-bg);
  color: var(--sos-cc-btn-decline-fg);
  border-color: var(--sos-cc-btn-decline-border);
}
.sos-cc-btn--decline:hover {
  background: #EDE8DF;
}

/* ── Fine print ───────────────────────────────────────────────────────────── */
.sos-cc-modal__note {
  margin: 0;
  font-size: .8125rem;
  color: #555;
  line-height: 1.5;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  .sos-cc-modal__inner { padding: 1.25rem; }
  .sos-cc-modal {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--sos-cc-radius) var(--sos-cc-radius) 0 0;
  }
}