/* EEC identity v2 — 2026-10-10. Enable only with body.expert-brand.
 * Logo source colours: #274653 / #FABE17.
 * Appearance only: no layout, carousel, visibility or interaction changes.
 */

body.expert-brand {
    --expert-navy: #274653;
    --expert-navy-deep: #18343e;
    --expert-gold: #fabe17;
    --expert-gold-light: #ffd56a;
    --expert-border: #e1e8eb;
    --expert-grid: rgba(39, 70, 83, 0.035);
    --expert-grid-size: 48px;
    --expert-button: linear-gradient(115deg, #fabe17, #ffd56a);
    --expert-dark: linear-gradient(135deg, #18343e, #274653);
    background-color: #ffffff;
    color: var(--expert-navy);
}

/* Header: use the outer header only, not the timeline's inner header. */
body.expert-brand > header {
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 3px 16px rgba(24, 52, 62, 0.08);
}

body.expert-brand > header > .bg-eec-green {
    background-image: var(--expert-dark);
}

body.expert-brand > header nav a.text-eec-green:hover {
    color: var(--expert-navy);
    box-shadow: inset 0 -2px var(--expert-gold);
}

/* Keep white hero text readable after replacing the former muted gold. */
body.expert-brand .hero-section h1 {
    background-color: rgba(24, 52, 62, 0.90);
    background-image: linear-gradient(135deg, rgba(24, 52, 62, 0.9), rgba(39, 70, 83, 0.80));
    color: #ffffff;
    box-shadow: inset 0 -2px var(--expert-gold);
}

body.expert-brand .hero-section p {
    background-color: rgba(24, 52, 62, 0.86);
    color: #ffffff;
}

/* Engineering grid: three background layers, no overlay that can block clicks.
 * The white fade softens the grid at the top and bottom of each section.
 */
body.expert-brand #services,
body.expert-brand #partners,
body.expert-brand #flixita-timeline-section {
    background-color: #f9fbfb;
    background-image:
        linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%),
        linear-gradient(var(--expert-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--expert-grid) 1px, transparent 1px);
    background-size: 100% 100%, var(--expert-grid-size) var(--expert-grid-size), var(--expert-grid-size) var(--expert-grid-size);
    background-position: center, center, center;
}

/* Navy headings on white remain readable; bright gold is used as an accent. */
body.expert-brand #about .text-eec-gold,
body.expert-brand #services h2,
body.expert-brand #services .service-card h3,
body.expert-brand #projects h2 .bg-clip-text {
    color: var(--expert-navy);
    -webkit-text-fill-color: currentColor;
    background-image: none;
}

body.expert-brand #services h2 {
    animation: none;
}

body.expert-brand #projects h2 > .absolute {
    background-image: linear-gradient(90deg, transparent, var(--expert-gold), transparent);
}

body.expert-brand #projects {
    background-image: linear-gradient(180deg, #ffffff, #f7f9f9, #ffffff);
}

body.expert-brand #google-reviews {
    background-image: linear-gradient(135deg, #ffffff, #edf3f5, #ffffff);
}

/* Existing cards keep their sizing, content, display and transforms. */
body.expert-brand #services .service-card > .bg-white {
    background-color: #ffffff;
    border-color: var(--expert-border);
    box-shadow: 0 6px 20px rgba(24, 52, 62, 0.06);
}

body.expert-brand #services .service-card:hover > .bg-white {
    border-color: var(--expert-gold);
    box-shadow: 0 10px 26px rgba(24, 52, 62, 0.09);
}

/* Reduce the existing icon glow; keep the card content above the decoration. */
body.expert-brand #services .service-card .blur-xl {
    opacity: 0.16;
}

body.expert-brand #services .service-card .from-eec-green.to-eec-gold {
    background-image: var(--expert-button);
}

body.expert-brand #services .service-card svg.text-eec-green {
    color: var(--expert-navy);
}

/* The consultation panel has white copy; its entire background stays dark. */
body.expert-brand #services .from-eec-green.to-eec-gold {
    background-image: var(--expert-dark);
}

/* Solid gold primary actions, with high-contrast navy lettering. */
body.expert-brand > header nav a.bg-eec-green,
body.expert-brand #services .service-request-btn,
body.expert-brand a.from-eec-green.to-eec-gold,
body.expert-brand #partners .partners-more {
    background-color: var(--expert-gold);
    background-image: var(--expert-button);
    color: var(--expert-navy-deep);
    box-shadow: 0 3px 10px rgba(250, 190, 23, 0.15);
}

