/*
Theme Name: Al Zahabia Private School
Theme URI: https://example.com/al-zahabia
Author: Al Zahabia School
Description: Official bilingual (English/Arabic) WordPress theme for Al Zahabia Private School, Sohar, Oman. RTL-ready, elegant gold & navy design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-zahabia
Domain Path: /languages
Tags: education, bilingual, rtl-language, arabic, school, responsive-layout, custom-menu, translation-ready
*/

/* ============================================================
   DESIGN TOKENS — Al Zahabia Gold & Deep Teal
   ============================================================ */
:root {
  /* Brand palette — Gold (ذهبية) + Deep Teal */
  --gold-1:     #B8860B;   /* Dark goldenrod — primary brand gold */
  --gold-2:     #D4A017;   /* Rich gold */
  --gold-3:     #F0C040;   /* Light accent gold */
  --gold-bg:    #FDF8EC;   /* Warm gold tint background */
  --teal-1:     #0D3B3E;   /* Deep teal — primary dark */
  --teal-2:     #155A5E;   /* Mid teal */
  --teal-3:     #1D7A80;   /* Lighter teal */
  --surface:    #F9F6EE;   /* Off-white warm */
  --white:      #FFFFFF;
  --text:       #1E1E1E;
  --text-muted: #5C6370;
  --border:     #E8E0CC;

  /* Semantic aliases */
  --color-primary:  var(--teal-1);
  --color-accent:   var(--gold-2);

  /* Typography */
  --font-heading-en: 'Cormorant Garamond', Georgia, serif;
  --font-heading-ar: 'Amiri', 'Traditional Arabic', serif;
  --font-body-en:    'Lato', system-ui, sans-serif;
  --font-body-ar:    'Cairo', Tahoma, sans-serif;
  --font-ui:         'Lato', system-ui, sans-serif;

  /* Spacing */
  --sp-xs:  0.4rem;
  --sp-sm:  0.75rem;
  --sp-md:  1.25rem;
  --sp-lg:  2rem;
  --sp-xl:  3.5rem;
  --sp-2xl: 6rem;

  /* Layout */
  --max-w:     1140px;
  --r-sm:      4px;
  --r-md:      10px;
  --r-lg:      18px;
  --shadow:    0 2px 18px rgba(13,59,62,.08);
  --shadow-h:  0 8px 36px rgba(13,59,62,.16);
  --ease:      0.26s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   BASE RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body-en);
  font-size:1rem;line-height:1.75;
  color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:var(--font-body-ar);text-align:right}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-2);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--gold-1)}
ul{list-style:none}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading-en);
  color:var(--teal-1);line-height:1.25;font-weight:700;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,
html[dir="rtl"] h3,html[dir="rtl"] h4{
  font-family:var(--font-heading-ar);
}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.55rem,3.5vw,2.3rem)}
h3{font-size:clamp(1.15rem,2.5vw,1.55rem)}
h4{font-size:1.1rem}
p{margin-bottom:1rem}

.eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-ui);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-1);margin-bottom:.6rem;
}
.eyebrow::before,
.eyebrow::after{content:'';display:block;width:24px;height:1px;background:var(--gold-2)}

/* ============================================================
   LAYOUT
   ============================================================ */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--sp-lg)}
.section{padding-block:var(--sp-2xl)}
.section--alt{background:var(--surface)}
.section--gold{background:var(--gold-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section--dark{background:var(--teal-1)}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-lg)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-lg)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-md)}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.text-center{text-align:center}
.mt-md{margin-top:var(--sp-md)}
.mt-lg{margin-top:var(--sp-lg)}

