:root {
    /* colors */

    --blue-800: #05132D;
    --gray-300: #2F3849;
    --gray-500: #252C3A;

    --blue-100: #70E2FF;
    --blue-200: #00BAC1;
    --blue-900: #00297C;
    --blue-950: #0D1F4A;

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

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

.text-navy {
    color: var(--blue-900);
}

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

.gray-background {
    background-color: var(--gray-500) !important;
}


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

.helpcenter__header .slds-text-heading_large {
    color: var(--white);
}

.search_background { 
    background-image: url('/sfsites/c/resource/HelpCenterAssets_UNI/UNI/search_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

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


/* The first class refers to the custom component name so it's easier to visualise where the style is being applied */

/* Knowledge Search Results Custom Component */

.search-button {
    background: linear-gradient(to bottom, var(--blue-100) 0%, var(--blue-200) 100%) !important;
}

.knowledge-search .dxp-text-heading-small, .slds-text-heading--small, .slds-text-heading_small, .slds-p-around_small {
    color: var(--black) !important;
}

.slds-dropdown__item > a {
    color: var(--black) !important;
}

/* END Knowledge Search Results Custom Component */

/* Knowledge Data Category Groups Custom Component */

.knowledge-data-category-groups .category-text__weight {
    font-weight: normal;
}

.knowledge-data-category-groups .icon-size {
    background-color: var(--blue-950);
    width: var(--lwc-heightTappable, 2.75rem) !important;
    height: var(--lwc-heightTappable, 2.75rem) !important;
    padding: 0.625rem;
    border-radius: var(--lwc-spacingXSmall, 0.5rem);
    box-sizing: border-box;
    object-fit: contain;
}

.knowledge-data-category-groups .grid__item {
    border: 1px solid var(--grid-item-border-color, #FFFFFF) !important;
}


.topic-header {
    color: var(--white) !important;
}

/* [END] Knowledge Data Category Groups Custom Component */

/* Knowledge Popular Articles Custom Component */

.article-header {
    color: var(--white) !important;
}

.knowledge-popular-articles .popular-article__title {
    color: var(--white);
    font-weight: 600;
}

/* [END] Knowledge Popular Articles Custom Component */

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

.knowledge-category-view .slds-accordion__summary {
    background-color: var(--gray-300) !important;
    border: 1px solid var(--grid-item-border-color, var(--blue-200));
}


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

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

/* [START] Knowledge Article Custom 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){
    font-weight: bold;
}

/* [END] Knowledge Article Custom 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: white; 
}

/* [END] Breadcrumbs Component */

/* Submit button - global */

.submit-button {
    background: linear-gradient(to bottom, var(--blue-100) 0%, var(--blue-200) 100%) !important;
  }

/* [END] Submit button - global */

/* Help Center Dynamic Footer Component*/

.help-centre-dynamic-footer .slds-text-heading_medium {
    color: var(--white) !important;
}

.help-centre-dynamic-footer {
    color: var(--white) !important;
}

.help-centre-dynamic-footer .submit-button {
    border-radius: 24px;
}

.help-centre-dynamic-footer a.submit-button__action:focus {
    box-shadow: 0 0 0 2px var(--blue-200);
}

.help-centre-dynamic-footer a.submit-button__action:hover {
    color: var(--blue-950);
}

/* [END] Help Center Dynamic Footer Component*/


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

.help-center-support-form {
    --slds-c-input-color-background: var(--gray-300) !important;
    --slds-c-textarea-color-background: var(--gray-300) !important;
}

.help-center-support-form .slds-input:focus,
.help-center-support-form .slds-dropdown,
.help-center-support-form .slds-combobox__input:focus,
.help-center-support-form .slds-textarea:focus,
.help-center-support-form .slds-checkbox_faux,
.help-center-support-form .slds-has-error .slds-input,
.help-center-support-form .slds-has-error .slds-textarea {
    background-color: var(--gray-300) !important;
}

.slds-combobox__input:focus, .slds-listbox__option:hover, .slds-textarea:focus {
    border: 1px solid var(--blue-200) !important;
    box-shadow: 0 0 3px var(--blue-200) !important;
}

.help-center-support-form .slds-file-selector__body {
    background-color: var(--gray-300);
}

.help-centre-support-form .submit-button {
    border-radius: 16px !important;
}

.help-centre-support-form .submit-button:not(:disabled) {
    color: var(--blue-950) !important;
}

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


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

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

/* [END] File Upload 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(--blue-950);
}

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

.footer-disc {
    width: 100%;
}

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

/*
    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 */