/*
 * Brand colour system — single source of truth for both stacks.
 *
 * Loaded on every page by resources/views/components/layouts/components/standard-header-links.blade.php,
 * so it is available to the legacy Bootstrap CSS (public/css/legacy/*.css) and to
 * the Tailwind build (resources/css/tailwind.config.js maps its `brand.*` colours
 * onto the *-rgb triplets below).
 *
 * Accessibility rule for this palette: text on blue or yellow is always black
 * or near-black. White text does not carry enough contrast against #21A9FF,
 * #45CDFF, #F9D412 or #F9EE89, so it is never paired with them.
 */
:root {
    /* ---------- Brand ---------- */
    --color-blue-500: #21A9FF;
    --color-blue-400: #45CDFF;
    --color-yellow-500: #F9D412;
    --color-yellow-300: #F9EE89;

    /* Derived brand states */
    --color-blue-hover: #1598EA;
    --color-blue-active: #0E83CF;
    --color-yellow-hover: #E9C300;
    --color-yellow-active: #D4B200;

    /* Brand surfaces */
    --color-blue-surface: #EAF8FF;
    --color-blue-surface-active: #CDEEFF;
    --color-yellow-surface: #FFFBE7;

    /* Dark tones of the brand blue. Same hue and saturation as #21A9FF
       (hsl 203 100%), stepped down in lightness — so they read as the brand
       blue in shadow rather than as a separate navy. Used for the top bar and
       for every scrim laid over photo or video. */
    --color-blue-800: #004F80;
    --color-blue-900: #002F4D;
    --color-blue-950: #001C2E;
    --color-blue-800-rgb: 0 79 128;
    --color-blue-900-rgb: 0 47 77;
    --color-blue-950-rgb: 0 28 46;

    /* ---------- Neutrals ---------- */
    --color-black: #000000;
    --color-gray-900: #171717;
    --color-gray-700: #404040;
    --color-gray-500: #737373;
    --color-gray-300: #D4D4D4;
    --color-gray-200: #E5E5E5;
    --color-gray-100: #F5F5F5;
    --color-white: #FFFFFF;

    /* ---------- Semantic ---------- */
    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-gray-500);
    --color-border: var(--color-gray-300);
    --color-background: var(--color-white);
    --color-background-subtle: var(--color-gray-100);
    --color-focus: var(--color-blue-500);

    /* ---------- Channel triplets ----------
       Space separated RGB, so Tailwind can apply opacity modifiers
       (bg-brand-blue/75) and plain CSS can use rgb(var(--x) / 0.5). */
    --brand-blue-rgb: 33 169 255;
    --brand-blue-light-rgb: 69 205 255;
    --color-blue-hover-rgb: 21 152 234;
    --color-blue-active-rgb: 14 131 207;
    --color-blue-surface-rgb: 234 248 255;
    --brand-yellow-rgb: 249 212 18;
    --brand-yellow-light-rgb: 249 238 137;
    --color-yellow-hover-rgb: 233 195 0;
    --color-yellow-active-rgb: 212 178 0;
    --brand-black-rgb: 0 0 0;
    --brand-white-rgb: 255 255 255;

    /* ---------- Aliases ----------
       The names the templates and Tailwind config already use, pointed at the
       system above so there is still one place to change a colour. */
    --brand-blue: var(--color-blue-500);
    --brand-blue-light: var(--color-blue-400);
    --brand-yellow: var(--color-yellow-500);
    --brand-yellow-light: var(--color-yellow-300);
    --brand-black: var(--color-black);
    --brand-white: var(--color-white);
    --brand-surface-light: var(--color-blue-surface);

    /* ---------- Scrims ----------
       Laid over photos and video, toned on the brand blue rather than neutral
       black, so the dark areas of the page still belong to the palette. */
    --brand-overlay-hero: linear-gradient(
        180deg,
        rgb(var(--color-blue-900-rgb) / 0.92) 0%,
        rgb(var(--color-blue-800-rgb) / 0.86) 48%,
        rgb(var(--color-blue-950-rgb) / 0.94) 100%
    );
    --brand-overlay-photo: radial-gradient(
        circle,
        rgb(var(--color-blue-900-rgb) / 0.82) 58%,
        rgb(var(--color-blue-950-rgb) / 0.93) 100%
    );
    --brand-overlay-photo-dark: radial-gradient(
        circle,
        rgb(var(--color-blue-950-rgb) / 0.9) 45%,
        rgb(var(--color-blue-950-rgb) / 0.97) 100%
    );
    --brand-overlay-video: rgb(var(--color-blue-900-rgb) / 0.8);
}

/*
 * Contact bar shown above the navigation. Defined here rather than in rwa.css
 * or app.css because it is rendered by both the legacy and the Tailwind
 * layouts, and this file is the only stylesheet loaded by both.
 *
 * The height is a min-height, not a fixed height: on narrow screens the
 * sentence wraps onto a second line and the bar has to grow with it.
 */
.brand-contact-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.2rem 0.75rem;
    background-color: var(--color-blue-500);
    color: var(--color-black);
    text-align: center;
    text-wrap: balance;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
}

.brand-contact-bar a {
    color: var(--color-black);
    text-decoration: underline;
}

.brand-contact-bar a:hover,
.brand-contact-bar a:focus {
    color: var(--color-white);
}

@media (min-width: 768px) {
    .brand-contact-bar {
        padding: 0.2rem 1.5rem;
        font-size: 0.875rem;
    }
}