/* Section header block */
.sec-head{text-align:center;max-width:580px;margin-inline:auto;margin-bottom:var(--sp-xl)}
.sec-head p{color:var(--text-muted);font-size:1.02rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.65rem 1.5rem;border-radius:var(--r-sm);
  font-family:var(--font-ui);font-size:.88rem;font-weight:700;
  cursor:pointer;border:2px solid transparent;
  transition:all var(--ease);text-decoration:none;letter-spacing:.02em;
}
.btn-gold{background:var(--gold-2);color:var(--teal-1);border-color:var(--gold-2)}
.btn-gold:hover{background:var(--teal-1);color:var(--white);border-color:var(--teal-1)}
.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn-outline-white:hover{background:var(--white);color:var(--teal-1)}
.btn-teal{background:var(--teal-2);color:var(--white);border-color:var(--teal-2)}
.btn-teal:hover{background:var(--teal-1);border-color:var(--teal-1)}
.btn-outline-teal{background:transparent;color:var(--teal-2);border-color:var(--teal-2)}
.btn-outline-teal:hover{background:var(--teal-2);color:var(--white)}

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar{
  background:var(--teal-1);
  padding:.4rem 0;
  font-family:var(--font-ui);font-size:.75rem;color:rgba(255,255,255,.7);
}
.top-bar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);flex-wrap:wrap}
.top-bar a{color:rgba(255,255,255,.7)}
.top-bar a:hover{color:var(--gold-3)}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:var(--sp-md)}
.top-bar-item{display:flex;align-items:center;gap:.3rem}
.top-bar-item svg{width:13px;height:13px;fill:var(--gold-3);flex-shrink:0}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 14px rgba(13,59,62,.06);
  transition:box-shadow var(--ease);
}
.site-header.scrolled{box-shadow:0 3px 24px rgba(13,59,62,.12)}

.header-inner{display:flex;align-items:center;height:76px;gap:var(--sp-md)}

/* Logo */
.site-logo{display:flex;align-items:center;gap:var(--sp-sm);text-decoration:none;flex-shrink:0}
.logo-mark{
  width:54px;height:54px;flex-shrink:0;
  background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gold-2);
  position:relative;overflow:hidden;
}
.logo-mark::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 35% 35%,rgba(212,160,23,.25),transparent 60%);
}
.logo-mark svg{width:30px;height:30px;position:relative;z-index:1}
.logo-text-wrap{display:flex;flex-direction:column;line-height:1.1}
.logo-name-en{
  font-family:var(--font-heading-en);font-size:1.05rem;font-weight:700;
  color:var(--teal-1);letter-spacing:.01em;
}
.logo-name-ar{
  font-family:var(--font-heading-ar);font-size:.88rem;font-weight:700;
  color:var(--gold-1);
}
.logo-sub{
  font-family:var(--font-ui);font-size:.62rem;color:var(--text-muted);
  letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem;
}

/* Nav */
.main-nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:.15rem}
.nav-list li a{
  display:block;padding:.38rem .8rem;
  font-family:var(--font-ui);font-size:.84rem;font-weight:600;
  color:var(--text);border-radius:var(--r-sm);
  transition:all var(--ease);white-space:nowrap;
}
.nav-list li a:hover,.nav-list li.current-menu-item a{color:var(--teal-1);background:var(--gold-bg)}

/* Header right */
.header-right{display:flex;align-items:center;gap:var(--sp-sm);margin-inline-start:auto;flex-shrink:0}

.lang-switcher{
  display:flex;align-items:center;gap:2px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:3px;
  list-style:none;margin:0;
}
/* Support both plain <a> and Polylang <li><a> output */
.lang-switcher a,
.lang-switcher li a{
  padding:.2rem .55rem;border-radius:3px;
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  color:var(--text-muted);transition:all var(--ease);
  display:block;text-decoration:none;
}
.lang-switcher li{
  list-style:none;margin:0;padding:0;
}
.lang-switcher a.active,
.lang-switcher li.current-lang a,
.lang-switcher a:hover,
.lang-switcher li a:hover{
  background:var(--teal-1);color:var(--white);
}

.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
  width:40px;height:40px;flex-shrink:0;
}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--teal-1);border-radius:2px;transition:all var(--ease);transform-origin:center}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:88vh;max-height:800px;
  display:flex;align-items:center;overflow:hidden;
  background:var(--teal-1);
}
.hero-media{
  position:absolute;inset:0;
  background:linear-gradient(to bottom right,var(--teal-1) 0%,var(--teal-2) 60%,var(--teal-3) 100%);
}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.2}

/* Geometric ornament */
.hero-ornament{
  position:absolute;right:-5%;top:50%;transform:translateY(-50%);
  width:520px;height:520px;opacity:.06;
}
html[dir="rtl"] .hero-ornament{right:auto;left:-5%}
.hero-ornament circle,.hero-ornament path{stroke:var(--gold-3);fill:none;stroke-width:.5}

.hero .container{position:relative;z-index:2;padding-block:var(--sp-2xl)}
.hero-inner{max-width:660px}

