/* ============================================================
   css/style.css — Sitewide styles, tokens, a11y utilities
   ============================================================ */

/* --- Cairo Font (100% local — no Google CDN) -------------- */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../vendor/fonts/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../vendor/fonts/cairo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                   U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
                   U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design Tokens ---------------------------------------- */
:root {
    --background:              #ffffff;
    --foreground:              #1a1a2e;
    --card:                    #ffffff;
    --card-foreground:         #1a1a2e;
    --popover:                 #ffffff;
    --popover-foreground:      #1a1a2e;
    --primary:                 #10b981;
    --primary-foreground:      #ffffff;
    --secondary:               #3b82f6;
    --secondary-foreground:    #ffffff;
    --muted:                   #f0fdf4;
    --muted-foreground:        #6b7280;
    --accent:                  #e0f2fe;
    --accent-foreground:       #1a1a2e;
    --destructive:             #ef4444;
    --destructive-foreground:  #ffffff;
    --border:                  rgba(0, 0, 0, 0.08);
    --input:                   transparent;
    --ring:                    #10b981;
    --radius:                  0.75rem;
    --font-family:             'Cairo', sans-serif;
}

/* --- Base ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    font-family: var(--font-family);
    font-size: 16px;
    direction: rtl;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    margin: 0;
    overflow-x: hidden;
    /* Minimum WCAG AA contrast guaranteed via token colours */
}

/* --- Skip Navigation (Accessibility) --------------------- */
/* Allows keyboard users to jump straight to main content */
.skip-link {
    position: absolute;
    top: -100%;
    right: 0;
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 700;
    font-size: 1rem;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--foreground);
    outline-offset: 2px;
}

/* --- Focus Visible (Keyboard Navigation) ----------------- */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Remove outline for mouse users only */
:focus:not(:focus-visible) {
    outline: none;
}

/* --- Screen Reader Only ---------------------------------- */
/* Hides text visually but keeps it accessible to assistive tech */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Hero / card images ---------------------------------- */
.hero-image {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

.hero-image:hover {
    transform: scale(1.02);
}

/* ============================================================
   ACCORDION (max-height — universal browser support)
   ============================================================

   Expected HTML:
   <div class="accordion-item" data-state="closed">
     <button class="accordion-trigger" aria-expanded="false" aria-controls="ID">
       <span>Question</span>
       <i class="accordion-chevron" data-lucide="chevron-down" aria-hidden="true"></i>
     </button>
     <div class="accordion-content" id="ID" role="region" aria-labelledby="TRIGGER_ID">
       <div class="px-6 pb-6">Answer</div>
     </div>
   </div>
*/

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.accordion-item[data-state="open"] > .accordion-content {
    max-height: 600px;      /* ceiling well above any realistic content height */
}

/* Chevron icon rotation */
.accordion-chevron {
    transition: transform 0.35s ease;
    flex-shrink: 0;
}
.accordion-item[data-state="open"] .accordion-chevron {
    transform: rotate(180deg);
}

/* ============================================================
   SCROLL ENTRANCE ANIMATIONS
   Add class to element; JS adds .visible when in viewport.
   Optional attribute: data-delay="0.2" (seconds)
   ============================================================ */

.fade-in-up,
.fade-in-right,
.fade-in-left {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.fade-in-up    { transform: translateY(24px); }
.fade-in-right { transform: translateX(40px); }
.fade-in-left  { transform: translateX(-40px); }

.fade-in-up.visible,
.fade-in-right.visible,
.fade-in-left.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .fade-in-right,
    .fade-in-left {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .accordion-content {
        transition: none;
    }
    .accordion-chevron {
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
}