/*
 * Barcode Producer Theme for Web Awesome
 * Based on default.css with BCP brand customizations
 *
 * Brand color: #4a9cff (BCP Blue)
 */

@import url('../vendor/webawesome/styles/color/palettes/default.css');

/* ==========================================================================
   FONTS
   ========================================================================== */

@layer wa-fonts {
    @font-face {
        font-family: 'Neuzeit Grotesk';
        src: url('/static/fonts/NeuzeitGro-Bla.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Neuzeit Grotesk';
        src: url('/static/fonts/NeuzeitGro-Bol.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Proxima Nova';
        src: url('/static/fonts/ProximaNova-300.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Proxima Nova';
        src: url('/static/fonts/ProximaNova-400.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Proxima Nova';
        src: url('/static/fonts/ProximaNova-600.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Proxima Nova';
        src: url('/static/fonts/ProximaNova-700.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
}

/* ==========================================================================
   COLOR PALETTE OVERRIDES
   Custom blue scale with #4a9cff as the key color (-50)
   ========================================================================== */

@layer wa-color-palette {
    :root {
        /* BCP Blue scale (key: #4a9cff) */
        --wa-color-blue-95: #f0f7ff;
        --wa-color-blue-90: #d9edff;
        --wa-color-blue-80: #a8d4ff;
        --wa-color-blue-70: #7abfff;
        --wa-color-blue-60: #5cabff;
        --wa-color-blue-50: #4a9cff;  /* BCP Blue - key color */
        --wa-color-blue-40: #3a7fd9;
        --wa-color-blue-30: #2a62b3;
        --wa-color-blue-20: #1a458c;
        --wa-color-blue-10: #0a2866;
        --wa-color-blue-05: #001440;

        --wa-color-blue: var(--wa-color-blue-50);
        --wa-color-blue-key: 50;

        /* BCP Pink/Coral scale (key: #ff6688) - for CTAs */
        --wa-color-pink-95: #fff0f3;
        --wa-color-pink-90: #ffe0e6;
        --wa-color-pink-80: #ffb8c7;
        --wa-color-pink-70: #ff8fa8;
        --wa-color-pink-60: #ff7796;
        --wa-color-pink-50: #ff6688;  /* BCP Pink - key color */
        --wa-color-pink-40: #ff3360;  /* Hover state */
        --wa-color-pink-30: #d9264d;
        --wa-color-pink-20: #b3193b;
        --wa-color-pink-10: #8c0d29;
        --wa-color-pink-05: #660517;

        --wa-color-pink: var(--wa-color-pink-50);
        --wa-color-pink-key: 50;
    }
}

/* ==========================================================================
   THEME
   ========================================================================== */

@layer wa-theme {
    :where(:root),
    .wa-theme-bcp,
    .wa-light,
    .wa-dark .wa-invert,
    .wa-light .wa-theme-bcp,
    .wa-dark .wa-theme-bcp.wa-invert,
    .wa-dark .wa-theme-bcp .wa-invert {
        /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
        color-scheme: light;
        color: var(--wa-color-text-normal);

        --wa-color-surface-raised: white;
        --wa-color-surface-default: white;
        --wa-color-surface-lowered: var(--wa-color-neutral-95);
        --wa-color-surface-border: var(--wa-color-neutral-90);

        --wa-color-text-normal: var(--wa-color-neutral-10);
        --wa-color-text-quiet: var(--wa-color-neutral-40);
        --wa-color-text-link: var(--wa-color-brand-40);

        --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
        --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);

        --wa-color-shadow: color-mix(
            in oklab,
            var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
            transparent
        );

        --wa-color-focus: var(--wa-color-brand-60);

        --wa-color-mix-hover: black 10%;
        --wa-color-mix-active: black 20%;

        --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
        --wa-color-brand-fill-normal: var(--wa-color-brand-90);
        --wa-color-brand-fill-loud: var(--wa-color-brand-50);
        --wa-color-brand-border-quiet: var(--wa-color-brand-90);
        --wa-color-brand-border-normal: var(--wa-color-brand-80);
        --wa-color-brand-border-loud: var(--wa-color-brand-60);
        --wa-color-brand-on-quiet: var(--wa-color-brand-40);
        --wa-color-brand-on-normal: var(--wa-color-brand-30);
        --wa-color-brand-on-loud: white;

        --wa-color-success-fill-quiet: var(--wa-color-success-95);
        --wa-color-success-fill-normal: var(--wa-color-success-90);
        --wa-color-success-fill-loud: var(--wa-color-success-50);
        --wa-color-success-border-quiet: var(--wa-color-success-90);
        --wa-color-success-border-normal: var(--wa-color-success-80);
        --wa-color-success-border-loud: var(--wa-color-success-60);
        --wa-color-success-on-quiet: var(--wa-color-success-40);
        --wa-color-success-on-normal: var(--wa-color-success-30);
        --wa-color-success-on-loud: white;

        --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
        --wa-color-warning-fill-normal: var(--wa-color-warning-90);
        --wa-color-warning-fill-loud: var(--wa-color-warning-50);
        --wa-color-warning-border-quiet: var(--wa-color-warning-90);
        --wa-color-warning-border-normal: var(--wa-color-warning-80);
        --wa-color-warning-border-loud: var(--wa-color-warning-60);
        --wa-color-warning-on-quiet: var(--wa-color-warning-40);
        --wa-color-warning-on-normal: var(--wa-color-warning-30);
        --wa-color-warning-on-loud: white;

        --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
        --wa-color-danger-fill-normal: var(--wa-color-danger-90);
        --wa-color-danger-fill-loud: var(--wa-color-danger-50);
        --wa-color-danger-border-quiet: var(--wa-color-danger-90);
        --wa-color-danger-border-normal: var(--wa-color-danger-80);
        --wa-color-danger-border-loud: var(--wa-color-danger-60);
        --wa-color-danger-on-quiet: var(--wa-color-danger-40);
        --wa-color-danger-on-normal: var(--wa-color-danger-30);
        --wa-color-danger-on-loud: white;

        --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
        --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
        --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
        --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
        --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
        --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
        --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
        --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
        --wa-color-neutral-on-loud: white;
        /* #endregion */
    }

    .wa-dark,
    .wa-invert,
    .wa-dark .wa-theme-bcp,
    .wa-light .wa-theme-bcp.wa-invert,
    .wa-light .wa-theme-bcp .wa-invert {
        /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
        color-scheme: dark;
        color: var(--wa-color-text-normal);

        --wa-color-surface-raised: var(--wa-color-neutral-10);
        --wa-color-surface-default: var(--wa-color-neutral-05);
        --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
        --wa-color-surface-border: var(--wa-color-neutral-20);

        --wa-color-text-normal: var(--wa-color-neutral-95);
        --wa-color-text-quiet: var(--wa-color-neutral-60);
        --wa-color-text-link: var(--wa-color-brand-70);

        --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
        --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

        --wa-color-shadow: color-mix(
            in oklab,
            var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
            transparent
        );

        --wa-color-focus: var(--wa-color-brand-60);

        --wa-color-mix-hover: black 8%;
        --wa-color-mix-active: black 16%;

        --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
        --wa-color-brand-fill-normal: var(--wa-color-brand-20);
        --wa-color-brand-fill-loud: var(--wa-color-brand-50);
        --wa-color-brand-border-quiet: var(--wa-color-brand-20);
        --wa-color-brand-border-normal: var(--wa-color-brand-30);
        --wa-color-brand-border-loud: var(--wa-color-brand-40);
        --wa-color-brand-on-quiet: var(--wa-color-brand-60);
        --wa-color-brand-on-normal: var(--wa-color-brand-70);
        --wa-color-brand-on-loud: white;

        --wa-color-success-fill-quiet: var(--wa-color-success-10);
        --wa-color-success-fill-normal: var(--wa-color-success-20);
        --wa-color-success-fill-loud: var(--wa-color-success-50);
        --wa-color-success-border-quiet: var(--wa-color-success-20);
        --wa-color-success-border-normal: var(--wa-color-success-30);
        --wa-color-success-border-loud: var(--wa-color-success-40);
        --wa-color-success-on-quiet: var(--wa-color-success-60);
        --wa-color-success-on-normal: var(--wa-color-success-70);
        --wa-color-success-on-loud: white;

        --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
        --wa-color-warning-fill-normal: var(--wa-color-warning-20);
        --wa-color-warning-fill-loud: var(--wa-color-warning-50);
        --wa-color-warning-border-quiet: var(--wa-color-warning-20);
        --wa-color-warning-border-normal: var(--wa-color-warning-30);
        --wa-color-warning-border-loud: var(--wa-color-warning-40);
        --wa-color-warning-on-quiet: var(--wa-color-warning-60);
        --wa-color-warning-on-normal: var(--wa-color-warning-70);
        --wa-color-warning-on-loud: white;

        --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
        --wa-color-danger-fill-normal: var(--wa-color-danger-20);
        --wa-color-danger-fill-loud: var(--wa-color-danger-50);
        --wa-color-danger-border-quiet: var(--wa-color-danger-20);
        --wa-color-danger-border-normal: var(--wa-color-danger-30);
        --wa-color-danger-border-loud: var(--wa-color-danger-40);
        --wa-color-danger-on-quiet: var(--wa-color-danger-60);
        --wa-color-danger-on-normal: var(--wa-color-danger-70);
        --wa-color-danger-on-loud: white;

        --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
        --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
        --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
        --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
        --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
        --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
        --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
        --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
        --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
        /* #endregion */
    }

    :where(:root),
    .wa-theme-bcp,
    .wa-light,
    .wa-dark,
    .wa-invert {
        font-family: var(--wa-font-family-body);

        /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        --wa-font-family-body: "Proxima Nova", ui-sans-serif, system-ui, sans-serif;
        --wa-font-family-heading: "Neuzeit Grotesk", ui-sans-serif, system-ui, sans-serif;
        --wa-font-family-code: ui-monospace, monospace;
        --wa-font-family-longform: ui-serif, serif;

        --wa-font-size-scale: 1;
        --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px);
        --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px);
        --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px);
        --wa-font-size-m: calc(1rem * var(--wa-font-size-scale));
        --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px);
        --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px);
        --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px);
        --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px);
        --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px);

        --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
        --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

        --wa-font-weight-light: 300;
        --wa-font-weight-normal: 400;
        --wa-font-weight-semibold: 500;
        --wa-font-weight-bold: 600;

        --wa-font-weight-body: var(--wa-font-weight-normal);
        --wa-font-weight-heading: 900; /* BCP uses black weight for headings */
        --wa-font-weight-code: var(--wa-font-weight-normal);
        --wa-font-weight-longform: var(--wa-font-weight-normal);
        --wa-font-weight-action: var(--wa-font-weight-semibold);

        --wa-line-height-condensed: 1.2;
        --wa-line-height-normal: 1.6;
        --wa-line-height-expanded: 2;

        --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
        --wa-link-decoration-hover: underline;
        /* #endregion */

        /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        --wa-space-scale: 1;
        --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem);
        --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem);
        --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem);
        --wa-space-s: calc(var(--wa-space-scale) * 0.75rem);
        --wa-space-m: calc(var(--wa-space-scale) * 1rem);
        --wa-space-l: calc(var(--wa-space-scale) * 1.5rem);
        --wa-space-xl: calc(var(--wa-space-scale) * 2rem);
        --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem);
        --wa-space-3xl: calc(var(--wa-space-scale) * 3rem);
        --wa-space-4xl: calc(var(--wa-space-scale) * 4rem);

        --wa-content-spacing: var(--wa-space-l);
        /* #endregion */

        /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        --wa-border-style: solid;

        --wa-border-width-scale: 1;
        --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
        --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
        --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
        /* #endregion */

        /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
        --wa-border-radius-scale: 1.5; /* BCP uses slightly more rounded corners */
        --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
        --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
        --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);

        --wa-border-radius-pill: 9999px;
        --wa-border-radius-circle: 50%;
        --wa-border-radius-square: 0px;
        /* #endregion */

        /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        --wa-focus-ring-style: solid;
        --wa-focus-ring-width: 0.1875rem;
        --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
        --wa-focus-ring-offset: 0.0625rem;
        /* #endregion */

        /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        --wa-shadow-offset-x-scale: 0;
        --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
        --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
        --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

        --wa-shadow-offset-y-scale: 1;
        --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
        --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
        --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

        --wa-shadow-blur-scale: 1;
        --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
        --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
        --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

        --wa-shadow-spread-scale: -0.5;
        --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
        --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
        --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

        --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
            var(--wa-shadow-spread-s) var(--wa-color-shadow);
        --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
            var(--wa-shadow-spread-m) var(--wa-color-shadow);
        --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
            var(--wa-shadow-spread-l) var(--wa-color-shadow);
        /* #endregion */

        /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
        --wa-transition-easing: ease;
        --wa-transition-slow: 300ms;
        --wa-transition-normal: 150ms;
        --wa-transition-fast: 75ms;
        /* #endregion */

        /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
        /* Form Controls */
        --wa-form-control-background-color: var(--wa-color-surface-default);

        --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
        --wa-form-control-border-style: var(--wa-border-style);
        --wa-form-control-border-width: var(--wa-border-width-s);
        --wa-form-control-border-radius: var(--wa-border-radius-m);

        --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

        --wa-form-control-label-color: var(--wa-color-text-normal);
        --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
        --wa-form-control-label-line-height: var(--wa-line-height-condensed);

        --wa-form-control-value-color: var(--wa-color-text-normal);
        --wa-form-control-value-font-weight: var(--wa-font-weight-body);
        --wa-form-control-value-line-height: var(--wa-line-height-condensed);

        --wa-form-control-hint-color: var(--wa-color-text-quiet);
        --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
        --wa-form-control-hint-line-height: var(--wa-line-height-normal);

        --wa-form-control-placeholder-color: var(--wa-color-gray-50);

        --wa-form-control-required-content: '*';
        --wa-form-control-required-content-color: inherit;
        --wa-form-control-required-content-offset: 0.1em;

        --wa-form-control-padding-block: 0.75em;
        --wa-form-control-padding-inline: 1em;
        --wa-form-control-height: round(
            calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
            1px
        );
        --wa-form-control-toggle-size: round(1.25em, 1px);

        /* Panels */
        --wa-panel-border-style: var(--wa-border-style);
        --wa-panel-border-width: var(--wa-border-width-s);
        --wa-panel-border-radius: var(--wa-border-radius-l);

        /* Tooltips */
        --wa-tooltip-arrow-size: 0.375rem;

        --wa-tooltip-background-color: var(--wa-color-text-normal);

        --wa-tooltip-border-color: var(--wa-tooltip-background-color);
        --wa-tooltip-border-style: var(--wa-border-style);
        --wa-tooltip-border-width: var(--wa-border-width-s);
        --wa-tooltip-border-radius: var(--wa-border-radius-s);

        --wa-tooltip-content-color: var(--wa-color-surface-default);
        --wa-tooltip-font-size: var(--wa-font-size-s);
        --wa-tooltip-line-height: var(--wa-line-height-normal);
        /* #endregion */
    }
}