.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(212,160,23,.15);border:1px solid rgba(212,160,23,.35);
  color:var(--gold-3);padding:.32rem .9rem;border-radius:100px;
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp-md);
}
.hero h1{
  font-family:var(--font-heading-en);color:var(--white);
  font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:var(--sp-sm);
}
html[dir="rtl"] .hero h1{font-family:var(--font-heading-ar)}
.hero-ar{
  font-family:var(--font-heading-ar);color:var(--gold-3);
  font-size:clamp(1.4rem,3vw,2rem);display:block;
  margin-bottom:var(--sp-md);font-weight:700;
}
.hero p{color:rgba(255,255,255,.78);font-size:1.05rem;max-width:520px;margin-bottom:var(--sp-lg)}
.hero-cta{display:flex;gap:var(--sp-sm);flex-wrap:wrap}

/* Stats */
.hero-stats{
  display:flex;gap:var(--sp-xl);flex-wrap:wrap;
  margin-top:var(--sp-xl);padding-top:var(--sp-lg);
  border-top:1px solid rgba(255,255,255,.1);
}
.hero-stat strong{display:block;font-family:var(--font-heading-en);font-size:2rem;color:var(--gold-3);line-height:1}
.hero-stat span{font-family:var(--font-ui);font-size:.75rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   GOLD STRIP
   ============================================================ */
.gold-strip{background:var(--gold-2);padding:.85rem 0}
.gold-strip .container{display:flex;align-items:center;justify-content:space-around;gap:var(--sp-md);flex-wrap:wrap}
.strip-item{display:flex;align-items:center;gap:.5rem;color:var(--teal-1)}
.strip-item svg{width:18px;height:18px;fill:var(--teal-1);flex-shrink:0}
.strip-item span{font-family:var(--font-ui);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   ABOUT
   ============================================================ */
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2xl);align-items:center}
html[dir="rtl"] .about-wrap{direction:rtl}

.about-img-box{position:relative}
.about-img-box img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.about-img-placeholder{
  width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-sm);color:rgba(255,255,255,.4);font-size:.85rem;font-family:var(--font-ui);
}
.about-img-placeholder svg{width:44px;height:44px;opacity:.5}

.about-badge{
  position:absolute;bottom:-18px;right:-18px;
  background:var(--gold-2);color:var(--teal-1);
  padding:var(--sp-md) var(--sp-md);border-radius:var(--r-md);
  text-align:center;box-shadow:var(--shadow-h);
}
html[dir="rtl"] .about-badge{right:auto;left:-18px}
.about-badge strong{display:block;font-family:var(--font-heading-en);font-size:2.2rem;line-height:1}
.about-badge span{font-family:var(--font-ui);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

.about-text h2{margin-bottom:var(--sp-sm)}
.about-text p{color:var(--text-muted);font-size:.95rem}
.about-text p:last-of-type{margin-bottom:var(--sp-lg)}

/* Pillars grid */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);margin-top:var(--sp-lg)}
.pillar{
  background:var(--surface);border-radius:var(--r-md);padding:var(--sp-md);
  border-top:3px solid var(--gold-2);
}
.pillar h4{font-family:var(--font-ui);font-size:.84rem;font-weight:800;color:var(--teal-1);margin-bottom:.2rem}
.pillar p{font-size:.8rem;color:var(--text-muted);margin-bottom:0}

/* ============================================================
   PROGRAMS / STAGES
   ============================================================ */
.prog-card{
  background:var(--white);border-radius:var(--r-lg);
  border:1px solid var(--border);overflow:hidden;
  transition:all var(--ease);box-shadow:var(--shadow);
}
.prog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--gold-2)}
.prog-card-top{
  padding:var(--sp-md) var(--sp-lg);
  background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
  display:flex;align-items:center;gap:var(--sp-sm);
}
.prog-icon{
  width:42px;height:42px;flex-shrink:0;
  background:rgba(212,160,23,.18);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
}
.prog-icon svg{width:21px;height:21px;fill:var(--gold-3)}
.prog-title{font-family:var(--font-heading-en);color:var(--white);font-size:1rem;margin:0}
html[dir="rtl"] .prog-title{font-family:var(--font-heading-ar)}
.prog-title-ar{display:block;font-family:var(--font-heading-ar);color:var(--gold-3);font-size:.82rem;font-weight:400}
.prog-body{padding:var(--sp-md) var(--sp-lg) var(--sp-lg)}
.prog-body p{font-size:.88rem;color:var(--text-muted);margin-bottom:var(--sp-sm)}
.prog-tag{
  display:inline-block;background:var(--gold-bg);color:var(--teal-1);
  padding:.18rem .55rem;border-radius:100px;
  font-family:var(--font-ui);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;border:1px solid var(--border);
}

