/* ZECSE: EPC for substations, solar, power plants and transmission lines. Logo lime-to-green, near-black green; Barlow + Inter.
   Contrast checked: dark text on lime 11:1, green text #3F6614 6.7:1 on white, light text on dark 10:1. Lime is never text on white. */
:root {
  --font-display: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.16em;
  --c-bg: #FFFFFF;
  --c-surface: #F3F6F0;
  --c-ink: #0E1A14;
  --c-muted: #56616A;
  --c-line: rgba(14, 26, 20, 0.12);
  --c-accent: #C4D600;
  --c-accent-ink: #0E1A14;
  --c-accent-text: #3F6614;
  --c-dark: #0E1A14;
  --c-dark-ink: #F3F6F0;
  --c-dark-muted: #B9C6BE;
  --c-dark-line: rgba(243, 246, 240, 0.14);
  --radius: 2px;
  --radius-lg: 4px;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.05; }
.site-header .brand__logo { height: 60px; }
.footer-brand__logo { height: 54px; }
.stat__value, .step::before { color: var(--c-accent-text); font-weight: 700; }
.section--dark .stat__value, .section--dark .step::before { color: var(--c-accent); }
.card__icon { color: var(--c-accent-text); }
@media (max-width: 640px) { .site-header .brand__logo { height: 44px; } }

/* Solar PV section (pages/solar, pages/ar/solar; 14 Oct 2026) */
:root { --font-arabic: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.solar-nav { border-bottom: 1px solid var(--c-line); background: var(--c-bg); position: sticky; top: var(--header-h, 72px); z-index: 5; }
.solar-nav ul { display: flex; gap: 6px 22px; list-style: none; margin: 0; padding: 14px 0; overflow-x: auto; white-space: nowrap; font-size: .92rem; }
.solar-nav a { color: var(--c-muted); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.solar-nav a:hover, .solar-nav a[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.cards[style*="--cols:4"] { grid-template-columns: repeat(4, 1fr); }
.group-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.group-logo { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg); text-decoration: none; color: var(--c-muted); font-size: .92rem; line-height: 1.5; }
.group-logo img { height: 56px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
[dir="rtl"] .group-logo img { object-position: right center; }
.group-logo:hover { border-color: var(--c-accent); }
.group-tag { margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--c-accent-text); }
@media (max-width: 960px) { .group-logos, .cards[style*="--cols:4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .group-logos, .cards[style*="--cols:4"] { grid-template-columns: 1fr; } .solar-nav { top: 0; position: static; } }
.lang-switch a, a[lang="ar"] { letter-spacing: 0 !important; text-transform: none !important; font-family: var(--font-arabic); }
[dir="rtl"] .hero .eyebrow::before, [dir="rtl"] .page-hero--image .eyebrow::before { margin: 0 0 4px 12px; }

/* 14 Oct 2026: the language switch is a globe icon with the language code (AR / EN) */
.site-header .lang-switch a { display: inline-flex; align-items: center; gap: 6px; font-family: inherit !important; font-weight: 600; font-size: 13px; letter-spacing: .04em !important; }
.lang-switch svg { flex-shrink: 0; }

/* 14 Oct 2026: bigger logo, so the menu is a little tighter and never wraps onto two lines */
@media (min-width: 961px) {
  .site-header .site-nav { gap: 22px; }
  .site-header .site-nav ul { gap: 20px; }
  .site-header .site-nav a:not(.btn) { letter-spacing: .05em; white-space: nowrap; }
  .site-header .header-cta { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1280px) {
  .site-header .brand__logo { height: 50px; }
  .site-header .site-nav ul { gap: 14px; }
  .site-header .site-nav a:not(.btn) { font-size: .8rem; letter-spacing: .03em; }
}
@media (min-width: 961px) and (max-width: 1120px) { .site-header .header-cta { display: none; } }

/* small WhatsApp icon after the phone number (build.py whatsapp) */
.wa-icon { display: inline-flex; vertical-align: middle; margin-inline-start: 8px; color: #25D366 !important; text-decoration: none !important; }
.wa-icon::after { display: none !important; }
.wa-icon:hover { opacity: .8; }