/*
Theme Name:   Skole Child – ALFJR Academy
Theme URI:    https://alfjracademy.com
Description:  Update-safe child theme for the VamTam "Skole" theme, carrying the ALFJR Academy 2026 design system: brand palette (60/30/10), Readex Pro bilingual typography, fluid type scale, and full RTL/LTR support via CSS logical properties.
Author:       ALFJR Academy
Template:     skole
Version:      1.0.0
Text Domain:  skole-child
*/

/* =====================================================================
   1) DESIGN TOKENS  (single source of truth — change colors here only)
   ---------------------------------------------------------------------
   Palette taken directly from the official ALFJR brand book (Colors.pdf)
   and tuned for WCAG AA contrast (verified with a contrast calculator).
   ===================================================================== */
:root {
  /* --- Brand core (from brand book) --- */
  --alfjr-navy:        #242A40; /* primary ink / structural 30%            */
  --alfjr-cyan:        #02DAD9; /* accent 10% — CTA BACKGROUND (navy text) */
  --alfjr-grey:        #F2F2F2; /* light surface / dominant 60%            */

  /* --- Brand secondary (program category coding only) --- */
  --alfjr-green:       #4BB53E; /* Quran / success            */
  --alfjr-teal:        #2B9DA3; /* Arabic                     */
  --alfjr-red:         #F14B4B; /* Islamic studies / alerts   */
  --alfjr-gold:        #F2B139; /* Learning difficulties / highlight */

  /* --- Accessible (AA) variants for TEXT, LINKS & white-text buttons ---
     The bright brand hues fail contrast as text on white, so these
     darker, on-brand variants are used wherever text/links appear.   */
  --alfjr-cyan-deep:   #017777; /* links & icons on light bg (AA 5.4:1)   */
  --alfjr-cyan-btn:    #018282; /* cyan button w/ WHITE text (AA 4.65:1)  */
  --alfjr-green-deep:  #347E2B;
  --alfjr-teal-deep:   #1E6D72;

  /* --- Semantic surfaces & text --- */
  --surface:           #FFFFFF; /* dominant canvas            */
  --surface-alt:       var(--alfjr-grey);
  --surface-invert:    var(--alfjr-navy);
  --text-strong:       var(--alfjr-navy);
  --text-body:         #3A4156; /* softened navy for long-form reading    */
  --text-muted:        #6B7280;
  --text-on-dark:      #FFFFFF;
  --border:            #E2E5EC;

  /* --- Tints for soft section backgrounds & badges (from tonal ramp) --- */
  --cyan-50:  #E8FBFB; --cyan-100: #C9F6F6; --cyan-800: #075756;
  --gold-50:  #FEF6E6; --green-50: #EDF7EA; --teal-50: #E9F4F5; --red-50: #FEECEC;

  /* --- Radius, elevation, focus --- */
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(36,42,64,.06), 0 2px 8px rgba(36,42,64,.06);
  --shadow:    0 8px 24px rgba(36,42,64,.10);
  --shadow-lg: 0 20px 48px rgba(36,42,64,.14);
  --focus:     0 0 0 3px rgba(2,218,217,.55);

  /* --- Fonts --- */
  --font-ui: "Readex Pro", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;

  /* =====================================================================
     2) FLUID TYPE SCALE  (clamp: min, preferred-vw, max)
     Scales smoothly from 360px phones to large desktops — no breakpoints
     needed. Ratio ~1.25 (major third).
     ===================================================================== */
  --fs-300: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);  /* small / captions */
  --fs-400: clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);  /* body            */
  --fs-500: clamp(1.20rem, 1.10rem + 0.45vw, 1.45rem);  /* lead / h5       */
  --fs-600: clamp(1.45rem, 1.25rem + 0.90vw, 1.95rem);  /* h4              */
  --fs-700: clamp(1.80rem, 1.45rem + 1.60vw, 2.60rem);  /* h3              */
  --fs-800: clamp(2.20rem, 1.65rem + 2.60vw, 3.40rem);  /* h2              */
  --fs-900: clamp(2.70rem, 1.90rem + 3.80vw, 4.40rem);  /* h1 / hero       */

  /* --- Spacing scale (whitespace rhythm) --- */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-8: 3rem;   --space-10: 4rem;
  --space-12: 6rem;  --space-16: 8rem;

  --container: 1200px;
  --line-tight: 1.18;
  --line-body: 1.7;
}

