/* ============================================================
   Karatepraxis — Light Theme Overrides
   Loads at wp_head priority 100 (after tokens.css and everything
   else), so :root[data-theme="light"] wins without !important.
   ============================================================ */

/* ---------- 1. Light-theme color overrides ---------- */
:root[data-theme="light"]{
  --c-ink:#ffffff;
  --c-ink-2:#f4f4f4;
  --c-ink-3:#fafafa;
  /* --c-paper / --c-paper-2 / --c-paper-3 / --c-text / --c-muted / --c-line
     intentionally NOT overridden anymore — paper family is now permanently
     dark (see tokens.css), no longer flips light in the light theme. */
  --c-text-on-dark:#1a1a1a;
  --c-muted-on-dark:#5a5a5a;
  --c-line-dark:#dddedf;
  --c-line-strong:#6b6b6b;
  --c-red:#b80000;
  --c-red-dark:#8f0000;
  --c-red-on-paper:#b80000;
  --c-red-on-ink:#b80000;
  --c-red-tint:rgba(184,0,0,.14);
  --c-navy:#e8edf3;
  --c-navy-2:#dfe5e8;
  /* --c-white / --c-black intentionally NOT overridden — never flip */
  /* --c-on-photo / --c-on-photo-muted / --c-red-on-photo also NOT
     overridden — photo-hero text stays white in both themes */
}

/* ---------- 2. Photo-hero overlay: lighter tint in light mode ----------
   --c-overlay-ink is used exclusively for the Foto-Hero dark overlay
   (verified: only definition is in tokens.css; no other file or page
   _cssCustom references it). A single token override here handles all
   photo heroes at once, no per-section selectors needed. */
:root[data-theme="light"]{
  --c-overlay-ink: rgba(17,17,17,.35);
}

/* ---------- 3. Root font-size zoom support ----------
   tokens.css already sets html{font-size:100%}; this file loads after
   it, so the calc() below wins and layers the zoom factor on top
   without touching the base rule. */
:root{
  --kp-zoom: 1;
}
html{
  font-size: calc(100% * var(--kp-zoom, 1));
}

/* ---------- 4. Toggle + zoom control styles ---------- */
.kp-theme-toggle,
.kp-zoom-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: var(--tap, 2.75rem);
  min-height: var(--tap, 2.75rem);
  padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
  border: none;
  border-radius: var(--radius, .5rem);
  background: transparent;
  color: var(--c-text-on-dark);
  cursor: pointer;
  transition: color var(--dur, .24s) var(--ease, ease),
              border-color var(--dur, .24s) var(--ease, ease),
              background-color var(--dur, .24s) var(--ease, ease);
}

.kp-theme-toggle:hover,
.kp-zoom-btn:hover{
  color: var(--c-red);
  border-color: var(--c-red);
}

.kp-theme-toggle:focus-visible,
.kp-zoom-btn:focus-visible{
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

.kp-theme-toggle-wrap{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.kp-zoom-group{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.kp-zoom-btn{
  min-width: var(--tap, 2.75rem);
  min-height: var(--tap, 2.75rem);
  padding: var(--space-3xs, .25rem) var(--space-2xs, .5rem);
  font-size: var(--fs-sm, .875rem);
}

/* Toggle-Controls neben den WhatsApp/Standort-Icons in einer Zeile,
   nicht darueber gestapelt (Elternblock #brxe-aqjjvq ist Bricks-Default column) */
header#brx-header #brxe-aqjjvq{
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .75rem;
}

.kp-zoom-btn[aria-pressed="true"]{
  color: var(--c-red);
  border-color: var(--c-red);
}