/* ============================================================================
 * TEFL Heaven brand overrides for the Klaro consent banner.
 *
 * Klaro loads its default CSS from cdn.kiprotect.com first; this file
 * loads after and overrides colors / typography / layout to match the
 * teflheaven.com palette.
 *
 * Palette (mirrors app/globals.css):
 *   --tefl-navy:   #06283d   dark navy — text, secondary button outline
 *   --tefl-brand:  #0e7eaa   mid sky blue — primary CTA bg, accessible on white
 *   --tefl-sky:    #29b0e8   bright sky blue — top accent stripe
 *   --tefl-pale:   #e8f6fc   pale sky bg
 *   --tefl-amber:  #f59e0b   amber accent (reserved for high-priority CTAs)
 * ========================================================================== */

/* ── Backdrop dim — site is greyed out until user makes a choice ─────────
 * Klaro's #klaro container is always present once initialized; the notice
 * appears as a child when there's no recorded consent. We use :has() to
 * detect the live banner and apply a fixed full-viewport backdrop behind
 * it. Blocks click-through so visitors must engage with the banner.
 * Browser support: Chrome 105+, Safari 15.4+, Firefox 121+ (~95% global).
 * Older browsers degrade gracefully — banner still works, just without
 * the dim overlay. */
body:has(#klaro .cookie-notice:not(.cookie-modal-notice)),
body:has(.klaro .cookie-notice:not(.cookie-modal-notice)) {
  overflow: hidden;
}

body:has(#klaro .cookie-notice:not(.cookie-modal-notice))::before,
body:has(.klaro .cookie-notice:not(.cookie-modal-notice))::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(6, 40, 61, 0.55);
  z-index: 998;
  pointer-events: auto;
}

/* The banner itself stacks above the backdrop. */
.klaro .cookie-notice:not(.cookie-modal-notice),
#klaro .cookie-notice:not(.cookie-modal-notice) {
  z-index: 999 !important;
}

/* ── Banner (bottom-stretch notice) ─────────────────────────────────────── */
.klaro .cookie-notice:not(.cookie-modal-notice),
#klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #e8f6fc !important;
  color: #06283d !important;
  border-top: 4px solid #29b0e8 !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 20px rgba(6, 40, 61, 0.18) !important;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif !important;
  padding: 1.25rem 1.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
}

.klaro .cookie-notice .cn-body,
#klaro .cookie-notice .cn-body {
  color: #06283d !important;
  margin-right: 1rem;
}

.klaro .cookie-notice .cn-body p,
#klaro .cookie-notice .cn-body p {
  color: #06283d !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0.25rem 0 !important;
}

.klaro .cookie-notice .cn-body h1,
.klaro .cookie-notice .cn-body h2,
#klaro .cookie-notice .cn-body h1,
#klaro .cookie-notice .cn-body h2 {
  color: #06283d !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin: 0 0 0.5rem 0 !important;
  letter-spacing: -0.01em;
}

/* Privacy policy and "manage choices" links inline in the notice body. */
.klaro .cookie-notice a,
#klaro .cookie-notice a {
  color: #0e7eaa !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

.klaro .cookie-notice a:hover,
#klaro .cookie-notice a:hover {
  color: #06283d !important;
}

/* ── Buttons (Accept all / Decline / Manage) ────────────────────────────── */
.klaro .cookie-notice .cn-buttons,
#klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  margin-top: 0.5rem !important;
}

.klaro .cookie-notice .cm-btn,
#klaro .cookie-notice .cm-btn {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* Primary "Accept all" — solid sky blue, white text. */
.klaro .cookie-notice .cm-btn-success,
.klaro .cookie-notice .cm-btn-accept-all,
.klaro .cookie-notice .cm-btn-accept,
#klaro .cookie-notice .cm-btn-success,
#klaro .cookie-notice .cm-btn-accept-all,
#klaro .cookie-notice .cm-btn-accept {
  background: #0e7eaa !important;
  color: #ffffff !important;
  border-color: #0e7eaa !important;
}

.klaro .cookie-notice .cm-btn-success:hover,
.klaro .cookie-notice .cm-btn-accept-all:hover,
.klaro .cookie-notice .cm-btn-accept:hover,
#klaro .cookie-notice .cm-btn-success:hover,
#klaro .cookie-notice .cm-btn-accept-all:hover,
#klaro .cookie-notice .cm-btn-accept:hover {
  background: #06283d !important;
  border-color: #06283d !important;
}

/* Secondary "Decline all" — outlined navy on transparent. */
.klaro .cookie-notice .cm-btn-decline,
.klaro .cookie-notice .cm-btn-danger,
#klaro .cookie-notice .cm-btn-decline,
#klaro .cookie-notice .cm-btn-danger {
  background: transparent !important;
  color: #06283d !important;
  border-color: #06283d !important;
}

