/* ==========================================================================
   Turath Accessibility — Site-wide WCAG fixes
   --------------------------------------------------------------------------
   Independent of the toolbar UI. These rules raise the baseline accessibility
   of the theme/content for every visitor regardless of their preferences.
   Targets WCAG 2.1 AA, with some 2.5.5 (target size) at AAA level.
   Uses logical properties throughout so it works in RTL (Arabic, primary)
   and LTR contexts.
   ========================================================================== */

/* CSS custom property for link contrast — themes can override per section. */
:root {
    --t-a11y-link-color: #04194e;
    --t-a11y-focus-color: #04194e;
    --t-a11y-skip-bg: #04194e;
    --t-a11y-skip-fg: #ffffff;
}

/* --------------------------------------------------------------------------
   1. [hidden] is sometimes overridden by themes — re-assert.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. Anchor scroll padding so anchor targets are not hidden under
      sticky headers (Blocksy default header height ~ 80px).
   -------------------------------------------------------------------------- */
html {
    scroll-padding-block-start: 80px;
}

/* --------------------------------------------------------------------------
   3. Strong, visible focus ring (WCAG 2.4.7 Focus Visible).
      Using :focus-visible avoids ring-on-mouse-click while keeping it for
      keyboard users. We add :focus as a graceful fallback for browsers that
      don't yet support :focus-visible (very old Safari).
   -------------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
summary:focus {
    outline: 3px solid var(--t-a11y-focus-color);
    outline-offset: 2px;
}

@supports selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus,
    summary:focus { outline: none; }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible,
    summary:focus-visible {
        outline: 3px solid var(--t-a11y-focus-color);
        outline-offset: 2px;
    }
}

/* --------------------------------------------------------------------------
   4. Minimum target size — WCAG 2.5.5 (AAA) / 2.5.8 (AA).
      Apply to interactive controls without breaking inline links.
   -------------------------------------------------------------------------- */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.wp-block-button__link {
    min-block-size: 44px;
    min-inline-size: 44px;
}

/* --------------------------------------------------------------------------
   5. Form field focus contrast (WCAG 1.4.11 Non-text Contrast).
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus {
    border: 2px solid currentColor;
}

/* --------------------------------------------------------------------------
   6. Body links — many themes strip text-decoration. Restore it inside
      content areas (Blocksy + Gutenberg conventions).
   -------------------------------------------------------------------------- */
.entry-content a,
article a,
.ct-content-block a,
.wp-block-post-content a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Make sure these links meet the link-color contrast variable. */
.entry-content a,
article a {
    color: var(--t-a11y-link-color);
}

/* --------------------------------------------------------------------------
   7. Skip link — provide our own in case the theme's is hidden or styled
      out. Visible only when focused.
      The plugin doesn't inject the markup itself (themes already do), but
      these rules style any [href="#content"] / .skip-link consistently.
   -------------------------------------------------------------------------- */
.skip-link,
a[href="#content"].screen-reader-text,
a.screen-reader-text {
    position: fixed;
    inset-block-start: -100px;
    inset-inline-end: 16px; /* visually top-left in RTL, top-right in LTR */
    z-index: 100000;
    background: var(--t-a11y-skip-bg);
    color: var(--t-a11y-skip-fg) !important;
    padding: 12px 18px;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    text-decoration: none !important;
    transition: top .2s ease;
}

.skip-link:focus,
a[href="#content"].screen-reader-text:focus,
a.screen-reader-text:focus {
    inset-block-start: 0;
    outline: 3px solid #ffd400;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Visually hidden helper used by page-fixes.js for the injected H1
   on pages that lack one. Standard WP "screen-reader-text" pattern.
   -------------------------------------------------------------------------- */
.a11y-screen-reader-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   8. Reduced-motion: respect OS-level preference.
      (The toolbar's "reduce-motion" preference is a separate, stronger
      override applied to <html> by JS.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   9. Image accessibility — never let images break layout, and ensure
      decorative images don't intercept clicks needlessly.
   -------------------------------------------------------------------------- */
img {
    max-inline-size: 100%;
    block-size: auto;
}

img[alt=""] { /* decorative */
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Tables — give them a sensible accessible default if theme doesn't.
   -------------------------------------------------------------------------- */
table caption {
    text-align: start;
    font-weight: 700;
    padding-block-end: 6px;
}

th {
    text-align: start;
}