/* ===========================================================================
   dla-a11y.css - Accessibility Controls panel (slides in from the right)
   Opened from the "Accessibility" button in the top bar. See js/dla-a11y.js.
   =========================================================================== */

/* ---- Top-bar button ---- */
.dla-a11y-open {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid rgba(255, 255, 255, .65); border-radius: 4px;
    color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 5px 10px; cursor: pointer;
}
.dla-a11y-open:hover { background: rgba(255, 255, 255, .15); }
.dla-a11y-open:focus-visible { outline: 3px solid #f5b800; outline-offset: 2px; }
.dla-a11y-open .dla-ic { color: #fff; width: 18px; height: 18px; vertical-align: 0; }
@media (max-width: 575px) { .dla-a11y-open .dla-a11y-open-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } }

/* ---- Panel ---- */
.dla-a11y[hidden] { display: none !important; }
.dla-a11y { position: fixed; inset: 0; z-index: 100000; font-family: 'Noto Sans', Arial, sans-serif; }
.dla-a11y-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s ease; }
.dla-a11y-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%;
    background: #fff; color: #1f2937; box-shadow: -6px 0 24px rgba(0, 0, 0, .25);
    display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; outline: none;
}
.dla-a11y.is-open .dla-a11y-backdrop { opacity: 1; }
.dla-a11y.is-open .dla-a11y-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .dla-a11y-backdrop, .dla-a11y-panel { transition: none; } }

