/*
Theme Name: Al Ihsan
Theme URI: https://alihsane.org
Author: Al Ihsan — ONG pour l'Action Humanitaire
Author URI: https://alihsane.org
Description: Thème WordPress trilingue (Arabe par défaut · RTL-first / Français / Anglais), sécurisé et de niveau agence, pour l'ONG Al-Ihsan pour l'Action Humanitaire (Sénégal). Design system OKLCH issu du logo (vert forêt + or/blé), CSS moderne 2026, carte GIS du Sénégal, formulaire de don + offres de don, médiathèque publique, demande d'aide avec suivi, WhatsApp-first, hardening complet + 2FA email.
Version: 1.7.13
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-ihsan
Tags: nonprofit, charity, rtl-language-support, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, full-width-template
*/

/* ════════════════════════════════════════════════════════════════════
   AL IHSAN — Fondation : cascade layers, design tokens, reset, base.
   Les composants/sections/responsive vivent dans assets/css/theme.css.
   Couleurs extraites du logo officiel (épis de blé + pousse verte).
   ════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, utilities;

/* ─────────────────────────────  TOKENS  ───────────────────────────── */
@layer tokens {
  :root {
    color-scheme: light;

    /* — Marque (OKLCH, gamut large) — les hex en commentaire sont indicatifs (repère sRGB) ;
       aucun repli legacy n'est émis : baseline 2026 (tous navigateurs cibles supportent oklch). — */
    --pine-deep: oklch(0.293 0.069 157);   /* #01361e */
    --forest:    oklch(0.369 0.095 152);   /* #044d24 */
    --leaf:      oklch(0.461 0.081 138);   /* #416335 */
    --gold:      oklch(0.652 0.139 68);    /* #c67d0f */
    --wheat:     oklch(0.738 0.122 75);    /* #d79e49 */
    --orange:    oklch(0.700 0.160 55);    /* #e08a2e — CTA */
    --cream:     oklch(0.911 0.042 84);    /* #efe0c3 */
    --sage:      oklch(0.832 0.032 117);   /* #c6cbb4 */

    /* — Rôles sémantiques (pilotables par le Customizer via --brand-*) — */
    --brand:        var(--forest);
    --brand-strong: var(--pine-deep);
    --brand-soft:   color-mix(in oklch, var(--forest) 12%, transparent);
    --accent:       var(--gold);
    --accent-soft:  color-mix(in oklch, var(--gold) 16%, transparent);
    --cta:          var(--orange);
    --cta-strong:   oklch(0.63 0.16 55); /* repli statique (≈ --orange assombri) pour navigateurs sans relative color */
    --cta-strong:   oklch(from var(--orange) calc(l - 0.07) c h);

    --bg:        oklch(0.985 0.006 95);          /* papier crème très clair */
    --bg-alt:    color-mix(in oklch, var(--cream) 55%, white);
    --surface:   #ffffff;
    --surface-2: color-mix(in oklch, var(--sage) 26%, white);
    --ink:       oklch(0.24 0.02 158);           /* texte */
    --ink-soft:  color-mix(in oklch, var(--ink) 66%, var(--bg));
    --on-brand:  oklch(0.97 0.012 95);           /* texte sur fond vert */
    --border:    color-mix(in oklch, var(--ink) 14%, transparent);
    --border-strong: color-mix(in oklch, var(--ink) 24%, transparent);

    /* — Drapeau Sénégal (accents ponctuels) — */
    --sn-green: #00853f;
    --sn-gold:  #fdef42;
    --sn-red:   #e31b23;

    /* — Statuts (badges demande d'aide, projets) — */
    --st-pending: var(--gold);
    --st-info:    #2563eb;
    --st-ok:      var(--leaf);
    --st-closed:  #6b7280;
    --st-danger:  var(--sn-red);

    /* — Typographie : familles (self-host optionnel via assets/fonts) — */
    --font-display: "Fraunces", "Reem Kufi", ui-serif, "Georgia", "Times New Roman", serif;
    --font-body:    "Readex Pro", "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Tahoma", sans-serif;
    --font-ar-display: "Reem Kufi", "Aref Ruqaa", "Readex Pro", "Noto Kufi Arabic", "Tahoma", serif;
    --font-ar-body: "Readex Pro", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, "Segoe UI", "Tahoma", sans-serif;

    /* — Échelle fluide (clamp, ratio ~1.25) — */
    --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
    --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
    --step-2:  clamp(1.56rem, 1.38rem + 0.90vw, 2.20rem);
    --step-3:  clamp(1.95rem, 1.64rem + 1.55vw, 3.10rem);
    --step-4:  clamp(2.44rem, 1.90rem + 2.70vw, 4.40rem);
    --step-5:  clamp(3.05rem, 2.20rem + 4.25vw, 5.80rem);
    --leading-tight: 1.1;
    --leading-snug:  1.3;
    --leading-body:  1.65;
    --tracking-display: -0.015em;

    /* — Rythme d'espacement — */
    --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem;
    --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem;
    --space-xl: 4rem; --space-2xl: 6.5rem; --space-3xl: 10rem;

    /* — Mouvement — */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* léger dépassement « ressort » */
    --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-xslow: 900ms;

    /* — Profondeur & lueurs « award » (élévations chaudes, teintées marque) — */
    --shadow-3:    0 30px 80px -20px oklch(0.2 0.04 158 / .35), 0 10px 30px -12px oklch(0.2 0.04 158 / .22);
    --shadow-gold: 0 18px 50px -16px color-mix(in oklch, var(--gold) 55%, transparent);
    --shadow-pop:  0 1px 0 color-mix(in oklch, white 40%, transparent) inset, var(--shadow-2);
    --glow-gold:   radial-gradient(circle, color-mix(in oklch, var(--wheat) 42%, transparent), transparent 68%);
    --hairline:    linear-gradient(90deg, transparent, color-mix(in oklch, var(--gold) 70%, transparent), transparent);
    /* Grain de film (SVG fractal, encodé) — texture subtile sur les fonds sombres */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

    /* — Formes & élévation — */
    --radius-xs: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px;
    --shadow-1: 0 1px 2px oklch(0.2 0.03 158 / .08), 0 6px 20px oklch(0.2 0.03 158 / .08);
    --shadow-2: 0 10px 44px oklch(0.2 0.03 158 / .16);
    --ring: 0 0 0 3px color-mix(in oklch, var(--gold) 55%, transparent);

    /* — Grille — */
    --measure: 68ch;
    --container: 1240px;
    --container-narrow: 880px;
    --gutter: clamp(1rem, 4vw, 3rem);
    --header-h: 76px;
    --tabbar-h: 76px;   /* hauteur tabbar mobile — réserve basse du body + offset wa-float */
  }

  /* Mode sombre (auto + manuel via [data-theme]) */
  :root[data-theme="dark"],
  :root[data-theme="auto"] {
    color-scheme: dark;
  }
  /* — Palette « nuit Sahel » : fonds verts profonds, vert clair lisible, or vif — */
  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
      --bg:            oklch(0.168 0.021 158);
      --bg-alt:        oklch(0.205 0.023 158);
      --surface:       oklch(0.238 0.025 158);
      --surface-2:     oklch(0.282 0.027 158);
      --ink:           oklch(0.965 0.012 95);
      --ink-soft:      color-mix(in oklch, var(--ink) 80%, var(--bg));
      --brand:         oklch(0.80 0.13 150);
      --brand-soft:    color-mix(in oklch, var(--leaf) 38%, transparent);
      --gold:          oklch(0.80 0.135 68);
      --accent-soft:   color-mix(in oklch, var(--gold) 28%, transparent);
      --border:        color-mix(in oklch, var(--ink) 26%, transparent);
      --border-strong: color-mix(in oklch, var(--ink) 42%, transparent);
      --shadow-1:      0 1px 2px oklch(0 0 0 / .5), 0 10px 30px oklch(0 0 0 / .45);
      --shadow-2:      0 18px 56px oklch(0 0 0 / .55);
    }
  }
  :root[data-theme="dark"] {
    --bg:            oklch(0.168 0.021 158);
    --bg-alt:        oklch(0.205 0.023 158);
    --surface:       oklch(0.238 0.025 158);
    --surface-2:     oklch(0.282 0.027 158);
    --ink:           oklch(0.965 0.012 95);
    --ink-soft:      color-mix(in oklch, var(--ink) 80%, var(--bg));
    --brand:         oklch(0.80 0.13 150);
    --brand-soft:    color-mix(in oklch, var(--leaf) 38%, transparent);
    --gold:          oklch(0.80 0.135 68);
    --accent-soft:   color-mix(in oklch, var(--gold) 28%, transparent);
    --border:        color-mix(in oklch, var(--ink) 26%, transparent);
    --border-strong: color-mix(in oklch, var(--ink) 42%, transparent);
    --shadow-1:      0 1px 2px oklch(0 0 0 / .5), 0 10px 30px oklch(0 0 0 / .45);
    --shadow-2:      0 18px 56px oklch(0 0 0 / .55);
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-xslow: 0ms; }
  }
}