.klaro .cookie-notice .cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn-danger:hover,
#klaro .cookie-notice .cm-btn-decline:hover,
#klaro .cookie-notice .cm-btn-danger:hover {
  background: #06283d !important;
  color: #ffffff !important;
}

/* "Manage choices" / Learn more — looks like a text link, not a button. */
.klaro .cookie-notice .cn-learn-more,
#klaro .cookie-notice .cn-learn-more {
  background: transparent !important;
  color: #06283d !important;
  border: none !important;
  text-decoration: underline !important;
  padding: 0.65rem 0.5rem !important;
  font-weight: 500 !important;
}

.klaro .cookie-notice .cn-learn-more:hover,
#klaro .cookie-notice .cn-learn-more:hover {
  color: #0e7eaa !important;
  background: transparent !important;
}

/* ── Full preferences modal (when user clicks Manage / Consent Preferences) ─ */
.klaro .cookie-modal .cm-modal,
#klaro .cookie-modal .cm-modal {
  background: #ffffff !important;
  color: #06283d !important;
  border-radius: 12px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  box-shadow: 0 8px 32px rgba(6, 40, 61, 0.25) !important;
  border: 1px solid rgba(6, 40, 61, 0.08) !important;
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
#klaro .cookie-modal h1,
#klaro .cookie-modal h2 {
  color: #06283d !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}

.klaro .cookie-modal a,
#klaro .cookie-modal a {
  color: #0e7eaa !important;
}

/* Toggle switch "on" state — use sky blue. */
.klaro .cookie-modal .slider,
#klaro .cookie-modal .slider {
  background-color: #cbd5e1 !important;
}

.klaro .cookie-modal input[type="checkbox"]:checked + .slider,
#klaro .cookie-modal input[type="checkbox"]:checked + .slider {
  background-color: #29b0e8 !important;
}

/* Purpose / service rows inside the modal.
   Klaro's default layout absolutely-positions the toggle switch at the
   left and uses left-padding on the row to reserve space for it.
   We DON'T override padding here — that would cause the toggle to
   overlap the label text. We just add the divider line and tweak
   typography. */
.klaro .cookie-modal .cm-purpose,
#klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service,
#klaro .cookie-modal .cm-service {
  border-bottom: 1px solid rgba(6, 40, 61, 0.08) !important;
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}

.klaro .cookie-modal .cm-purpose-name,
#klaro .cookie-modal .cm-purpose-name,
.klaro .cookie-modal .cm-service-name,
#klaro .cookie-modal .cm-service-name {
  color: #06283d !important;
  font-weight: 600 !important;
}

/* Description text inside each purpose row — make sure it inherits
   the row's left padding so it lines up under the title, not under
   the toggle. */
.klaro .cookie-modal .cm-purpose p,
.klaro .cookie-modal .cm-service p,
#klaro .cookie-modal .cm-purpose p,
#klaro .cookie-modal .cm-service p {
  color: #4a5d6e !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  margin: 0.25rem 0 0 0 !important;
}

/* Modal buttons share the same styling rules as notice buttons above. */
.klaro .cookie-modal .cm-btn,
#klaro .cookie-modal .cm-btn {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.65rem 1.4rem !important;
  font-size: 0.9rem !important;
}

.klaro .cookie-modal .cm-btn-success,
.klaro .cookie-modal .cm-btn-accept-all,
.klaro .cookie-modal .cm-btn-accept,
#klaro .cookie-modal .cm-btn-success,
#klaro .cookie-modal .cm-btn-accept-all,
#klaro .cookie-modal .cm-btn-accept {
  background: #0e7eaa !important;
  color: #ffffff !important;
  border: 1px solid #0e7eaa !important;
}

.klaro .cookie-modal .cm-btn-decline,
.klaro .cookie-modal .cm-btn-danger,
#klaro .cookie-modal .cm-btn-decline,
#klaro .cookie-modal .cm-btn-danger {
  background: transparent !important;
  color: #06283d !important;
  border: 1px solid #06283d !important;
}

/* ── Mobile tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .klaro .cookie-notice:not(.cookie-modal-notice),
  #klaro .cookie-notice:not(.cookie-modal-notice) {
    padding: 1rem !important;
  }
  .klaro .cookie-notice .cn-body h1,
  .klaro .cookie-notice .cn-body h2,
  #klaro .cookie-notice .cn-body h1,
  #klaro .cookie-notice .cn-body h2 {
    font-size: 1.1rem !important;
  }
  .klaro .cookie-notice .cn-buttons,
  #klaro .cookie-notice .cn-buttons {
    flex-direction: column !important;
  }
  .klaro .cookie-notice .cm-btn,
  #klaro .cookie-notice .cm-btn {
    width: 100% !important;
  }
}