/* ============================================================
   FACILITIES
   ============================================================ */
.facility-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-md)}
.fac-card{
  background:var(--white);border-radius:var(--r-md);
  padding:var(--sp-lg);text-align:center;
  border:1px solid var(--border);
  transition:all var(--ease);box-shadow:var(--shadow);
}
.fac-card:hover{border-color:var(--gold-2);box-shadow:var(--shadow-h);transform:translateY(-3px)}
.fac-icon{
  width:52px;height:52px;margin-inline:auto;margin-bottom:var(--sp-md);
  background:var(--gold-bg);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gold-2);
}
.fac-icon svg{width:24px;height:24px;fill:var(--gold-1)}
.fac-card h4{font-size:.95rem;margin-bottom:.3rem}
.fac-card p{font-size:.8rem;color:var(--text-muted);margin:0}

/* ============================================================
   SPECIAL EDUCATION
   ============================================================ */
.sped-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-lg)}
.sped-card{
  background:var(--white);border-radius:var(--r-md);padding:var(--sp-lg);
  border-left:4px solid var(--gold-2);box-shadow:var(--shadow);
}
html[dir="rtl"] .sped-card{border-left:none;border-right:4px solid var(--gold-2)}
.sped-card h3{font-size:1rem;margin-bottom:var(--sp-sm)}
.sped-card p{font-size:.88rem;color:var(--text-muted);margin:0}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar{background:var(--teal-1);padding-block:var(--sp-xl)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg);text-align:center}
.stat-num{display:block;font-family:var(--font-heading-en);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--gold-3);line-height:1}
.stat-lbl{display:block;font-family:var(--font-ui);font-size:.78rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em;margin-top:.35rem}
.stat-lbl-ar{display:block;font-family:var(--font-body-ar);font-size:.78rem;color:rgba(255,255,255,.45);margin-top:.15rem}

/* ============================================================
   STAFF
   ============================================================ */
.staff-section{position:relative;overflow:hidden}
.staff-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold-1),var(--gold-3),var(--gold-1));
}
.staff-text{max-width:760px;margin-inline:auto;text-align:center}
.staff-text p{font-size:1rem;color:var(--text-muted);line-height:1.8}
.staff-highlights{
  display:flex;justify-content:center;gap:var(--sp-xl);
  margin-top:var(--sp-lg);flex-wrap:wrap;
}
.staff-hl{text-align:center}
.staff-hl strong{display:block;font-family:var(--font-heading-en);font-size:1.6rem;color:var(--gold-1);line-height:1}
.staff-hl span{font-family:var(--font-ui);font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}

/* ============================================================
   NEWS & EVENTS
   ============================================================ */
.news-card{
  background:var(--white);border-radius:var(--r-md);
  border:1px solid var(--border);overflow:hidden;
  transition:all var(--ease);
}
.news-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.news-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--ease)}
.news-card:hover .news-thumb img{transform:scale(1.04)}
.news-ph{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--surface),var(--border));
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:.8rem;font-family:var(--font-ui);
}
.news-body{padding:var(--sp-md)}
.news-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.news-cat{
  background:var(--gold-bg);color:var(--gold-1);
  padding:.15rem .5rem;border-radius:100px;
  font-family:var(--font-ui);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--border);
}
.news-date{font-family:var(--font-ui);font-size:.72rem;color:var(--text-muted)}
.news-body h3{font-size:.95rem;line-height:1.4;margin-bottom:.35rem}
.news-body h3 a{color:var(--teal-1)}
.news-body h3 a:hover{color:var(--gold-1)}
.news-body p{font-size:.83rem;color:var(--text-muted);margin-bottom:.6rem}
.read-more{font-family:var(--font-ui);font-size:.78rem;font-weight:700;color:var(--teal-2);display:inline-flex;align-items:center;gap:.3rem}
.read-more:hover{color:var(--gold-1);gap:.5rem}
html[dir="rtl"] .read-more svg{transform:rotate(180deg)}

