/* Vereen Injury Medical Group — cookie consent UI
   Loaded by index.html, privacy-policy.html and terms-of-service.html.
   Consumes assets/css/tokens.css; declares no colour of its own except the
   pre-flattened alphas, which exist because both grounds (navy page, ivory page)
   sit behind this component and a token cannot know which. */

/* ---------- banner ---------- */
/* Fixed to the bottom, NOT a full-screen interstitial. A wall that hides the
   page until you choose is a cookie wall, and consent obtained that way is not
   freely given. The page stays readable and usable while the banner is up. */
.cc-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9000;
  background: var(--color-navy-900);
  border-top: 1px solid rgb(198 166 98 / 0.35);
  box-shadow: 0 -18px 48px -18px rgb(6 19 31 / 0.7);
  color: var(--color-ivory-100);
  font-family: var(--font-sans);
  /* Deliberately NO fill-mode. `both` also parks the banner at the `from` state —
     a full height below the viewport — BEFORE the animation starts, so anything
     that creates the animation without ever starting it leaves the consent UI
     off-screen with no other symptom. With no fill, the resting style is the
     visible position and the entrance is purely additive.
     (Measured stranded during review at translateY(122px); that particular case
     turned out to be `document.visibilityState === 'hidden'` throttling in an
     automated tab — nobody is looking at a hidden tab, so it was not itself a
     user-facing bug. Dropping the fill closes the adjacent case that would be.) */
  animation: cc-rise var(--duration-slow) var(--ease);
}
@keyframes cc-rise { from { transform: translateY(100%); } to { transform: none; } }

.cc-in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6) var(--space-8);
  width: 100%; max-width: 84rem; margin-inline: auto;
  padding: var(--space-6) var(--gutter);
}
.cc-copy { flex: 1 1 30rem; min-width: 0; }
.cc-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--color-gold-300);
}
.cc-text { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: rgb(251 247 238 / 0.82); }
.cc-text a { color: var(--color-gold-300); }
.cc-text strong { color: var(--color-ivory-100); }

.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: 0 0 auto; }

/* Accept and Reject share ONE class and one set of values. This is not a style
   preference — rejecting must be exactly as easy as accepting, so there is
   deliberately no visual hierarchy between them to tune later. */
.cc-btn {
  padding: 11px 20px; min-width: 8.5rem;
  border: 1px solid var(--color-gold-500); border-radius: var(--radius-btn);
  background: transparent; color: var(--color-ivory-100);
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.cc-btn:hover { background: var(--color-gold-500); color: var(--color-navy-900); }
.cc-btn-primary { background: var(--color-gold-500); color: var(--color-navy-900); }
.cc-btn-primary:hover { background: var(--color-gold-300); }

.cc-link {
  padding: 11px 4px; border: 0; background: none;
  color: rgb(251 247 238 / 0.82);
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cc-link:hover { color: var(--color-gold-300); }

/* ---------- preferences dialog ---------- */
.cc-backdrop {
  position: fixed; inset: 0; z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgb(6 19 31 / 0.72);
  animation: cc-fade var(--duration-ui) var(--ease) both;
}
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }

.cc-panel {
  position: relative;
  width: 100%; max-width: 38rem; max-height: 86vh; overflow-y: auto;
  padding: var(--space-8);
  background: var(--color-ivory-100); color: var(--color-navy-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-console);
  font-family: var(--font-sans);
}
.cc-panel-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xl); line-height: 1.2;
}
.cc-panel-lede { margin: 0 0 var(--space-6); font-size: var(--text-sm); line-height: 1.6; color: var(--color-slate-500); }
.cc-panel-lede a, .cc-row-desc a { color: var(--color-gold-700); }

.cc-rows { border-top: 1px solid rgb(14 39 64 / 0.12); }
.cc-row { padding: var(--space-4) 0; border-bottom: 1px solid rgb(14 39 64 / 0.12); }
.cc-row-head { display: flex; align-items: center; gap: var(--space-3); }
.cc-check { inline-size: 18px; block-size: 18px; accent-color: var(--color-gold-700); cursor: pointer; }
.cc-check:disabled { cursor: default; opacity: 0.55; }
.cc-row-label { font-size: var(--text-base); font-weight: 700; cursor: pointer; }
.cc-check:disabled + .cc-row-label { cursor: default; }
.cc-always {
  margin-inline-start: auto; padding: 3px 9px;
  border-radius: 999px; background: var(--color-parchment-200);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-slate-500);
}
.cc-row-desc { margin: var(--space-2) 0 0 30px; font-size: var(--text-sm); line-height: 1.6; color: var(--color-slate-500); }
.cc-gpc { color: var(--color-gold-700); }

.cc-panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cc-panel-actions .cc-btn { color: var(--color-navy-700); border-color: var(--color-gold-700); }
.cc-panel-actions .cc-btn:hover { background: var(--color-gold-700); color: var(--color-ivory-100); }
.cc-panel-actions .cc-btn-primary { background: var(--color-navy-700); border-color: var(--color-navy-700); color: var(--color-ivory-100); }
.cc-panel-actions .cc-btn-primary:hover { background: var(--color-navy-900); border-color: var(--color-navy-900); color: var(--color-ivory-100); }

.cc-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  inline-size: 40px; block-size: 40px;
  border: 0; background: none; color: var(--color-slate-500);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.cc-close:hover { color: var(--color-navy-700); }

/* ---------- the footer opener ---------- */
/* A <button>, because it opens a dialog rather than navigating. Styled to sit
   with the real links beside it on both the navy and ivory footers. */
[data-consent-open] {
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit;
  text-decoration: none; cursor: pointer;
}
[data-consent-open]:hover { color: var(--color-gold-300); text-decoration: underline; }

.cc-banner :focus-visible,
.cc-panel :focus-visible,
[data-consent-open]:focus-visible {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .cc-in { padding-block: var(--space-4); gap: var(--space-4); }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1 1 auto; min-width: 0; }
  .cc-link { width: 100%; text-align: center; }
  .cc-panel { padding: var(--space-6); }
  .cc-panel-actions .cc-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-backdrop { animation: none; }
}

@media print { .cc-banner, .cc-backdrop { display: none; } }