/* ==========================================================================
   WPL7 theme layer: dark tokens + theme toggle
   Loaded by main.php right after Breakdance's CSS (global settings, selectors,
   per-post CSS). The LIGHT token set lives in Breakdance → Global Settings →
   Code → CSS "WPL7 base"; this file only redefines the same tokens for
   html[data-theme="dark"], plus the few Breakdance element styles that are
   hard-coded and can't be reached through tokens. README.md has the table.
   ========================================================================== */

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* While the theme changes live, switch everything in one frame (no staggered fades). */
html.wpl7-theme-switching *,
html.wpl7-theme-switching *::before,
html.wpl7-theme-switching *::after { transition: none !important; }

/* --------------------------------------------------------------------------
   1. DARK TOKENS
   Breakdance's semantic vars (--bde-headings-color, --bde-body-text-color,
   --bde-links-color, --bde-background-color, --bde-brand-primary-color, button
   vars) and the --wpl7-* tokens all point at these palette vars, so remapping
   the palette on <html> flips the whole site.
   "ink" (text) and "dark" (dark-section background) are separate tokens:
   ink becomes light text, dark stays a dark surface.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --bde-palette-wpl7-ink: #f3f3f6;         /* headings, strongest text */
  --bde-palette-wpl7-body: #bfc0c9;        /* body text */
  --bde-palette-wpl7-muted: #92939e;       /* muted text */
  --bde-palette-wpl7-white: #131418;       /* page / header / menu background */
  --bde-palette-wpl7-surface: #17181c;     /* muted sections, footer */
  --bde-palette-wpl7-border: #34353e;
  --bde-palette-wpl7-border2: #484a55;     /* strong border */
  --bde-palette-wpl7-dark: #0c0d10;        /* .wpl7-section-dark background */
  --bde-palette-wpl7-darktext: #bfc0c9;    /* text in dark sections */
  --bde-palette-wpl7-accent: #9bb7ff;
  --bde-palette-wpl7-accenthov: #bed0ff;
  --bde-palette-wpl7-accentdark: #9bb7ff;  /* accent inside dark sections */
  --bde-palette-wpl7-accenttint: #25314b;  /* soft accent background */
  --bde-palette-wpl7-raised: #17181c;      /* cards, frames, inputs, FAQ items */
  --bde-palette-wpl7-onaccent: #17181c;    /* text on accent fills (primary buttons) */

  /* --wpl7-* tokens that are not a straight palette alias */
  --wpl7-on-dark-strong: #f3f3f6;
  --wpl7-raised-2: #202126;
  --wpl7-subtle: #26272e;
  --wpl7-card-bg: #17181c;
  --wpl7-card-bg-hover: #202126;
  --wpl7-frame-bg: #17181c;
  --wpl7-frame-bar-bg: #202126;
  --wpl7-frame-dot: #484a55;
  --wpl7-accent-glow: rgba(155, 183, 255, .28);
  --wpl7-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --wpl7-shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --wpl7-shadow-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 24px -8px rgba(0, 0, 0, .4), 0 40px 80px -24px rgba(0, 0, 0, .6);
  --wpl7-frame-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 64px -20px rgba(0, 0, 0, .5);
  --wpl7-phone-bezel: #0c0d10;
  --wpl7-phone-ring: #484a55;
  --wpl7-phone-button: #34353e;
  --wpl7-phone-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .5);
  --wpl7-menu-shadow: 0 16px 32px rgba(0, 0, 0, .5);

  /* Breakdance form + misc vars (defined with fixed greys in global-settings.css) */
  --bde-form-input-background-color: #17181c;
  --bde-form-input-focused-background-color: #17181c;
  --bde-form-input-border-color: #484a55;
  --bde-form-input-placeholder-color: #92939e;
  --bde-form-text-color: #bfc0c9;
  --bde-form-label-required-color: #fca5a5;
  --chevron-svg-icon-color: #f3f3f6;
  --checkbox-svg-icon-color: #f3f3f6;
  --radiobutton-svg-icon-color: #f3f3f6;
}

