/* =========================================================================
   a11y.css — accessibility enhancement layer (additive, non-destructive).
   Loaded AFTER each page's own styles. It only adds:
     1. a strong, theme-agnostic keyboard focus indicator,
     2. a "skip to content" link (visually hidden until focused),
     3. minimum tap-target sizing on injected icon-only controls.
   It intentionally changes NO layout, color, or spacing of existing content.
   RTL-safe: uses logical properties (inset-inline-*) throughout.
   Zero dependencies, offline. Safe to load even if a11y.js never runs.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Skip link — visually hidden until it receives keyboard focus.
   Injected by a11y.js as the first focusable element in <body>.
   Uses the Lar/he bilingual spans so it follows the language toggle.
   ------------------------------------------------------------------------- */
.skip-link{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;               /* start edge -> respects RTL */
  z-index:100001;                     /* above sticky header + presenter bar */
  margin:10px;
  padding:10px 18px;
  font-family:"Cairo","Heebo",sans-serif;
  font-weight:800;
  font-size:.95rem;
  line-height:1.2;
  color:#04231D;
  background:linear-gradient(135deg,#9BE15D,#22D3B0);
  border:2px solid #04231D;
  border-radius:10px;
  text-decoration:none;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.6);
  transform:translateY(-160%);        /* parked off-screen, still focusable */
  transition:transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  transform:none;                     /* slides into view on focus */
  outline:3px solid #14122C;
  outline-offset:2px;
}

/* -------------------------------------------------------------------------
   2. Focus indicator — strong and visible on BOTH dark and (future) light
   backgrounds. An amber ring carries contrast on dark surfaces; the layered
   dark+light box-shadow halo guarantees the ring is also visible if the page
   ever renders on a light background. !important is used ONLY on the outline
   so the indicator can never be suppressed by an existing rule — this is a
   deliberate, contained accessibility exception, not a visual override.
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.popt:focus-visible,
.pcheck:focus-visible{
  outline:3px solid #F6B73C !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 5px rgba(4,6,24,.55), 0 0 0 8px rgba(255,255,255,.40);
  border-radius:5px;
}

/* When the browser understands :focus-visible, don't paint the ring for
   mouse/touch activation — keeps the design untouched for pointer users. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.popt:focus:not(:focus-visible),
.pcheck:focus:not(:focus-visible){
  outline:none;
}

/* Fallback for older engines without :focus-visible support — keyboard users
   still get a visible ring (mouse users also see it, which is acceptable). */
@supports not selector(:focus-visible){
  a:focus, button:focus, input:focus, textarea:focus, select:focus,
  summary:focus, [tabindex]:focus, [role="button"]:focus,
  .popt:focus, .pcheck:focus{
    outline:3px solid #F6B73C !important;
    outline-offset:2px !important;
  }
}

/* -------------------------------------------------------------------------
   3. Minimum tap targets (cheap, layout-safe wins).
   Applied only to injected icon-only controls that live inside fixed-height
   chrome (the presenter bar/foot), so enlarging them cannot reflow content.
   Existing nav pills and body controls are intentionally left untouched to
   honor "do not change layout/visual design otherwise".
   ------------------------------------------------------------------------- */
.pr-btn{
  min-width:40px;
  min-height:40px;
  justify-content:center;
}

/* Respect users who prefer reduced motion for the skip-link slide-in. */
@media (prefers-reduced-motion: reduce){
  .skip-link{ transition:none; }
}