/* ================================================================
   accessibility.css  –  Samurai Securities branded
   Save to: /css/accessibility.css
   Load in header.php AFTER style.css:
     <link rel="stylesheet" href="<?php echo mxGetUrl(SITEURL.'/css/accessibility.css'); ?>">
   ================================================================ */

/* ── BRAND TOKENS ──────────────────────────────────────────────── */
:root {
  --sam-gold:         #FECC00;
  --sam-gold-dark:    #e6b800;
  --sam-gold-light:   #fff8cc;
  --sam-navy:         #0a1628;
  --sam-navy-mid:     #0d1f3c;
  --sam-navy-light:   #162847;
  --sam-white:        #ffffff;
  --sam-offwhite:     #f7f8fa;
  --sam-border:       #e4e8f0;
  --sam-text:         #1a1f2e;
  --sam-text-muted:   #5a6478;
  --sam-card-hover:   #fffbe6;
  --sam-card-active:  #fff4b3;
  --sam-shadow:       0 12px 40px rgba(10,22,40,.22);
  --sam-radius:       12px;
  --sam-radius-sm:    8px;
  --sam-transition:   .16s cubic-bezier(.4,0,.2,1);
  --sam-z:            99999;
}



/* ── SKIP LINK ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--sam-navy);
  color: var(--sam-gold);
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  z-index: calc(var(--sam-z) + 1);
  transition: top .18s;
  text-decoration: none;
  border: 2px solid var(--sam-gold);
}
.skip-link:focus { top: 0; }

/* ── FLOATING TOGGLE BUTTON ────────────────────────────────────── */
/* ── FLOATING TOGGLE BUTTON ────────────────────────────────────── */
.acc-toggle-btn {
  position: fixed;
  top: 40px;
  right: 24px;
  z-index: var(--sam-z);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sam-navy);
  color: var(--sam-gold);
  border: 2.5px solid var(--sam-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 20px rgba(10,22,40,.40);
  transition: background var(--sam-transition), transform var(--sam-transition), border-color var(--sam-transition);
  outline: none;
}
.acc-toggle-btn:hover {
  background: var(--sam-gold);
  color: var(--sam-navy);
  transform: scale(1.07);
}
.acc-toggle-btn[aria-expanded="true"] {
  background: var(--sam-gold);
  color: var(--sam-navy);
}
.acc-toggle-btn:focus-visible {
  outline: 3px solid var(--sam-gold);
  outline-offset: 3px;
}

/* ── PANEL ─────────────────────────────────────────────────────── */
/* ── PANEL ─────────────────────────────────────────────────────── */
#accPanel {
  position: fixed;
  bottom: 22px;
  right: 24px;
  z-index: var(--sam-z);
  width: 370px;
  max-height: 84vh;
  background: var(--sam-white);
  border-radius: var(--sam-radius);
  box-shadow: var(--sam-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sam-border);
  transition: opacity var(--sam-transition), transform var(--sam-transition);
  transform-origin: bottom right;
}
#accPanel.acc-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.93) translateY(14px);
}

/* ── PANEL HEADER ──────────────────────────────────────────────── */
.acc-header {
  background: var(--sam-navy);
  padding: 0;
  flex-shrink: 0;
  position: relative;
  text-align: center !important;
}
.acc-header-top {
  background: var(--sam-gold);
  height: 4px;
  width: 100%;
}
.acc-header-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 14px;
}
.acc-header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acc-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--sam-white);
  letter-spacing: .01em;
  line-height: 10px !important;
}
.acc-header .acc-shortcut {
  font-size: 10px;
  color: var(--sam-gold);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.acc-close-btn {
  background: rgba(254,204,0,.12);
  border: 1px solid rgba(254,204,0,.3);
  color: var(--sam-gold);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sam-transition);
  line-height: 1;
  float: right;
  margin: 5px;
}
.acc-close-btn:hover {
  background: var(--sam-gold);
  color: var(--sam-navy);
}
.acc-close-btn:focus-visible {
  outline: 2px solid var(--sam-gold);
  outline-offset: 2px;
}

/* ── SCROLLABLE BODY ───────────────────────────────────────────── */
.acc-body {
  overflow-y: auto;
  flex: 1;
  padding: 14px;
  background: var(--sam-offwhite);
}
.acc-body::-webkit-scrollbar { width: 4px; }
.acc-body::-webkit-scrollbar-thumb {
  background: var(--sam-gold-dark);
  border-radius: 4px;
}

/* ── SECTION LABELS ────────────────────────────────────────────── */
.acc-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sam-text-muted);
  margin: 14px 0 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.acc-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sam-border);
}
.acc-section-label:first-child { margin-top: 0; }