/* =====================================================================
   3) BUNDLED BILINGUAL FONT — Readex Pro (Arabic + Latin, OFL licensed)
   Files live in /skole-child/fonts/. font-display:swap avoids invisible
   text while loading.
   ===================================================================== */
@font-face{font-family:"Readex Pro";src:url("fonts/ReadexPro-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Readex Pro";src:url("fonts/ReadexPro-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Readex Pro";src:url("fonts/ReadexPro-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Readex Pro";src:url("fonts/ReadexPro-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Readex Pro";src:url("fonts/ReadexPro-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}

/* =====================================================================
   4) BASE TYPOGRAPHY & READABILITY
   Applied site-wide. Elementor widgets inherit unless individually set,
   so this lifts the whole site at once.
   ===================================================================== */
body,
.elementor-widget-container,
.elementor-button {
  font-family: var(--font-ui);
}
body{
  font-size: var(--fs-400);
  line-height: var(--line-body);
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-ui);
  color: var(--text-strong);
  line-height: var(--line-tight);
  font-weight: 700;
  /* logical margin so RTL & LTR both flow correctly */
  margin-block: 0 var(--space-4);
}
h1{font-size:var(--fs-900);} h2{font-size:var(--fs-800);}
h3{font-size:var(--fs-700);} h4{font-size:var(--fs-600);}
h5{font-size:var(--fs-500);} h6{font-size:var(--fs-400);}

p{ margin-block: 0 var(--space-4); max-width: 70ch; }
/* keep generous measure for English, but let centered hero text breathe */
[dir="rtl"] p{ max-width: 72ch; }

a{ color: var(--alfjr-cyan-deep); text-decoration: none; transition: color .18s ease; }
a:hover{ color: var(--alfjr-navy); }

/* Visible keyboard focus everywhere (accessibility) */
a:focus-visible, button:focus-visible,
.elementor-button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm);
}

/* =====================================================================
   5) BUTTONS  (contrast-safe brand CTAs)
   - Primary  : cyan bg + NAVY text   (AA 8.1:1)  → main "Free trial" CTA
   - Secondary: navy bg + WHITE text  (AA 14:1)
   Targets both Elementor buttons and theme/WooCommerce buttons.
   ===================================================================== */
.elementor-button,
.btn, button.button, input[type="submit"], .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:600; line-height:1.1;
  padding-block: .85em; padding-inline: 1.6em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  min-height: 48px; /* mobile touch target (>=44px) */
}
/* Primary */
.elementor-button:not(.is-secondary),
.btn-primary, input[type="submit"]{
  background: var(--alfjr-cyan);
  color: var(--alfjr-navy);
  box-shadow: var(--shadow-sm);
}
.elementor-button:not(.is-secondary):hover,
.btn-primary:hover, input[type="submit"]:hover{
  background: var(--alfjr-cyan-btn);
  color:#fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
/* Secondary */
.is-secondary, .btn-secondary{
  background: var(--alfjr-navy); color:#fff;
}
.is-secondary:hover, .btn-secondary:hover{ background:#101524; transform:translateY(-2px); }

/* =====================================================================
   6) LAYOUT HELPERS & WHITESPACE
   ===================================================================== */
.alfjr-container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5); }
.alfjr-section{ padding-block: clamp(3rem, 6vw, var(--space-12)); }
.alfjr-section--alt{ background: var(--surface-alt); }

/* Card pattern reused for programs / features / testimonials */
.alfjr-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space-6);
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .2s ease;
  height:100%;
}
.alfjr-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

/* =====================================================================
   7) RTL / LTR PERFECTION  (CSS logical properties)
   The whole system above already uses margin-block / padding-inline /
   text-align:start, so Arabic (RTL) and English (LTR) mirror correctly
   with NO duplicated rules. A few explicit safeguards below.
   ===================================================================== */
body, p, li, h1,h2,h3,h4,h5,h6{ text-align: start; }
.alfjr-card{ text-align: start; }

/* Mirror any decorative left/right icons automatically in RTL */
[dir="rtl"] .alfjr-flip{ transform: scaleX(-1); }

/* Numbers & Latin snippets inside Arabic stay LTR & readable */
[dir="rtl"] .ltr-inline{ direction:ltr; unicode-bidi:isolate; }

/* Arabic reads more comfortably with slightly looser leading */
[dir="rtl"] body{ line-height: 1.85; }

/* =====================================================================
   8) SMALL POLISH — images, focus, selection