/* Contextual tokens */
html[data-theme="dark"] .wpl7-section-muted {        /* page #131418 → muted #17181c → cards #202126 */
  --wpl7-card-bg: #202126;
  --wpl7-card-bg-hover: #26272e;
}
html[data-theme="dark"] .wpl7-section-dark {         /* "white" inside a dark section means text, not background */
  --bde-palette-wpl7-white: #f3f3f6;
}

/* --------------------------------------------------------------------------
   2. BREAKDANCE ELEMENTS WITH HARD-CODED VALUES
   -------------------------------------------------------------------------- */

/* Dark sections: distinct, deliberate surface on the dark page (beats per-page #0B0D12 backgrounds).
   #0c0d10 vs the #131418 / #17181c neighbours is only ~1.1:1, so draw a real 1px edge top and bottom. */
html[data-theme="dark"] .breakdance .wpl7-section-dark {
  background-color: var(--wpl7-dark);
  border-block: 1px solid var(--wpl7-border); /* #34353e */
}

/* Buttons. Primary text/hover come from the "onaccent" palette token; secondary goes transparent. */
html[data-theme="dark"] .breakdance .button-atom--secondary {
  --bde-button-secondary-background-color: transparent;
  --bde-button-secondary-background-color-hover: var(--wpl7-raised-2);
}

/* Tabs / Advanced Tabs */
html[data-theme="dark"] .breakdance :is(.bde-tabs, .bde-advanced-tabs) { --separatorColor: var(--wpl7-border); }
/* Fallbacks for tabs left on Breakdance's default pill/bar colours (#e0e7ff / #fff).
   :where() keeps them at the specificity of Breakdance's own tabs.css, so ANY page-level
   tab colour setting wins. Pills set a readable pair: #f3f3f6 on #25314b (11.7:1). */
:where(html[data-theme="dark"]) .bde-tabs__tabslist--pills {
  --activeBgColor: var(--wpl7-accent-tint);
  --activeColor: var(--wpl7-ink);
}
:where(html[data-theme="dark"]) .bde-tabs__tabslist--bar {
  --activeBgColor: var(--wpl7-raised-2);
  --hoverBgColor: var(--wpl7-subtle);
  --inactiveBgColor: var(--wpl7-raised);
}
html[data-theme="dark"] .breakdance .bde-tabs__select {
  background-color: var(--wpl7-raised);
  color: var(--wpl7-ink);
  border-color: var(--wpl7-border-strong);
}

/* FAQ / accordions */
html[data-theme="dark"] .breakdance :is(.bde-faq__item, .bde-faq__item.is-active, .bde-accordion__item) {
  background-color: var(--wpl7-card-bg);
  border-color: var(--wpl7-border);
}

/* Inputs, selects, textareas outside Breakdance forms */
html[data-theme="dark"] :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  background-color: var(--wpl7-raised);
  color: var(--wpl7-ink);
  border-color: var(--wpl7-border-strong);
}

/* Code. :where() keeps specificity at zero so any page-level code styling still wins. */
:where(html[data-theme="dark"]) :where(code, kbd, samp) { background-color: var(--wpl7-subtle); color: var(--wpl7-ink); }
:where(html[data-theme="dark"]) :where(pre) { background-color: var(--wpl7-raised); color: var(--wpl7-ink); border-color: var(--wpl7-border); }
:where(html[data-theme="dark"]) :where(pre) :where(code) { background-color: transparent; }

/* Header: mobile menu panel gets a dark shadow (the header CSS reads --wpl7-menu-shadow). */

/* --------------------------------------------------------------------------
   3. PAGE COMPAT (temporary)
   Hard-coded colours on pages that break in dark mode. Delete each rule once
   the page uses the palette tokens instead (see README "Per-page checklist").
   Currently empty: Features (29) chips and Pricing (31) tabs were converted to tokens.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. THEME TOGGLE (markup: Code Block in header 76, see README)
   One <button> that lives in the Menu Builder: an icon button on desktop,
   a labelled row inside the mobile menu panel (≤1023px).
   -------------------------------------------------------------------------- */
