/* 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-400: #2dace3;
    --color-primary-500: #289ed1;
    --color-primary-600: #1a6788;
    --color-secondary-0: #ffffff;
    --color-secondary-200: #eeeeee;
    --color-secondary-500: #d6d6d6;
    --color-secondary-700: #454545;
    --color-accent-500: #ff084a;

    --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-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
}

/* 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);
    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;
    }
}