/* ==========================================================================
   SEHAM LATINO — Accessibility toolbar

   Two halves. The first styles the widget itself; the second is the set of
   `a11y-*` classes the widget puts on <html>. Every adjustment is expressed
   as a class or a custom property so nothing needs inline styles, and the
   whole thing is reversible by removing the class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TEXT SIZE
   The theme sizes everything from a 16px root, so scaling the root scales
   the type, the padding and the gaps together without breaking the grid.
   -------------------------------------------------------------------------- */
html{font-size:calc(16px * var(--a11y-text-scale, 1))}


/* --------------------------------------------------------------------------
   2. THE WIDGET
   -------------------------------------------------------------------------- */
/* Anchored to the physical right in both languages, on purpose: an
   accessibility button that jumps sides when the site is switched to Arabic is
   harder to find, not easier. */
.a11y{position:fixed;inset-block-end:clamp(1rem,3vw,1.6rem);right:clamp(1rem,3vw,1.6rem);left:auto;z-index:1200;font-family:var(--ui);line-height:1.5}
.a11y[hidden]{display:none}
html[lang="ar"] .a11y{font-family:'Tajawal',var(--ui)}

.a11y-launcher{
  display:grid;place-items:center;
  inline-size:54px;block-size:54px;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:var(--wine-600);color:#fff;
  box-shadow:0 10px 26px rgba(20,4,9,.34);
  transition:transform .22s var(--ease-out),background .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.a11y-launcher svg{inline-size:26px;block-size:26px}
.a11y-launcher:hover{background:var(--wine-500);transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,4,9,.42)}
.a11y-launcher:active{transform:translateY(0)}
.a11y.is-open .a11y-launcher{background:var(--wine-700)}

.a11y-panel{
  position:absolute;inset-block-end:calc(100% + .7rem);right:0;left:auto;
  inline-size:min(21rem,calc(100vw - 2rem));
  max-block-size:min(31rem,calc(100vh - 7rem));
  overflow-y:auto;overscroll-behavior:contain;
  padding:1rem;
  border:1px solid var(--line);border-radius:1.15rem;
  background:var(--surface);color:var(--ink);
  box-shadow:0 24px 60px rgba(22,16,17,.24);
}
.a11y-panel[hidden]{display:none}

.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-block-end:.85rem}
.a11y-head h2{font-family:var(--display);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin:0}
html[lang="ar"] .a11y-head h2{letter-spacing:0}
.a11y-close{inline-size:32px;block-size:32px;border-radius:50%;font-size:1.4rem;line-height:1;color:var(--ink-3);transition:background .2s,color .2s}
.a11y-close:hover{background:var(--surface-2);color:var(--ink)}

.a11y-body{display:grid;gap:.4rem}

.a11y-steps{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface-2)}
.a11y-steps-label{font-size:.85rem;font-weight:600}
.a11y-steps-controls{display:flex;align-items:center;gap:.35rem;flex:none;direction:ltr}
.a11y-steps-controls button{inline-size:34px;block-size:34px;border:1px solid var(--line-2);border-radius:.5rem;background:var(--surface);font-size:.85rem;font-weight:700;transition:background .18s,color .18s,border-color .18s}
.a11y-steps-controls button:hover{background:var(--wine-600);border-color:var(--wine-600);color:#fff}
.a11y-steps-controls output{min-inline-size:3.4rem;text-align:center;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--ink-3)}

.a11y-option{
  display:flex;align-items:center;gap:.7rem;
  inline-size:100%;padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:.75rem;
  background:var(--surface);color:var(--ink);
  font-size:.85rem;text-align:start;
  transition:background .18s,border-color .18s,color .18s;
}
.a11y-option:hover{background:var(--surface-2);border-color:var(--line-2)}
.a11y-option-icon{display:grid;place-items:center;flex:none;inline-size:30px;block-size:30px;border-radius:.5rem;background:var(--surface-3);font-size:.95rem;font-weight:600;line-height:1}
.a11y-option[data-a11y-option="links"] .a11y-option-icon{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px}
.a11y-option-label{min-inline-size:0}
.a11y-option[aria-pressed="true"]{background:var(--wine-600);border-color:var(--wine-600);color:#fff}
.a11y-option[aria-pressed="true"] .a11y-option-icon{background:rgba(255,255,255,.2)}
.a11y-option[aria-pressed="true"]::after{content:"✓";margin-inline-start:auto;flex:none;font-weight:700}

.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-block-start:.9rem;padding-block-start:.85rem;border-block-start:1px solid var(--line);font-size:.78rem}
.a11y-reset{font-weight:600;color:var(--wine-600);text-decoration:underline;text-underline-offset:3px}
.a11y-foot a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.a11y-foot a:hover,.a11y-reset:hover{color:var(--ink)}

@media(max-width:520px){
  .a11y{inset-block-end:.9rem;right:.9rem}
  .a11y-launcher{inline-size:48px;block-size:48px}
  .a11y-panel{inline-size:calc(100vw - 1.8rem);right:0}
}


/* --------------------------------------------------------------------------
   3. THE ADJUSTMENTS
   -------------------------------------------------------------------------- */

/* Letter and line spacing, at the WCAG 1.4.12 “text spacing” values. */
html.a11y-spacing body{letter-spacing:.12em !important;word-spacing:.16em !important;line-height:1.85 !important}
html.a11y-spacing p{margin-block-end:2em !important}
html.a11y-spacing h1,html.a11y-spacing h2,html.a11y-spacing h3,html.a11y-spacing .t-hero,html.a11y-spacing .t-display{letter-spacing:.02em !important;line-height:1.3 !important}

