/* Accessibility menu «قائمة الوصول» — both public layouts (frontend/partials/a11y*.blade.php, a11y.js).
   The menu's own rules are scoped to #a11y so the older layout's global button/heading styles can't reach it.
   The effects are a11y-* classes on <html> (set by albdrA11y.apply, partials/a11y-head) and never touch the menu. */

/* ==========================================================================
   The menu
   ========================================================================== */
#a11y{--a-s:1;--a-green:#0C7F4B;--a-deep:#045749;--a-gold:#E9DA7A;--a-cream:#E7E7DA;--a-ink:#231F20;--a-muted:#2F674B;--a-bg:#F3F4EE;
  font-family:"Graphik Arabic El",Tahoma,"Segoe UI",Arial,sans-serif;font-size:calc(14px*var(--a-s));line-height:1.5;color:var(--a-ink);text-align:start}
#a11y.is-xl{--a-s:1.22}
#a11y *,#a11y *::before,#a11y *::after{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;text-transform:none}
#a11y [hidden]{display:none !important}
#a11y button,#a11y a{font:inherit;color:inherit;margin:0;text-decoration:none;background:none;border:0;padding:0;box-shadow:none;min-width:0;min-height:0;height:auto;width:auto;border-radius:0;outline-offset:2px}
#a11y svg{display:block;flex:none;overflow:visible}
#a11y h2,#a11y h3,#a11y p{font-family:inherit;font-style:normal;text-shadow:none}
#a11y :focus-visible{outline:3px solid var(--a-deep);outline-offset:2px}

/* the round button, in the corner opposite Badr */
#a11y .a11y-fab{position:fixed;z-index:2147483020;bottom:26px;inset-inline-start:20px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--a-deep);color:#fff;box-shadow:0 0 0 2px var(--a-gold),0 12px 26px -10px rgba(19,60,30,.75);cursor:pointer}
#a11y .a11y-fab:hover{background:var(--a-green)}
#a11y .a11y-fab:focus-visible{outline:3px solid var(--a-gold);outline-offset:4px}
#a11y.a11y-raise .a11y-fab{bottom:84px} /* the older pages' back-to-top button sits in the same corner */