.wpl7-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* Menu Builder markup: li.wpl7-theme-item > div.bde-custom-area-link.breakdance-menu-link > div.bde-code-block > button */
.breakdance .wpl7-theme-item { display: flex; align-items: center; }
.breakdance .bde-menu .breakdance-menu .wpl7-theme-item .bde-custom-area-link { display: flex; align-items: center; padding: 0; cursor: default; }
.breakdance .wpl7-theme-item .bde-code-block { display: flex; align-items: center; }
.wpl7-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wpl7-border);
  border-radius: 10px;
  background: transparent;
  color: var(--wpl7-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wpl7-theme-toggle:hover { background-color: var(--wpl7-surface); border-color: var(--wpl7-border-strong); }
.wpl7-theme-toggle:focus-visible { outline: 3px solid var(--wpl7-focus-color); outline-offset: 3px; }
.wpl7-theme-toggle__icon { display: none; flex: none; width: 20px; height: 20px; }
html[data-theme-mode="light"] .wpl7-theme-toggle__icon--light,
html[data-theme-mode="dark"] .wpl7-theme-toggle__icon--dark,
html[data-theme-mode="auto"] .wpl7-theme-toggle__icon--auto { display: block; }
.wpl7-theme-toggle__text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 1024px) {
  .breakdance .wpl7-theme-item { margin-left: 12px; }
}
@media (max-width: 1023px) {
  /* Mobile panel row: keeps the menu's own border-top and 24px side padding. */
  .breakdance .bde-menu .breakdance-menu .wpl7-theme-item .bde-custom-area-link { padding: 10px 24px; }
  .wpl7-theme-toggle { width: auto; height: 44px; padding: 0 16px 0 12px; }
  .wpl7-theme-toggle__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wpl7-theme-toggle { transition: none; }
}

/* --------------------------------------------------------------------------
   5. LIGHTHOUSE BEAM BORDER: class "wpl7-beam"
   Put the class on a Breakdance Button / Menu Button element (Advanced → Classes).
   Breakdance prints it on the wrapper (div.bde-button / li.bde-button); the ring is
   drawn on the inner <a class="button-atom">. Also works with the class on the anchor.
   The ring is 2px wide just outside the fill (pseudo-element, so size and position are
   unchanged); fill and text are untouched; the focus outline moves out to clear it.
   Layers: no mask support → solid 2px outside ring (box-shadow); mask → gradient ring
   with a static highlight; + registered @property → the highlight sweeps round
   (2.5s sweep, 3s rest; one 1s sweep on hover/focus). Reduced motion → static ring.
   -------------------------------------------------------------------------- */