/* High contrast: push the ink to black, the reverse type to white, and give
   every edge a border strong enough to see. */
html.a11y-contrast{
  --ink:#000;--ink-2:#101010;--ink-3:#1c1c1c;--ink-4:#2c2c2c;
  --on-dark:#fff;--on-dark-2:#fff;--on-dark-3:rgba(255,255,255,.88);
  --line:rgba(0,0,0,.45);--line-2:rgba(0,0,0,.65);--line-dark:rgba(255,255,255,.6);
  --gold-300:#FFE7B4;--gold-400:#FFD891;--gold-500:#8A6320;
  --surface-2:#fff;--surface-3:#f2f2f2;--page-warm:#fff;
}
html.a11y-contrast .t-lead,html.a11y-contrast .t-small,html.a11y-contrast .t-micro,html.a11y-contrast small{color:var(--ink-2) !important}
html.a11y-contrast .sect-dark,html.a11y-contrast .sect-wine,html.a11y-contrast .foot,html.a11y-contrast .hero{background-color:#100206 !important}
html.a11y-contrast .btn,html.a11y-contrast .input,html.a11y-contrast .card,html.a11y-contrast .tier{border:2px solid currentColor !important}
html.a11y-contrast :focus-visible{outline:3px solid #FFD891 !important;outline-offset:3px}

/* Inverted colours. Media is inverted back so photographs and video stay
   readable rather than turning into negatives. */
/* The filter goes on the root element on purpose: the spec exempts the
   document root from creating a containing block, so the fixed header, the
   drawer and this widget all keep positioning against the viewport. */
html.a11y-invert{filter:invert(1) hue-rotate(180deg)}
html.a11y-grayscale{filter:grayscale(1)}
html.a11y-invert.a11y-grayscale{filter:grayscale(1) invert(1) hue-rotate(180deg)}
/* Photographs and video are inverted back so they stay themselves. */
html.a11y-invert img,html.a11y-invert video,html.a11y-invert iframe,html.a11y-invert .split-media,html.a11y-invert .home-reel::before,html.a11y-invert .pagehead::before,html.a11y-invert .owner-section::before{filter:invert(1) hue-rotate(180deg)}
html.a11y-invert .a11y-panel,html.a11y-invert .a11y-launcher{filter:invert(1) hue-rotate(180deg)}

/* Every link visibly a link, not just a colour change. */
html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px !important;text-decoration-thickness:2px !important}
html.a11y-links a:hover,html.a11y-links a:focus-visible{outline:2px solid var(--gold-400) !important;outline-offset:2px;border-radius:3px}
html.a11y-links .nav-link::after{inline-size:100% !important;opacity:.5}

/* A plainer typeface, for anyone who finds the display face hard to read.
   Tahoma covers Arabic as well as Latin, so one stack serves both languages. */
html.a11y-readable body,
html.a11y-readable .t-hero,html.a11y-readable .t-display,html.a11y-readable .t-h1,html.a11y-readable .t-h2,html.a11y-readable .t-h3,
html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3,html.a11y-readable h4,html.a11y-readable h5,
html.a11y-readable .quote,html.a11y-readable blockquote,
html.a11y-readable button,html.a11y-readable input,html.a11y-readable select,html.a11y-readable textarea{
  font-family:Verdana,Tahoma,'DejaVu Sans','Segoe UI',Arial,sans-serif !important;
  letter-spacing:normal !important;
  font-weight:normal;
}
html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3,html.a11y-readable .t-hero,html.a11y-readable .t-display,html.a11y-readable .t-h1{font-weight:700 !important;line-height:1.25 !important}
html.a11y-readable .a11y-head h2{font-family:inherit !important}

/* A cursor large enough to follow. The hotspot sits at 2,2 in both. */
html.a11y-cursor,html.a11y-cursor *{
  cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 8.4-6.1 1.3-2.4 6.1z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,auto !important;
}
html.a11y-cursor a,html.a11y-cursor button,html.a11y-cursor [role="button"],html.a11y-cursor label,html.a11y-cursor summary{
  cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 11.2V4.6a1.6 1.6 0 013.2 0v5.6h1.2a4.4 4.4 0 014.4 4.4v2.2a4 4 0 01-4 4h-3.1a4.4 4.4 0 01-3.4-1.6l-3.3-4a1.5 1.5 0 012.2-2l1.6 1.5z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 2,pointer !important;
}

/* Stop everything that moves, including the marquee and the reel carousel. */
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
html.a11y-motion .marquee-track,html.a11y-motion .home-reels-track{animation:none !important;transform:none !important}

/* Printing the statement should not print the widget. */
@media print{.a11y{display:none !important}}


/* --------------------------------------------------------------------------
   4. THE STATEMENT PAGE
   -------------------------------------------------------------------------- */
.a11y-statement .entry-content>h2{margin-block:2.4rem 1rem}
.a11y-statement .entry-content>h2:first-child{margin-block-start:0}
.a11y-list{display:grid;gap:.7rem;margin-block:0 .5rem;padding:0}
.a11y-list li{display:flex;align-items:flex-start;gap:.7rem;list-style:none;color:var(--ink-2);line-height:1.7}
.a11y-list .tick{flex:none;display:grid;place-items:center;inline-size:1.4rem;block-size:1.4rem;margin-block-start:.15rem;border-radius:50%;background:var(--surface-2);color:var(--wine-600);font-size:.7rem}
.a11y-contact .tick{background:var(--wine-600);color:#fff}
.a11y-contact a{color:var(--wine-600);text-decoration:underline;text-underline-offset:3px}
.a11y-updated{margin-block-start:2.4rem;padding-block-start:1.2rem;border-block-start:1px solid var(--line);color:var(--ink-3)}