/* ==========================================================================
   BCP SITE-SPECIFIC STYLES
   These are layout and component styles specific to the BCP site
   ========================================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--wa-font-family-body);
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, .display-font {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: 1.1;
}

img {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   WA-PAGE COMPONENT
   BCP uses brand blue as the primary surface - set once on base
   -------------------------------------------------------------------------- */

wa-page {
    min-height: 100vh;
}

wa-page[view="desktop"] {
    --menu-width: 260px;
}

wa-page::part(base) {
    background: var(--wa-color-brand-fill-loud);
}

wa-page::part(menu) {
    background: var(--wa-color-brand-fill-loud);
}

wa-page::part(navigation) {
    background: var(--wa-color-brand-fill-loud);
    padding: 40px 20px;
}

wa-page[view="desktop"]::part(navigation) {
    border-inline-end: 1px solid rgba(255, 255, 255, 0.5);
}

wa-page[view="mobile"]::part(menu) {
    display: none;
}

/* Header bar — visible on mobile only via .wa-mobile-only */
wa-page::part(header) {
    background: var(--wa-color-brand-fill-loud);
    padding: 0;
}

wa-page::part(main-content) {
    padding: 0;
}

.site-header {
    background-color: transparent;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--wa-space-s) var(--wa-space-2xl);
    width: 100%;
}