body.expert-brand > header nav a.bg-eec-green:hover,
body.expert-brand #services .service-request-btn:hover,
body.expert-brand a.from-eec-green.to-eec-gold:hover,
body.expert-brand #partners .partners-more:hover {
    background-image: linear-gradient(115deg, #ffd56a, #fabe17);
    color: var(--expert-navy-deep);
}

body.expert-brand > header nav a:focus-visible,
body.expert-brand #services .service-request-btn:focus-visible,
body.expert-brand #partners .partners-more:focus-visible {
    outline: 2px solid var(--expert-navy);
    outline-offset: 4px;
}

/* Override the sections' local variables without changing their Blade files. */
body.expert-brand #partners {
    --partners-green: var(--expert-navy);
    --partners-gold: var(--expert-gold);
    --partners-border: var(--expert-border);
}

body.expert-brand #partners .partners-panel,
body.expert-brand #partners .client-card {
    background-color: #ffffff;
    box-shadow: 0 5px 18px rgba(24, 52, 62, 0.05);
}

body.expert-brand #flixita-timeline-section {
    --fxt-accent: var(--expert-gold);
    --fxt-navy: var(--expert-navy);
    --fxt-line: #dce5e8;
    --fxt-bg: #ffffff;
}

body.expert-brand #flixita-timeline-section .fxt-label {
    background-color: #ffffff;
}

body.expert-brand #flixita-timeline-section .fxt-dots {
    opacity: 0.15;
}

/* Dark petroleum footer with a quieter white grid. */
body.expert-brand #footer {
    background-color: var(--expert-navy-deep);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        var(--expert-dark);
    background-size: var(--expert-grid-size) var(--expert-grid-size), var(--expert-grid-size) var(--expert-grid-size), 100% 100%;
    color: #ffffff;
    box-shadow: inset 0 1px rgba(250, 190, 23, 0.40);
}

/* The current footer uses the coloured logo. Keep it readable on a light tile.
 * A white-logo source swap can be reviewed separately in __footer.blade.php.
 */
body.expert-brand #footer img[alt="شعار الموقع"] {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 0 5px #ffffff;
}

body.expert-brand #footer a:hover {
    color: var(--expert-gold);
}

body.expert-brand #footer a:focus-visible {
    outline: 2px solid var(--expert-gold);
    outline-offset: 4px;
}

/* V2: extend the engineering grid to the existing navy surfaces.
 * A wider navy tonal range and a soft gold corner light make the gradient
 * visible while retaining contrast for white copy. The approved footer
 * continues to use its original --expert-dark gradient above.
 */
body.expert-brand {
    --expert-navy-surface:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(ellipse at 0% 0%, rgba(250, 190, 23, 0.16), transparent 54%),
        radial-gradient(ellipse at 100% 100%, rgba(95, 159, 176, 0.10), transparent 60%),
        linear-gradient(125deg, #12303c 0%, #274653 52%, #365d69 100%);
}

body.expert-brand > header > .bg-eec-green,
body.expert-brand .hero-section h1,
body.expert-brand .hero-section p,
body.expert-brand .hero-section .bg-eec-green,
body.expert-brand #services .from-eec-green.to-eec-gold.max-w-4xl,
body.expert-brand #projects .portfolio-tab.bg-eec-green,
body.expert-brand > div.fixed .bg-eec-green {
    background-color: var(--expert-navy-deep);
    background-image: var(--expert-navy-surface);
    background-size:
        var(--expert-navy-cell, var(--expert-grid-size)) var(--expert-navy-cell, var(--expert-grid-size)),
        var(--expert-navy-cell, var(--expert-grid-size)) var(--expert-navy-cell, var(--expert-grid-size)),
        100% 100%,
        100% 100%,
        100% 100%;
    background-position: center;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}

/* Keep the pattern in proportion on compact navy controls. */
body.expert-brand .hero-section .bg-eec-green,
body.expert-brand #projects .portfolio-tab.bg-eec-green,
body.expert-brand > div.fixed .bg-eec-green {
    --expert-navy-cell: 20px;
}

@media (max-width: 767px) {
    body.expert-brand {
        --expert-grid-size: 36px;
        --expert-grid: rgba(39, 70, 83, 0.028);
    }
}