/* the panel */
#a11y .a11y-scrim{position:fixed;inset:0;z-index:2147483030;background:transparent}
#a11y .a11y-panel{position:fixed;z-index:2147483040;bottom:94px;inset-inline-start:20px;width:min(calc(440px*var(--a-s)),calc(100vw - 40px));max-height:min(calc(100vh - 116px),calc(820px*var(--a-s)));display:flex;flex-direction:column;border-radius:22px;background:#fff;box-shadow:0 30px 70px -18px rgba(19,60,30,.6),0 0 0 1px rgba(4,87,73,.12);overflow:hidden}
#a11y.a11y-raise .a11y-panel{bottom:152px;max-height:min(calc(100vh - 172px),calc(820px*var(--a-s)))}
#a11y .a11y-head{display:flex;align-items:center;gap:10px;padding:calc(14px*var(--a-s)) calc(16px*var(--a-s));background:linear-gradient(135deg,var(--a-deep),var(--a-green));color:#fff}
#a11y .a11y-head h2{margin:0;padding:0;font-size:calc(17px*var(--a-s));font-weight:700;line-height:1.35;color:#fff;border:0;background:none}
#a11y .a11y-head h2 span{font-weight:400;font-size:.85em;opacity:.9}
#a11y .a11y-x{margin-inline-start:auto;flex:none;width:calc(38px*var(--a-s));height:calc(38px*var(--a-s));border-radius:50%;border:1px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
#a11y .a11y-x:hover{background:rgba(255,255,255,.14)}
#a11y .a11y-head :focus-visible{outline-color:var(--a-gold)}
#a11y .a11y-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:calc(6px*var(--a-s)) calc(14px*var(--a-s)) calc(14px*var(--a-s));background:var(--a-bg)}
#a11y .a11y-row{display:flex;align-items:center;gap:10px;padding:calc(11px*var(--a-s)) 4px;border-bottom:1px solid #DCE2D9}
#a11y .a11y-row-col{flex-direction:column;align-items:stretch}
#a11y .a11y-row-label{font-weight:700;color:var(--a-ink)}
#a11y .a11y-seg{margin-inline-start:auto;display:flex;border:1px solid var(--a-green);border-radius:999px;overflow:hidden}
#a11y .a11y-seg > *{padding:calc(4px*var(--a-s)) calc(13px*var(--a-s));font-size:.9em;color:var(--a-deep)}
#a11y .a11y-seg .is-on{background:var(--a-green);color:#fff}
#a11y .a11y-seg a:hover{background:#E6F1EA}
#a11y .a11y-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#a11y .a11y-preset{border:1px solid var(--a-green);background:#fff;color:var(--a-deep);border-radius:999px;padding:calc(5px*var(--a-s)) calc(12px*var(--a-s));font-size:.9em;cursor:pointer}
#a11y .a11y-preset:hover{background:#E6F1EA}
#a11y .a11y-preset[aria-pressed="true"]{background:var(--a-deep);border-color:var(--a-deep);color:#fff}
#a11y .a11y-switch{margin-inline-start:auto;flex:none;position:relative;width:calc(54px*var(--a-s));height:calc(30px*var(--a-s));border-radius:999px;background:#C5CCC2;cursor:pointer}
#a11y .a11y-switch span{position:absolute;top:calc(3px*var(--a-s));inset-inline-start:calc(3px*var(--a-s));width:calc(24px*var(--a-s));height:calc(24px*var(--a-s));border-radius:50%;background:#fff;color:var(--a-deep);font-size:calc(9px*var(--a-s));font-weight:700;display:flex;align-items:center;justify-content:center;transition:inset-inline-start .2s}
#a11y .a11y-switch[aria-checked="true"]{background:var(--a-green)}
#a11y .a11y-switch[aria-checked="true"] span{inset-inline-start:calc(27px*var(--a-s))}
#a11y .a11y-grp{margin:calc(14px*var(--a-s)) 4px calc(7px*var(--a-s));padding:0;font-size:.9em;font-weight:700;color:var(--a-muted);border:0;background:none;line-height:1.4}
#a11y .a11y-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8px*var(--a-s))}
#a11y.is-xl .a11y-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
#a11y .a11y-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5px*var(--a-s));min-height:calc(96px*var(--a-s));padding:calc(12px*var(--a-s)) 6px calc(16px*var(--a-s));border-radius:14px;border:2px solid transparent;background:#fff;color:var(--a-ink);font-size:.9em;font-weight:600;line-height:1.3;text-align:center;cursor:pointer;box-shadow:0 1px 3px rgba(19,60,30,.08)}
#a11y .a11y-tile svg{width:calc(26px*var(--a-s));height:calc(26px*var(--a-s))}
#a11y .a11y-tile:hover{border-color:#B9D5C3}
#a11y .a11y-tile[aria-pressed="true"]{border-color:var(--a-green);background:#E8F3EC;color:var(--a-deep)}
#a11y .a11y-tile[disabled]{opacity:.45;cursor:not-allowed}
#a11y .a11y-lv{min-height:1.2em;font-size:.82em;font-weight:400;color:var(--a-muted)}
#a11y .a11y-dots{position:absolute;bottom:calc(7px*var(--a-s));display:flex;gap:3px}
#a11y .a11y-dots i{width:calc(14px*var(--a-s));height:3px;border-radius:2px;background:#D3D9D0}
#a11y .a11y-dots i.on{background:var(--a-green)}
#a11y .a11y-foot{display:flex;justify-content:flex-end;padding:calc(10px*var(--a-s)) calc(14px*var(--a-s));background:#fff;border-top:1px solid #E3E6DE}
#a11y .a11y-reset{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--a-deep);border-radius:999px;padding:calc(6px*var(--a-s)) calc(15px*var(--a-s));color:var(--a-deep);font-weight:600;cursor:pointer}
#a11y .a11y-reset:hover{background:var(--a-deep);color:#fff}
#a11y .a11y-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* read-aloud bar, above the button */
#a11y .a11y-tts{position:fixed;z-index:2147483025;bottom:94px;inset-inline-start:20px;max-width:calc(100vw - 40px);display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--a-deep);color:#fff;box-shadow:0 0 0 2px var(--a-gold),0 14px 30px -12px rgba(19,60,30,.7)}
#a11y[dir="rtl"] .a11y-tts{padding:6px 6px 6px 14px}
#a11y.a11y-raise .a11y-tts{bottom:152px}
#a11y .a11y-tts-btn{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
#a11y .a11y-tts-btn:hover{background:rgba(255,255,255,.26)}
#a11y .a11y-tts-btn:focus-visible{outline-color:var(--a-gold)}
#a11y .a11y-tts .i-pause,#a11y .a11y-tts.is-speaking .i-play{display:none}
#a11y .a11y-tts.is-speaking .i-pause{display:block}
#a11y .a11y-tts-msg{font-size:12.5px;line-height:1.4;max-width:300px}
html.a11y-tts .a11y-reading{outline:3px solid #E9DA7A !important;outline-offset:3px !important;background-color:rgba(233,218,122,.28) !important}

/* reading guide */
#a11y .a11y-guide i{display:none;position:fixed;left:0;right:0;z-index:2147483010;pointer-events:none}
html.a11y-guide-1 #a11y .a11y-guide .g-line{display:block;top:0;height:14px;background:rgba(35,31,32,.82);border-top:3px solid #E9DA7A;border-bottom:3px solid #E9DA7A;transform:translateY(calc(var(--y,50vh) - 7px))}
html.a11y-guide-2 #a11y .a11y-guide .g-top{display:block;top:0;height:max(0px,calc(var(--y,50vh) - 60px));background:rgba(0,0,0,.6)}
html.a11y-guide-2 #a11y .a11y-guide .g-bot{display:block;top:calc(var(--y,50vh) + 60px);bottom:0;background:rgba(0,0,0,.6)}

@media (prefers-reduced-motion:no-preference){
  #a11y .a11y-fab{transition:background .2s,transform .2s}
  #a11y .a11y-fab:hover{transform:translateY(-2px)}
  #a11y .a11y-panel:not([hidden]){animation:a11yIn .22s ease-out}
}
@keyframes a11yIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (hover:none){
  #a11y .a11y-tile[data-k="cursor"],#a11y .a11y-tile[data-k="guide"]{display:none}
  #a11y .a11y-guide{display:none}
}
@media (max-width:640px){
  #a11y .a11y-fab{width:48px;height:48px;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-start:12px}
  #a11y .a11y-fab svg{width:26px;height:26px}
  #a11y.a11y-raise .a11y-fab{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  #a11y .a11y-scrim{background:rgba(19,30,22,.45)}
  #a11y .a11y-panel,#a11y.a11y-raise .a11y-panel{left:0;right:0;bottom:0;width:100%;max-height:88vh;max-height:88dvh;border-radius:22px 22px 0 0}
  #a11y .a11y-tiles,#a11y.is-xl .a11y-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  #a11y .a11y-tts,#a11y.a11y-raise .a11y-tts{bottom:calc(80px + env(safe-area-inset-bottom,0px));inset-inline-start:12px;max-width:calc(100vw - 24px)}
  body:has(#badr.badr-open) #a11y .a11y-fab{visibility:hidden} /* never on top of Badr's sheet */
}
@media (forced-colors:active){
  #a11y .a11y-tile[aria-pressed="true"],#a11y .a11y-preset[aria-pressed="true"]{border:3px solid Highlight}
}
@media print{
  #a11y{display:none !important}
  html.a11y-f::after{display:none !important}
}

/* ==========================================================================
   The effects (classes on <html>); none of them reaches the menu
   ========================================================================== */

/* colour filters (inverted colours, saturation): a see-through layer above the page, so position:fixed elements stay
   put; the menu sits above it. Open <dialog>s live in the top layer, above the layer, so they get the filter themselves. */
html.a11y-f::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;-webkit-backdrop-filter:var(--a11y-bf);backdrop-filter:var(--a11y-bf)}
html.a11y-f dialog[open]{filter:var(--a11y-bf)}
@supports not ((backdrop-filter:none) or (-webkit-backdrop-filter:none)){
  html.a11y-f{filter:var(--a11y-bf)}
  html.a11y-f::after{display:none}
}

/* Contrast + 1: dark (black / white / gold links) */
html.a11y-ct-1 body,
html.a11y-ct-1 body :not(.a11y-root,.a11y-root *,img,picture,video,canvas,svg,svg *,iframe,.badr-photo,.a11y-keep,.a11y-keep *):not(:empty){background-color:#000 !important;background-image:none !important;color:#fff !important;border-color:#fff !important;text-shadow:none !important;box-shadow:none !important}
html.a11y-ct-1 body a[href]:not(.a11y-root *),html.a11y-ct-1 body a[href]:not(.a11y-root *) *{color:#E9DA7A !important}
html.a11y-ct-1 body :is(input,select,textarea):not(.a11y-root *){background-color:#000 !important;color:#fff !important;border:1px solid #fff !important}
html.a11y-ct-1 body ::placeholder{color:#cfcfcf !important}
/* Contrast + 2: light (white / black / deep-green underlined links) */
html.a11y-ct-2 body,
html.a11y-ct-2 body :not(.a11y-root,.a11y-root *,img,picture,video,canvas,svg,svg *,iframe,.badr-photo,.a11y-keep,.a11y-keep *):not(:empty){background-color:#fff !important;background-image:none !important;color:#000 !important;border-color:#000 !important;text-shadow:none !important;box-shadow:none !important}
html.a11y-ct-2 body a[href]:not(.a11y-root *),html.a11y-ct-2 body a[href]:not(.a11y-root *) *{color:#045749 !important;text-decoration:underline !important}
html.a11y-ct-2 body :is(input,select,textarea):not(.a11y-root *){background-color:#fff !important;color:#000 !important;border:1px solid #000 !important}
/* Contrast + 3: inverted colours (the layer inverts; photos are inverted beforehand so they come out natural) */
html.a11y-ct-3 :is(img,picture,video,canvas,iframe,.badr-photo,svg:has(image)):not(.a11y-root *){filter:invert(1) hue-rotate(180deg)} /* Chrome ignores filters on elements inside an SVG, so a photo in an SVG (the moon) turns with its whole SVG */

/* Highlight links (and buttons) */
html.a11y-links :is(a[href],button,[role="button"],[role="link"],summary,input[type="submit"],input[type="button"]):not(.a11y-root,.a11y-root *){outline:3px solid #231F20 !important;outline-offset:2px !important;box-shadow:0 0 0 6px #E9DA7A !important}
html.a11y-links a[href]:not(.a11y-root *){text-decoration:underline !important;text-decoration-thickness:2px !important;text-underline-offset:3px !important}
html.a11y-links a[href]:not(.a11y-root *):not(:has(img,picture,svg,video)){background-color:#E9DA7A !important;color:#231F20 !important}

/* Hide images (space kept; photo backgrounds swapped for a plain colour that suits the text — set by a11y.js) */
html.a11y-img :is(img,picture,video,canvas,iframe,svg image):not(.a11y-root *){visibility:hidden !important}
html.a11y-img [data-a11y-bg]{background-image:none !important}
html.a11y-img [data-a11y-bg="dark"]{background-color:#231F20 !important}
html.a11y-img [data-a11y-bg="light"]{background-color:#E7E7DA !important}

/* Text spacing: words everywhere; letters only in English (letter spacing breaks Arabic letter joining) */
html.a11y-sp-1 body :not(.a11y-root,.a11y-root *){word-spacing:.16em !important}
html.a11y-sp-2 body :not(.a11y-root,.a11y-root *){word-spacing:.32em !important}
html.a11y-sp-3 body :not(.a11y-root,.a11y-root *){word-spacing:.48em !important}
html[lang="en"].a11y-sp-1 body :not(.a11y-root,.a11y-root *):not(:lang(ar)){letter-spacing:.06em !important}
html[lang="en"].a11y-sp-2 body :not(.a11y-root,.a11y-root *):not(:lang(ar)){letter-spacing:.12em !important}
html[lang="en"].a11y-sp-3 body :not(.a11y-root,.a11y-root *):not(:lang(ar)){letter-spacing:.18em !important}
:is(html.a11y-sp-1,html.a11y-sp-2,html.a11y-sp-3) body :lang(ar):not(.a11y-root,.a11y-root *){letter-spacing:0 !important}

/* Line height */
html.a11y-lh-1 :is(p,li,dd,dt,blockquote,figcaption,td,th,h1,h2,h3,h4,h5,h6,label,.msg):not(.a11y-root *){line-height:2 !important}
html.a11y-lh-2 :is(p,li,dd,dt,blockquote,figcaption,td,th,h1,h2,h3,h4,h5,h6,label,.msg):not(.a11y-root *){line-height:2.3 !important}
html.a11y-lh-3 :is(p,li,dd,dt,blockquote,figcaption,td,th,h1,h2,h3,h4,h5,h6,label,.msg):not(.a11y-root *){line-height:2.6 !important}

/* Dyslexia friendly: OpenDyslexic for Latin letters; Arabic falls through to a plain, legible system font */
@font-face{font-family:"OpenDyslexic";src:url("fonts/OpenDyslexic-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("fonts/OpenDyslexic-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
html.a11y-dys body :not(.a11y-root,.a11y-root *,svg,svg *,i,.fa,[class*="fa-"],[class^="icon"],[class*=" icon-"],.material-icons,.typcn){font-family:"OpenDyslexic",Tahoma,"Segoe UI","Geeza Pro","Noto Sans Arabic",Arial,sans-serif !important}
html[lang="ar"].a11y-dys body :not(.a11y-root,.a11y-root *){word-spacing:.1em}
html[lang="ar"].a11y-dys :is(p,li,dd,blockquote,td,.msg):not(.a11y-root *){line-height:1.95}

/* Align text to the start of the line */
html.a11y-align :is(p,li,dd,dt,blockquote,figcaption,td,th,h1,h2,h3,h4,h5,h6,label):not(.a11y-root *){text-align:start !important}

/* Pause animations (none rather than paused, so fade-ins don't stay invisible) */
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none !important;transition:none !important}
html.a11y-still{scroll-behavior:auto !important}
html.a11y-still .reveal{opacity:1 !important;transform:none !important}

/* Big cursor */
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 2.5 19 11.3l-6.4 1.5-3.3 6.7z' fill='%23231F20' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 9 5,auto !important}
html.a11y-cursor :is(a[href],button,[role="button"],label,select,summary),html.a11y-cursor :is(a[href],button,[role="button"],label,select,summary) *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11.5V4.2a1.6 1.6 0 0 1 3.2 0V10m0-.6a1.6 1.6 0 0 1 3.2 0V11m0-.6a1.6 1.6 0 0 1 3.2 0v1.6m0-.4a1.6 1.6 0 0 1 3.2 0v4a6.2 6.2 0 0 1-6.2 6.2h-1.6a6.2 6.2 0 0 1-5-2.5l-3.4-4.5a1.6 1.6 0 0 1 2.5-2L9 16z' fill='%23231F20' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 18 4,pointer !important}
html.a11y-cursor :is(input:not([type="checkbox"],[type="radio"],[type="button"],[type="submit"]),textarea,[contenteditable="true"]){cursor:text !important}

/* Read page: blocks that can be clicked to hear them */
html.a11y-tts :is(main,body) :is(p,li,h1,h2,h3,h4,h5,h6,dd,dt,blockquote,figcaption,td,th,.msg):not(.a11y-root *):hover{outline:2px dashed rgba(12,127,75,.55);outline-offset:3px;cursor:pointer}