/* ============================================================
   03 — MODE TOGGLE
   ============================================================
   Purpose:  Standalone fixed-position light/dark mode toggle
             button (#byr-mode-toggle).

   Depends:  01-core-tokens-base.css (z-index tokens, focus ring)
   Enqueue:  functions.php → byr-mode-toggle (dep: byr-tokens)

   Migration note:
     Replaces WPCode snippet:
       · BYR — Mode Toggle & Content Hiding (Priority 7, ~3KB)
     Cleaned:
       · Removed redundant .mode-dark selectors (dark mode is
         the default — no class needed).
       · Consolidated hover states.
       · focus-visible inherits the global gold ring from
         01-core-tokens-base.css §20 instead of duplicating
         a different value here.
       · Content-hiding system removed (2026-04): spotlight
         decommissioned from homepage overlay.

   TABLE OF CONTENTS:
     1.  Fixed Toggle Button — Base
     2.  Fixed Toggle Button — Dark Mode (default)
     3.  Fixed Toggle Button — Light Mode
     4.  Focus (inherits global ring, minor position tweak)

   NOTE: Header v9 (04-header-nav.css) overrides the
   position to inline when #byr-mode-toggle sits inside
   the header bar. The fixed position here is the fallback
   for pages or states where it lives outside the header.
   ============================================================ */


/* ==========================================================
   1. FIXED TOGGLE BUTTON — BASE
   Layout, typography, and interactive behavior.
   Colors are set per-mode in §3 and §4.
========================================================== */
#byr-mode-toggle {
  position:        fixed !important;
  bottom:          20px !important;
  right:           20px !important;
  z-index:         var(--z-toggle) !important;

  display:         flex !important;
  align-items:     center !important;
  gap:             8px !important;

  padding:         12px 20px !important;
  font-size:       16px !important;
  font-family:     system-ui, -apple-system, sans-serif !important;
  font-weight:     600 !important;
  border-radius:   var(--radius-pill) !important;
  cursor:          pointer !important;

  transition:
    background    var(--anim-medium),
    border-color  var(--anim-medium),
    transform     var(--anim-medium),
    box-shadow    var(--anim-medium) !important;
}


/* ==========================================================
   2. DARK MODE TOGGLE APPEARANCE (default)
   No class needed — dark is the baseline.
========================================================== */
#byr-mode-toggle {
  background:           rgba(255, 255, 255, 0.10) !important;
  backdrop-filter:      blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border:               1px solid rgba(255, 255, 255, 0.25) !important;
  color:                #ffffff !important;
  box-shadow:           0 4px 20px rgba(0, 0, 0, 0.30) !important;
}

#byr-mode-toggle:hover {
  background:    rgba(255, 255, 255, 0.20) !important;
  border-color:  rgba(255, 255, 255, 0.40) !important;
  transform:     scale(1.05) !important;
}


/* ==========================================================
   3. LIGHT MODE TOGGLE APPEARANCE
========================================================== */
.mode-light #byr-mode-toggle {
  background:           rgba(0, 0, 0, 0.08) !important;
  backdrop-filter:      blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border:               1px solid rgba(0, 0, 0, 0.15) !important;
  color:                #1a1a2e !important;
  box-shadow:           0 4px 20px rgba(0, 0, 0, 0.10) !important;
}

.mode-light #byr-mode-toggle:hover {
  background:   rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  transform:    scale(1.05) !important;
}


/* ==========================================================
   4. FOCUS
   The global 3-layer focus ring from 01-core-tokens-base.css
   handles the gold glow automatically via *:focus-visible.
   This rule only adds the outline-offset tweak specific to
   the pill shape.
========================================================== */
#byr-mode-toggle:focus-visible {
  outline-offset: 4px !important;
}