/* ============================================================
   EVENTS LIST
   ============================================================ */
.event-item{
  display:flex;gap:var(--sp-md);align-items:flex-start;
  padding:var(--sp-md);background:var(--white);
  border-radius:var(--r-md);border:1px solid var(--border);
  transition:all var(--ease);
}
.event-item:hover{border-color:var(--gold-2);box-shadow:var(--shadow)}
.event-date-box{
  flex-shrink:0;width:50px;text-align:center;
  background:var(--teal-1);color:var(--white);
  border-radius:var(--r-sm);padding:.4rem;
}
.event-date-box .day{display:block;font-family:var(--font-heading-en);font-size:1.4rem;font-weight:700;line-height:1}
.event-date-box .mon{display:block;font-family:var(--font-ui);font-size:.62rem;font-weight:700;text-transform:uppercase;color:var(--gold-3);letter-spacing:.05em}
.event-info h4{font-size:.92rem;margin-bottom:.2rem}
.event-info p{font-size:.8rem;color:var(--text-muted);margin:0}

/* ============================================================
   PORTALS
   ============================================================ */
.portals-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
.portal-card{
  border-radius:var(--r-lg);padding:var(--sp-xl) var(--sp-lg);text-align:center;
  position:relative;overflow:hidden;
}
.portal-card--parent{background:linear-gradient(135deg,var(--teal-1),var(--teal-2))}
.portal-card--student{background:linear-gradient(135deg,var(--gold-1),var(--gold-2))}
.portal-card h3{font-size:1.3rem;margin-bottom:var(--sp-sm)}
.portal-card--parent h3{color:var(--white)}
.portal-card--student h3{color:var(--teal-1)}
.portal-card p{font-size:.9rem;margin-bottom:var(--sp-lg)}
.portal-card--parent p{color:rgba(255,255,255,.75)}
.portal-card--student p{color:var(--teal-1)}
.portal-icon-bg{
  width:70px;height:70px;border-radius:50%;margin-inline:auto;margin-bottom:var(--sp-md);
  display:flex;align-items:center;justify-content:center;
}
.portal-card--parent .portal-icon-bg{background:rgba(212,160,23,.2)}
.portal-card--student .portal-icon-bg{background:rgba(13,59,62,.15)}
.portal-icon-bg svg{width:32px;height:32px}
.portal-card--parent .portal-icon-bg svg{fill:var(--gold-3)}
.portal-card--student .portal-icon-bg svg{fill:var(--teal-1)}

/* ============================================================
   SOCIAL / GALLERY
   ============================================================ */
.gallery-cta{
  background:var(--surface);border:2px dashed var(--border);
  border-radius:var(--r-lg);padding:var(--sp-xl);text-align:center;
}
.gallery-cta .ig-handle{
  font-family:var(--font-ui);font-size:1.1rem;font-weight:700;
  color:var(--teal-1);display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:var(--sp-md);
}

/* ============================================================
   ADMISSION SECTION
   ============================================================ */
.admission-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2xl);align-items:center}
html[dir="rtl"] .admission-grid{direction:rtl}
.steps-list{display:flex;flex-direction:column;gap:var(--sp-md)}
.step{display:flex;gap:var(--sp-md);align-items:flex-start}
.step-num{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  background:var(--gold-2);color:var(--teal-1);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-size:.85rem;font-weight:800;
}
.step-content h4{font-size:.95rem;margin-bottom:.2rem}
.step-content p{font-size:.82rem;color:var(--text-muted);margin:0}