/* ─────────────────────────────  RESET  ───────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; -webkit-tap-highlight-color: transparent; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-height: 100vh; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; }
  a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: 0.18em; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4) { line-height: var(--leading-tight); text-wrap: balance; overflow-wrap: break-word; }
  :where(p, li) { text-wrap: pretty; overflow-wrap: break-word; }
  table { border-collapse: collapse; }
  :target { scroll-margin-top: calc(var(--header-h) + 1rem); }
}

/* ─────────────────────────────  BASE  ───────────────────────────── */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink);
    background: var(--bg);
    /* Filet anti-débordement horizontal : `hidden` (universel) pour les anciens
       WebView Android sans `overflow: clip`, puis `clip` (moderne, compatible sticky). */
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
  }

  /* RTL-first : la langue arabe (défaut) utilise les fontes arabes */
  html[lang="ar"] body,
  html[dir="rtl"] body { font-family: var(--font-ar-body); }
  html[lang="ar"] :where(h1,h2,h3,h4,.display),
  html[dir="rtl"] :where(h1,h2,h3,h4,.display) { font-family: var(--font-ar-display); }

  h1, .h1 { font-family: var(--font-display); font-size: var(--step-4); letter-spacing: var(--tracking-display); font-weight: 600; }
  h2, .h2 { font-family: var(--font-display); font-size: var(--step-3); letter-spacing: var(--tracking-display); font-weight: 600; }
  h3, .h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }
  h4, .h4 { font-size: var(--step-1); font-weight: 600; }

  a:where(:not([class])):hover { color: var(--brand); }

  /* Garde-fou icônes : les SVG inline (ihsan_icon) n'ont pas de dimensions ;
     on leur donne une taille d'icône par défaut. Specificité 0 (:where) + couche
     base → toute règle `.x svg { width }` (couche components) reprend la main
     (carte GIS, drapeau, vague du hero, programmes…). */
  :where(svg:not([width]):not([height])) { width: 1.25em; height: 1.25em; }
  .eyebrow svg { inline-size: 1.1em; block-size: 1.1em; flex: 0 0 auto; }
  .card__meta svg, .chip svg, .breadcrumb svg { inline-size: 1.05em; block-size: 1.05em; flex: 0 0 auto; }

  :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
  ::selection { background: var(--accent-soft); color: var(--brand-strong); }

  /* Liens d'évitement / accessibilité */
  .skip-link {
    position: absolute; inset-inline-start: 1rem; top: -100px;
    background: var(--brand-strong); color: var(--on-brand);
    padding: .7em 1.2em; border-radius: var(--radius-xs); z-index: 1000;
    transition: top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { top: 1rem; }

  .screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}