/* Site header/menu only — does not touch the legacy case-study content */

#site-header {
    transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

#site-header.is-scrolled {
    background: rgba(250, 247, 240, .96);
    box-shadow: 0 18px 40px -34px rgba(17, 28, 64, .55);
    backdrop-filter: blur(18px);
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 5rem;
    inset-inline: 0;
    z-index: 40;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    border-bottom: 1px solid rgba(27, 42, 91, .12);
    background: #faf7f0;
    box-shadow: 0 30px 60px -45px rgba(17, 28, 64, .55);
}

.mobile-nav.is-open {
    display: block;
}

.mobile-nav ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 10px 0 16px;
    list-style: none;
}

.mobile-nav a {
    display: block;
    border-radius: 12px;
    padding: 10px 14px;
    color: rgba(27, 42, 91, .78);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
    background: #f6ecd4;
    color: #1b2a5b;
}

@media (min-width: 1024px) {
    .mobile-nav {
        display: none !important;
    }
}

/* The production header is fixed; give the legacy hero room below it */
main > section:first-child,
main > .cs-hero,
main > .hero,
main > .identity-hero {
    padding-top: 150px;
}

@media (max-width: 1024px) {
    main > section:first-child,
    main > .cs-hero,
    main > .hero,
    main > .identity-hero {
        padding-top: 128px;
    }
}

@media (max-width: 760px) {
    main > section:first-child,
    main > .cs-hero,
    main > .hero,
    main > .identity-hero {
        padding-top: 118px;
    }
}

/* ============================================================
   Site palette lock for case-study pages
   Keeps page chrome and surfaces on the Eshraq palette even when
   a case-study stylesheet defines its own project tokens.
   Targets the elements themselves (not only :root) because an
   inherited value never beats a declaration on the element.
   ============================================================ */

:root,
html,
body,
body.pc-page,
body.cs-page,
.cs-page,
.pc-page,
main,
#main,
#site-header,
#site-footer {
    --color-navy: #1b2a5b !important;
    --color-navy-deep: #111c40 !important;
    --color-gold: #c9a036 !important;
    --color-gold-light: #e8c766 !important;
    --color-gold-pale: #f6ecd4 !important;
    --color-cream: #faf7f0 !important;
    --color-muted: #5a6480 !important;
    --color-ink: #1b2a5b !important;

    --navy: #1b2a5b !important;
    --navy-deep: #111c40 !important;
    --navy-soft: #2e3e7e !important;
    --gold: #c9a036 !important;
    --gold-light: #e8c766 !important;
    --gold-pale: #f6ecd4 !important;
    --cream: #faf7f0 !important;
    --sand: #f3eee2 !important;
    --sand-dark: #e6dcc7 !important;
    --ink: #1b2a5b !important;
    --muted: #5a6480 !important;
    --line: rgba(27, 42, 91, .12) !important;

    --pc-ink: #1b2a5b !important;
    --pc-brand: #1b2a5b !important;
    --pc-brand-hi: #1b2a5b !important;
    --pc-accent: #c9a036 !important;
    --pc-accent-dark: #a9821f !important;
    --pc-paper: #faf7f0 !important;
    --pc-paper-2: #fffdf8 !important;
    --pc-soft: #f3eee2 !important;
    --pc-muted: #5a6480 !important;
    --pc-line: rgba(27, 42, 91, .12) !important;
    --pc-glow: rgba(201, 160, 54, .18) !important;

    --case-ink: #1b2a5b !important;
    --case-paper: #faf7f0 !important;
    --case-wax: #c9a036 !important;
    --case-gray: #5a6480 !important;

    --cs-green: #1b2a5b !important;
    --cs-green-deep: #111c40 !important;
    --cs-copper: #c9a036 !important;
    --cs-copper-light: #e8c766 !important;
    --cs-ink: #1b2a5b !important;
    --cs-cream: #faf7f0 !important;
    --cs-sand: #f3eee2 !important;
    --cs-muted: #5a6480 !important;
    --cs-primary-rgb: 27, 42, 91 !important;
    --cs-primary-deep-rgb: 17, 28, 64 !important;
    --cs-accent-rgb: 201, 160, 54 !important;

    --green: #1b2a5b !important;
    --copper: #c9a036 !important;
}

html,
body,
body.pc-page,
body.cs-page,
body.pc-lightbox-open {
    background: #faf7f0 !important;
    color: #1b2a5b !important;
}

body.pc-page,
body.cs-page {
    font-family: 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
}

#site-footer {
    background-color: #111c40 !important;
    color: #faf7f0;
}