/* =============================================================================
 * Fadehaus consent banner styles  (#3805)
 *
 * A calm bottom bar/sheet — NOT a full-screen blocker, NOT scroll-locking. The
 * page stays fully usable behind it (no cookie wall).
 *
 * EQUAL PROMINENCE (hard legal requirement — no dark patterns): Accept and
 * Decline are rendered with the IDENTICAL treatment — same size, same weight,
 * same border, same background, same colors. Neither is styled as the "primary"
 * choice. This is deliberate and must not be "designed up" into a bright Accept
 * vs. a muted Decline.
 *
 * THEME: the banner reads the site's own CSS custom properties (--bg-card,
 * --ink, --orange, --line, --radius, --font, defined on :root in each page), so
 * it automatically tracks the site in both light and dark — including a future
 * [data-theme] toggle (#3615), which simply reassigns those same variables.
 * Hard fallbacks are provided for every variable so the banner still looks
 * right if a page ever loads this CSS without the site tokens, and an explicit
 * prefers-color-scheme: light block covers that standalone case.
 * ============================================================================= */

.fh-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 16px clamp(16px, 5vw, 40px);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--bg-card, #1a1712);
  color: var(--ink, #f2ede6);
  border-top: 1px solid var(--line, #2a251e);
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  box-shadow: 0 -12px 40px -24px rgba(0, 0, 0, 0.7);
  /* Slide-in; disabled under reduced-motion below. */
  transform: translateY(0);
  animation: fh-consent-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

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

.fh-consent__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
}

.fh-consent__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim, #a89f92);
}

.fh-consent__text strong,
.fh-consent__title {
  color: var(--ink, #f2ede6);
  font-weight: 600;
}

.fh-consent__text a {
  color: var(--orange, #FE6C1A);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fh-consent__text a:hover {
  text-decoration: none;
}

/* ---- Actions: two EQUAL buttons ------------------------------------------- */

.fh-consent__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.fh-consent__btn {
  /* Identical treatment for Accept AND Decline — see file header. */
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink, #f2ede6);
  background: transparent;
  border: 1.5px solid var(--orange, #FE6C1A);
  border-radius: calc(var(--radius, 14px) - 4px);
  padding: 11px 22px;
  min-width: 116px;
  text-align: center;
  transition: background-color 140ms ease, color 140ms ease;
}

.fh-consent__btn:hover {
  background: var(--orange-soft, rgba(254, 108, 26, 0.14));
}

.fh-consent__btn:active {
  transform: translateY(0.5px);
}

.fh-consent__btn:focus-visible {
  outline: 2px solid var(--orange, #FE6C1A);
  outline-offset: 2px;
}

/* Optional tertiary "Only essential" — smaller and quieter than the two equal
   buttons, but still a plain, legible text control (not a dark-pattern whisper). */
.fh-consent__essential {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim, #a89f92);
  background: transparent;
  border: 0;
  padding: 8px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex: 0 0 auto;
}

.fh-consent__essential:hover {
  color: var(--ink, #f2ede6);
}

.fh-consent__essential:focus-visible {
  outline: 2px solid var(--orange, #FE6C1A);
  outline-offset: 2px;
  border-radius: 4px;
}

/* When GPC forced the declined state, the JS sets data-fh-consent-state. Show a
   tiny status hint so the visitor knows they are currently opted out. */
.fh-consent[data-fh-consent-state="declined"] .fh-consent__gpc-note {
  display: inline;
}

.fh-consent__gpc-note {
  display: none;
  color: var(--ink-faint, #8a8175);
  font-size: 12.5px;
}

/* ---- Light theme fallback (standalone; site tokens override via the vars) --- */

@media (prefers-color-scheme: light) {
  .fh-consent {
    background: var(--bg-card, #ffffff);
    color: var(--ink, #171613);
    border-top: 1px solid var(--line, #e7e0d6);
    box-shadow: 0 -12px 40px -24px rgba(0, 0, 0, 0.25);
  }
  .fh-consent__text {
    color: var(--ink-dim, #575049);
  }
  .fh-consent__btn {
    color: var(--ink, #171613);
  }
}

/* Explicit site theme override (#3615): if a page ever stamps data-theme on the
   root, respect it in both directions regardless of OS preference. Because the
   banner is painted from the site's CSS variables, these blocks mostly exist to
   win specificity over the prefers-color-scheme fallback above. */
:root[data-theme="light"] .fh-consent {
  background: var(--bg-card, #ffffff);
  color: var(--ink, #171613);
  border-top-color: var(--line, #e7e0d6);
}

:root[data-theme="dark"] .fh-consent {
  background: var(--bg-card, #1a1712);
  color: var(--ink, #f2ede6);
  border-top-color: var(--line, #2a251e);
}

/* ---- Motion ---------------------------------------------------------------- */

@keyframes fh-consent-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fh-consent {
    animation: none;
  }
}

/* ---- Narrow screens: stack, keep the two buttons equal & side by side ------ */

@media (max-width: 560px) {
  .fh-consent__inner {
    gap: 14px;
  }
  .fh-consent__actions {
    width: 100%;
  }
  .fh-consent__btn {
    flex: 1 1 0;
    min-width: 0;
  }
}