/*
 * Theme Name:        Astra Child — Learn for Sudan
 * Theme URI:         https://stage.learn4sudan.org
 * Description:       Learn for Sudan child theme built on Astra. RTL-first, Arabic (Cairo) typography, minimal-footprint architecture.
 * Author:            Learn for Sudan Dev Team
 * Author URI:        https://learn4sudan.org
 * Template:          astra
 * Version:           1.0.0
 * Text Domain:       astra-child-l4s
 * Tags:              education, nonprofit, arabic, rtl, dark
 */

/* ============================================================
   DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Learn for Sudan Brand Guidelines v2.0 — Material Design 3
   ============================================================ */
:root {
  /* ─── Material Design 3 Color Palette ───────────────────── */

  /* Primary */
  --l4s-primary:                #003d9a;   /* Deep Blue — CTAs, links, active states */
  --l4s-primary-container:      #1454c4;   /* Slightly lighter blue */
  --l4s-primary-fixed:          #dae2ff;   /* Very light blue — pill badges, chips */
  --l4s-primary-fixed-dim:      #b2c5ff;
  --l4s-on-primary:             #ffffff;
  --l4s-on-primary-fixed:       #001847;   /* Dark text on light blue chips */
  --l4s-on-primary-container:   #c5d3ff;
  --l4s-on-primary-fixed-variant: #0040a1;
  --l4s-inverse-primary:        #b2c5ff;

  /* Secondary */
  --l4s-secondary:              #2e6c00;
  --l4s-secondary-container:    #b3f58a;
  --l4s-secondary-fixed:        #dde2f3;
  --l4s-secondary-fixed-dim:    #c1c6d7;
  --l4s-on-secondary:           #ffffff;
  --l4s-on-secondary-fixed:     #161c27;
  --l4s-on-secondary-fixed-variant: #414754;
  --l4s-on-secondary-container: #0a2100;

  /* Tertiary (green accent — used sparingly) */
  --l4s-tertiary:               #006a6a;
  --l4s-tertiary-container:     #6ff6f6;
  --l4s-tertiary-fixed:         #ffdbce;
  --l4s-tertiary-fixed-dim:     #ffb598;
  --l4s-on-tertiary:            #ffffff;
  --l4s-on-tertiary-container:  #002020;
  --l4s-on-tertiary-fixed:      #370e00;
  --l4s-on-tertiary-fixed-variant: #7e2c00;

  /* Surface Scale (Light theme) */
  --l4s-surface:                #f8f9fa;   /* Page background */
  --l4s-surface-bright:         #f8f9fa;
  --l4s-surface-dim:            #d9dadb;
  --l4s-surface-variant:        #e1e3e4;
  --l4s-surface-tint:           #003d9a;
  --l4s-surface-container-lowest: #ffffff;   /* Cards */
  --l4s-surface-container-low:  #f3f4f5;   /* Subtle section backgrounds */
  --l4s-surface-container:      #edeeef;
  --l4s-surface-container-high: #e7e8e9;
  --l4s-surface-container-highest: #e1e3e4;
  --l4s-inverse-surface:        #2e3132;
  --l4s-inverse-on-surface:     #f0f1f2;

  /* On-surface text */
  --l4s-on-surface:             #191c1d;   /* Main text — near-black */
  --l4s-on-surface-variant:     #434653;   /* Muted/secondary text */
  --l4s-on-background:          #191c1d;
  --l4s-background:             #f8f9fa;

  /* Outline */
  --l4s-outline:                #737785;
  --l4s-outline-variant:        #c3c6d6;

  /* Error */
  --l4s-error:                  #ba1a1a;
  --l4s-error-container:        #ffdad6;
  --l4s-on-error:               #ffffff;
  --l4s-on-error-container:     #93000a;

  /* ─── Legacy Semantic Aliases (mapped to new palette) ─────── */
  /* These keep backward compatibility with existing templates   */
  --l4s-navy:             var(--l4s-primary);
  --l4s-dark-blue:        var(--l4s-primary);
  --l4s-mid-blue:         var(--l4s-primary);
  --l4s-trust-blue:       var(--l4s-primary);
  --l4s-navy-600:         var(--l4s-primary);
  --l4s-focus-navy:       #001847;
  --l4s-azure:            #003d9a;
  --l4s-sky:              #1454c4;
  --l4s-sky-light:        var(--l4s-primary-fixed);
  --l4s-white:            #ffffff;
  --l4s-off-white:        var(--l4s-surface-container-low);

  /* Signature gradient (primary CTA) */
  --l4s-gradient:         linear-gradient(135deg, #003d9a 0%, #1454c4 100%);

  /* Action color — mapped to Deep Blue */
  --l4s-gold:             #003d9a;   /* Deep Blue */
  --l4s-amber:            #003d9a;   /* Deep Blue */
  --l4s-amber-light:      #1454c4;   /* Slightly lighter blue */
  --l4s-action-amber:     var(--l4s-amber);
  --l4s-action-amber-light: var(--l4s-amber-light);
  --l4s-accent:           var(--l4s-primary);
  --l4s-cta:              var(--l4s-primary);

  /* Sudan Identity */
  --l4s-green-flag:            #007a3d;
  --l4s-red:              #ce1126;

  /* Neutral Scale (mapped to surface containers) */
  --l4s-gray-50:          var(--l4s-surface-container-low);
  --l4s-gray-100:         var(--l4s-surface-container);
  --l4s-gray-300:         var(--l4s-outline-variant);
  --l4s-gray-500:         var(--l4s-on-surface-variant);
  --l4s-gray-700:         #434653;
  --l4s-gray-900:         var(--l4s-on-surface);

  /* Semantic Layout */
  --l4s-bg-primary:       var(--l4s-surface);
  --l4s-bg-secondary:     var(--l4s-surface-container-low);
  --l4s-bg-light:         var(--l4s-surface-container-lowest);
  --l4s-text-on-dark:     var(--l4s-on-primary);
  --l4s-text-on-light:    var(--l4s-on-surface);
  --l4s-text-muted:       var(--l4s-on-surface-variant);

  /* Typography — matches code.html design system exactly:
     Manrope  → headlines, nav links, labels  (font-headline / font-label)
     Inter    → body copy                     (font-body)
     Cairo    → Arabic / RTL                  (font-arabic) */
  --l4s-font-arabic:         'Cairo', 'Tajawal', sans-serif;
  --l4s-font-latin:          'Inter', system-ui, sans-serif;
  --l4s-font-latin-heading:  'Manrope', system-ui, sans-serif;
  --l4s-font-heading:        var(--l4s-font-latin-heading); /* alias */
  --l4s-font-size-xs:        0.75rem;
  --l4s-font-size-sm:     0.875rem;
  --l4s-font-size-base:   1rem;
  --l4s-font-size-lg:     1.125rem;
  --l4s-font-size-xl:     1.25rem;
  --l4s-font-size-2xl:    1.5rem;
  --l4s-font-size-3xl:    1.875rem;
  --l4s-font-size-4xl:    2.25rem;
  --l4s-font-size-5xl:    3rem;
  --l4s-font-size-6xl:    3.75rem;

  /* Spacing */
  --l4s-space-1:    0.25rem;
  --l4s-space-2:    0.5rem;
  --l4s-space-3:    0.75rem;
  --l4s-space-4:    1rem;
  --l4s-space-5:    1.25rem;
  --l4s-space-6:    1.5rem;
  --l4s-space-8:    2rem;
  --l4s-space-10:   2.5rem;
  --l4s-space-12:   3rem;
  --l4s-space-16:   4rem;
  --l4s-space-20:   5rem;
  --l4s-space-24:   6rem;
  --l4s-space-32:   8rem;

  /* Border Radius */
  --l4s-radius-sm:    0.375rem;
  --l4s-radius-md:    0.625rem;
  --l4s-radius-lg:    0.75rem;
  --l4s-radius-xl:    1.25rem;
  --l4s-radius-2xl:   2rem;
  --l4s-radius-full:  9999px;

  /* Shadows — tuned for the new light theme */
  --l4s-shadow-sm:   0 1px 3px rgba(0,61,154,0.06), 0 1px 2px rgba(0,61,154,0.04);
  --l4s-shadow-md:   0 4px 16px rgba(0,61,154,0.08);
  --l4s-shadow-lg:   0 8px 32px rgba(0,61,154,0.12);
  --l4s-shadow-xl:   0 15px 45px rgba(0,61,154,0.10);
  --l4s-shadow-glow: 0 0 40px rgba(0,61,154,0.15);

  /* Transitions */
  --l4s-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --l4s-duration:         200ms;
  --l4s-duration-slow:    400ms;

  /* Layout */
  --l4s-container:        1200px;
  --l4s-container-sm:     760px;
  --l4s-section-py:       var(--l4s-space-20);
}

/* ============================================================
   GLOBAL BASE OVERRIDES
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--l4s-font-latin);
  font-size: var(--l4s-font-size-base);
  line-height: 1.7;
  color: var(--l4s-text-on-light);
  background-color: var(--l4s-white);
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   TYPOGRAPHY GLOBAL
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--l4s-font-latin-heading);
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
  margin-top: 0;
}

/* ============================================================
   BILINGUAL & DIRECTIONAL AUDIT SYSTEM
   ============================================================ */
/* Arabic / RTL Overrides */
html[dir="rtl"] body,
body.rtl,
body.lang-ar {
  font-family: var(--l4s-font-arabic);
  direction: rtl;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6,
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4, body.lang-ar h5, body.lang-ar h6 {
  font-family: var(--l4s-font-arabic);
}

a {
  color: var(--l4s-mid-blue);
  text-decoration: none;
  transition: color var(--l4s-duration) var(--l4s-ease);
}

a:hover {
  color: var(--l4s-sky);
}

/* ============================================================
   ASTRA OVERRIDES — Scoped to not break existing content
   ============================================================ */

/* Match code.html exactly: nav links, buttons, and labels use Manrope */
.main-header-bar,
.ast-primary-menu-disabled .ast-main-header-wrap,
.main-navigation ul li a,
.site-navigation .menu-item a,
.ast-mobile-popup-drawer .menu-item a,
.menu-item a,
nav a,
.ast-button-wrap a,
.ast-header-custom-item a {
  font-family: var(--l4s-font-latin-heading) !important;
}

/* Remove Astra's default container max-width override where we control layout */
#l4s-page-wrap .site-content,
#l4s-page-wrap .ast-container,
.l4s-page-wrap .site-content,
.l4s-page-wrap .ast-container,
.page-template-template-faq .site-content,
.page-template-template-faq .ast-container,
.page-template-template-about .site-content,
.page-template-template-about .ast-container,
.page-template-template-contact .site-content,
.page-template-template-contact .ast-container,
.page-template-template-volunteer .site-content,
.page-template-template-volunteer .ast-container,
.page-template-template-programs .site-content,
.page-template-template-programs .ast-container,
.page-template-template-donate .site-content,
.page-template-template-donate .ast-container,
.page-template-template-lms .site-content,
.page-template-template-lms .ast-container,
.page-template-template-impact .site-content,
.page-template-template-impact .ast-container,
.page-template-template-blog .site-content,
.page-template-template-blog .ast-container,
.page-template-template-courses .site-content,
.page-template-template-courses .ast-container {
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

.page-template-template-faq #primary,
.page-template-template-about #primary,
.page-template-template-contact #primary,
.page-template-template-volunteer #primary,
.page-template-template-programs #primary,
.page-template-template-donate #primary,
.page-template-template-lms #primary,
.page-template-template-impact #primary,
.page-template-template-blog #primary,
.page-template-template-courses #primary {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-template-template-faq #secondary,
.page-template-template-about #secondary,
.page-template-template-contact #secondary,
.page-template-template-volunteer #secondary,
.page-template-template-programs #secondary,
.page-template-template-donate #secondary,
.page-template-template-lms #secondary,
.page-template-template-impact #secondary,
.page-template-template-blog #secondary,
.page-template-template-courses #secondary {
  display: none !important;
}

/* Ensure Astra header transparent mode works */
.ast-header-break-point .main-header-bar {
  padding: 0;
}