/* Klaro! consent manager styling — inherits brand via CSS tokens
   ---------------------------------------------------------------
   Klaro generates DOM under #klaro. We style with brand tokens
   to match the editorial dark/gold palette used site-wide.
   --------------------------------------------------------------- */

/* These aliases carry NO literal fallback, by design. tests/template/
   brand.test.ts enforces that this file contains no colour literal of any
   kind, so that a client re-skin cannot miss a value hiding in here. The
   fallbacks that used to sit inside these var() calls were documented as
   defense-in-depth that "should never actually be used" — custom properties
   resolve document-wide and global.css is loaded on every page, so if it
   fails to load the entire site is unstyled regardless. They bought nothing
   and cost the structural rule. Every colour below resolves to a --color-*
   token defined in src/styles/global.css. */
:root {
  --klaro-bg: var(--color-bg);
  --klaro-bg-elev: var(--color-surface);
  --klaro-border: var(--color-line);
  --klaro-cream: var(--color-text);
  --klaro-mute: var(--color-muted);
  --klaro-gold: var(--color-accent);
  --klaro-gold-deep: var(--color-accent-deep);
  --klaro-shadow: var(--color-shadow);
}

#klaro,
#klaro * {
  box-sizing: border-box;
  font-family: inherit;
}

/* Notice (bottom strip) */
#klaro .cookie-notice {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 36rem;
  margin-inline: auto;
  background: var(--klaro-bg);
  color: var(--klaro-mute);
  border: 1px solid var(--klaro-border);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  box-shadow:
    0 24px 60px -20px color-mix(in srgb, var(--klaro-shadow) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--klaro-gold) 15%, transparent);
  z-index: 1000;
  font-size: 0.875rem;
  line-height: 1.6;
}

#klaro .cookie-notice .cn-body { padding: 0; }
#klaro .cookie-notice .cn-body p { margin: 0 0 0.75rem; color: var(--klaro-mute); }
#klaro .cookie-notice .cn-body p:last-of-type { margin-bottom: 1rem; }

/* Eyebrow-style title at top of notice (Klaro emits this as the
   aria-labelledby target — must have visible text content for axe-core) */
#klaro-cookie-notice h1,
#klaro-cookie-notice #id-cookie-title,
#klaro .cookie-notice h1,
#klaro .cookie-notice #id-cookie-title {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--klaro-gold);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

#klaro .cookie-notice a,
#klaro .cookie-modal a {
  color: var(--klaro-gold);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--klaro-gold) 40%, transparent);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
#klaro .cookie-notice a:hover,
#klaro .cookie-modal a:hover {
  color: var(--klaro-cream);
}

#klaro .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Buttons — match site .btn pattern */
#klaro .cm-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.625rem 1.125rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-transform: none;
  line-height: 1;
}

#klaro .cm-btn-success,
#klaro .cm-btn-accept,
#klaro .cm-btn-accept-all {
  background: var(--klaro-gold);
  color: var(--klaro-bg);
  border-color: var(--klaro-gold);
}
#klaro .cm-btn-success:hover,
#klaro .cm-btn-accept:hover,
#klaro .cm-btn-accept-all:hover {
  background: var(--klaro-cream);
  border-color: var(--klaro-cream);
}

#klaro .cm-btn-decline,
#klaro .cm-btn-danger {
  background: transparent;
  color: var(--klaro-cream);
  border-color: var(--klaro-border);
}
#klaro .cm-btn-decline:hover,
#klaro .cm-btn-danger:hover {
  background: var(--klaro-border);
  color: var(--klaro-gold);
}

#klaro .cm-btn-info,
#klaro .cm-btn-learn-more {
  background: transparent;
  color: var(--klaro-gold);
  border-color: transparent;
  padding-inline: 0.5rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--klaro-gold) 40%, transparent);
}
#klaro .cm-btn-info:hover,
#klaro .cm-btn-learn-more:hover {
  color: var(--klaro-cream);
}

/* Modal */
#klaro .cookie-modal {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--klaro-shadow) 78%, transparent);
  backdrop-filter: blur(6px);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

#klaro .cookie-modal .cm-modal {
  background: var(--klaro-bg);
  color: var(--klaro-mute);
  border: 1px solid var(--klaro-border);
  border-radius: 4px;
  width: 100%;
  max-width: 42rem;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 40px 100px -30px color-mix(in srgb, var(--klaro-shadow) 70%, transparent);
  display: flex;
  flex-direction: column;
}

#klaro .cookie-modal .cm-header {
  padding: 1.75rem 2rem 0.75rem;
  border-bottom: 1px solid var(--klaro-border);
}

#klaro .cookie-modal .cm-header h1,
#klaro .cookie-modal .cm-header h2 {
  font-family: inherit;
  color: var(--klaro-cream);
  font-size: 1.625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

#klaro .cookie-modal .cm-header p {
  color: var(--klaro-mute);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

#klaro .cookie-modal .cm-body {
  padding: 1rem 2rem;
}

