/* ============================================================
   EYAL STUDIOS — Cookie consent banner, preferences dialog,
   and the placeholder that stands in for a blocked video.

   Built entirely from the design tokens in style.css, so it
   follows the navy/gold palette and flips with light/dark
   without a second set of rules.

   Accept and Reject share one class (.kf-consent__btn--primary)
   and are rendered side by side at the same size — equal
   prominence is a PECR requirement here, not a style choice.
   ============================================================ */

/* ----------------------------------------------------------
   1. NOTICE BAR
   ---------------------------------------------------------- */

.kf-consent__bar {
  position: fixed;
  z-index: 9999;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2);
  border-top: 1px solid var(--ember);
  box-shadow: 0 -18px 48px -20px var(--shadow-color);
}

.kf-consent__bar-in {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1200px, 100% - 48px);
  margin: 0 auto;
}

.kf-consent__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.kf-consent__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.kf-consent__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.kf-consent__link,
.kf-consent__panel-note a {
  color: var(--ember-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kf-consent__link:hover,
.kf-consent__link:focus-visible,
.kf-consent__panel-note a:hover,
.kf-consent__panel-note a:focus-visible {
  color: var(--ember-ink-hover);
}

.kf-consent__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ----------------------------------------------------------
   2. BUTTONS
   Accept and Reject are the same button. Only "Manage
   settings" is visually quieter, and it is still a plain,
   fully legible control — not a hidden link.
   ---------------------------------------------------------- */

.kf-consent__btn {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 13px 22px;
  min-width: 132px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kf-consent__btn--primary {
  background: var(--ember);
  border-color: var(--ember);
  color: #00071A;
}

.kf-consent__btn--primary:hover {
  background: var(--ember-hover);
  border-color: var(--ember-hover);
}

.kf-consent__btn--quiet {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  min-width: 0;
}

.kf-consent__btn--quiet:hover {
  border-color: var(--ember-ink);
  color: var(--ember-ink);
}

.kf-consent__btn:focus-visible,
.kf-consent__close:focus-visible,
.kf-consent__switch input:focus-visible + .kf-consent__slider {
  outline: 2px solid var(--ember-ink);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   3. PREFERENCES DIALOG
   ---------------------------------------------------------- */

/* display is declared on :not([hidden]) deliberately. A bare
   `display: flex` here beats the user-agent rule for [hidden], which would
   leave the full-page backdrop in front of the site swallowing every click
   while the dialog is supposed to be closed. */
.kf-consent__modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: none;
  padding: 24px;
}

.kf-consent__modal:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kf-consent__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-heavy);
}

.kf-consent__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: min(86vh, 760px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
}

.kf-consent__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.kf-consent__panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text);
}

.kf-consent__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.kf-consent__close:hover {
  color: var(--ember-ink);
  border-color: var(--ember-ink);
}

.kf-consent__panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 24px 16px;
  -webkit-overflow-scrolling: touch;
}

.kf-consent__cat {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.kf-consent__cat:last-of-type {
  border-bottom: 0;
}

.kf-consent__cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kf-consent__cat-label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.kf-consent__always {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember-ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
}

.kf-consent__cat-desc {
  margin: 7px 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.kf-consent__panel-note {
  margin: 18px 0 0;
  font-size: 0.8125rem;
}

.kf-consent__panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--border);
}

.kf-consent__panel-foot .kf-consent__btn {
  flex: 1 1 160px;
}

/* Toggle switch — unchecked is the rendered default, and the markup ships
   with no `checked` attribute anywhere. */

.kf-consent__switch {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.kf-consent__switch input {
  position: absolute;
  opacity: 0;
  width: 46px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}

.kf-consent__slider {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kf-consent__slider::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.kf-consent__switch input:checked + .kf-consent__slider {
  background: var(--ember);
  border-color: var(--ember);
}

.kf-consent__switch input:checked + .kf-consent__slider::after {
  transform: translateX(20px);
  background: #00071A;
}

body.kf-consent-open {
  overflow: hidden;
}

/* ----------------------------------------------------------
   4. BLOCKED VIDEO PLACEHOLDER
   Fills the player box the embed would have occupied, so
   nothing shifts when the visitor allows it.
   ---------------------------------------------------------- */

.kf-video-gate {
  position: absolute;
  inset: 0;
  /* Above the hero iframe wrapper, which sits at z-index 6. */
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(213, 181, 132, 0.14), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: inherit;
}

.kf-video-gate__mark {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-ink);
}

.kf-video-gate__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 2.4vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  max-width: 34ch;
}

.kf-video-gate__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 46ch;
}

.kf-video-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Small player boxes (portfolio cards, pricing previews) only have room for
   the button, so the supporting copy steps aside. */
.kf-video-gate--compact {
  gap: 10px;
  padding: 16px;
}

.kf-video-gate--compact .kf-video-gate__text {
  display: none;
}

.kf-video-gate--compact .kf-video-gate__title {
  font-size: 0.8125rem;
}

/* ----------------------------------------------------------
   5. MOBILE
   The bar stacks and the buttons go full width. Accept and
   Reject stay adjacent and identical.
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .kf-consent__bar-in {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: min(1200px, 100% - 32px);
  }

  .kf-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .kf-consent__btn {
    min-width: 0;
    width: 100%;
  }

  .kf-consent__btn--quiet {
    grid-column: 1 / -1;
  }

  .kf-consent__modal {
    padding: 16px;
  }

  .kf-consent__panel-head,
  .kf-consent__panel-foot {
    padding-left: 18px;
    padding-right: 18px;
  }

  .kf-consent__panel-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .kf-consent__panel-foot .kf-consent__btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kf-consent__btn,
  .kf-consent__close,
  .kf-consent__slider,
  .kf-consent__slider::after {
    transition: none;
  }
}

/* The site-wide light-mode heading rule title-cases every h2 with
   !important. The banner heading is interface copy, not a marketing
   headline, so it keeps the sentence case it was written in. */
[data-theme="light"] .kf-consent h2.kf-consent__title:not(.cta-heading):not(.cta-banner-box *),
[data-theme="light"] .kf-consent h2.kf-consent__panel-title:not(.cta-heading):not(.cta-banner-box *),
.light-mode .kf-consent h2.kf-consent__title:not(.cta-heading):not(.cta-banner-box *),
.light-mode .kf-consent h2.kf-consent__panel-title:not(.cta-heading):not(.cta-banner-box *) {
  text-transform: none !important;
}