/* Project-specific styles layered on top of the Tailwind CDN build. */

:root {
    --focus-ring: #164ec2;
}

html {
    scroll-behavior: smooth;
}

body {
    font-feature-settings: "kern";
    text-rendering: optimizeLegibility;
}

/* Arabic gets a slightly larger line-height for readability. */
html[dir="rtl"] body {
    line-height: 1.8;
    font-family: 'Cairo', system-ui, sans-serif;
}

/* Visible keyboard focus everywhere — required for the audience. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link: moved off the top edge until focused (no horizontal offset, so
   it never affects RTL/LTR document width). */
.skip-link {
    position: fixed;
    inset-inline-start: 0.5rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #164ec2;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0.5rem;
}

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Every form control keeps a visible outline, even where a `border` utility
   class is missing. Tailwind colour utilities (e.g. border-red-400 on an
   invalid field) still win on specificity, so error states are unaffected. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
select,
textarea {
    border-width: 1px;
    border-style: solid;
    border-color: #cbd5e1; /* slate-300 */
    background-color: #fff;
}
input[type="checkbox"],
input[type="radio"] {
    border: 1px solid #94a3b8; /* slate-400 */
}
input[type="file"] {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.375rem 0.5rem;
    background-color: #fff;
}

/* Accessibility toolbar (bas mal-voyants) — driven by data-a11y-* on <html>,
   toggled by <x-accessibility-widget> and persisted client-side (localStorage). */

/* Text size: a rem-based scale, so both text AND the rem-based Tailwind
   spacing/gaps grow together — buttons and touch targets stay comfortable. */
html[data-a11y-text="lg"] { font-size: 115%; }
html[data-a11y-text="xl"] { font-size: 130%; }

/* High contrast: inverting the whole page is the one technique that works
   uniformly across hundreds of pre-existing Tailwind utility classes without
   a build step. Photos/logos are inverted back so they still look normal. */
html.a11y-contrast {
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}
html.a11y-contrast img,
html.a11y-contrast video {
    filter: invert(1) hue-rotate(180deg);
}

/* Underline every link, not only on hover — helps users who can't rely on colour alone. */
html.a11y-underline a { text-decoration: underline !important; }

/* Partner logos strip (home page) — a slow, seamless, single-row auto-scroll.
   The track's HTML content is duplicated once, so translating it by exactly
   -50% loops back to the start with no visible jump. */
.partners-marquee {
    overflow: hidden;
}
.partners-marquee-track {
    display: flex;
    width: max-content;
    animation: partners-marquee 34s linear infinite;
}
.partners-marquee:hover .partners-marquee-track,
.partners-marquee:focus-within .partners-marquee-track {
    animation-play-state: paused;
}
@keyframes partners-marquee {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
[dir="rtl"] .partners-marquee-track { animation-name: partners-marquee-rtl; }
@keyframes partners-marquee-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
    .partners-marquee-track { animation: none; }
}

/* Rich-text blocks coming from admin-authored HTML (campaigns, pages). */
.prose-content h2 { font-size: 1.375rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.prose-content h3 { font-size: 1.125rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.prose-content p { margin: 0.75rem 0; }
.prose-content ul { list-style: disc; padding-inline-start: 1.5rem; margin: 0.75rem 0; }
.prose-content ol { list-style: decimal; padding-inline-start: 1.5rem; margin: 0.75rem 0; }
.prose-content a { color: #164ec2; text-decoration: underline; }

/* Header dropdowns opened by a tap on touch screens (hover menus cannot be opened without a mouse). */
header .group.is-open > div.absolute { display: block; }