/* =========================================================
   RAHEEM ACADEMY – SHARED STYLES  (add ONCE for the whole site)
   Where: Appearance > Customize > Additional CSS
          (or Site Editor > Styles > Additional CSS)
   Every block uses the wrapper class "ra" so these styles
   never clash with the theme.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=Amiri:wght@400;700&display=swap');

.ra{
  --ra-green:#17703A; --ra-green-dk:#0F4F28; --ra-green-xdk:#0B3B1E;
  --ra-green-lt:#E8F3EC; --ra-green-bg:#EEF5F0; --ra-tint:#F6FAF7;
  --ra-red:#C8352B; --ra-gold:#F7D774;
  --ra-ink:#1B2A22; --ra-muted:#3D5246; --ra-soft:#5B6B61; --ra-line:#E4E9E2;
  font-family:'Public Sans',system-ui,sans-serif; color:var(--ra-ink);
  font-size:16px; line-height:1.6; width:100%;
}
.ra *,.ra *::before,.ra *::after{box-sizing:border-box}
.ra h1,.ra h2,.ra h3,.ra h4{font-family:Figtree,sans-serif;color:inherit;margin:0;line-height:1.15;letter-spacing:normal;text-transform:none}
.ra p{margin:0}
.ra ul,.ra ol{margin:0;padding:0;list-style:none}
.ra img{max-width:100%;height:auto;display:block}
.ra a{color:var(--ra-green)}
.ra a:hover{color:var(--ra-green-dk)}
.ra svg{flex:none}

/* ---------- Layout helpers ---------- */
.ra-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.ra-sec{padding:80px 0}
.ra-split{display:flex;flex-wrap:wrap;gap:44px;align-items:center}
.ra-split>*{flex:1 1 440px;min-width:0}
.ra-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ra-sechead{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.ra-center{text-align:center;max-width:700px;margin:0 auto 36px}

/* ---------- Type ---------- */
.ra-eyebrow{display:block;font-family:Figtree,sans-serif;font-weight:700;color:var(--ra-red);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.ra-h2{font-size:clamp(28px,3.4vw,36px);font-weight:800}
.ra-lead{font-size:17px;color:var(--ra-muted)}
.ra-more{font-family:Figtree,sans-serif;font-weight:700;text-decoration:none}

/* ---------- Buttons ---------- */
.ra .ra-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;border:2px solid transparent;font-family:Figtree,sans-serif;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;line-height:1.2}
.ra .ra-btn--red{background:var(--ra-red);color:#fff}
.ra .ra-btn--red:hover{background:#A92B22;color:#fff}
.ra .ra-btn--green{background:var(--ra-green);color:#fff}
.ra .ra-btn--green:hover{background:var(--ra-green-dk);color:#fff}
.ra .ra-btn--white{background:#fff;color:var(--ra-green-dk)}
.ra .ra-btn--white:hover{background:var(--ra-green-lt);color:var(--ra-green-dk)}
.ra .ra-btn--outline{border-color:var(--ra-green);color:var(--ra-green);background:transparent}
.ra .ra-btn--outline:hover{background:var(--ra-green-lt)}
.ra .ra-btn--ghost{border-color:#fff;color:#fff;background:transparent}
.ra .ra-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.ra .ra-btn--lg{min-height:52px;font-size:17px;padding:0 26px}

/* ---------- Cards ---------- */
.ra-card{background:#fff;border:1px solid var(--ra-line);border-radius:16px;padding:22px}
.ra-card h3{font-size:18px;font-weight:800;margin-bottom:4px}
.ra-card p{color:var(--ra-muted);font-size:15px}
.ra-tile{background:var(--ra-tint);border-radius:16px;padding:22px}
.ra-tile h3{font-size:18px;font-weight:800;margin-bottom:4px}
.ra-tile p{color:var(--ra-muted);font-size:15px}
.ra-icon{width:46px;height:46px;border-radius:12px;background:var(--ra-green-lt);color:var(--ra-green);display:flex;align-items:center;justify-content:center;flex:none}

/* =========================================================
   01 HEADER
   ========================================================= */
.ra-top{background:var(--ra-green-dk);color:#E6F0E9;font-size:14px}
.ra-top .ra-wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.ra-top__links{display:flex;flex-wrap:wrap;gap:8px 24px}
.ra .ra-top a{color:#E6F0E9;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.ra-top__hours{display:flex;gap:20px;align-items:center;color:#B9D3C1}
.ra .ra-top .ra-top__sg{color:var(--ra-gold);font-weight:600}
.ra-head{background:#fff;border-bottom:1px solid var(--ra-line)}
.ra-head .ra-wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.ra .ra-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.ra-brand img{width:60px;height:60px;object-fit:contain}
.ra-brand__name{display:block;font-family:Figtree,sans-serif;font-weight:800;font-size:21px;color:var(--ra-green);letter-spacing:.5px;line-height:1.15}
.ra-brand__sub{display:block;font-size:13px;color:var(--ra-soft);line-height:1.2}
.ra-nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-family:Figtree,sans-serif;font-weight:600;font-size:15.5px}
.ra .ra-nav a{color:var(--ra-ink);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.ra .ra-nav a:hover,.ra .ra-nav a.is-active{color:var(--ra-green);border-bottom-color:var(--ra-green)}
.ra-head__cta{display:flex;flex-wrap:wrap;gap:10px}
.ra-mob{display:none;gap:6px;align-items:center}
.ra .ra-mob a{width:44px;height:44px;border-radius:999px;background:var(--ra-green-lt);color:var(--ra-green);display:flex;align-items:center;justify-content:center}
.ra-menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:0;background:var(--ra-green);color:#fff;align-items:center;justify-content:center;cursor:pointer;margin-left:4px;padding:0}
@media (max-width:1340px){
  .ra-top{display:none}
  .ra-mob{display:flex}
  .ra-menu-btn{display:inline-flex}
  .ra-nav{display:none;width:100%;flex-direction:column;gap:0;border-top:1px solid var(--ra-line);padding-top:6px}
  .ra .ra-nav a{padding:14px 4px;border-bottom:1px solid #EEF2EE}
  .ra-head__cta{display:none;width:100%}
  .ra-head__cta .ra-btn{flex:1 1 0}
  .ra-head.is-open .ra-nav,.ra-head.is-open .ra-head__cta{display:flex}
}
@media (max-width:520px){.ra-brand__sub{display:none}.ra-brand__name{font-size:18px}.ra-brand img{width:52px;height:52px}}
@media (max-width:440px){.ra-brand__name{display:none}.ra-head .ra-wrap{padding-left:14px;padding-right:14px}}

@media (min-width:1341px){
  .ra-head .ra-wrap,.ra-head .ra-nav,.ra-head .ra-head__cta{flex-wrap:nowrap}
  .ra-head .ra-nav a,.ra-head .ra-head__cta a{white-space:nowrap}
}
@media (min-width:1341px){.ra-head .ra-brand{flex:none}.ra-brand__name,.ra-brand__sub{white-space:nowrap}.ra-head .ra-wrap{gap:12px 22px}}
@media (min-width:1341px){.ra-head .ra-wrap{max-width:1320px}}
@media (min-width:1341px) and (max-width:1480px){.ra-nav{gap:4px 18px;font-size:15px}.ra-brand__sub{display:none}}

/* =========================================================
   02 NOTICE BANNER
   ========================================================= */
.ra-banner{background:#FFF4D6;border-bottom:1px solid #F0DC9E}
.ra-banner .ra-wrap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding-top:10px;padding-bottom:10px;font-size:15px}
.ra-banner__tag{background:var(--ra-red);color:#fff;font-family:Figtree,sans-serif;font-weight:700;font-size:12px;padding:2px 10px;border-radius:999px;letter-spacing:.4px}
.ra-banner__text{font-weight:500}
.ra .ra-banner a{font-weight:600;color:var(--ra-green-dk)}

/* =========================================================
   03 HERO (static version – or use the slider shortcode)
   ========================================================= */
.ra-hero{background:var(--ra-green);color:#fff;overflow:hidden}
.ra-hero .ra-wrap{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-end;padding-top:64px}
.ra-hero__text{flex:1 1 440px;min-width:0;padding-bottom:64px;display:flex;flex-direction:column;gap:20px}
.ra-hero__eyebrow{font-family:Figtree,sans-serif;font-weight:700;color:var(--ra-gold);font-size:14px;letter-spacing:1.5px}
.ra-hero h1{font-size:clamp(34px,5vw,54px);font-weight:800;line-height:1.1;letter-spacing:-.5px}
.ra-hero__lead{font-size:18px;color:#DCEBE1;max-width:540px}
.ra-hero__btns{display:flex;flex-wrap:wrap;gap:12px}
.ra-hero__note{font-size:15px;color:var(--ra-gold);font-weight:600}
.ra-hero__media{flex:1 1 440px;min-width:0;position:relative;align-self:stretch;display:flex;align-items:flex-end}
.ra-hero__media img{width:100%}
.ra-hero__badge{position:absolute;left:0;top:8px;background:#fff;color:var(--ra-green-dk);border-radius:14px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.18);line-height:1.2}
.ra-hero__badge strong{display:block;font-family:Figtree,sans-serif;font-weight:800;font-size:26px}
.ra-hero__badge span{font-size:13px;color:var(--ra-muted)}

/* =========================================================
   04 KEY FACTS
   ========================================================= */
.ra-facts{background:#fff;border-bottom:1px solid var(--ra-line)}
.ra-facts .ra-grid{padding-top:26px;padding-bottom:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ra-fact{display:flex;gap:14px;align-items:center;line-height:1.3}
.ra-fact strong{display:block;font-family:Figtree,sans-serif;font-weight:800;font-size:19px}
.ra-fact span{font-size:14px;color:var(--ra-soft)}

/* =========================================================
   05 HEAD TEACHER WELCOME
   ========================================================= */
.ra-welcome .ra-split{align-items:center}
.ra-welcome__photo{flex:0 1 340px !important}
.ra-welcome__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.ra-welcome__body{display:flex;flex-direction:column;gap:16px}
.ra-sign strong{display:block;font-family:Figtree,sans-serif;font-weight:800;font-size:18px}
.ra-sign span{color:var(--ra-soft);font-size:15px}

/* =========================================================
   06 VISION & VALUES
   ========================================================= */
.ra-vision{padding:0 0 80px}
.ra-vision__box{background:#fff;border:1px solid var(--ra-line);border-radius:22px;padding:36px;display:flex;flex-wrap:wrap;gap:36px}
.ra-vision__intro{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ra-vision__statement{font-family:Figtree,sans-serif;font-weight:700;font-size:24px;line-height:1.35}
.ra-vision__intro small{color:var(--ra-soft);font-size:15px}
.ra-vision .ra-grid{flex:2 1 520px;min-width:0;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media (max-width:600px){.ra-vision__box{padding:24px}}

/* =========================================================
   07 CURRICULUM
   ========================================================= */
.ra-curr{background:var(--ra-green-bg)}
.ra-curr__intro{margin-bottom:40px}
.ra-curr__intro>div{display:flex;flex-direction:column;gap:14px}
.ra-curr__intro img{width:100%;height:340px;object-fit:cover;border-radius:20px}
.ra-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ra-chips li{background:#fff;border:1px solid #D6E5DB;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
.ra-path{background:#fff;border-radius:20px;padding:32px;margin-bottom:28px}
.ra-path>h3{font-size:22px;font-weight:800;margin-bottom:20px}
.ra-path__row{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.ra-path__l1{flex:1 1 250px;min-width:0;background:var(--ra-green-lt);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px}
.ra-path__l23{flex:2 1 480px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ra-path__item{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:var(--ra-tint);border:1px solid #DCE9E0;border-radius:16px;padding:16px 20px}
.ra-lvl{font-family:Figtree,sans-serif;font-weight:700;font-size:13px;color:var(--ra-green);letter-spacing:1px;min-width:110px}
.ra-path__name{font-family:Figtree,sans-serif;font-weight:800;font-size:19px}
.ra-path__l1 .ra-path__name{font-size:21px}
.ra-path__note{color:var(--ra-soft);font-size:15px}
.ra-path__l1 p{color:var(--ra-muted);font-size:15px}
.ra-times>h3{font-size:22px;font-weight:800;margin-bottom:18px}
.ra-times .ra-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.ra-class{background:#fff;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:8px}
.ra-class h4{font-size:20px;font-weight:800}
.ra-class__when{font-weight:600;color:var(--ra-green-dk);line-height:1.5}
.ra-class p{color:var(--ra-muted);font-size:15px}
.ra-class--dark{background:var(--ra-green-dk);color:#fff}
.ra-class--dark .ra-class__when{color:var(--ra-gold)}
.ra-class--dark p{color:#D6E7DC}
@media (max-width:600px){.ra-path{padding:22px}.ra-curr__intro img{height:240px}}

/* =========================================================
   08 NOTICE BOARD + KEY DATES  (plugin output styled here)
   ========================================================= */
.ra-notices__grid{display:flex;flex-wrap:wrap;gap:32px}
.ra-notices__main{flex:2 1 560px;min-width:0}
/* Display Posts plugin output */
.ra-dp{display:flex;flex-direction:column;gap:14px}
.ra-dp .listing-item{background:#fff;border:1px solid var(--ra-line);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.ra .ra-dp .listing-item .title{font-family:Figtree,sans-serif;font-weight:700;font-size:19px;color:var(--ra-ink);text-decoration:none;line-height:1.3}
.ra .ra-dp .listing-item .title:hover{color:var(--ra-green)}
.ra-dp .listing-item .date{order:-1;font-family:Figtree,sans-serif;font-weight:700;color:var(--ra-green);font-size:14px}
.ra-dp .listing-item .excerpt{color:var(--ra-muted);font-size:15px}
.ra-dp .listing-item .excerpt-dash{display:none}
.ra-dp p:empty,.ra-notices br{display:none}
/* Key dates panel (Events Manager output) */
.ra-keydates{flex:1 1 320px;min-width:0;background:var(--ra-green-dk);color:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;align-self:flex-start}
.ra-keydates h2{font-size:24px;font-weight:800}
.ra-keydates ul{display:flex;flex-direction:column}
.ra-keydates li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #2D6B45}
.ra-keydates li:last-child{border-bottom:0}
.ra .ra-keydates li a{color:#fff;text-decoration:none}
.ra-kd-date{color:var(--ra-gold);font-weight:600;white-space:nowrap}
.ra .ra-keydates .ra-wa{color:var(--ra-gold);font-weight:600;text-align:center}

/* =========================================================
   09 ADMISSIONS
   ========================================================= */
.ra-adm{background:var(--ra-green);color:#fff}
.ra-adm .ra-eyebrow{color:var(--ra-gold)}
.ra-steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ra-steps li{background:#1E7F45;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.ra-steps__n{font-family:Figtree,sans-serif;font-weight:800;font-size:36px;color:var(--ra-gold);line-height:1}
.ra-steps h3{font-size:19px;font-weight:800}
.ra-steps p{color:#DCEBE1;font-size:15px}

/* =========================================================
   10 FEES & PAYMENT
   ========================================================= */
.ra-fees .ra-split{align-items:flex-start}
.ra-fees__info{flex:1 1 360px !important;display:flex;flex-direction:column;gap:14px}
.ra-table{border:1px solid var(--ra-line);border-radius:16px;overflow:hidden;background:#fff;width:100%;border-collapse:separate;border-spacing:0}
.ra-table th{background:#F2F6F3;font-weight:700;font-size:14px;color:var(--ra-muted);text-align:left;padding:12px 16px}
.ra-table td{padding:14px 16px;border-top:1px solid var(--ra-line)}
.ra-table td:first-child{font-weight:600}
.ra-fees__note{font-size:14px;color:var(--ra-soft)}
.ra-pay{flex:1 1 520px !important;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-content:start}
.ra-pay .ra-card{display:flex;flex-direction:column;gap:6px;padding:20px}
.ra-pay .ra-card a{font-weight:700}

/* =========================================================
   11 ASSESSMENT
   ========================================================= */
.ra-assess{background:#fff;border-top:1px solid var(--ra-line);border-bottom:1px solid var(--ra-line);padding:72px 0}
.ra-assess .ra-sechead{max-width:680px}

/* =========================================================
   12 SAFEGUARDING
   ========================================================= */
.ra-safe{padding:64px 0 0}
.ra-safe__box{border:2px solid var(--ra-green);border-radius:20px;padding:28px 30px;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center}
.ra-safe__icon{width:56px;height:56px;border-radius:14px;background:var(--ra-green);color:#fff;display:flex;align-items:center;justify-content:center}
.ra-safe__text{flex:1 1 420px;min-width:0}
.ra-safe__text h2{font-size:24px;font-weight:800;margin-bottom:4px}
.ra-safe__text p{color:var(--ra-muted)}

/* =========================================================
   13 PARENTS + UNIFORM
   ========================================================= */
.ra-parents{padding:64px 0 40px}
.ra-links{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ra .ra-links a{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--ra-line);border-radius:16px;padding:20px;text-decoration:none;color:var(--ra-ink);min-height:112px;font-family:Figtree,sans-serif;font-weight:700;font-size:17px}
.ra .ra-links a:hover{border-color:var(--ra-green)}
.ra-uniform{margin-top:24px;background:#fff;border:1px solid var(--ra-line);border-radius:18px;padding:26px 28px;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start}
.ra-uniform__intro{flex:1 1 260px;min-width:0}
.ra-uniform__intro h3{font-size:22px;font-weight:800;margin-bottom:6px}
.ra-uniform__intro p{color:var(--ra-muted);font-size:15px}
.ra-uniform__set{flex:1 1 220px;min-width:0;background:var(--ra-tint);border-radius:14px;padding:18px 20px}
.ra-uniform__set h4{font-size:17px;font-weight:800;color:var(--ra-green);margin-bottom:6px}
.ra .ra-uniform__set ul{list-style:disc;padding-left:18px;color:var(--ra-muted);font-size:15px}

/* =========================================================
   14 HADITH
   ========================================================= */
.ra-hadith{background:var(--ra-green-dk);color:#fff;padding:64px 20px;text-align:center}
.ra-hadith__in{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:center}
.ra-hadith__ar{font-family:Amiri,serif;font-size:32px;line-height:1.6;color:var(--ra-gold)}
.ra-hadith__en{font-family:Figtree,sans-serif;font-weight:700;font-size:24px;line-height:1.35}
.ra-hadith__ref{color:#B9D3C1;font-size:15px}

/* =========================================================
   15 CONTACT
   ========================================================= */
.ra-contact{padding:72px 0}
.ra-contact__box{display:flex;flex-wrap:wrap;gap:32px;background:#fff;border:1px solid var(--ra-line);border-radius:20px;padding:32px}
.ra-contact__info{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:14px}
.ra-contact address{font-style:normal;color:var(--ra-muted);font-size:17px;line-height:1.6}
.ra-contact address strong{color:var(--ra-ink)}
.ra-contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;font-size:15px}
.ra-contact__grid b{display:block}
.ra-contact__grid span{color:var(--ra-muted)}
.ra-map{flex:1 1 400px;min-width:0;min-height:300px;border-radius:16px;overflow:hidden}
.ra-map iframe{width:100%;height:100%;min-height:300px;border:0;display:block}
@media (max-width:600px){.ra-contact__box{padding:22px}}

/* =========================================================
   16 FOOTER
   ========================================================= */
.ra-foot{background:var(--ra-green-xdk);color:#CFE0D5;font-size:15px}
.ra-foot__cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding-top:52px;padding-bottom:24px}
.ra-foot__brand{display:flex;flex-direction:column;gap:12px}
.ra-foot__logo{display:flex;align-items:center;gap:12px}
.ra-foot__logo img{width:50px;height:50px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.ra-foot__logo span{font-family:Figtree,sans-serif;font-weight:800;font-size:17px;color:#fff}
.ra-foot__col{display:flex;flex-direction:column;gap:8px}
.ra-foot__col h4{font-family:Figtree,sans-serif;font-weight:700;font-size:16px;color:#fff;margin-bottom:4px}
.ra .ra-foot a{color:#CFE0D5;text-decoration:none}
.ra .ra-foot a:hover{color:#fff;text-decoration:underline}
.ra-foot__bar{border-top:1px solid #22573A;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px;color:#A9C4B2;padding-top:16px;padding-bottom:26px}
.ra-foot__bar span:last-child{display:flex;gap:20px}
.ra .ra-foot__bar a{color:#A9C4B2;text-decoration:underline}