@property --wpl7-beam {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:is(.wpl7-beam .button-atom, .button-atom.wpl7-beam) {
  --wpl7-beam-base: #315fc5;
  --wpl7-beam-sheen: #c3d0ee; /* fallback ≈ color-mix(in oklab, #315fc5 26%, white) */
  --wpl7-beam-glow: rgba(49, 95, 197, .35);
}
html[data-theme="dark"] :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam) {
  --wpl7-beam-base: #9bb7ff;
  --wpl7-beam-sheen: #f0f4ff; /* fallback ≈ color-mix(in oklab, #9bb7ff 12%, white) */
  --wpl7-beam-glow: rgba(155, 183, 255, .30);
}
@supports (color: color-mix(in oklab, red, blue)) {
  :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam) { --wpl7-beam-sheen: color-mix(in oklab, #315fc5 26%, white); }
  html[data-theme="dark"] :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam) { --wpl7-beam-sheen: color-mix(in oklab, #9bb7ff 12%, white); }
}

/* The ring sits just OUTSIDE the fill, so it reads against the page / sky behind the button
   (on the fill itself base ≈ fill: 1.0–1.14:1). The fill reaches the button's border box
   (its 1px border is transparent), so the ring spans 0–2px outside the border box.
   It never changes the layout box: it is an absolutely positioned pseudo-element (or a box-shadow).
   --wpl7-beam-radius = the button's corner radius (Breakdance global buttons: 10px). */
.breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam) {
  --wpl7-beam-radius: 10px;
  --wpl7-beam-width: 2px;
  position: relative;
  isolation: isolate;
  overflow: visible; /* Breakdance sets overflow:hidden on buttons, which would clip the ring */
  /* Fallback for every browser: a solid 2px outside ring in the base colour. */
  box-shadow: 0 0 0 var(--wpl7-beam-width) var(--wpl7-beam-base);
}
.breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam):is(:hover, :focus-visible) {
  box-shadow: 0 0 0 var(--wpl7-beam-width) var(--wpl7-beam-base), 0 8px 20px -8px var(--wpl7-accent-glow), 0 0 18px 0 var(--wpl7-beam-glow);
}
/* Global focus ring is 3px with a 3px offset; push it out so it clears the 2px ring with a 3px gap. */
.breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam):focus-visible { outline-offset: 5px; }

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) and (background: conic-gradient(red, blue)) {
  .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam) { box-shadow: none; }
  .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam):is(:hover, :focus-visible) {
    box-shadow: 0 8px 20px -8px var(--wpl7-accent-glow), 0 0 18px 0 var(--wpl7-beam-glow);
  }
  .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam)::before {
    content: "";
    position: absolute;
    /* padding box → border box (-1px) → ring width outward */
    inset: calc(-1px - var(--wpl7-beam-width));
    padding: var(--wpl7-beam-width);  /* ring thickness; the masked-out hole = the fill */
    border-radius: calc(var(--wpl7-beam-radius) + var(--wpl7-beam-width));
    background:
      conic-gradient(from var(--wpl7-beam), transparent 0 70%, var(--wpl7-beam-sheen) 82%, transparent 95%),
      var(--wpl7-beam-base);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    z-index: 1;
    animation: wpl7-beam-cycle 5.5s infinite;
  }
  .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam):is(:hover, :focus-visible)::before {
    animation: wpl7-beam-sweep 1s ease-in-out 1 both;
  }
}

/* One sweep in ~2.5s (45% of 5.5s), then rest. 360deg = 0deg, so the loop is seamless.
   Without @property the angle is not interpolable and the highlight simply stays put. */
@keyframes wpl7-beam-cycle {
  0%   { --wpl7-beam: 0deg; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  45%  { --wpl7-beam: 360deg; }
  100% { --wpl7-beam: 360deg; }
}
@keyframes wpl7-beam-sweep {
  from { --wpl7-beam: 0deg; }
  to   { --wpl7-beam: 360deg; }
}

/* ≤767px: wide (full-width) buttons. A conic sweep crawls along the long edges and races
   round the ends, so use a linear highlight that travels left → right along the same mask
   ring, on the same 5.5s rhythm (≈2.5s travel, then rest). Desktop keeps the conic sweep. */
@media (max-width: 767px) {
  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) and (background: conic-gradient(red, blue)) {
    .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam)::before {
      background:
        linear-gradient(100deg, transparent 40%, var(--wpl7-beam-sheen) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat,
        var(--wpl7-beam-base);
      animation: wpl7-beam-slide-cycle 5.5s infinite;
    }
    .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam):is(:hover, :focus-visible)::before {
      animation: wpl7-beam-slide 1s ease-in-out 1 both;
    }
  }
}
/* Layer is 300% wide: position 100% puts the highlight at -50% (off left), 0% at 150% (off right). */
@keyframes wpl7-beam-slide-cycle {
  0%   { background-position: 100% 0, 0 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  45%  { background-position: 0% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}
@keyframes wpl7-beam-slide {
  from { background-position: 100% 0, 0 0; }
  to   { background-position: 0% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam)::before,
  .breakdance :is(.wpl7-beam .button-atom, .button-atom.wpl7-beam):is(:hover, :focus-visible)::before {
    animation: none !important;
    --wpl7-beam: 200deg;            /* desktop: static highlight on the lower-left edge */
    background-position: 62% 0, 0 0; /* ≤767px linear layer: static highlight at ~¼ from the left */
  }
}