#klaro .cookie-modal .cm-purpose {
  border-top: 1px solid var(--klaro-border);
  padding: 1.25rem 0;
}
#klaro .cookie-modal .cm-purpose:first-child { border-top: 0; }

#klaro .cookie-modal .cm-services {
  margin-left: 0;
}

#klaro .cookie-modal .cm-service {
  background: var(--klaro-bg-elev);
  border: 1px solid var(--klaro-border);
  border-radius: 3px;
  padding: 1rem 1.125rem;
  margin-bottom: 0.75rem;
}

#klaro .cookie-modal .cm-service:last-child { margin-bottom: 0; }

#klaro .cookie-modal .cm-service .cm-service-title,
#klaro .cookie-modal .cm-service .title {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--klaro-cream);
  margin: 0 0 0.25rem;
}

#klaro .cookie-modal .cm-service .cm-service-description,
#klaro .cookie-modal .cm-service p {
  font-size: 0.8125rem;
  color: var(--klaro-mute);
  line-height: 1.55;
  margin: 0.25rem 0 0;
}

#klaro .cookie-modal .cm-service .cm-required,
#klaro .cookie-modal .cm-service .required {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--klaro-gold);
  margin-left: 0.5rem;
}

/* Universal spacing for any "Always on" / "Required" label that Klaro
   emits adjacent to a title without whitespace. Covers both purpose-level
   and service-level required indicators across Klaro 0.7's DOM variations. */
#klaro .cm-required-title,
#klaro .cm-list-title small,
#klaro .cm-required,
#klaro .cm-list-title .cm-list-title-required {
  margin-left: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--klaro-gold);
  font-weight: 600;
  vertical-align: middle;
}

/* Belt-and-suspenders: force a non-breaking space before any inline
   small/required marker via ::before, in case the above doesn't catch
   a specific Klaro DOM variant */
#klaro .cookie-modal .cm-list-title > small::before,
#klaro .cookie-modal .cm-required::before {
  content: "\00a0";
}

/* Toggle switch */
#klaro .cookie-modal .cm-switch,
#klaro .cookie-modal .cm-switch-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.5rem;
}

#klaro .cookie-modal input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.5rem;
  height: 1.25rem;
  background: var(--klaro-border);
  border-radius: 1rem;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  margin: 0;
}

#klaro .cookie-modal input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  background: var(--klaro-cream);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

#klaro .cookie-modal input[type="checkbox"]:checked {
  background: var(--klaro-gold);
}

#klaro .cookie-modal input[type="checkbox"]:checked::after {
  transform: translateX(1.25rem);
  background: var(--klaro-bg);
}

#klaro .cookie-modal input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#klaro .cookie-modal input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--klaro-gold);
  outline-offset: 3px;
}

/* Footer with action buttons */
#klaro .cookie-modal .cm-footer {
  padding: 1.25rem 2rem 1.75rem;
  border-top: 1px solid var(--klaro-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  background: var(--klaro-bg);
  position: sticky;
  bottom: 0;
}

#klaro .cookie-modal .cm-powered-by {
  display: none;
}

/* Responsive */
@media (max-width: 640px) {
  #klaro .cookie-notice {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 1rem 1.125rem;
  }
  #klaro .cookie-modal .cm-header,
  #klaro .cookie-modal .cm-body,
  #klaro .cookie-modal .cm-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #klaro .cookie-modal .cm-footer {
    justify-content: stretch;
  }
  #klaro .cookie-modal .cm-footer .cm-btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #klaro * {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   Accessibility patches — close Lighthouse a11y gaps in Klaro 0.7
   --------------------------------------------------------------------- */

/* Touch-target sizing: minimum 44x44 (WCAG 2.5.5 AAA) on all interactive
   elements inside the banner + modal. Pads small text links so screen
   touch users (and switch users) have a fair target. */
#klaro .cookie-notice a,
#klaro .cookie-notice .cm-link,
#klaro .cookie-modal a:not(.cm-btn) {
  display: inline-block;
  min-height: 2.75rem;       /* 44px */
  padding-block: 0.625rem;
  line-height: 1.3;
  position: relative;
}

/* The "Manage choices" pseudo-link inside the bottom banner */
#klaro .cookie-notice .cn-learn-more,
#klaro .cookie-notice button.cm-btn-learn-more {
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  margin: 0.25rem 0;
}

/* Toggle switches: enforce min target via a larger hit area without
   changing the visual size of the switch */
#klaro .cookie-modal input[type="checkbox"] {
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: 2.75rem;
  height: 1.5rem;
  background-clip: content-box;
  padding: 0.625rem 0;
}
#klaro .cookie-modal input[type="checkbox"]::after {
  top: calc(0.625rem + 2px);
}
#klaro .cookie-modal input[type="checkbox"]:checked::after {
  transform: translateX(1.25rem);
}

/* Buttons already meet 44px via padding, but enforce explicitly */
#klaro .cm-btn {
  min-height: 2.75rem;
}