/* ══════════════════════════════════════════════════════════════════════
   OWLMARK — ACCESSIBILITY
   By Mourad Mekki

   None of this changes how OwlMark looks to a teacher using a mouse. It
   changes what happens when they use a keyboard, or cannot see a subtle
   gold ring, or have asked their system to stop moving things.
   ══════════════════════════════════════════════════════════════════════ */

/* Announced, never seen. */
.om-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── SKIP LINK ─────────────────────────────────────────────────────────
   Off screen until focused. Without it, reaching the certificate means
   tabbing through the entire toolbar and sidebar, every time. */
.om-skip {
  position: fixed;
  top: 8px; left: 50%;
  transform: translate(-50%, -160%);
  z-index: 10000;
  padding: 11px 20px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(160deg, var(--gel-gold-a, #fff3d2), var(--gel-gold-b, #ffd98a));
  border: 1px solid var(--gel-gold-rim, #d9a532);
  color: var(--gel-gold-ink, #5c4413);
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: .6px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(43, 39, 64, .25);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.om-skip:focus {
  transform: translate(-50%, 0);
  outline: 2px solid var(--gel-gold-ink, #5c4413);
  outline-offset: 2px;
}

/* ── FOCUS ─────────────────────────────────────────────────────────────
   A visible focus ring on everything that can take focus. `:focus-visible`
   so a mouse user never sees it — the ring appears for the keyboard, which
   is who it is for. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--gel-gold-rim, #c9973d);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The certificate is one big focus target. It needs a ring that reads as
   "you are here" without covering the artwork. */
#certSheet .certificate:focus-visible {
  outline: 3px solid var(--gel-gold-rim, #c9973d);
  outline-offset: 4px;
}

/* A line being edited by keyboard must be obvious. */
.ce-field:focus-visible {
  outline: 2px solid var(--gel-gold-rim, #c9973d);
  outline-offset: 3px;
  border-radius: 3px;
  background: rgba(201, 151, 61, .07);
}

/* ── HIGH-CONTRAST FOCUS ───────────────────────────────────────────────
   For anyone who cannot pick a thin gold ring out of a gold certificate. */
body.om-hc-focus *:focus-visible {
  outline: 4px solid #000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 8px #ffe066 !important;
  border-radius: 3px;
}

/* ── DISABLED ──────────────────────────────────────────────────────────
   Greyed-out is not enough on a dark UI — it reads as "styled", not
   "unavailable". Make it unambiguous, and stop it swallowing clicks. */
[disabled],
[aria-disabled="true"] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(.5);
}
[disabled]:hover,
[aria-disabled="true"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── TABS ──────────────────────────────────────────────────────────── */
[role="tab"][aria-selected="true"] { font-weight: 700; }

/* ── REDUCED MOTION ────────────────────────────────────────────────────
   The app has motion in a dozen places across six stylesheets. Rather than
   chase each one, honour the request globally — then let the individual
   sheets keep their own more careful overrides.

   Motion is not removed entirely (the brief asks that it isn't); it is cut
   to something that cannot trigger anyone. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .om-skip { transition: none !important; }
}

/* ── FORCED COLOURS (Windows high-contrast mode) ──────────────────────── */
@media (forced-colors: active) {
  .om-btn, .om-chip, .tb-btn, .pg-thumb {
    border: 1px solid ButtonBorder;
  }
  *:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
}

@media print {
  .om-skip, .om-sr-only { display: none !important; }
  .ce-field:focus-visible,
  #certSheet .certificate:focus-visible { outline: none !important; background: none !important; }
}

/* ═══════════════ PAGE HEADING ═══════════════
   Four studios had no <h1> at all — a screen reader landed on the page
   with nothing to say what it was. The studio's own name in the header
   was already doing that job visually, so it was promoted to a heading
   rather than a second, hidden one being bolted on for the machines.
   It must look exactly as it did. */
.hd-brand-h1{
  margin:0;
  color:var(--ok-ivory,#FAF7EF);
  font-size:.92rem;font-weight:800;letter-spacing:.02em;
  white-space:nowrap;line-height:1.15;
  font-family:inherit;
}
body.lang-ar .hd-brand-h1{letter-spacing:0}