/* WEFE Hub — lightweight, brand-friendly scaffold (Tailwind-free, pure CSS) */

/* === Fonts (EN + AR) === */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root{
  --brand:#0a4d8c;     /* adjust to INWRDAM primary */
  --accent:#40a3ff;    /* highlight */
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#f7fafc;
  --card:#ffffff;
  --ring: rgba(64,163,255,.25);
  --radius:14px;

  /* Global fonts */
  --font-en: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
}

*{box-sizing:border-box; font-synthesis-weight:none; font-synthesis-style:none}

html,body{
  margin:0;padding:0;
  font-family:var(--font-en);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Arabic pages/elements */
html[lang="ar"], body:lang(ar), [dir="rtl"]{ font-family:var(--font-ar); }

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.flex{display:flex}.grid{display:grid}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);border:none;color:#fff;padding:.7rem 1rem;border-radius:12px;cursor:pointer;font-weight:600;box-shadow:0 6px 18px rgba(10,77,140,.15)}
.btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn:focus{outline:3px solid var(--ring);outline-offset:2px}
.badge{display:inline-block;background:var(--bg);border:1px solid #e5e7eb;border-radius:9999px;padding:.2rem .6rem;font-size:.8rem;color:var(--muted)}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);padding:1.25rem;box-shadow:0 10px 30px rgba(2,8,23,.04)}
.hero{padding:64px 0;background:linear-gradient(180deg,#ffffff, #f3f7fd)}
.hero .title{font-size:2.2rem;margin:0 0 .5rem 0;color:var(--brand);font-weight:700;letter-spacing:.1px}
.hero .lead{color:var(--muted);max-width:70ch}
.section{padding:44px 0}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{ text-align:center; padding:22px; border-radius:var(--radius); background:#fff; border:1px solid #e5e7eb}
.kpi b{font-size:1.8rem;display:block}

/* Headings */
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:.1px;line-height:1.2;margin:.6em 0 .35em}
.lead{font-size:1.1rem}
.muted{color:var(--muted)}

/* Header & Navigation */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--brand);font-size:1.1rem}
.brand img{height:34px;width:auto}
.menu{display:flex;gap:18px;align-items:center}
.menu>li{list-style:none;position:relative}
.menu>li>a{display:flex;align-items:center;gap:.35rem;padding:10px;border-radius:10px}
.menu>li>a:hover{background:#f1f5f9}
.dropdown{position:absolute;left:0;top:calc(100% + 6px);background:#fff;border:1px solid #e5e7eb;border-radius:12px;min-width:220px;box-shadow:0 16px 40px rgba(2,8,23,.08);padding:8px;display:none}
.dropdown a{display:block;padding:10px;border-radius:8px;color:var(--ink)}
.dropdown a:hover{background:#f8fafc}
.menu>li:focus-within .dropdown,
.menu>li:hover .dropdown{display:block}

/* Mobile nav */
.burger{display:none;background:none;border:none;padding:8px}
.burger span{display:block;width:22px;height:2px;background:#111;margin:5px 0;border-radius:3px}
@media (max-width: 900px){
  .menu{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid #e5e7eb;padding:12px 16px;flex-direction:column}
  .menu.open{display:flex}
  .dropdown{position:static;display:block;border:none;box-shadow:none;padding:0;margin-left:10px}
  .burger{display:block}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* (old simple footer block removed in favor of the new WEFE Footer) */

/* Utilities */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #e5e7eb}
.table th{background:#f8fafc;text-align:left}
.tag{display:inline-block;border:1px solid #e5e7eb;border-radius:10px;padding:.2rem .5rem;margin:.15rem 0;font-size:.85rem;color:var(--muted)}
.notice{background:#fff; border-left:4px solid --brand; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb}
input,textarea,select{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px}
label{display:block;margin:.6rem 0 .2rem 0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.form-row{grid-template-columns:1fr}}

/* Simple hero animation */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.hero-blob{width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,var(--accent),transparent 70%);filter:blur(2px);opacity:.35;position:absolute;right:8%;top:24%;animation:floaty 6s ease-in-out infinite}

/* ===== WEFE Footer ===== */
.site-footer {
  position: relative;
  color: #e8f3ff;
  overflow: hidden;
  --f-bg1: #0a2b47;
  --f-bg2: #0b3b5e;
  --f-accent: #5ad1ff;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(90,209,255,.25), transparent 70%),
    radial-gradient(800px 400px at 90% 0%, rgba(56,189,248,.2), transparent 60%),
    linear-gradient(180deg, var(--f-bg2), var(--f-bg1));
}
.site-footer .footer-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 50% 120%, rgba(255,255,255,.12), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='240' viewBox='0 0 1440 240' preserveAspectRatio='none'><path fill='%23ffffff22' d='M0,96L80,90.7C160,85,320,75,480,80C640,85,800,107,960,117.3C1120,128,1280,128,1360,128L1440,128L1440,240L1360,240C1280,240,1120,240,960,240C800,240,640,240,480,240C320,240,160,240,80,240L0,240Z'/></svg>") bottom center / cover no-repeat;
  opacity: .35;
  pointer-events: none;
}
.site-footer .container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(12px, 2vw, 24px); }
.site-footer .footer-grid {
  display: grid; grid-template-columns: minmax(220px, 1.2fr) 1fr 1fr;
  gap: clamp(16px, 2vw, 36px); padding-block: clamp(28px, 3vw, 56px);
}
.site-footer .brand-logo { height: 65px; width: 80px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.site-footer .tagline { margin: 10px 0 16px; font-size: .95rem; opacity: .9; }
.site-footer .social-list { display:flex; gap:10px; align-items:center; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.site-footer .social-list a {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  transition: transform .18s ease, background .18s ease, border-color .18s ease; text-decoration:none;
}
.site-footer .social-list a:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.site-footer .social-list .ico { width:20px; height:20px; fill:currentColor; color:#eaf6ff; }
.site-footer .footer-links { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.site-footer .footer-links h3, .site-footer .footer-contact h3 {
  font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; margin:4px 0 10px; color:#ddf0ff; opacity:.9;
}
.site-footer .footer-links a, .site-footer .footer-contact a, .site-footer .footer-contact address {
  display:block; color:#e8f3ff; opacity:.9; text-decoration:none; margin:6px 0; font-size:.95rem;
}
.site-footer .footer-links a:hover, .site-footer .footer-contact a:hover { opacity:1; text-decoration:underline; }
.site-footer .footer-contact address { font-style:normal; opacity:.85; }
.site-footer .footer-bottom { border-top:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18)); }
.site-footer .footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:12px; font-size:.9rem; color:#dbeafe; }

/* Responsive for footer */
@media (max-width: 920px) {
  .site-footer .footer-grid { grid-template-columns:1fr 1fr; }
  .site-footer .footer-contact { grid-column:1 / -1; }
}
@media (max-width: 640px) {
  .site-footer .footer-grid { grid-template-columns:1fr; }
  .site-footer .footer-links { grid-template-columns:1fr; }
  .site-footer .footer-bottom-inner { flex-direction:column; align-items:flex-start; }
}

/* Screen-reader only */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Header: two logos + divider ===== */
.brand-duo { display:flex; align-items:center; gap:12px; }
.brand-duo .brand img { height:50px; width:auto; }
.brand-duo .vbar { color:#94a3b8; font-weight:800; font-size:18px; line-height:1; padding:0 4px; user-select:none; }
[dir="rtl"] .brand-duo { flex-direction:row-reverse; }
[dir="rtl"] .brand-duo .vbar { transform: scaleX(-1); }

/* Align right actions */
.nav-actions{ display:flex; align-items:center; gap:10px; }
.search-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e5e7eb; padding:8px 12px; border-radius:10px;
  cursor:pointer; font-weight:600; color:var(--ink);
}
.search-toggle .ico{ width:18px; height:18px; fill:currentColor; }

/* ===== Search Panel (below header) ===== */
.search-panel { background:#f5f9ff; border-bottom:1px solid #e5e7eb; }
.search-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  margin:12px auto 18px; padding:14px; box-shadow:0 20px 50px rgba(2,8,23,.06);
  max-width:min(900px, 100%);
}
.search-input-wrap{
  position:relative; display:flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px;
}
.search-input-wrap .ico{ width:20px; height:20px; fill:#64748b; }
#siteSearchInput{ flex:1; border:0; outline:none; font-size:1rem; background:transparent; }
.search-input-wrap .clear{ border:0; background:#f1f5f9; color:#0f172a; border-radius:8px; padding:4px 8px; cursor:pointer; }
.search-results{ margin-top:10px; display:grid; gap:8px; }
.search-item{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; text-decoration:none; color:var(--ink);
}
.search-item:hover{ background:#f8fafc; }
.search-item .title{ font-weight:600; }
.search-item .path{ color:var(--muted); font-size:.9rem; }
.search-item.active{ outline:3px solid var(--ring); }
.search-hint{ margin-top:8px; color:#64748b; font-size:.9rem; }
.search-hint kbd{
  border:1px solid #cbd5e1; border-bottom-width:2px; border-radius:6px; padding:0 6px; font:inherit; font-size:.88em;
  background:#f8fafc; color:#0f172a;
}

/* Mobile tweaks for search/header */
@media (max-width: 900px){
  .brand-duo .brand img{ height:30px; }
  .search-card{ margin:10px auto 14px; padding:12px; }
}

/* === Dropdown fix & layering === */
.site-header{ z-index:1000; }          /* فوق أي بانلز/بحث */
.search-panel{ position:relative; z-index:500; }
.menu>li{ position:relative; }
.menu>li .dropdown{
  position:absolute; left:0; top:calc(100% + 6px);
  min-width:220px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px;
  box-shadow:0 16px 40px rgba(2,8,23,.08); display:none; z-index:1100;
}
.menu>li .dropdown a{ display:block; padding:10px; border-radius:8px; color:var(--ink); text-decoration:none; }
.menu>li .dropdown a:hover{ background:#f8fafc; }
.menu>li:hover .dropdown, .menu>li:focus-within .dropdown{ display:block; }
.menu>li.open .dropdown{ display:block; }

/* Hover bridge to prevent flicker */
.menu>li.has-sub{ position:relative; }
.menu>li.has-sub::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px; z-index:1099;
}
.menu>li:hover .dropdown,
.menu>li:focus-within .dropdown,
.menu>li.hovering .dropdown,
.menu>li.open .dropdown{ display:block; }
@media (max-width:900px){
  .menu>li .dropdown{ position:static; display:none; box-shadow:none; border:none; padding:4px 0 8px; }
  .menu>li.open .dropdown{ display:block; }
  .menu>li.has-sub::after{ display:none; }
}

/* ===== Maps section — Unified Card ===== */
.section.maps{ padding:22px 0 16px; }

/* الكارد الموحد */
.maps-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 16px 40px rgba(2,8,23,.06); overflow:hidden;
}
.maps-split{
  display:grid; align-items:center;
  grid-template-columns: minmax(320px,1.7fr) minmax(260px,1fr);
}

/* جانب الخريطة */
.maps-pane{ padding:14px; }
.globe-wrap{ display:flex; justify-content:center; }
canvas#globe{ width:min(440px,100%); height:auto; display:block; } /* حجم أصغر */
.map-note{ color:#64748b; font-size:.9rem; margin-top:6px; text-align:center }

/* جانب الكاتيجوري داخل نفس الكارد */
.cats-pane{
  position:relative; padding:14px;
  background:linear-gradient(180deg,#fcfeff,#f7fbff);
  border-left:1px solid #e9eef3; /* فاصل داخلي ناعم */
}
.cats-pane .cat-title{ margin:.2rem 0 10px; font-size:1rem; font-weight:700; color:#0a2b47; }

/* شبكة الكاتيجوري */
.wefe-cats{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr));
}
.wefe-cats li{ display:block; }
.wefe-cats li.span2{ grid-column: span 2; }
.wefe-cats .cat{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:10px 12px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow:0 8px 18px rgba(2,8,23,.05);
}
.wefe-cats .cat:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(2,8,23,.08); border-color:#dbe3ea; }
.wefe-cats .label{ font-weight:600; }
.wefe-cats .dot{
  --ring:#94a3b8;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:3px solid var(--ring);
  box-shadow:0 8px 20px rgba(2,8,23,.06), inset 0 0 0 2px #fff;
}
.wefe-cats .ico{ width:26px; height:26px; fill: var(--ring); }
.cat.water  .dot{ --ring:#3b82f6; }
.cat.energy .dot{ --ring:#f59e0b; }
.cat.food   .dot{ --ring:#22c55e; }
.cat.eco    .dot{ --ring:#f97316; }
.cat.wefe .dot{
  border:0; padding:3px; background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(#3b82f6,#22c55e,#f59e0b,#f97316,#3b82f6) border-box;
  border:3px solid transparent;
}
.cat.wefe .ico{ fill:#0a4d8c; }

/* CTA أسفل السكشن */
.maps-cta{ margin-top:12px }

/* Responsive for maps */
@media (max-width: 980px){
  .maps-split{ grid-template-columns:1fr; }
  .cats-pane{ border-left:0; border-top:1px solid #e9eef3; }
  .wefe-cats{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  canvas#globe{ width:min(380px,100%); }
}
@media (max-width: 640px){
  .wefe-cats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  canvas#globe{ width:min(340px,100%); }
}

/* ===== News & Events ===== */
.section.news{ padding:26px 0 18px; }
.news-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.news-grid{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.news-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 14px 30px rgba(2,8,23,.06);
}
.news-thumb{ aspect-ratio:16/9; background: linear-gradient(135deg,#eaf4ff,#f7fbff); position:relative; overflow:hidden; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:8px; }
.news-meta{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:#64748b; }
.badge.cat{ display:inline-block; border:1px solid #e5e7eb; border-radius:999px; padding:.15rem .5rem; font-size:.78rem; color:#475569; background:#f8fafc; }
.news-title{ font-weight:700; line-height:1.3; color:#0a2b47; text-decoration:none; }
.news-title:hover{ text-decoration:underline; }
.news-excerpt{ color:#64748b; font-size:.95rem; }
@media (max-width: 980px){ .news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .news-grid{ grid-template-columns:1fr; } }

/* ===== Partners ===== */
.section.partners{ padding:24px 0 30px; background:linear-gradient(180deg,#f8fbff,#f5f9ff); }
.partners-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.partners-logos{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items:center;
}
.partner{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
  display:flex; align-items:center; justify-content:center;
  height:86px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
  box-shadow:0 8px 20px rgba(2,8,23,.05); filter: grayscale(1) opacity(.9);
}
.partner:hover{
  transform: translateY(-2px);
  filter: grayscale(0) opacity(1);
  box-shadow:0 14px 30px rgba(2,8,23,.08); border-color:#dbe3ea;
}
.partner img{ max-height:46px; width:auto; object-fit:contain; }


/* ===== WEFE charts — Theme-aware block ===== */
.wefe-charts{padding:24px 0}
.wefe-charts .wefe-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.wefe-charts .wefe-title{margin:0;font-size:clamp(20px,2vw,26px)}
.wefe-charts .wefe-sub{margin:.2rem 0 0;color:var(--muted, #5f6b7a);font-size:14px}

.wefe-charts .cards-grid{
  display:grid;gap:var(--gap,16px)
}
.wefe-charts .cards-grid.doughnuts{grid-template-columns:repeat(5,minmax(160px,1fr))}
@media (max-width:1200px){.wefe-charts .cards-grid.doughnuts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.wefe-charts .cards-grid.doughnuts{grid-template-columns:repeat(2,1fr)}}
.wefe-charts .cards-grid.pillars{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.wefe-charts .cards-grid.pillars{grid-template-columns:1fr}}

.wefe-charts .card{
  background:var(--card-bg, #fff);
  color:var(--text-color, #1b2430);
  border:1px solid var(--card-border, #e7ecf3);
  border-radius:16px;padding:14px;overflow:hidden;
  box-shadow:var(--card-shadow, 0 6px 20px rgba(0,0,0,.05));
}
html[data-theme="dark"] .wefe-charts .card,
body.dark .wefe-charts .card{
  background:var(--card-bg-dark, #121835);
  color:#e6ecff;border-color:rgba(255,255,255,.08)
}

.wefe-charts .card-title{margin:6px 0 10px;font-size:16px}
.wefe-charts .pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:700;background:var(--chip-bg,#eef3ff);color:var(--chip-ink,#233a7a)
}
.wefe-charts .legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wefe-charts .legend span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted,#6b778c)}
.wefe-charts .legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

.wefe-charts .canvas-box{height:220px}
.wefe-charts .canvas-tall{height:340px}
.wefe-charts .footnote{margin-top:8px;font-size:12px;color:var(--muted,#6b778c)}

.tone-wefe .pill{background:#e8ecff;color:#2a3b8f}
.tone-water .pill{background:#e8f3ff;color:#155e9c}
.tone-energy .pill{background:#fff3e3;color:#8a5a00}
.tone-food .pill{background:#e8ffe8;color:#0e6e2d}
.tone-eco  .pill{background:#efe8ff;color:#5a34c9}

.wefe-charts canvas{width:100% !important;height:100% !important}