/**
 * Brand override — Interstellar Cyberdefence (blog_id 3) only.
 *
 * The palette (theme.json / tailwind.config.js) is one shared file on disk
 * for every site in the multisite network, so it can't be edited directly
 * without repainting the other two sites too. This file re-points just the
 * two colours this site wants different; functions.php only enqueues it
 * when the current blog is Cyberdefence.
 *
 *   #AB4FEF (primary-50, the theme's purple)         → #4285F4 (already this
 *                                                        theme's secondary-50)
 *   #221D28 (primary-300, the page's base dark
 *            surface — footer, header pills, panel
 *            backgrounds, etc.)                       → #0E1425 (already
 *                                                        secondary-400)
 *   #210039 (raw hex on the keynote/approach-cards
 *            card backgrounds, not a palette slug)    → #0E1425
 *
 * Everything below sits inside Tailwind's own "utilities" layer, not
 * unlayered. Tailwind v4 wraps its whole build in
 * `@layer theme, base, components, utilities;`, and per the cascade-layers
 * spec, !important priority between layers is the REVERSE of normal
 * priority: a named layer's !important rule beats an unlayered !important
 * rule no matter its specificity or how much later it's loaded. Every
 * "!-important" utility this theme uses (.\!text-primary-50, .\!bg-[#…])
 * compiles into that utilities layer, so an unlayered override here would
 * always lose to it. Declaring the same layer name here appends these rules
 * to the end of that same layer instead, where they win on ordinary
 * specificity/source-order like any other same-layer rule.
 */
@layer utilities {
    /* Covers every var(--color-primary-50, ...) / var(--color-primary-300, ...)
       usage across the theme in one shot — text/bg/border-primary-50, the
       hero gradient, category pills, the footer, header glass pills, panel
       backgrounds, etc. — since they all resolve back to these. */
    :root {
        --wp--preset--color--primary-50: #4285F4 !important;
        --wp--preset--color--primary-300: #0E1425 !important;
    }

    /* The two spots that hardcode the old purple/dark-purple as a raw
       Tailwind arbitrary value instead of the CSS variable, so the rule
       above can't reach them. */
    [class*="bg-[#AB4FEF]"] {
        background-color: #4285F4 !important;
    }

    [class*="bg-[#210039]"] {
        background-color: #0E1425 !important;
    }

    /**
     * Arrow-link CTAs — the "PLAN EEN GESPREK" style buttons: an <a
     * class="group inline-flex items-center gap-* text-primary-50 ...
     * hover:text-primary-100"> wrapping an uppercase label and an arrow SVG.
     * Used across text_image, text_list_image, cta_card, showcase,
     * service_list, hero, article_text, logo_slider and single-vacancy in
     * two class forms (plain and !-important), so the selector below
     * matches on the shape of the component rather than one exact class
     * string.
     *
     * Scoped this narrowly (not just "any text-primary-50") on purpose:
     * plenty of other things reuse that colour on this site — small icons,
     * the vacancy page's phone number — and those stay the blue set above.
     * The primary nav bar and the header's Contact button get their own,
     * separately-scoped yellow rules below instead of being swept up here.
     *
     *   #FFEB4A (requested)                → base
     *   #E0CF41 (~12% darker, same family) → hover
     */
    a.group[class*="inline-flex"][class*="items-center"][class*="text-primary-50"] {
        color: #FFEB4A !important;
    }

    a.group[class*="inline-flex"][class*="items-center"][class*="text-primary-50"] span {
        color: inherit;
    }

    a.group[class*="inline-flex"][class*="items-center"][class*="text-primary-50"]:hover,
    a.group[class*="inline-flex"][class*="items-center"][class*="text-primary-50"]:hover span {
        color: #E0CF41 !important;
    }

    /**
     * Header — the primary nav bar's top-level items.
     *
     *   inactive (not the current page, not hovered) → #FFFFFF — this is
     *     already what the theme's own text-neutral-50 resolves to, so it
     *     needs no override here; noted for completeness.
     *   active (the current page, and hover as its preview)  → #E9DD9A
     *
     * Scoped to nav[aria-label="Hoofdmenu"] (the desktop bar specifically —
     * the mobile panel carries a different aria-label, "Hoofdmenu (mobiel)")
     * and to font-black + uppercase, the classes unique to a top-level item
     * (mb_render_desktop_menu_item()) — a dropdown panel's own sub-links
     * (mb_render_dropdown_simple() etc.) use a plainer
     * text-neutral-200/hover:text-primary-50 style without those classes,
     * so they're untouched and stay blue.
     *
     * [class~="…"] (exact whitespace-separated token), not [class*="…"]
     * (substring) — an inactive item's class list is "… text-neutral-50
     * hover:text-primary-50", and "hover:text-primary-50" itself CONTAINS
     * "text-primary-50" as a substring. A *= match on "text-primary-50"
     * therefore fired on every item, active or not (the bug this replaced:
     * inactive items showing yellow-tinted white instead of plain white).
     * ~= only matches a token that's exactly "text-primary-50" on its own,
     * which just the current item's class list has.
     */
    nav[aria-label="Hoofdmenu"] a[class*="font-black"][class*="uppercase"][class~="text-primary-50"] {
        color: #E9DD9A !important;
    }

    nav[aria-label="Hoofdmenu"] a[class*="font-black"][class*="uppercase"][class~="hover:text-primary-50"]:hover {
        color: #E9DD9A !important;
    }

    /* The Contact button, desktop pill and its mobile-panel twin — both are
       class="... rounded-full bg-primary-50 ... font-black uppercase
       text-neutral-50 ... hover:bg-primary-100 ...", scoped to the header so
       this doesn't touch any other solid bg-primary-50 button on the site. */
    header[data-site-header] a[class*="rounded-full"][class*="bg-primary-50"][class*="font-black"] {
        background-color: #FFEB4A !important;
        color: #0E1425 !important;
    }

    header[data-site-header] a[class*="rounded-full"][class*="bg-primary-50"][class*="font-black"]:hover {
        background-color: #E0CF41 !important;
    }
}