/* Admission form card */
.admission-form-card{
  background:var(--gold-bg);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-xl);
}
.admission-form-card h3{margin-bottom:var(--sp-md)}
.form-group{margin-bottom:var(--sp-md)}
label{display:block;font-family:var(--font-ui);font-size:.78rem;font-weight:700;color:var(--teal-1);margin-bottom:.3rem}
input,select,textarea{
  width:100%;padding:.6rem .85rem;
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--font-body-en);font-size:.88rem;color:var(--text);
  background:var(--white);outline:none;
  transition:border-color var(--ease);
}
html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea{font-family:var(--font-body-ar)}
input:focus,select:focus,textarea:focus{border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(21,90,94,.1)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2xl)}
html[dir="rtl"] .contact-wrap{direction:rtl}
.contact-info h3{margin-bottom:var(--sp-lg)}
.c-item{display:flex;gap:var(--sp-sm);margin-bottom:var(--sp-md);align-items:flex-start}
.c-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--gold-bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.c-icon svg{width:16px;height:16px;fill:var(--gold-1)}
.c-text span{display:block;font-family:var(--font-ui);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.15rem}
.c-text a,.c-text p{font-size:.92rem;color:var(--text);margin:0}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-section{
  background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
  padding-block:var(--sp-2xl);text-align:center;position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  top:-60%;right:-5%;width:550px;height:550px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,160,23,.1),transparent 65%);
}
.cta-section h2{color:var(--white);margin-bottom:var(--sp-sm)}
.cta-section .subtitle{color:rgba(255,255,255,.72);max-width:480px;margin-inline:auto;margin-bottom:var(--sp-lg)}
.cta-btns{display:flex;gap:var(--sp-sm);justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#071D20;padding-top:var(--sp-2xl);color:rgba(255,255,255,.65)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--sp-xl);padding-bottom:var(--sp-xl)}
.footer-brand p{font-size:.84rem;margin-top:var(--sp-md);margin-bottom:var(--sp-md);line-height:1.7;max-width:260px}
.fw h4{
  font-family:var(--font-ui);font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--white);margin-bottom:var(--sp-md);
  padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.fw ul li{margin-bottom:.38rem}
.fw ul li a{font-size:.84rem;color:rgba(255,255,255,.55);transition:color var(--ease)}
.fw ul li a:hover{color:var(--gold-3)}
.fc-item{display:flex;gap:.45rem;margin-bottom:.7rem;font-size:.84rem}
.fc-item svg{width:14px;height:14px;fill:var(--gold-3);flex-shrink:0;margin-top:3px}
.fc-item a{color:rgba(255,255,255,.6)}
.fc-item a:hover{color:var(--gold-3)}
.social-row{display:flex;gap:.5rem;margin-top:var(--sp-md)}
.soc{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--ease);
}
.soc:hover{background:var(--gold-2)}
.soc svg{width:14px;height:14px;fill:var(--white)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.07);
  padding-block:.9rem;
  font-family:var(--font-ui);font-size:.76rem;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem;
}

/* ============================================================
   WP CORE
   ============================================================ */
.alignleft{float:left;margin-right:1.5rem;margin-bottom:1rem}
.alignright{float:right;margin-left:1.5rem;margin-bottom:1rem}
.aligncenter{display:block;margin-inline:auto;margin-bottom:1rem}
.wp-caption-text{font-size:.8rem;color:var(--text-muted);text-align:center;margin-top:.4rem}
.entry-content ul,.entry-content ol{padding-inline-start:1.5rem;margin-bottom:1rem}
.entry-content li{margin-bottom:.25rem}
.entry-content blockquote{
  border-inline-start:4px solid var(--gold-2);padding:var(--sp-md) var(--sp-lg);
  margin-block:var(--sp-lg);background:var(--gold-bg);border-radius:0 var(--r-md) var(--r-md) 0;
  font-style:italic;
}
table{width:100%;border-collapse:collapse;margin-bottom:var(--sp-lg)}
th,td{padding:.65rem 1rem;border:1px solid var(--border);font-size:.88rem}
th{background:var(--teal-1);color:var(--white);font-family:var(--font-ui);font-weight:600}
tr:nth-child(even) td{background:var(--surface)}
.pagination{display:flex;justify-content:center;gap:.4rem;margin-top:var(--sp-xl)}
.pagination a,.pagination span{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-sm);
  font-family:var(--font-ui);font-size:.85rem;border:1px solid var(--border);
  transition:all var(--ease);
}
.pagination a:hover,.pagination .current{background:var(--teal-1);color:var(--white);border-color:var(--teal-1)}
.search-form{display:flex;gap:.4rem}
.search-form input{flex:1}
.search-form button{
  padding:.6rem 1rem;background:var(--teal-1);color:var(--white);
  border:none;border-radius:var(--r-sm);cursor:pointer;transition:background var(--ease);
}
.search-form button:hover{background:var(--gold-1)}
.sidebar-widget{margin-bottom:var(--sp-xl)}
.sidebar-widget h3{
  font-family:var(--font-ui);font-size:.8rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;color:var(--teal-1);
  padding-bottom:.5rem;margin-bottom:var(--sp-md);
  border-bottom:2px solid var(--gold-2);
}
.page-hero{background:var(--gold-bg);padding:var(--sp-xl) 0;border-bottom:1px solid var(--border)}
.page-hero h1{margin-bottom:.4rem}
.breadcrumb{font-family:var(--font-ui);font-size:.8rem;color:var(--text-muted)}
.breadcrumb a{color:var(--gold-1)}
.content-sidebar-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-xl);padding-block:var(--sp-2xl)}