/* ── PROFILE GRID ──────────────────────────────────────────────── */
.acc-profiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 4px;
}
.acc-profile-btn {
  background: var(--sam-white);
  border: 1.5px solid var(--sam-border);
  border-radius: var(--sam-radius-sm);
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--sam-text);
  transition: background var(--sam-transition), border-color var(--sam-transition), box-shadow var(--sam-transition);
  text-align: left;
  line-height: 1.2;
}
.acc-profile-btn .acc-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.acc-profile-btn:hover {
  background: var(--sam-gold-light);
  border-color: var(--sam-gold-dark);
}
.acc-profile-btn.active {
  background: var(--sam-gold-light);
  border-color: var(--sam-gold);
  box-shadow: 0 0 0 2px rgba(254,204,0,.3);
  color: var(--sam-navy);
}
.acc-profile-btn:focus-visible {
  outline: 2px solid var(--sam-gold);
  outline-offset: 2px;
}

/* ── FEATURE GRID ──────────────────────────────────────────────── */
.acc-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 7px;
}
.acc-feature-btn {
  background: var(--sam-white);
  border: 1.5px solid var(--sam-border);
  border-radius: var(--sam-radius-sm);
  padding: 12px 5px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sam-text);
  text-align: center;
  line-height: 1.25;
  transition: background var(--sam-transition), border-color var(--sam-transition);
  position: relative;
}
.acc-feature-btn .acc-icon { font-size: 20px; }
.acc-feature-btn:hover {
  background: var(--sam-gold-light);
  border-color: var(--sam-gold-dark);
}
.acc-feature-btn.active {
  background: var(--sam-gold-light);
  border-color: var(--sam-gold);
  color: var(--sam-navy);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(254,204,0,.3);
}
.acc-feature-btn:focus-visible {
  outline: 2px solid var(--sam-gold);
  outline-offset: 2px;
}
.acc-info-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sam-navy);
  color: var(--sam-gold);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── TOGGLE ROW ────────────────────────────────────────────────── */
.acc-toggle-row {
  background: var(--sam-white);
  border: 1.5px solid var(--sam-border);
  border-radius: var(--sam-radius-sm);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.acc-toggle-row-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sam-text);
}
.acc-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.acc-switch input { opacity: 0; width: 0; height: 0; }
.acc-switch-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  cursor: pointer;
  transition: background var(--sam-transition);
}
.acc-switch-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--sam-transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.acc-switch input:checked + .acc-switch-slider { background: var(--sam-navy); }
.acc-switch input:checked + .acc-switch-slider::before { transform: translateX(20px); }
.acc-switch input:focus-visible + .acc-switch-slider {
  outline: 2px solid var(--sam-gold);
  outline-offset: 2px;
}

/* ── SLIDER ROWS ───────────────────────────────────────────────── */
.acc-slider-row {
  background: var(--sam-white);
  border: 1.5px solid var(--sam-border);
  border-radius: var(--sam-radius-sm);
  padding: 11px 13px;
  margin-bottom: 7px;
}
.acc-slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--sam-text);
  margin-bottom: 8px;
}
.acc-slider-label span:last-child {
  color: var(--sam-navy);
  background: var(--sam-gold);
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 10px;
}
.acc-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
}
.acc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sam-navy);
  cursor: pointer;
  border: 3px solid var(--sam-gold);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.acc-slider:focus-visible {
  outline: 2px solid var(--sam-gold);
  outline-offset: 3px;
}

/* ── FOOTER / RESET ────────────────────────────────────────────── */
.acc-footer {
  padding: 12px 14px;
  background: var(--sam-white);
  border-top: 1px solid var(--sam-border);
  flex-shrink: 0;
}
.acc-reset-btn {
  width: 100%;
  padding: 12px;
  background: var(--sam-navy);
  color: var(--sam-gold);
  border: 2px solid var(--sam-navy);
  border-radius: var(--sam-radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .03em;
  transition: background var(--sam-transition), color var(--sam-transition), transform var(--sam-transition);
}
.acc-reset-btn:hover {
  background: var(--sam-gold);
  color: var(--sam-navy);
  border-color: var(--sam-gold);
  transform: translateY(-1px);
}
.acc-reset-btn:focus-visible {
  outline: 2px solid var(--sam-gold);
  outline-offset: 2px;
}

/* ── BODY THEME CLASSES ────────────────────────────────────────── */
body.acc-theme-dark  { filter: invert(1) hue-rotate(180deg); }
body.acc-theme-dark img,
body.acc-theme-dark video { filter: invert(1) hue-rotate(180deg); }
body.acc-contrast-plus { filter: contrast(1.5); }
body.acc-desaturate    { /* controlled by inline JS filter on body */ }
body.acc-highlight-links a {
  background: #fef08a !important;
  color: #000 !important;
  text-decoration: underline !important;
  outline: 1px solid #ca8a04;
}
body.acc-hide-images img { visibility: hidden; }
body.acc-dyslexia * { font-family: 'OpenDyslexic', 'Comic Sans MS', Arial, sans-serif !important; }
body.acc-text-spacing * { letter-spacing: .12em !important; word-spacing: .16em !important; }
body.acc-pause-animations *,
body.acc-pause-animations *::before,
body.acc-pause-animations *::after {
  animation-play-state: paused !important;
  transition: none !important;
}