.site-header img {
    height: 20px;
    width: auto;
}

.menu-toggle-btn {
    background: transparent;
    border: 2px solid white;
    border-radius: 6px;
    color: white;
    padding: 4px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Slotted content is light DOM - needs separate styling from ::part() */
/* Must use background-color (not shorthand) to override ::slotted() rules */
nav[slot="navigation"],
footer[slot="footer"] {
    background-color: transparent;
}


wa-page::part(navigation-header) {
    background: var(--wa-color-brand-fill-loud);
}

/* Mobile drawer dialog background - uses exportparts mapping */
wa-page::part(drawer__dialog) {
    background-color: var(--wa-color-brand-fill-loud);
}

wa-page wa-drawer::part(panel) {
    background: var(--wa-color-brand-fill-loud);
}

wa-page wa-drawer::part(body) {
    background: var(--wa-color-brand-fill-loud);
}

wa-page wa-drawer::part(header) {
    background: var(--wa-color-brand-fill-loud);
}

wa-page::part(footer) {
    background: var(--wa-color-brand-fill-loud);
}

/* --------------------------------------------------------------------------
   NAVIGATION - matches original desktop-nav styles
   -------------------------------------------------------------------------- */

.nav-brand {
    display: block;
    margin-bottom: 20px;
}

.nav-brand img {
    width: 155px;
    height: auto;
}

.nav-link {
    display: block;
    color: white;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}

.nav-link:hover {
    font-weight: 400;
}

.nav-link.active {
    font-weight: 600;
}

.nav-link.last {
    margin-bottom: 30px;
}

.nav-downloads {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.download-btn {
    --wa-color-neutral-border-loud: white;
    --wa-color-neutral-on-quiet: white;
    --wa-button-border-width: 2px;
    --wa-button-border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
}

.download-btn:hover {
    --wa-color-neutral-fill-loud: white;
    --wa-color-neutral-on-loud: var(--wa-color-brand-fill-loud);
}

.nav-download-alt {
    color: white;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
}

.nav-download-alt a {
    color: white;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   MAIN CONTENT - matches original container/section styling
   -------------------------------------------------------------------------- */

.main-container {
    width: 100%;
    padding: var(--wa-space-2xl);
}

wa-page[view="mobile"] .main-container {
    max-width: 960px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   PAGE FOOTER
   -------------------------------------------------------------------------- */

.page-footer {
    padding: var(--wa-space-xl) var(--wa-space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.page-footer a {
    color: white;
    font-size: 12px;
    text-decoration: none;
}

.page-footer a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */


/* ==========================================================================
   SHARED PAGE COMPONENTS
   Reusable patterns across multiple pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HEADER - Title + optional search/actions
   -------------------------------------------------------------------------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid white;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}

.page-title {
    color: white;
    font-size: 48px;
    font-weight: 900;
    margin: 0;
    line-height: 1;
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 1em;
    }

    .page-title {
        font-size: 36px;
    }
}

/* --------------------------------------------------------------------------
   SEARCH FORM
   -------------------------------------------------------------------------- */

.search-form {
    display: flex;
    gap: 10px;
    margin-top: 7px;
    height: 32px;
}

.search-form wa-input {
    width: 180px;
    --wa-form-control-height: 32px;
}

.search-form wa-input::part(base) {
    border-radius: 10px;
    height: 32px;
}

.search-form wa-button {
    --wa-button-height: 32px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   CTA BUTTON - Pink primary action button (Search, Download, etc.)
   Uses ::part(base) per Web Awesome custom styling pattern
   -------------------------------------------------------------------------- */

wa-button.btn-cta {
    --wa-button-height: 32px;
}

wa-button.btn-cta::part(base) {
    background: #ff6688;
    border: 2px solid white;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    height: 32px;
    transition: all var(--wa-transition-normal) var(--wa-transition-easing);
}

wa-button.btn-cta::part(base):hover {
    background: #ff3360;
}

wa-button.btn-cta::part(base):active {
    background: #d9264d;
}

wa-button.btn-cta::part(base):focus-visible {
    outline: solid 2px white;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .search-form {
        width: 100%;
        margin-top: 0;
    }

    .search-form wa-input {
        flex: 1;
        width: auto;
    }
}

/* --------------------------------------------------------------------------
   INTRO SECTION - White text section with bottom border
   -------------------------------------------------------------------------- */

.intro-section {
    border-bottom: 1px solid white;
    padding-bottom: 1em;
    margin-bottom: 2em;
}

.intro-section h3 {
    color: white;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 0.5em 0;
    line-height: 1.2;
}

.intro-section p {
    color: white;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}