/* ================================================================
   BYR — Site Button System (Unified v1.3)
   One text token + one surface strategy (glassy cobalt tint)
   - Works in light/dark without mode branches
   - Chrome border + starlight sweep retained

   v1.3 CHANGES (2026-04):
   - Removed all Elementor selectors (a.elementor-button.byr-*)
   - Replaced with doubled-class specificity equivalents in :is()
     blocks (a.byr-primary.byr-primary, etc.) to maintain the
     (0,2,1) specificity that the light-mode overrides depend on.
   - Removed Elementor neutralize block (was lines 122-129).
   - Cleaned up §9 variant selectors (no :is() = no boost needed).
   v1.2 CHANGES:
   - §9a SPECIFICITY FIX: Rewrote light-mode override selectors
     using :is() to borrow the same specificity boost the base
     :is() selector gets (0,2,1 from doubled-class selector).
   v1.1 CHANGES:
   - REMOVED .byr-footer and .byr-footer-outline variants
   - ADDED .mode-light .byr-outline override (Option A: subtle fill)
   ================================================================ */

/* ============ §3 — Unified Tokens ============ */

:root{
  /* Shape + typography */
  --byr-btn-radius: 14px;
  --byr-btn-weight: 650;
  --byr-btn-letter: 0.01em;

  /* Tap target + sizing */
  --byr-btn-minh: 44px;
  --byr-btn-pad: 0.85rem 1.35rem;
  --byr-btn-pad-sm: 0.62rem 1.05rem;
  --byr-btn-pad-lg: 1.00rem 1.70rem;

  /* Motion */
  --byr-btn-dur-fast: 180ms;
  --byr-btn-dur: 240ms;
  --byr-btn-ease: cubic-bezier(.16, 1, .3, 1);

  /* ONE text token (near-white, always) */
  --byr-btn-text: rgba(245,245,248,0.98);
  --byr-btn-text-muted: rgba(245,245,248,0.88);

  /* ONE surface strategy (glassy cobalt tint) */
  /* #0066CC20 = rgba(0,102,204,0.125) */
  --byr-btn-glass: rgba(0,102,204,0.125);
  --byr-btn-glass-hover: rgba(0,102,204,0.18);
  --byr-btn-glass-press: rgba(0,102,204,0.22);
  --byr-btn-glass-border: rgba(0,102,204,0.22);

  /* Shadows (works on any background) */
  --byr-btn-shadow: 0 10px 22px rgba(0,0,0,.28);
  --byr-btn-shadow-hover: 0 18px 40px rgba(0,0,0,.34);
  --byr-btn-shadow-press: 0 8px 18px rgba(0,0,0,.26);

  /* Palette */
  --byr-primary-a: #22D3EE; /* cyan */
  --byr-primary-b: #3B82F6; /* blue */

  --byr-secondary-a: #FB7185; /* rose */
  --byr-secondary-b: #F97316; /* orange */

  /* Chrome ring stops (keep bright = "chrome" on both modes) */
  --byr-chrome-a: rgba(255,255,255,0.92);
  --byr-chrome-b: rgba(255,255,255,0.20);
  --byr-chrome-c: rgba(34,211,238,0.60);
  --byr-chrome-d: rgba(16,185,129,0.52);

  /* Glows */
  --byr-glow-primary: rgba(34,211,238,.34);
  --byr-glow-secondary: rgba(251,113,133,.26);
  --byr-glow-glass: rgba(0,102,204,.18);
}

