/* Digital Accessibility Handbook — accessible site theme.
   Designed to pass its own AA checklist: high contrast, visible focus,
   reflow to 320px, no colour-only meaning, RTL-ready (logical properties). */

:root {
  --teal: #0B5563;       /* headings — ~8:1 on white */
  --teal2: #107283;
  --ink: #1A1A1A;
  --muted: #55606A;      /* ~6:1 on white */
  --bg: #ffffff;
  --bg-alt: #F1F6F7;
  --line: #C9D2D6;
  --focus: #0B5563;
  --maxw: 78rem;
  --nav-w: 17rem;

  --tip-bg: #E6F4EA;  --tip-bd: #1E6B2A;
  --avoid-bg: #FBE9E7; --avoid-bd: #B23121;
  --note-bg: #E3F2F4;  --note-bd: #0E5E6C;
  --wcag-bg: #EEEAF6;  --wcag-bd: #4F3D7A;
}

* { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Arial, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--teal);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ---------- focus ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- header ---------- */
.site-header {
  background: var(--teal);
  color: #fff;
  border-block-end: 4px solid var(--teal2);
}
.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.site-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
}
.site-title:hover { text-decoration: underline; }
.site-standard { margin: 0; font-size: 0.85rem; color: #d9ecef; }
.lang-toggle {
  margin-inline-start: auto;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 5px;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.lang-toggle:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- layout ---------- */
.site-body {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  gap: 2rem;
  padding: 1.5rem 1.25rem 3rem;
}

.site-nav { font-size: 0.95rem; }
.site-nav__title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.25rem 0 0.5rem;
}
.site-nav .nav-list { list-style: none; margin: 0; padding: 0; position: sticky; top: 1rem; }
.site-nav .nav-list li { margin: 0; }
.site-nav .nav-list a {
  display: block;
  padding: 0.4rem 0.6rem;
  color: var(--teal);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
  border-radius: 2px;
}
.site-nav .nav-list a:hover { background: var(--bg-alt); text-decoration: underline; }
.site-nav .nav-list a[aria-current="page"] {
  font-weight: 700;
  border-inline-start-color: var(--teal2);
  background: var(--bg-alt);
}

/* ---------- content ---------- */
.content { min-width: 0; max-width: 46rem; }
.content h1 {
  color: var(--teal);
  font-size: 2rem;
  line-height: 1.2;
  border-block-end: 3px solid var(--teal2);
  padding-block-end: 0.4rem;
  margin-block: 0 1rem;
}
.content h2 { color: var(--teal2); font-size: 1.4rem; margin-block: 2rem 0.6rem; }
.content h3 { color: var(--ink); font-size: 1.12rem; margin-block: 1.4rem 0.4rem; }
.content p { margin-block: 0 0.9rem; }
.content .lead { font-size: 1.12rem; color: var(--muted); }
.content .kicker {
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--teal2); font-weight: 700; font-size: 0.85rem; margin: 0 0 0.3rem;
}
.content ul, .content ol { margin-block: 0 1rem; padding-inline-start: 1.4rem; }
.content li { margin-block: 0.2rem; }
.content a { color: var(--teal2); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin-block: 0 1.2rem; border: 1px solid var(--line); border-radius: 4px; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: start; padding: 0.5rem; color: var(--muted); }
th, td { text-align: start; vertical-align: top; padding: 0.55rem 0.7rem; border: 1px solid var(--line); }
thead th { background: var(--teal); color: #fff; }
tbody tr:nth-child(even) { background: var(--bg-alt); }

/* ---------- callouts ---------- */
.callout {
  margin-block: 0 1.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid;
  border-inline-start-width: 6px;
  border-radius: 4px;
}
.callout p { margin-block: 0 0.5rem; }
.callout p:last-child { margin-block-end: 0; }
.callout__label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.callout--tip   { background: var(--tip-bg);   border-color: var(--tip-bd); }
.callout--tip   .callout__label { color: var(--tip-bd); }
.callout--avoid { background: var(--avoid-bg); border-color: var(--avoid-bd); }
.callout--avoid .callout__label { color: var(--avoid-bd); }
.callout--note  { background: var(--note-bg);  border-color: var(--note-bd); }
.callout--note  .callout__label { color: var(--note-bd); }
.callout--wcag  { background: var(--wcag-bg);  border-color: var(--wcag-bd); }
.callout--wcag  .callout__label { color: var(--wcag-bd); }

/* ---------- checklist ---------- */
.checklist { list-style: none; padding-inline-start: 0; margin-block: 0 1.2rem; }
.checklist li {
  position: relative;
  padding-inline-start: 1.9rem;
  margin-block: 0.35rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--teal2);
  border-radius: 3px;
}

/* ---------- glossary ---------- */
.glossary dt { font-weight: 700; color: var(--teal); margin-block-start: 0.8rem; }
.glossary dd { margin-inline-start: 0; margin-block: 0.15rem 0; }

/* ---------- figures ---------- */
figure { margin: 1rem 0 1.4rem; text-align: center; }
/* Example images scale to fill the column (up to a tidy cap), centered, instead
   of sitting at a fixed small width with large white margins. */
figure img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}
figcaption { color: var(--muted); font-size: 0.9rem; font-style: italic; margin-block-start: 0.4rem; }

