/**
 * UNIFIED SECTION COLORS — Shrooq Al-Anwar
 * ===========================================
 * Two alternating background tones for visual rhythm.
 *   Tone A (primary):   white / dark navy
 *   Tone B (alternate): light gray / darker navy
 *
 * Sections with background images (hero, stats, CTA) are excluded.
 * This file is loaded AFTER page-specific inline <style> so it
 * overrides decorative gradients & radial patterns.
 */

/* ─── Global Section Tokens ─── */
:root {
    --sec-bg-a: var(--shrooq-bg, #ffffff);
    --sec-bg-b: var(--shrooq-bg-alt, #f8fafc);
    --sec-card:  var(--shrooq-bg-card, #ffffff);
    --sec-card-alt: var(--shrooq-bg-alt, #f8fafc);
    --sec-border: var(--shrooq-border, rgba(0, 0, 0, 0.06));
    --sec-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    --sec-text:  var(--shrooq-text-heading, #0c1929);
    --sec-text-muted: var(--shrooq-text-muted, #64748b);
}

/* ═══════════════════════════════════════════
   FRONT-PAGE SECTIONS
   ═══════════════════════════════════════════ */

/* ── About (Tone A — white / dark navy) ── */
.about-section {
    background: var(--sec-bg-a) !important;
    --about-bg: var(--sec-bg-a);
    --about-card-bg: var(--sec-card);
    --about-border: var(--sec-border);
    --about-feature-bg: var(--sec-card-alt);
    --about-shadow: var(--sec-shadow);
    --about-float-bg: var(--sec-card);
    --about-float-border: var(--sec-border);
}

/* ── Timeline (Tone B) ── */
.timeline-section {
    background: var(--sec-bg-b) !important;
    --tl-bg: var(--sec-bg-b);
    --tl-card-bg: var(--sec-card);
}

/* ── Sectors (Tone A) ── */
.sectors-section {
    background: var(--sec-bg-a) !important;
    --sec-bg: var(--sec-bg-a);
    --sec-card-bg: var(--sec-card);
    --sec-border: var(--sec-border);
}

/* ── Projects (Tone B) ── */
.projects-section {
    background: var(--sec-bg-b) !important;
    --proj-bg: var(--sec-bg-b);
    --proj-card-bg: var(--sec-card);
}

/* ── Trust (Tone B) ── */
.trust-section {
    background: var(--sec-bg-b) !important;
    --trust-bg: var(--sec-bg-b);
    --trust-badge-bg: var(--sec-card);
}


/* ═══════════════════════════════════════════
   PAGE-ABOUT SECTIONS
   ═══════════════════════════════════════════ */
.about-section.story-section     { background: var(--sec-bg-a) !important; }
.about-section.vm-section        { background: var(--sec-bg-b) !important; }
.about-section.values-section    { background: var(--sec-bg-a) !important; }
.about-section.timeline-section  { background: var(--sec-bg-b) !important; }
.about-section.stats-section     { background: var(--sec-bg-a) !important; }
.about-section.sectors-section   { background: var(--sec-bg-b) !important; }
.about-section.certs-section     { background: var(--sec-bg-a) !important; }
.about-section.partners-section  { background: var(--sec-bg-b) !important; }
.about-section.branches-section  { background: var(--sec-bg-a) !important; }
.about-section.financial-section { background: var(--sec-bg-b) !important; }
.about-section.download-section  { background: var(--sec-bg-a) !important; }


/* ═══════════════════════════════════════════
   PAGE-SERVICES SECTIONS
   ═══════════════════════════════════════════ */
.srv-capabilities   { background: var(--sec-bg-a) !important; }
.sectors-section     { background: var(--sec-bg-b) !important; }
.marine-section      { background: var(--sec-bg-a) !important; }
.specialized-section { background: var(--sec-bg-b) !important; }
.somo-section        { background: var(--sec-bg-a) !important; }
.fleet-section       { background: var(--sec-bg-b) !important; }
.safety-section      { background: var(--sec-bg-a) !important; }
.achievements-section { background: var(--sec-bg-b) !important; }
.certs-section       { background: var(--sec-bg-a) !important; }
.partners-section    { background: var(--sec-bg-b) !important; }
.why-section         { background: var(--sec-bg-a) !important; }
.map-section         { background: var(--sec-bg-b) !important; }


/* ═══════════════════════════════════════════
   PAGE-PROJECTS SECTIONS
   ═══════════════════════════════════════════ */
.prj-showcase    { background: var(--sec-bg-a) !important; }
.prj-flagship    { background: var(--sec-bg-b) !important; }
.prj-capabilities { background: var(--sec-bg-a) !important; }
.prj-process     { background: var(--sec-bg-b) !important; }
.prj-metrics     { background: var(--sec-bg-a) !important; }
.prj-clients     { background: var(--sec-bg-b) !important; }


/* ═══════════════════════════════════════════
   PAGE-CONTACT SECTIONS
   ═══════════════════════════════════════════ */
.ct-strip         { background: var(--sec-bg-a) !important; }
.ct-forms-section { background: var(--sec-bg-b) !important; }
.ct-info-section  { background: var(--sec-bg-a) !important; }
.ct-faq-section   { background: var(--sec-bg-b) !important; }


/* ═══════════════════════════════════════════
   PAGE-CONTRACTS SECTIONS
   ═══════════════════════════════════════════ */
.cnt-overview    { background: var(--sec-bg-a) !important; }
.cnt-transport   { background: var(--sec-bg-b) !important; }
.cnt-somo        { background: var(--sec-bg-a) !important; }
.cnt-industrial  { background: var(--sec-bg-b) !important; }
.cnt-specialized { background: var(--sec-bg-a) !important; }
.cnt-engineering { background: var(--sec-bg-b) !important; }
.cnt-ongoing     { background: var(--sec-bg-a) !important; }


/* ═══════════════════════════════════════════
   PAGE-GALLERY
   ═══════════════════════════════════════════ */
.gal-wrap { background: var(--sec-bg-a) !important; }


/* ═══════════════════════════════════════════
   PAGE-SUSTAINABILITY
   ═══════════════════════════════════════════ */
.sus-commitment { background: var(--sec-bg-a) !important; }
.sus-pillars    { background: var(--sec-bg-b) !important; }
.sus-hse        { background: var(--sec-bg-a) !important; }
.sus-community  { background: var(--sec-bg-b) !important; }


/* ═══════════════════════════════════════════
   PAGE-BRANCHES
   ═══════════════════════════════════════════ */
.br-hub           { background: var(--sec-bg-a) !important; }
.br-network       { background: var(--sec-bg-b) !important; }
.br-map-section   { background: var(--sec-bg-a) !important; }


/* ═══════════════════════════════════════════
   EXCLUDED — Background image sections
   (Hero, Stats Cinematic, CTA, Page Heros)
   These keep their original styling.
   ═══════════════════════════════════════════ */
/* #hero — untouched */
/* .stats-cinematic — untouched (has bg image) */
/* CTA template part — untouched */


/* ═══════════════════════════════════════════
   PAGE-PRIVACY & PAGE-TERMS
   ═══════════════════════════════════════════ */
.legal-content,
.privacy-content,
.terms-content {
    background: var(--sec-bg-a) !important;
}


/* ═══════════════════════════════════════════
   PAGE-NEWS
   ═══════════════════════════════════════════ */
.nw-page { background: var(--sec-bg-a) !important; }


/* ═══════════════════════════════════════════
   GLOBAL — Remove decorative pseudo-element overlays
   that add colored gradients/patterns on regular sections.
   Excluded: hero, stats-cinematic, sus-hero, sus-cta, page-hero, shrooq-cta-section
   ═══════════════════════════════════════════ */
section:not(#hero):not(.stats-cinematic):not(.page-hero):not(.shrooq-cta-section)::before,
section:not(#hero):not(.stats-cinematic):not(.page-hero):not(.shrooq-cta-section)::after {
    background: none !important;
    background-image: none !important;
}