:root {
    /* colors */
    --purple-50: #D4CCDA;
    --purple-900: #2F0158;
    --purple-950: #260144;
    --blue-300: #186EFF;
    --blue-500: #0058B8;
    --blue-800: #181D83;
    --gray-300: #F4F4F4;
    --gray-500: #5D5D5D;
    --gray-800: #222222;

    --black: #000000;
    --white: #ffffff;
}

/* helper classes */
.text-white {
    color: var(--white);
}

/* [START] Brand specific styles */
html {
    background-color: var(--white);
}

.helpcenter__header {
    background-color: var(--gray-800);
    color: var(--white);
}

.helpcenter__footer {
    background-color: var(--gray-800);
}

.submit-request__container {
    background-color: var(--white);
    max-width: 100%;
    margin-top: -2rem;
    margin-bottom: 1rem;
}

.search_background {
    position: relative;
    z-index: 1;
}

.search_background::before {
    content: "";
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-image: linear-gradient(to bottom,
        rgba(34, 34, 34, 1),
        transparent),
        url('/sfsites/c/resource/HelpCenterAssets/CHU/search_background_chu.png');

    mask-image: linear-gradient(to bottom,
        rgba(34, 34, 34, 1) 25%,
        rgba(34, 34, 34, 0.8) 50%,
        rgba(34, 34, 34, 0.4) 75%,
        transparent
    );

    -webkit-mask-image: linear-gradient(to bottom,
        rgba(34, 34, 34, 1) 25%,
        rgba(34, 34, 34, 0.8) 50%,
        rgba(34, 34, 34, 0.4) 75%,
        transparent
    );

    z-index: -1
}

/* The first class refers to the custom component name so it's easier to visualise where the style is being applied */
/* Knowledge Data Category Groups Custom Component */
.knowledge-data-category-groups .category-text__weight {
    font-weight: bold;
}

.knowledge-popular-articles .popular-article__title {
    font-weight: bold;
}
/* [END] Knowledge Data Category Groups Custom Component */

/* Knowledge Category View Custom Component*/
.category-view__chevron-down {
    --slds-c-icon-color-foreground-default: var(--black);
}

.knowledge-category-view .article-title__link {
    color: var(--gray-500) !important;
}

.knowledge-category-view .category-text__weight {
    font-weight: bold;
}
/* [END] Knowledge Category View Custom Component*/


/* Help Center Dynamic Footer Component*/
.help-centre-dynamic-footer a.submit-button__action {
    border-color: var(--blue-500);
}

.help-centre-dynamic-footer a.submit-button__action:focus {
    box-shadow: 0 0 0 2px var(--blue-800);
}
/* [END] Help Center Dynamic Footer Component*/


/* Help Center Support Form Component */
.help-center-support-form .slds-form-element__label {
    color: var(--black);
    font-weight: 500;
}

.help-centre-support-form .submit-button:focus {
    box-shadow: 0 0 0 2px var(--purple-900);
}
/* [END] Help Center Support Form Component */


/* File Upload Component */
.file-upload__button .slds-button {
    --sds-c-button-text-color: var(--black);
}

.file-upload__button .slds-button:hover {
    --sds-c-button-text-color-hover: var(--purple-950);
    --slds-c-button-color-border-hover: var(--purple-950);
}

/* [END] File Upload Component */

/* [START] Breadcrumbs Component */

.breadcrumbs-container a,
.breadcrumbs-container a:link:not(.slds-button, .slds-dropdown__item > a),
.breadcrumbs-container a:visited:not(.slds-button, .slds-dropdown__item > a){
    color: var(--black);
}

/* [END] Breadcrumbs Component */

/* [START] Knowledge Article Component */

.content-wrapper a,
.content-wrapper a:link:not(.slds-button, .slds-dropdown__item > a),
.content-wrapper a:visited:not(.slds-button, .slds-dropdown__item > a){
    color: var(--black);
    font-weight: bold;
}

/* [END] Knowledge Article Component */



/* [END] Brand specific styles */


/* [START] Common styles */
.footer-container, .footer-container-copyright {
    font-size: 0.8rem;
    max-width: 800px;
}

.footer-link {
    text-align: center;
}

.footer-link > a {
    color: var(--purple-50);
}

.footer-container a {
    text-decoration: underline !important;
}

.footer-disc {
    width: 100%;
}

.footer-disc-txt > a {
    color: var(--purple-50);
}

/*
    SLDS Breakpoints:
    - Phone: < 480px
    - Tablet: 480px - 768px
    - Desktop: 768px - 1024px
    - Large Desktop: ≥ 1024px
*/

/* Phone - anything below 480px */
@media (max-width: 479px) {
    .footer-container {
        width: 100%;
    }

    .footer-link {
        padding: .5em 0;
        text-align: left;
    }

    .footer-plresp {
        padding: 2rem 0;
    }

    .footer-disc-icons {
        justify-content: center;
    }

    .footer-disc {
        gap: 2rem;
    }

    .footer-links {
        max-width: 350px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

/* Tablet */
@media (min-width: 480px) and (max-width: 767px) {
    .footer-container {
        width: 100%;
    }

    .footer-link {
        padding: .5em 0;
        text-align: left;
    }

    .footer-plresp {
        padding: 2rem 0;
    }

    .footer-disc-icons {
        justify-content: center;
    }

    .footer-disc {
        gap: 2rem;
    }

    .footer-links {
        max-width: 350px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop */
@media (min-width: 768px) and (max-width: 1023px) {
    .footer-container {
        width: 90%;
    }

    .footer-links {
        display: flex;
        justify-content: space-between;
    }
}

/* Large Desktop */
@media (min-width: 1024px) {
    .footer-container {
        width: 80%;
    }

    .footer-links {
        display: flex;
        justify-content: space-between;
    }

}

.footer-disc-icons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.footer-disc-icons img {
    width: auto;
    height: auto;
    object-fit: contain;
}

.footer-disc-icons img[src*="mga"] {
    width: 84px;
    height: 26px;
}

.footer-disc-icons img[src*="rgf"] {
    width: 34px;
    height: 34px;
}

.footer-disc-icons img[src*="18+"] {
    width: 32px;
    height: 32px;
}

.footer-disc-icons img[src*="facebook"],
.footer-disc-icons img[src*="x"] {
    width: 25px;
    height: 24px;
}

.footer-disc-icons img[src*="instagram"] {
    width: 24px;
    height: 24px;
}

/* [END] Common styles */