/* Every selector must start with [data-component-scope="brand-custom"] to limit styling to the custom header and footer scope */
/* Declare common styles and variables for each component */
[data-component-scope="brand-custom"] {
    --color-primary-0: #ffffff;
    --color-primary-100: #f7f4f3;
    --color-secondary-100: #d1d4e2;
    --color-secondary-400: #1b2870;
    --color-secondary-500: #101843;
    --color-accent-500: #fd5f3f;

    --box-shadow-y: 0 1px 3px 0 rgba(0, 0, 0, .25);
    --box-shadow-x: 0 0 8px -4px rgba(0, 0, 0, .5);

    --transition-duration-color: 150ms;
    --transition-timing-fn: ease-out;

    font-family: "Manrope", arial, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.5;
}

/* Basic styles */
[data-component-scope="brand-custom"] :focus-visible,
[data-component-scope="brand-custom"].footer ~ #footer :focus-visible {
    outline: 2px solid var(--color-accent-500) !important;
    outline-offset: .2rem;
    border-radius: .6rem;
}

[data-component-scope="brand-custom"] a {
    color: inherit;
    text-decoration: none;
}

[data-component-scope="brand-custom"] ul {
    margin: 0;
}

[data-component-scope="brand-custom"] button {
    padding: 0;
    margin: 0;

    font: inherit;
    line-height: inherit;
    color: inherit;
}

@media (max-width: 1023px) {
    [data-component-scope="brand-custom"] [data-show="desktop"] {
        display: none !important;
    }
}

@media (max-width: 639px) {
    [data-component-scope="brand-custom"] [data-show="tablet"] {
        display: none !important;
    }
}

@media (min-width: 640px) {
    [data-component-scope="brand-custom"] [data-show="mobile-only"] {
        display: none !important;
    }
}

[data-component-scope="brand-custom"] [data-text-color="accent"] {
    color: var(--color-accent-500);
}