/*
 * LinenCraft Atelier — Accessibility Stylesheet
 *
 * WCAG 2.2 AA compliant styles. All colour choices verified at
 * 4.5:1 contrast ratio for body text, 3:1 for large text / UI components.
 *
 * @package LinenCraftAtelier
 * @author  Amara Okonkwo <amara@anadevs.com>
 * @since   1.0.0
 */

/* ── Screen reader utility ────────────────────────────────────────────────── */
.screen-reader-text {
  clip:     rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height:   1px;
  width:    1px;
  overflow: hidden;
  white-space: nowrap;
}

.screen-reader-text:focus {
  background:     var(--color-accent, #2C4A3E);
  color:          #fff;
  clip:           auto !important;
  display:        block;
  font-size:      14px;
  font-weight:    600;
  height:         auto;
  left:           8px;
  padding:        10px 20px;
  top:            8px;
  width:          auto;
  z-index:        9999;
  border-radius:  4px;
  text-decoration: none;
}

/* ── Skip links ───────────────────────────────────────────────────────────── */
.lca-skip-links {
  position: absolute;
  top:  0;
  left: 0;
  z-index: 10000;
}

/* ── Focus rings (base — enhanced version via inline <style> when option on) ─*/
:focus-visible {
  outline:        2px solid var(--color-accent, #2C4A3E);
  outline-offset: 2px;
}

/* Remove focus ring for mouse users. */
:focus:not(:focus-visible) { outline: none; }

/* ── High contrast mode ───────────────────────────────────────────────────── */
[data-contrast="high"] {
  --color-bg-primary:    #000000;
  --color-bg-secondary:  #111111;
  --color-bg-card:       #0A0A0A;
  --color-text-headline: #FFFFFF;
  --color-text-body:     #FFFFFF;
  --color-text-muted:    #CCCCCC;
  --color-accent:        #FFFF00;
  --color-link:          #FFFF00;
  --color-link-hover:    #FFFF44;
  --color-border:        #FFFFFF;
  filter: none;
}

[data-contrast="high"] img {
  filter: grayscale(100%) contrast(120%);
}

[data-contrast="high"] a {
  color: #FFFF00 !important;
  text-decoration: underline !important;
}

/* ── Forced colours (Windows High Contrast Mode) ─────────────────────────── */
@media (forced-colors: active) {
  .lca-btn, button {
    border: 2px solid ButtonText;
  }
  .lca-nav a {
    forced-color-adjust: auto;
  }
}

/* ── Accessibility Toolbar ────────────────────────────────────────────────── */
.lca-a11y-toolbar {
  position:   fixed;
  right:      0;
  top:        50%;
  transform:  translateY(-50%);
  z-index:    9990;
  display:    flex;
  flex-direction: column;
  align-items: flex-end;
}

.lca-a11y-toolbar__trigger {
  background:    var(--color-accent, #2C4A3E);
  color:         #FFFFFF;
  border:        none;
  border-radius: 8px 0 0 8px;
  padding:       12px 10px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    -2px 2px 12px rgba(0,0,0,.2);
  transition:    background var(--transition-speed, .25s);
}

.lca-a11y-toolbar__trigger:hover,
.lca-a11y-toolbar__trigger:focus-visible {
  background: var(--color-accent-hover, #1E3329);
}

.lca-a11y-toolbar__panel {
  background:    #FFFFFF;
  border:        1px solid var(--color-border, #D8D0C5);
  border-radius: 8px 0 0 8px;
  box-shadow:    -4px 4px 24px rgba(0,0,0,.15);
  padding:       20px;
  width:         240px;
  max-height:    80vh;
  overflow-y:    auto;
  margin-top:    8px;
}

.lca-a11y-toolbar__title {
  font-size:   14px;
  font-weight: 700;
  color:       #1A1A1A;
  margin:      0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border, #D8D0C5);
}

.lca-a11y-toolbar__group {
  margin-bottom: 16px;
}

.lca-a11y-toolbar__group-label {
  font-size:   12px;
  font-weight: 600;
  color:       #6B7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 8px;
}

/* Font size buttons */
.lca-a11y-toolbar__font-btns {
  display: flex;
  gap:     6px;
}

.lca-a11y-toolbar__font-btn {
  flex:          1;
  border:        1px solid #D1D5DB;
  border-radius: 6px;
  background:    #F9FAFB;
  cursor:        pointer;
  padding:       6px 4px;
  font-weight:   700;
  color:         #374151;
  transition:    border-color .15s, background .15s;
  line-height:   1;
}

.lca-a11y-toolbar__font-btn:hover { border-color: var(--color-accent, #2C4A3E); }
.lca-a11y-toolbar__font-btn.is-active {
  border-color: var(--color-accent, #2C4A3E);
  background:   var(--color-accent, #2C4A3E);
  color:        #FFFFFF;
}

/* Toggle rows */
.lca-a11y-toolbar__toggle-row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size:   13px;
  color:       #374151;
}

/* Switch */
.lca-a11y-toolbar__switch {
  position:      relative;
  width:         40px;
  height:        22px;
  background:    #D1D5DB;
  border:        none;
  border-radius: 20px;
  cursor:        pointer;
  transition:    background .25s;
  flex-shrink:   0;
}

.lca-a11y-toolbar__switch.is-on {
  background: var(--color-accent, #2C4A3E);
}

.lca-a11y-toolbar__switch-thumb {
  position:      absolute;
  width:         16px;
  height:        16px;
  background:    #FFFFFF;
  border-radius: 50%;
  top:           3px;
  left:          3px;
  transition:    transform .25s;
  box-shadow:    0 1px 3px rgba(0,0,0,.2);
}

.lca-a11y-toolbar__switch.is-on .lca-a11y-toolbar__switch-thumb {
  transform: translateX(18px);
}

/* Reset button */
.lca-a11y-toolbar__reset {
  width:         100%;
  border:        1px solid #D1D5DB;
  border-radius: 6px;
  background:    transparent;
  color:         #6B7280;
  font-size:     12px;
  padding:       8px;
  cursor:        pointer;
  transition:    border-color .15s, color .15s;
}

.lca-a11y-toolbar__reset:hover { border-color: #c0392b; color: #c0392b; }

/* Keyboard nav toggle button in nav menus */
.lca-nav__toggle {
  background:  transparent;
  border:      none;
  cursor:      pointer;
  padding:     4px;
  color:       inherit;
  display:     inline-flex;
  align-items: center;
  transition:  transform .2s;
}

.lca-nav__toggle[aria-expanded="true"] { transform: rotate(180deg); }

/* ── ARIA live region ─────────────────────────────────────────────────────── */
#lca-sr-announcer {
  position:   absolute;
  width:      1px;
  height:     1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ── Color contrast utilities ─────────────────────────────────────────────── */
/* Large text: 3:1 minimum. Used for headings over colored backgrounds. */
.lca-text-on-accent {
  color: #FFFFFF; /* white on #2C4A3E = 7.8:1 — passes AAA */
}

.lca-text-on-caramel {
  color: #1A1A1A; /* dark on #B07A3E = 4.8:1 — passes AA */
}

/* ── Responsive: hide toolbar on very small screens ──────────────────────── */
@media (max-width: 480px) {
  .lca-a11y-toolbar__panel { width: calc(100vw - 20px); border-radius: 8px 0 0 0; }
}