/* Screen reader */
.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;width:1px}
.skip-link{position:absolute;top:-999px;left:0;background:var(--teal-1);color:var(--white);padding:.5rem 1rem;z-index:9999}
.skip-link:focus{top:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:2px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ── Tablet (≤960px) ── */
@media(max-width:960px){
  .about-wrap,.admission-grid,.contact-wrap,.portals-grid{grid-template-columns:1fr}
  .about-badge{right:0}
  html[dir="rtl"] .about-badge{left:0;right:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .sped-grid{grid-template-columns:1fr}
  .content-sidebar-layout{grid-template-columns:1fr}
  .hero{min-height:70vh}
}

/* ── Mobile (≤768px) — hamburger menu ── */
@media(max-width:768px){
  :root{--sp-2xl:3.5rem}

  /* Show hamburger button */
  .menu-toggle{display:flex !important}

  /* Hide nav by default on mobile */
  .main-nav{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(13,59,62,.96);
    z-index:999;
    padding-top:90px;
    overflow-y:auto;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }

  /* Show nav when open */
  .main-nav.open{
    display:flex !important;
  }

  /* Nav list stacked vertically */
  .main-nav .nav-list{
    flex-direction:column;
    align-items:center;
    gap:.5rem;
    width:100%;
    padding:var(--sp-md);
  }

  .main-nav .nav-list li{
    width:100%;
    text-align:center;
  }

  .main-nav .nav-list li a{
    display:block;
    font-size:1.1rem;
    font-weight:700;
    color:var(--white);
    padding:.85rem 1rem;
    border-radius:var(--r-md);
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:all var(--ease);
  }

  .main-nav .nav-list li a:hover,
  .main-nav .nav-list li.current-menu-item a{
    background:var(--gold-2);
    color:var(--teal-1);
    border-bottom-color:var(--gold-2);
  }

  /* Close button inside open menu */
  .main-nav.open::before{
    content:'✕';
    position:fixed;
    top:22px;
    right:20px;
    font-size:1.4rem;
    color:var(--white);
    cursor:pointer;
    z-index:1001;
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.1);
    border-radius:50%;
  }
  html[dir="rtl"] .main-nav.open::before{right:auto;left:20px}

  /* Header adjustments */
  .header-inner{height:64px}
  .header-right .btn{display:none} /* hide Enrol button on small screens */

  /* Hamburger is on top of overlay */
  .menu-toggle{position:relative;z-index:1001}

  /* Layout */
  .footer-grid{grid-template-columns:1fr}
  .hero{min-height:80vh;max-height:none}
  .hero h1{font-size:clamp(1.8rem,7vw,2.6rem)}
  .hero-stats{gap:var(--sp-md);flex-wrap:wrap}
  .hero-stat strong{font-size:1.5rem}
  .pillars{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .sped-grid{grid-template-columns:1fr}
  .portals-grid{grid-template-columns:1fr}
  .admission-grid{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .top-bar-right{display:none}
  .facility-cards{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;text-align:center;gap:.5rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .gold-strip .container{justify-content:flex-start;gap:var(--sp-sm)}
  .strip-item{flex-shrink:0}
  .sec-head{margin-bottom:var(--sp-lg)}
  .about-img-box{max-width:400px;margin-inline:auto}
  .about-badge{right:auto;left:0;bottom:-14px}
  html[dir="rtl"] .about-badge{left:auto;right:0}
}

/* ── Small phones (≤400px) ── */
@media(max-width:400px){
  .grid-4{grid-template-columns:1fr}
  .facility-cards{grid-template-columns:1fr}
  .hero-stats{flex-direction:column;gap:var(--sp-sm)}
}