/* ============ §4 — Base (all .byr-* buttons) ============ */

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
){
  -webkit-appearance: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  min-height: var(--byr-btn-minh);
  padding: var(--byr-btn-pad);
  font-size: 1rem;

  border-radius: var(--byr-btn-radius);

  font-weight: var(--byr-btn-weight);
  letter-spacing: var(--byr-btn-letter);
  line-height: 1;

  color: var(--byr-btn-text) !important;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;

  border: 1px solid transparent;
  cursor: pointer;

  position: relative;
  isolation: isolate;
  overflow: hidden; /* sweep containment */
  transform: translateZ(0);

  transition:
    transform var(--byr-btn-dur-fast) var(--byr-btn-ease),
    box-shadow var(--byr-btn-dur) var(--byr-btn-ease),
    background var(--byr-btn-dur) var(--byr-btn-ease),
    filter var(--byr-btn-dur) var(--byr-btn-ease);
}

/* ============ §5 — Starlight Sweep (::before) ============ */

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
)::before{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;

  opacity: 0;
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 22%,
      rgba(255,255,255,0.78) 46%,
      rgba(255,255,255,0.92) 50%,
      rgba(255,255,255,0.78) 54%,
      rgba(255,255,255,0) 78%,
      rgba(255,255,255,0) 100%);
  width: 250%;
  height: 100%;
  left: -75%;
  transform: skewX(-15deg);
  transition: none;
}

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
):hover::before{
  opacity: 0.72;
  left: 100%;
  transition:
    opacity 140ms ease-out,
    left 760ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ §6 — Chrome Border (::after) ============ */

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
)::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1.5px;

  background:
    conic-gradient(from 210deg,
      var(--byr-chrome-a),
      var(--byr-chrome-b),
      var(--byr-chrome-c),
      var(--byr-chrome-b),
      var(--byr-chrome-d),
      var(--byr-chrome-b),
      var(--byr-chrome-a));

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0.88;
  pointer-events:none;
  z-index: 1;
  transition: opacity var(--byr-btn-dur) var(--byr-btn-ease), filter var(--byr-btn-dur) var(--byr-btn-ease);
}

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
):hover::after{
  opacity: 1;
  filter: brightness(1.16) saturate(1.12);
}

/* Keep button content above pseudo-elements */
:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
) > *{
  position: relative;
  z-index: 3;
}

/* ============ §7 — Interaction States ============ */

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
):focus-visible{
  outline: 2px solid var(--color-focus-ring, #10B981);
  outline-offset: 3px;
}

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
):hover{
  transform: translateY(-3px);
}

:is(
  .byr-primary,
  .byr-secondary,
  .byr-outline,
  a.byr-primary.byr-primary,
  a.byr-secondary.byr-secondary,
  a.byr-outline.byr-outline
):active{
  transform: translateY(0);
}

/* ============ §8 — Reduced Motion ============ */

@media (prefers-reduced-motion: reduce){
  :is(
    .byr-primary,
    .byr-secondary,
    .byr-outline,
    a.byr-primary.byr-primary,
    a.byr-secondary.byr-secondary,
    a.byr-outline.byr-outline
  ){
    transition: none !important;
  }
  :is(
    .byr-primary,
    .byr-secondary,
    .byr-outline,
    a.byr-primary.byr-primary,
    a.byr-secondary.byr-secondary,
    a.byr-outline.byr-outline
  ):hover,
  :is(
    .byr-primary,
    .byr-secondary,
    .byr-outline,
    a.byr-primary.byr-primary,
    a.byr-secondary.byr-secondary,
    a.byr-outline.byr-outline
  ):active{
    transform: none !important;
  }
  :is(
    .byr-primary,
    .byr-secondary,
    .byr-outline,
    a.byr-primary.byr-primary,
    a.byr-secondary.byr-secondary,
    a.byr-outline.byr-outline
  )::before{
    opacity: 0 !important;
  }
}

/* ============ §9 — Variants (still unified text) ============ */

/* PRIMARY — energetic gradient, always near-white text */
.byr-primary{
  background: linear-gradient(135deg, var(--byr-primary-a), var(--byr-primary-b)) !important;
  box-shadow: var(--byr-btn-shadow);
}

.byr-primary:hover,
.byr-primary:focus{
  box-shadow:
    var(--byr-btn-shadow-hover),
    0 0 30px var(--byr-glow-primary);
  filter: saturate(1.06) contrast(1.02);
}

