/* Accessibility assistant: the round button bottom left and its panel, in
   the site's own language (square tiles, Outfit, brand colours). The effects
   it switches on are in a11y-modes.css. */
.zn-a11y { font-family: var(--font); }
.zn-a11y__toggle {
    position: fixed; left: 24px; bottom: 24px; z-index: 9991;
    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
    border: 3px solid var(--white); border-radius: 50%; background: var(--secondary); color: var(--white);
    font-size: 28px; box-shadow: 0 8px 24px rgba(var(--navy-rgb), 0.3); cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.zn-a11y__toggle:hover, .zn-a11y__toggle[aria-expanded="true"] { background: var(--primary); transform: scale(1.05); }
.zn-a11y__toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* Back to top moves up so the two never overlap. */
.has-a11y .zn-totop { bottom: 92px; }

.zn-a11y__panel {
    position: fixed; left: 24px; bottom: 92px; z-index: 9992;
    width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 116px);
    display: flex; flex-direction: column; background: var(--white); color: var(--text);
    border-top: 4px solid var(--primary); box-shadow: 0 20px 60px rgba(var(--navy-rgb), 0.3);
}
.zn-a11y__panel[hidden] { display: none; }
.zn-a11y__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 16px; background: var(--secondary); color: var(--white); }
.zn-a11y__head h2 { margin: 8px 0 0; color: var(--white); font-size: 20px; line-height: 1.25; }
.zn-a11y__close { width: 40px; height: 40px; flex: 0 0 auto; border: 0; background: rgba(255, 255, 255, 0.12); color: var(--white); font-size: 18px; cursor: pointer; }
.zn-a11y__close:hover, .zn-a11y__close:focus-visible { background: var(--primary); }
.zn-a11y__body { flex: 1; overflow-y: auto; padding: 4px 20px 16px; overscroll-behavior: contain; }
.zn-a11y__body h3 { margin: 18px 0 10px; color: var(--secondary); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.zn-a11y__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zn-a11y__grid button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 84px; padding: 10px 6px; border: 1px solid var(--border); background: var(--surface);
    color: var(--secondary); font: 600 13px/1.2 var(--font); text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.zn-a11y__grid button i { font-size: 22px; color: var(--primary); }
.zn-a11y__grid button:hover { border-color: var(--secondary); background: var(--white); }
.zn-a11y__grid button:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.zn-a11y__grid button[aria-pressed="true"], .zn-a11y__grid button[aria-expanded="true"] { border-color: var(--primary); background: var(--white); box-shadow: inset 0 0 0 1px var(--primary); }
.zn-a11y__grid button[aria-pressed="true"]::after {
    content: '\f00c'; position: absolute; top: 0; right: 0; width: 20px; height: 20px; display: grid; place-items: center;
    background: var(--primary); color: var(--white); font: 900 10px 'Font Awesome 6 Free';
}
.zn-a11y__grid--profiles button { min-height: 64px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; text-align: left; }
.zn-a11y__grid--profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zn-a11y__size { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--secondary); font-weight: 600; }
.zn-a11y__stepper { display: flex; align-items: center; gap: 4px; }
.zn-a11y__stepper button { width: 38px; height: 38px; border: 0; background: var(--secondary); color: var(--white); cursor: pointer; }
.zn-a11y__stepper button:hover, .zn-a11y__stepper button:focus-visible { background: var(--primary); }
.zn-a11y__stepper output { min-width: 56px; text-align: center; font-weight: 700; }
.zn-a11y__structure { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); }
.zn-a11y__structure[hidden] { display: none; }
.zn-a11y__structure strong { display: block; margin: 6px 0 4px; color: var(--secondary); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.zn-a11y__structure a { display: block; padding: 5px 0; color: var(--secondary); font-size: 14px; border-bottom: 1px dashed var(--border); }
.zn-a11y__structure a:hover, .zn-a11y__structure a:focus-visible { color: var(--primary); }
.zn-a11y__structure a[data-level="2"] { padding-left: 12px; }
.zn-a11y__structure a[data-level="3"] { padding-left: 24px; font-size: 13px; }
.zn-a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 13px; }

/* Reading guide (a bar that follows the pointer) and mask (dims the rest). */
.zn-a11y__guide { position: fixed; left: 0; right: 0; top: 0; z-index: 9989; height: 12px; display: none; pointer-events: none; background: var(--primary); opacity: 0.85; border-top: 3px solid var(--secondary); border-bottom: 3px solid var(--secondary); }
.a11y-guide .zn-a11y__guide { display: block; }
.zn-a11y__mask { display: none; }
.a11y-mask .zn-a11y__mask { display: block; }
.zn-a11y__mask span { position: fixed; left: 0; right: 0; z-index: 9988; pointer-events: none; background: rgba(1, 20, 30, 0.7); }
.zn-a11y__mask span:first-child { top: 0; height: var(--a11y-mask-top, 40vh); }
.zn-a11y__mask span:last-child { bottom: 0; top: var(--a11y-mask-bottom, 60vh); }
.zn-a11y__speaking { position: fixed; left: 50%; bottom: 24px; z-index: 9993; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; transform: translateX(-50%); background: var(--secondary); color: var(--white); box-shadow: 0 8px 24px rgba(var(--navy-rgb), 0.3); font-weight: 600; white-space: nowrap; }
.zn-a11y__speaking[hidden] { display: none; }
.zn-a11y__speaking i { color: var(--primary); }
.zn-a11y__speaking button { border: 0; padding: 6px 14px; background: var(--primary); color: var(--white); font-weight: 700; cursor: pointer; }
.a11y-speak main :is(p, h1, h2, h3, h4, li, td, th, blockquote, figcaption, label):hover { outline: 2px dashed var(--primary); outline-offset: 2px; cursor: pointer; }
.zn-a11y-reading { background: rgba(235, 113, 29, 0.18) !important; outline: 2px solid var(--primary) !important; }

@media (max-width: 575px) {
    .zn-a11y__toggle { left: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 24px; }
    .zn-a11y__panel { left: 16px; bottom: 76px; max-height: calc(100vh - 96px); }
    .has-a11y .zn-totop { bottom: 78px; left: 16px; }
    .zn-a11y__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .zn-a11y { display: none; } }