/* ---------- part divider ---------- */
.part-divider {
  margin-block: 2rem;
  padding: 1.5rem;
  background: var(--bg-alt);
  border-radius: 6px;
  border-inline-start: 6px solid var(--teal2);
}
.part-kicker { text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal2); font-weight: 700; margin: 0; }
.part-title { font-size: 1.6rem; font-weight: 700; color: var(--teal); margin: 0.2rem 0 0.4rem; }

/* nav / contents part headings (non-link grouping labels) */
.nav-part {
  margin-block: 0.8rem 0.2rem;
  padding-inline: 0.6rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
}
.toc-part {
  list-style: none;
  margin-block: 1rem 0.3rem;
  margin-inline-start: -1.4rem;
  font-weight: 700;
  color: var(--teal2);
}

/* ---------- pager ---------- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}
.pager a { display: flex; flex-direction: column; text-decoration: none; color: var(--teal2); max-width: 48%; }
.pager a:hover { text-decoration: underline; }
.pager__next { text-align: end; align-items: flex-end; }
.pager__dir { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- table of contents on the index ---------- */
.toc { line-height: 2; }

/* ---------- footer ---------- */
.site-footer {
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer p { max-width: var(--maxw); margin-inline: auto; padding: 0 1.25rem 1.2rem; }
.footer-nav { max-width: var(--maxw); margin-inline: auto; padding: 1.2rem 1.25rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-nav a { color: var(--teal2); }

/* downloads list + shared muted helper */
.downloads { list-style: none; padding-inline: 0; }
.downloads li { margin-block: 0 1rem; }
.muted { color: var(--muted); font-size: 0.92rem; }

/* ---------- Easy Read edition (larger text, generous spacing) ---------- */
.easy-read { font-size: 1.18rem; line-height: 1.85; }
.easy-read > p { max-width: 40rem; }
.easy-read h2 { font-size: 1.55rem; margin-block: 2rem 0.5rem; }
.easy-section { margin-block: 1.4rem 0; padding: 1rem 1.3rem; background: var(--bg-alt); border-radius: 8px; border-inline-start: 5px solid var(--teal2); }
.easy-points { list-style: none; padding-inline-start: 0; margin-block: 0.6rem 0.8rem; }
.easy-points li { position: relative; padding-inline-start: 1.9rem; margin-block: 0.7rem; font-size: 1.2rem; line-height: 1.6; }
.easy-points li::before { content: "•"; position: absolute; inset-inline-start: 0.4rem; color: var(--teal2); font-size: 1.4rem; line-height: 1.2; }
.easy-more a { font-size: 1rem; }

/* ---------- interactive conformance checklist ---------- */
.verdict {
  margin-block: 1rem 0.3rem;
  padding: 0.9rem 1.1rem;
  border: 2px solid;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.05rem;
}
.verdict--pass { background: #E6F4EA; border-color: #1E6B2A; color: #14521F; }
.verdict--partial { background: #FFF4D6; border-color: #8A5A00; color: #6B4600; }
.verdict--incomplete { background: #EDEFF1; border-color: #5B656D; color: #353D44; }
.cl-summary { color: var(--muted); margin-block: 0 1.2rem; }

.cl-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 0 1.6rem; }
.cl-actions button {
  font: inherit; font-weight: 600; color: #fff;
  background: var(--teal2); border: 1px solid var(--teal);
  border-radius: 5px; padding: 0.5rem 0.95rem; cursor: pointer;
}
.cl-actions button:hover { background: var(--teal); }

.cl-row {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--teal2);
  border-radius: 5px;
  margin-block: 0 0.7rem;
  padding: 0.7rem 0.9rem;
}
.cl-row legend { font-weight: 400; padding-inline: 0.2rem; }
.cl-num { font-weight: 700; color: var(--teal2); }
.cl-check { font-weight: 600; }
.cl-sc { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.cl-options { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-block-start: 0.55rem; }
.cl-opt { display: inline-flex; align-items: center; gap: 0.35rem; }
.cl-opt input { width: 1.1rem; height: 1.1rem; }
.cl-opt--s:has(input:checked) { color: #14521F; font-weight: 700; }
.cl-opt--ps:has(input:checked) { color: #6B4600; font-weight: 700; }
.cl-opt--dns:has(input:checked) { color: #9C0006; font-weight: 700; }
.cl-opt--na:has(input:checked) { color: #353D44; font-weight: 700; }

/* ---------- Arabic / RTL ---------- */
/* The layout uses CSS logical properties throughout, so dir="rtl" mirrors it
   automatically; this just sets an Arabic-friendly font stack and a touch more
   line spacing for legibility. */
html[lang="ar"] body { font-family: 'Segoe UI', 'Noto Sans Arabic', Tahoma, Arial, sans-serif; line-height: 1.85; }
html[lang="ar"] .cl-sc { white-space: normal; }  /* SC codes can wrap in RTL */

/* ---------- responsive: reflow to single column ---------- */
@media (max-width: 48rem) {
  .site-body { grid-template-columns: 1fr; gap: 1rem; }
  .site-nav .nav-list { position: static; }
  .content { max-width: none; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- print ---------- */
@media print {
  .skip-link, .site-nav, .pager, .cl-actions { display: none; }
  .site-body { display: block; padding: 0; }
  .site-header { background: #fff; color: var(--ink); border-block-end-color: var(--teal); }
  .site-title, .site-standard { color: var(--ink); }
  a { color: var(--ink); }
  .content { max-width: none; }
}