/* SECONDARY — the ONE surface strategy (glassy cobalt tint) */
.byr-secondary{
  background: var(--byr-btn-glass) !important;
  border-color: transparent;
  box-shadow:
    var(--byr-btn-shadow),
    0 0 0 1px var(--byr-btn-glass-border) inset;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.byr-secondary:hover,
.byr-secondary:focus{
  background: var(--byr-btn-glass-hover) !important;
  box-shadow:
    var(--byr-btn-shadow-hover),
    0 0 28px var(--byr-glow-glass);
}

/* OUTLINE — same surface strategy, lighter fill + stronger inner edge */
.byr-outline{
  background: color-mix(in oklab, var(--byr-btn-glass) 70%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 6px 16px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.byr-outline:hover,
.byr-outline:focus{
  background: color-mix(in oklab, var(--byr-btn-glass-hover) 78%, transparent) !important;
  box-shadow:
    var(--byr-btn-shadow-hover),
    0 0 36px rgba(34,211,238,0.28);
}


/* ============ §9a — .byr-outline Light-Mode Fix ============
   In dark mode the near-white text on glass reads fine.
   In light mode the white text + subtle glass vanishes against
   --color-bg-elevated: #FFFFFF.

   Fix: shift text to dark teal (#0e7490 = Tailwind cyan-700),
   pump the glass fill opacity, and swap the inner ring to a
   visible border. Chrome ::after already adapts via the
   foundation .mode-light token swap.

   WHY :is() IS REQUIRED HERE:
   The §4 base selector uses :is(.byr-outline, ...,
   a.byr-outline.byr-outline). :is() takes the HIGHEST
   specificity argument in its list, so the base rule effectively
   has specificity 0,2,1 (from a.byr-outline.byr-outline).

   A plain ".mode-light .byr-outline" only scores 0,2,0 and
   LOSES even with !important on both sides.

   By wrapping our override in :is() the same way, even when
   matching a plain <a class="byr-outline">, the selector
   borrows the 0,2,1 specificity of the highest :is() argument,
   giving us .mode-light (0,1,0) + :is(…) (0,2,1) = 0,3,1.
   That cleanly beats the base 0,2,1.
   ============================================================ */

.mode-light :is(
  .byr-outline,
  a.byr-outline.byr-outline
){
  color: #0e7490 !important;
  background: rgba(14, 116, 144, 0.08) !important;
  box-shadow:
    0 0 0 1px rgba(14, 116, 144, 0.18) inset,
    0 6px 16px rgba(0,0,0,.08);
}

.mode-light :is(
  .byr-outline,
  a.byr-outline.byr-outline
):hover,
.mode-light :is(
  .byr-outline,
  a.byr-outline.byr-outline
):focus{
  color: #0e7490 !important;
  background: rgba(14, 116, 144, 0.13) !important;
  box-shadow:
    0 0 0 1px rgba(14, 116, 144, 0.28) inset,
    0 12px 28px rgba(0,0,0,.10),
    0 0 24px rgba(14, 116, 144, 0.08);
}

/* Starlight sweep needs a darker tint in light mode so it
   doesn't blow out the dark text — reduce opacity */
.mode-light :is(
  .byr-outline,
  a.byr-outline.byr-outline
):hover::before{
  opacity: 0.35;
}


/* ============ §10 — Sizes & Icons ============ */

.byr-btn-sm{ padding: var(--byr-btn-pad-sm) !important; font-size: 0.95rem !important; }
.byr-btn-lg{ padding: var(--byr-btn-pad-lg) !important; font-size: 1.05rem !important; }
.byr-btn-block{ display:flex !important; width:100% !important; }

:is(.byr-primary,.byr-secondary,.byr-outline) svg,
:is(.byr-primary,.byr-secondary,.byr-outline) img{
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}