/* ============================================================
   RRC Accessibility Bar — accessibility-bar.css
   Add this BEFORE your existing accessibility-panel.css.
   Fully scoped with .acc-bar prefix. Zero interference.
   ============================================================ */

/* ── Skip link (visually hidden, appears on focus) ──────── */
.acc-bar-skip {
  position: absolute;
  top: -100%;
  left: 6px;
  z-index: 11001;
  background: #C8102E;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.15s ease;
  white-space: nowrap;
}

.acc-bar-skip:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* ── Bar Shell ──────────────────────────────────────────── */
.acc-bar {
/*  position: sticky;*/
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 36px;
  background: #1a1d23;
  color: #c8d8e8;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0 20px;
  gap: 12px;
  z-index: 1050; /* below Bootstrap modal (1055) but above most content */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  flex-shrink: 0;
  /* Smooth theme transitions */
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Bar: per-theme background + text + element tones ───── */

/* Default (no theme or white) */
.acc-bar,
[data-acc-theme="white"] .acc-bar {
  background: #fff;
  color: #c8d8e8;
  border-bottom: 1px solid rgb(244 244 244);
}
[data-acc-theme="white"] .acc-bar .acc-bar-divider { background: rgb(0 0 0 / 15%); }
[data-acc-theme="white"] .acc-bar .acc-font-btn    {     border-color: rgb(0 0 0 / 20%); background: rgb(0 0 0 / 6%); color: #000000; }
[data-acc-theme="white"] .acc-bar .acc-skip-visible{ color: #9baec8; }
[data-acc-theme="white"] .acc-bar .acc-theme-label { color: rgb(0 0 0 / 55%); }
[data-acc-theme="white"] .acc-bar .acc-bar-reset   { color: rgb(0 0 0 / 55%); border-color: rgb(0 0 0 / 15%); }
[data-acc-theme="white"] .acc-bar .acc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #1a1d23, 0 0 0 3px #C8102E; }

/* Black / High contrast */
[data-acc-theme="black"] .acc-bar {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255,255,255,.12);border-bottom: 1px solid rgb(244 244 244 / 50%);
}
[data-acc-theme="black"] .acc-bar .acc-bar-divider { background: rgb(255 255 255 / 52%); }
[data-acc-theme="black"] .acc-bar .acc-font-btn    { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #ffffff; }
[data-acc-theme="black"] .acc-bar .acc-skip-visible{ color: #cccccc; }
[data-acc-theme="black"] .acc-bar .acc-theme-label { color: rgba(200,200,200,.6); }
[data-acc-theme="black"] .acc-bar .acc-bar-reset   { color: rgba(200,200,200,.8); border-color: rgba(255,255,255,.2); }
[data-acc-theme="black"] .acc-bar .acc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #000, 0 0 0 3px #ff4444; }
[data-acc-theme="black"] .acc-bar .acc-swatch:hover,
[data-acc-theme="black"] .acc-bar .acc-swatch:focus-visible { border-color: #ffffff; }
[data-acc-theme="black"] .bg-light-rrc { background: #111111;}
[data-acc-theme="black"] h1, 
/*[data-acc-theme="black"] h2, */
[data-acc-theme="black"] h3, 
[data-acc-theme="black"] h4, 
[data-acc-theme="black"] h5, 
[data-acc-theme="black"] h6,
[data-acc-theme="black"] .rrc-card p, [data-acc-theme="black"] .check-list li, [data-acc-theme="black"] .section-title,
[data-acc-theme="black"] .section-subtitle 
{ color: var(--rrc-off-white); }
[data-acc-theme="black"] .rrc-card { background: #171819; }
[data-acc-theme="black"] .rrc-table tbody tr:hover { background: #90273a; }

/* Yellow */
[data-acc-theme="yellow"] .acc-bar {
  background: #f5c400;
  color: #1a1208;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
[data-acc-theme="yellow"] .acc-bar .acc-bar-divider { background: rgba(0,0,0,.18); }
[data-acc-theme="yellow"] .acc-bar .acc-font-btn    { border-color: rgba(0,0,0,.22); background: rgba(0,0,0,.07); color: #1a1208; }
[data-acc-theme="yellow"] .acc-bar .acc-font-btn:hover,
[data-acc-theme="yellow"] .acc-bar .acc-font-btn:focus-visible { background: rgba(0,0,0,.14); border-color: rgba(0,0,0,.4); color: #000; }
[data-acc-theme="yellow"] .acc-bar .acc-skip-visible{ color: #3d2e00; }
[data-acc-theme="yellow"] .acc-bar .acc-theme-label { color: rgba(30,20,0,.55); }
[data-acc-theme="yellow"] .acc-bar .acc-bar-reset   { color: rgba(30,20,0,.65); border-color: rgba(0,0,0,.2); }
[data-acc-theme="yellow"] .acc-bar .acc-bar-reset:hover { background: rgba(0,0,0,.1); color: #000; border-color: rgba(0,0,0,.35); }
[data-acc-theme="yellow"] .acc-bar .acc-swatch      { border-color: rgba(0,0,0,.25); }
[data-acc-theme="yellow"] .acc-bar .acc-swatch:hover,
[data-acc-theme="yellow"] .acc-bar .acc-swatch:focus-visible { border-color: #000; }
[data-acc-theme="yellow"] .acc-bar .acc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #f5c400, 0 0 0 3px #5a3e00; }
[data-acc-theme="yellow"] .acc-bar .acc-skip-visible:hover,
[data-acc-theme="yellow"] .acc-bar .acc-skip-visible:focus-visible { background: rgba(0,0,0,.1); border-color: rgba(0,0,0,.3); color: #000; }
[data-acc-theme="yellow"] .bg-light-rrc { background: #fffde7;}
[data-acc-theme="yellow"] .rrc-table caption { background: #f4ea92; }
[data-acc-theme="yellow"] .page-hero { background: linear-gradient(135deg, #140606 0%, #451a1a 100%); }
[data-acc-theme="yellow"] .hero-section { background: linear-gradient(135deg, #140606 0%, #451a1a 50%, #2A0A12 100%); }


/* Light grey */
[data-acc-theme="lgrey"] .acc-bar {
  background: #d0d4da;
  color: #1a1d23;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
[data-acc-theme="lgrey"] .acc-bar .acc-bar-divider { background: rgba(0,0,0,.18); }
[data-acc-theme="lgrey"] .acc-bar .acc-font-btn    { border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.06); color: #1a1d23; }
[data-acc-theme="lgrey"] .acc-bar .acc-font-btn:hover,
[data-acc-theme="lgrey"] .acc-bar .acc-font-btn:focus-visible { background: rgba(200,16,46,.15); border-color: rgba(200,16,46,.5); color: #8b0000; }
[data-acc-theme="lgrey"] .acc-bar .acc-skip-visible{ color: #3a3f4a; }
[data-acc-theme="lgrey"] .acc-bar .acc-theme-label { color: rgba(26,29,35,.5); }
[data-acc-theme="lgrey"] .acc-bar .acc-bar-reset   { color: rgba(26,29,35,.6); border-color: rgba(0,0,0,.18); }
[data-acc-theme="lgrey"] .acc-bar .acc-bar-reset:hover { background: rgba(200,16,46,.1); color: #8b0000; border-color: rgba(200,16,46,.4); }
[data-acc-theme="lgrey"] .acc-bar .acc-swatch      { border-color: rgba(0,0,0,.22); }
[data-acc-theme="lgrey"] .acc-bar .acc-swatch:hover,
[data-acc-theme="lgrey"] .acc-bar .acc-swatch:focus-visible { border-color: #1a1d23; }
[data-acc-theme="lgrey"] .acc-bar .acc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #d0d4da, 0 0 0 3px #C8102E; }
[data-acc-theme="lgrey"] .acc-bar .acc-skip-visible:hover,
[data-acc-theme="lgrey"] .acc-bar .acc-skip-visible:focus-visible { background: rgba(200,16,46,.12); border-color: rgba(200,16,46,.4); color: #8b0000; }
[data-acc-theme="lgrey"] .bg-light-rrc { background: #eceef1;}
[data-acc-theme="lgrey"] .rrc-table caption { background: #dbdde1; }
[data-acc-theme="lgrey"] .page-hero { background: linear-gradient(135deg, #140606 0%, #451a1a 100%); }
[data-acc-theme="lgrey"] .hero-section { background: linear-gradient(135deg, #140606 0%, #451a1a 50%, #2A0A12 100%); }


/* Orange */
[data-acc-theme="orange"] .acc-bar {
  background: #e86500;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
[data-acc-theme="orange"] .acc-bar .acc-bar-divider { background: rgba(255,255,255,.25); }
[data-acc-theme="orange"] .acc-bar .acc-font-btn    { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #ffffff; }
[data-acc-theme="orange"] .acc-bar .acc-font-btn:hover,
[data-acc-theme="orange"] .acc-bar .acc-font-btn:focus-visible { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.4); color: #fff; }
[data-acc-theme="orange"] .acc-bar .acc-skip-visible{ color: #ffe0c0; }
[data-acc-theme="orange"] .acc-bar .acc-theme-label { color: rgba(255,230,200,.6); }
[data-acc-theme="orange"] .acc-bar .acc-bar-reset   { color: rgba(255,230,200,.8); border-color: rgba(255,255,255,.25); }
[data-acc-theme="orange"] .acc-bar .acc-bar-reset:hover { background: rgba(0,0,0,.15); color: #fff; border-color: rgba(255,255,255,.5); }
[data-acc-theme="orange"] .acc-bar .acc-swatch      { border-color: rgba(255,255,255,.3); }
[data-acc-theme="orange"] .acc-bar .acc-swatch:hover,
[data-acc-theme="orange"] .acc-bar .acc-swatch:focus-visible { border-color: #fff; }
[data-acc-theme="orange"] .acc-bar .acc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #e86500, 0 0 0 3px #fff; }
[data-acc-theme="orange"] .acc-bar .acc-skip-visible:hover,
[data-acc-theme="orange"] .acc-bar .acc-skip-visible:focus-visible { background: rgba(0,0,0,.15); border-color: rgba(255,255,255,.5); color: #fff; }
[data-acc-theme="orange"] .bg-light-rrc { background: #fff3e0;}
[data-acc-theme="orange"] .rrc-table caption { background: #ffe0b2; }
[data-acc-theme="orange"] .page-hero { background: linear-gradient(135deg, #140606 0%, #451a1a 100%); }
[data-acc-theme="orange"] .hero-section { background: linear-gradient(135deg, #140606 0%, #451a1a 50%, #2A0A12 100%); }


/* Transition all themed child elements smoothly */
.acc-bar .acc-bar-divider,
.acc-bar .acc-font-btn,
.acc-bar .acc-skip-visible,
.acc-bar .acc-theme-label,
.acc-bar .acc-bar-reset,
.acc-bar .acc-swatch {
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.12s ease;
}

/* Ensure the header below isn't hidden behind the sticky bar */
/* Add padding-top to body equal to the bar height if your header is also sticky */
/* body { padding-top: 36px; }   ← uncomment if header is also position:sticky/fixed */

/* ── Left cluster ───────────────────────────────────────── */
.acc-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Divider ────────────────────────────────────────────── */
.acc-bar-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

/* ── Font size buttons ──────────────────────────────────── */
.acc-font-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.acc-font-btn {
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #c8d8e8;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 7px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.acc-font-inc { font-size: 14px; }
.acc-font-reset { font-size: 11px; }
.acc-font-dec { font-size: 9px; }

.acc-font-btn:hover,
.acc-font-btn:focus-visible {
  background: rgba(200,16,46,.25);
  border-color: rgba(200,16,46,.6);
  color: #fff;
}

.acc-font-btn:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}

.acc-font-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Skip visible link ──────────────────────────────────── */
.acc-skip-visible {
  color: #9baec8;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}

.acc-skip-visible:hover,
.acc-skip-visible:focus-visible {
  background: rgba(200,16,46,.2);
  border-color: rgba(200,16,46,.5);
  color: #fff;
  text-decoration: none;
  outline: none;
}

.acc-skip-visible:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}

/* ── Right cluster ──────────────────────────────────────── */
.acc-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Theme label ────────────────────────────────────────── */
.acc-theme-label {
  font-size: 10px;
  color: rgba(180,195,215,.55);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  flex-shrink: 0;
}

/* ── Swatch group ───────────────────────────────────────── */
.acc-theme-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
}

.acc-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.25);
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  padding: 0;
  position: relative;
}

.acc-swatch:hover,
.acc-swatch:focus-visible {
  transform: scale(1);
  border-color: #fff;
}

.acc-swatch:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}

/* Active ring */
.acc-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #1a1d23, 0 0 0 4px #C8102E;
  border-color: transparent;
}

/* Swatch colors */
.acc-swatch-black  { background: #111111; }
.acc-swatch-white  { background: #ffffff; }
.acc-swatch-yellow { background: #ffd600; }
.acc-swatch-lgrey  { background: #d4d8de; }
.acc-swatch-orange { background: #ff7300; }

/* ── Reset button ───────────────────────────────────────── */
.acc-bar-reset {
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
/*  color: rgba(160,175,200,.7);*/
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  cursor: pointer;
  padding: 3px 8px;
  height: 22px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  line-height: 1;
  background-color: #ffffff;
  color: #222222;
}

.acc-bar-reset:hover,
.acc-bar-reset:focus-visible {
  /*background: rgba(200,16,46,.2);
  border-color: rgba(200,16,46,.5);
  color: #fff;*/
  background: #C8102E;   /* solid red */
  border-color: #C8102E;
  color: #ffffff;
}

.acc-bar-reset:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}

/* ── Mobile: collapse theme label at narrow widths ──────── */
@media (max-width: 480px) {
  .acc-bar {
    padding: 0 10px;
    gap: 6px;
  }
  .acc-theme-label {
    display: none;
  }
  .acc-skip-visible {
    display: none; /* hidden on mobile; skip link still works via .acc-bar-skip */
  }
  .acc-bar-reset {
    display: none;
  }
}

@media (max-width: 360px) {
  .acc-swatch {
    width: 15px;
    height: 15px;
  }
  .acc-font-btn {
    padding: 0 5px;
  }
}

/* ============================================================
   THEME OVERRIDES — applied to <html> via data-acc-theme attr
   ============================================================ */

/* Black / High contrast */
[data-acc-theme="black"] body,
[data-acc-theme="black"] {
  background-color: #111111 !important;
  color: #ffffff !important;
}

[data-acc-theme="black"] .site-header,
[data-acc-theme="black"] .navbar {
  background-color: #000000 !important;
  border-bottom: 1px solid #333 !important;
}

[data-acc-theme="black"] .nav-link {
  color: #dddddd !important;
}

[data-acc-theme="black"] .nav-link:hover,
[data-acc-theme="black"] .nav-link.active {
  color: #ff6b6b !important;
}

/* White / Default */
[data-acc-theme="white"] body {
  background-color: #ffffff !important;
  color: #1a1d23 !important;
}

/* Yellow */
[data-acc-theme="yellow"] body {
  background-color: #fffde7 !important;
  color: #1a1208 !important;
}

[data-acc-theme="yellow"] .site-header,
[data-acc-theme="yellow"] .navbar {
  background-color: #fff9c4 !important;
}

/* Light grey */
[data-acc-theme="lgrey"] body {
  background-color: #eceef1 !important;
  color: #1a1d23 !important;
}

[data-acc-theme="lgrey"] .site-header,
[data-acc-theme="lgrey"] .navbar {
  background-color: #f4f5f7 !important;
}

/* Orange */
[data-acc-theme="orange"] body {
  background-color: #fff3e0 !important;
  color: #1a0e00 !important;
}

[data-acc-theme="orange"] .site-header,
[data-acc-theme="orange"] .navbar {
  background-color: #ffe0b2 !important;
}

[data-acc-theme="orange"] .nav-link.active {
  color: #e65100 !important;
}

/* Ensure filter effects (invert, saturate) from the acc-panel never bleed into the bar */
.acc-bar { filter: none !important; }


/*LS*/
.acc-letter-group {
  display: inline-flex;
  gap: 6px;
/*  margin-left: 10px;*/
}

.acc-letter-btn {
  border: 1px solid #ccc;
  background: #fff;
  font-size: 11px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 7px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.acc-letter-btn[aria-disabled="true"] {
/*  opacity: 0.5;*/
  pointer-events: none;
}