.dla-a11y-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #e5e7eb; }
.dla-a11y-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.2rem; font-weight: 600; color: #1f2937; flex: 1 1 auto; }
.dla-a11y-head h2 .dla-ic { width: 26px; height: 26px; vertical-align: 0; }
.dla-a11y-close { background: transparent; border: 0; border-radius: 4px; padding: 4px; cursor: pointer; color: #4b5563; line-height: 0; }
.dla-a11y-close .dla-ic { width: 28px; height: 28px; vertical-align: 0; }
.dla-a11y-close:hover { background: #f3f4f6; }

.dla-a11y-body { padding: 18px 20px 24px; overflow-y: auto; flex: 1 1 auto; }
.dla-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dla-a11y-grid > li { display: flex; margin: 0; }
.dla-a11y-btn {
    width: 100%; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: #fff; border: 1px solid var(--dla-key, #29136C); border-radius: 8px; padding: 10px 8px; cursor: pointer;
    color: var(--dla-key, #29136C); font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; text-align: center; line-height: 1.3;
}
.dla-a11y-btn .dla-ic { width: 32px; height: 32px; vertical-align: 0; color: inherit; }
.dla-a11y-btn:hover { background: #f4f2fa; }
.dla-a11y-btn[aria-pressed="true"] { background: var(--dla-key, #29136C); color: #fff; }
.dla-a11y-state { display: block; font-size: .7rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.dla-a11y-btn:focus-visible, .dla-a11y-close:focus-visible, .dla-a11y-reset:focus-visible { outline: 3px solid #f5b800; outline-offset: 2px; }

.dla-a11y-foot { padding: 14px 20px; border-top: 1px solid #e5e7eb; }
.dla-a11y-reset {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--dla-key, #29136C); color: #fff; border: 0; border-radius: 6px; padding: 11px 14px;
    font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.dla-a11y-reset .dla-ic { color: #fff; vertical-align: 0; }
.dla-a11y-reset:hover { filter: brightness(1.2); }
.dla-a11y-note { margin: 14px 0 0; font-size: .8rem; color: #4b5563; }
.dla-a11y-note a { color: var(--dla-key, #29136C) !important; text-decoration: underline !important; font-weight: 600; }
html.dla-hc .dla-a11y-note a { color: #ff0 !important; }

html.dla-a11y-lock, html.dla-a11y-lock body { overflow: hidden; }

/* Panel in high contrast */
html.dla-hc .dla-a11y-panel { background: #000 !important; color: #fff !important; box-shadow: none; border-left: 2px solid #fff; }
html.dla-hc .dla-a11y-head, html.dla-hc .dla-a11y-foot { border-color: #fff; }
html.dla-hc .dla-a11y-head h2, html.dla-hc .dla-a11y-close, html.dla-hc .dla-a11y-note { color: #fff !important; }
html.dla-hc .dla-a11y-btn { background: #000 !important; color: #ff0 !important; border-color: #ff0 !important; }
html.dla-hc .dla-a11y-btn[aria-pressed="true"] { background: #ff0 !important; color: #000 !important; }
html.dla-hc .dla-a11y-reset { background: #ff0 !important; color: #000 !important; }
html.dla-hc .dla-a11y-reset .dla-ic { color: #000 !important; }

/* ===========================================================================
   Effects (classes on <html>, set by js/dla-a11y.js and restored in header.php)
   Filters are put on <html> so fixed menus keep working.
   =========================================================================== */
html.dla-a11y-invert { background: #fff; filter: invert(1) hue-rotate(180deg); }
html.dla-a11y-sat-low { filter: saturate(.5); }
html.dla-a11y-sat-high { filter: saturate(2); }
html.dla-a11y-sat-gray { filter: grayscale(1); }
html.dla-a11y-invert.dla-a11y-sat-low { filter: invert(1) hue-rotate(180deg) saturate(.5); }
html.dla-a11y-invert.dla-a11y-sat-high { filter: invert(1) hue-rotate(180deg) saturate(2); }
html.dla-a11y-invert.dla-a11y-sat-gray { filter: invert(1) hue-rotate(180deg) grayscale(1); }
/* keep photographs looking normal when the page is inverted */
html.dla-a11y-invert img, html.dla-a11y-invert video, html.dla-a11y-invert iframe { filter: invert(1) hue-rotate(180deg); }

/* Highlight links */
html.dla-a11y-links a:not(.dla-a11y a) {
    background: #ff0 !important; color: #000 !important; text-decoration: underline !important;
    outline: 2px solid #000 !important; outline-offset: 1px;
}
html.dla-a11y-links a:not(.dla-a11y a) .dla-ic { color: #000 !important; }

/* Hide images (space is kept so the layout does not jump) */
html.dla-a11y-noimg img, html.dla-a11y-noimg video, html.dla-a11y-noimg picture { visibility: hidden !important; }
html.dla-a11y-noimg .carousel-item, html.dla-a11y-noimg [style*="background-image"] { background-image: none !important; }

/* Big cursor */
html.dla-a11y-cursor, html.dla-a11y-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3 L6 39 L15 30 L21 44 L28 41 L22 27 L35 27 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.dla-a11y-cursor a, html.dla-a11y-cursor a *, html.dla-a11y-cursor button, html.dla-a11y-cursor button *, html.dla-a11y-cursor [role="button"], html.dla-a11y-cursor label, html.dla-a11y-cursor summary {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4c2 0 3.5 1.5 3.5 3.5V20l2-.3c1.6-.2 3 .7 3.5 2.1 1.4-.9 3.3-.6 4.3.8 1.4-.6 3.1 0 3.8 1.3 1.8-.3 3.4 1 3.4 2.8V34c0 5.5-4.5 10-10 10h-4.5c-3.2 0-6.2-1.6-8-4.2L8.5 30.6c-1-1.5-.6-3.5.9-4.4 1.3-.8 3-.5 4 .6l1.1 1.3V7.5C14.5 5.5 16 4 18 4Z' fill='%23000' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 18 4, pointer !important;
}
html.dla-a11y-cursor input[type="text"], html.dla-a11y-cursor input[type="search"], html.dla-a11y-cursor input[type="email"], html.dla-a11y-cursor input[type="tel"], html.dla-a11y-cursor input[type="password"], html.dla-a11y-cursor textarea { cursor: text !important; }

@media print {
    html[class*="dla-a11y-"] { filter: none !important; }
    .dla-a11y, .dla-a11y-open { display: none !important; }
}

/* ===========================================================================
   External link notice (js/dla-header.js)
   =========================================================================== */
.dla-exit[hidden] { display: none !important; }
.dla-exit { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Noto Sans', Arial, sans-serif; }
.dla-exit-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.dla-exit-box { position: relative; width: 100%; max-width: 440px; background: #fff; color: #1f2937; border-radius: 12px; padding: 20px 22px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.dla-exit-host { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.dla-exit-host .dla-ic { width: 20px; height: 20px; vertical-align: 0; }
.dla-exit-msg { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: #374151; }
.dla-exit-btns { display: flex; justify-content: flex-end; gap: 10px; }
.dla-exit-btns button { min-width: 84px; padding: 9px 18px; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.dla-exit-ok { background: var(--dla-key, #29136C); color: #fff; border: 2px solid var(--dla-key, #29136C); }
.dla-exit-ok:hover { filter: brightness(1.25); }
.dla-exit-cancel { background: #fff; color: var(--dla-key, #29136C); border: 2px solid var(--dla-key, #29136C); }
.dla-exit-cancel:hover { background: #f4f2fa; }
.dla-exit-btns button:focus-visible { outline: 3px solid #f5b800; outline-offset: 2px; }
html.dla-exit-lock, html.dla-exit-lock body { overflow: hidden; }
html.dla-hc .dla-exit-box { background: #000 !important; color: #fff !important; border: 2px solid #fff; }
html.dla-hc .dla-exit-msg, html.dla-hc .dla-exit-host { color: #fff !important; }
html.dla-hc .dla-exit-ok { background: #ff0 !important; color: #000 !important; border-color: #ff0 !important; }
html.dla-hc .dla-exit-cancel { background: #000 !important; color: #ff0 !important; border-color: #ff0 !important; }
@media print { .dla-exit { display: none !important; } }