/* ==========================================================================
   YAFA accessibility toolbar
   Self-contained: no framework, no third-party script, no build step.
   ========================================================================== */

.a11y-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9990; }

.a11y-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; padding: 0;
    border: 0; border-radius: 50%;
    background-color: #020D19; color: #fff;
    box-shadow: 0 6px 20px rgba(2, 13, 25, .28);
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}
.a11y-toggle:hover, .a11y-toggle:focus-visible { background-color: #43A047; transform: translateY(-2px); }
.a11y-toggle svg { width: 26px; height: 26px; fill: currentColor; }

.a11y-panel {
    position: absolute; right: 0; bottom: 68px;
    width: 300px; max-width: calc(100vw - 40px);
    padding: 20px;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 18px 50px rgba(2, 13, 25, .22);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    text-align: left;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.a11y-panel[hidden] { display: none; }

.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.a11y-panel__title { margin: 0; font-size: 16px; font-weight: 700; color: #020D19; line-height: 1.2; }
.a11y-close {
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background-color: #F1F1F1; color: #020D19; font-size: 17px; line-height: 1; cursor: pointer;
}
.a11y-close:hover, .a11y-close:focus-visible { background-color: #020D19; color: #fff; }

.a11y-group { margin-bottom: 16px; }
.a11y-group__label {
    display: block; margin-bottom: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #828282;
}
.a11y-steps { display: flex; gap: 6px; }
.a11y-step {
    flex: 1 1 0; padding: 9px 0;
    border: 1px solid rgba(2, 13, 25, .14); border-radius: 8px;
    background-color: #fff; color: #020D19;
    font-family: inherit; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.a11y-step:hover, .a11y-step:focus-visible { border-color: #43A047; color: #43A047; }
.a11y-step[aria-pressed="true"] { background-color: #020D19; border-color: #020D19; color: #fff; }
.a11y-step--s { font-size: 12px; }
.a11y-step--m { font-size: 15px; }
.a11y-step--l { font-size: 18px; }

.a11y-options { display: flex; flex-direction: column; gap: 6px; }
.a11y-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 10px 12px;
    border: 1px solid rgba(2, 13, 25, .14); border-radius: 8px;
    background-color: #fff; color: #020D19;
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.3;
    text-align: left; cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.a11y-option:hover, .a11y-option:focus-visible { border-color: #43A047; color: #43A047; }
.a11y-option__mark {
    flex: 0 0 auto; width: 34px; height: 19px; border-radius: 100px;
    background-color: #D9D9D9; position: relative; transition: background-color .2s ease;
}
.a11y-option__mark::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 15px; height: 15px; border-radius: 50%; background-color: #fff;
    transition: transform .2s ease;
}
.a11y-option[aria-pressed="true"] .a11y-option__mark { background-color: #43A047; }
.a11y-option[aria-pressed="true"] .a11y-option__mark::after { transform: translateX(15px); }

.a11y-reset {
    width: 100%; padding: 11px 0; margin-top: 2px;
    border: 1px solid rgba(2, 13, 25, .14); border-radius: 8px;
    background-color: #fff; color: #828282;
    font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.a11y-reset:hover, .a11y-reset:focus-visible { border-color: #020D19; color: #020D19; }

/* keep the widget itself immune to the settings it applies */
.a11y-widget, .a11y-widget * { font-size: revert; }

/* ---------- RTL ---------- */
[dir="rtl"] .a11y-widget { right: auto; left: 20px; }
[dir="rtl"] .a11y-panel  { right: auto; left: 0; text-align: right; }
[dir="rtl"] .a11y-option { text-align: right; }
[dir="rtl"] .a11y-option[aria-pressed="true"] .a11y-option__mark::after { transform: translateX(-15px); }

/* ---------- readable font ---------- */
html.a11y-readable body,
html.a11y-readable :is(p, span, li, a, h1, h2, h3, h4, h5, h6, td, th, label, figcaption, blockquote, button, input, textarea) {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .01em !important;
}
html.a11y-readable :is(p, li, td, blockquote, figcaption) { line-height: 1.85 !important; }

/* ---------- highlight links ---------- */
html.a11y-links-highlight :is(main, footer, header, section, .page-blog, .page-gallery) a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    outline: 2px solid rgba(67, 160, 71, .55);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- reduce motion ---------- */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}
/* the theme hides these until their animation runs - make sure they stay visible */
html.a11y-no-motion :is(.wow, .text-anime-style-2, .text-anime-style-3, .image-anime) {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}
html.a11y-no-motion .parallaxie { background-attachment: scroll !important; }
html.a11y-no-motion :is(.cursor, .mouse-cursor, #magic-cursor, #ball) { display: none !important; }

/* ---------- images ----------
   Content photography is hidden; the logo stays so the page is still
   identifiable, and small functional icons (arrows, checkmarks, bullets)
   stay because they carry meaning rather than decoration.
   Containers that print light text over a photo get a solid dark colour,
   otherwise white text would land on white once the photo is gone. */
html.a11y-no-images img:not(.a11y-keep) { display: none !important; }
html.a11y-no-images .navbar-brand img,
html.a11y-no-images .main-logo img,
html.a11y-no-images .footer-logo img,
html.a11y-no-images .logo img { display: block !important; }

html.a11y-no-images :is(.page-header, .hero, .donate-now) {
    background-image: none !important;
    background-color: #020D19 !important;
}
html.a11y-no-images .our-testimonials { background-image: none !important; }
html.a11y-no-images .main-footer { background-image: none !important; background-color: #020D19 !important; }
/* With no image behind it the caption overlay has nothing to sit on, so the
   tile becomes an ordinary text card instead of an empty box with text
   spilling out of it. */
html.a11y-no-images .gallery-tile { background-color: #020D19 !important; }
html.a11y-no-images .gallery-tile__scrim { display: none !important; }
html.a11y-no-images .gallery-tile__link { aspect-ratio: auto !important; min-height: 0 !important; }
html.a11y-no-images .gallery-tile__body { position: static !important; padding: 18px 20px !important; }
html.a11y-no-images .gallery-tile__caption { -webkit-line-clamp: unset !important; }
html.a11y-no-images .post-featured-image figure { min-height: 0 !important; }

/* ---------- grayscale ----------
   Applied to the root: a filter on any other element would turn it into a
   containing block and break the toolbar's fixed positioning. */
html.a11y-grayscale { filter: grayscale(1); }

/* ---------- text spacing ---------- */
html.a11y-spacing :is(p, li, td, th, blockquote, figcaption, span, a, h1, h2, h3, h4, h5, h6) {
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}
html.a11y-spacing :is(p, li, td, blockquote, figcaption) { line-height: 2 !important; }

/* ---------- bigger cursor ---------- */
html.a11y-big-cursor,
html.a11y-big-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l19 12.5-8.4 1.6L21 27l-4 1.6-4.4-11L6 23z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2, auto !important;
}
html.a11y-big-cursor :is(a, button, [role="button"], input[type="submit"]) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M13 4a2 2 0 0 1 4 0v9h1a2 2 0 0 1 4 0 2 2 0 0 1 4 0v9a6 6 0 0 1-6 6h-5a6 6 0 0 1-6-6v-8a2 2 0 0 1 4 0z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2, pointer !important;
}
/* the theme's decorative cursor would sit under the bigger one */
html.a11y-big-cursor :is(.cursor, .mouse-cursor, #magic-cursor, #ball) { display: none !important; }

/* ---------- reading guide ---------- */
.a11y-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 44px;
    z-index: 9989;
    pointer-events: none;
    border-top: 2px solid rgba(67, 160, 71, .9);
    border-bottom: 2px solid rgba(67, 160, 71, .9);
    background-color: rgba(2, 13, 25, .12);
    display: none;
}
html.a11y-guide-on .a11y-guide { display: block; }

/* ---------- high contrast ---------- */
html.a11y-contrast body { background-color: #000 !important; color: #fff !important; }
html.a11y-contrast :is(section, div, article, aside, header, footer, nav, ul, li, figure, form) {
    background-color: transparent !important;
}
html.a11y-contrast :is(p, span, li, h1, h2, h3, h4, h5, h6, td, th, label, figcaption, blockquote, strong, em) {
    color: #fff !important;
}
html.a11y-contrast a { color: #FFE600 !important; text-decoration: underline !important; }
html.a11y-contrast :is(.main-footer, .page-header, .page-gallery, .page-blog, .page-error) { background-color: #000 !important; }
html.a11y-contrast :is(.page-header)::before { background-color: rgba(0, 0, 0, .8) !important; }
html.a11y-contrast :is(input, textarea, select) {
    background-color: #000 !important; color: #fff !important; border: 1px solid #fff !important;
}
html.a11y-contrast :is(.gallery-tile__caption, .gallery-tile__programme) { color: #fff !important; }
/* the toolbar keeps its own colours so it stays usable */
html.a11y-contrast .a11y-panel { background-color: #fff !important; }
html.a11y-contrast .a11y-panel :is(p, span, h2, button) { color: #020D19 !important; }
html.a11y-contrast .a11y-step[aria-pressed="true"],
html.a11y-contrast .a11y-toggle { background-color: #020D19 !important; }
html.a11y-contrast .a11y-step[aria-pressed="true"] span,
html.a11y-contrast .a11y-toggle { color: #fff !important; }

@media only screen and (max-width: 575px) {
    .a11y-widget { right: 14px; bottom: 14px; }
    [dir="rtl"] .a11y-widget { right: auto; left: 14px; }
    .a11y-toggle { width: 48px; height: 48px; }
    .a11y-panel { width: 270px; padding: 17px; }
}

/* ---------- skip link ----------
   Visible only once focused, so keyboard users can jump past the nav. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background-color: #020D19;
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
    left: 0;
    color: #fff;
}
#main-content:focus { outline: none; }

/* Label text that is available to screen readers but not shown on screen -
   used where the visual design relies on placeholders alone. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- footer newsletter ---------- */
.footer-newsletter { margin-top: 30px; }
.footer-newsletter h3 {
    font-family: var(--accent-font, "Onest", sans-serif);
    font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 8px;
}
.footer-newsletter p {
    font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0 0 14px; max-width: 340px;
}
.footer-newsletter .newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 380px; }
.footer-newsletter .newsletter-form input[type="email"] {
    flex: 1 1 190px; min-width: 0; padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.22); border-radius: 100px;
    background-color: rgba(255,255,255,.06); color: #fff; font-size: 14px; font-family: inherit;
}
.footer-newsletter .newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.footer-newsletter .newsletter-form input[type="email"]:focus {
    outline: none; border-color: #6FCB74; background-color: rgba(255,255,255,.1);
}
.footer-newsletter .newsletter-btn {
    flex: 0 0 auto; padding: 12px 26px; border: 0; border-radius: 100px;
    background-color: #2E7D32; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background-color .25s ease;
}
.footer-newsletter .newsletter-btn:hover,
.footer-newsletter .newsletter-btn:focus-visible { background-color: #6FCB74; color: #020D19; }
.footer-newsletter .newsletter-trap,
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.footer-newsletter__note { font-size: 13px; margin: 0 0 10px; }
.footer-newsletter__note.is-success { color: #6FCB74; }
.footer-newsletter__note.is-error { color: #FF8A8A; }