/**
 * File: complianz.css
 * Purpose: Custom styles for Complianz cookie documents and consent management UI.
 * Usage: Applied site-wide, mainly affects opt-out pages and cookie category displays.
 * Dependencies: Complianz Plugin, variables defined in root CSS
 *
 * Note: Not currently in use on this site. Retained in case Complianz is reactivated later.
 */


 /* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

/* These are not set or tested since the restructure, due to the component not being in use. Edit before implementing. */
.cmplz-document {
    --custom-cmplz-doc-main-content-bg-color: #000; /* black */ 
    --custom-cmplz-doc-text-bg-color: #222; /* darkest gray */ 
    --custom-cmplz-doc-text-border-color: #606060; /* gray */ 
    --custom-cmplz-doc-dropdown-summary-bg-color: #444; /* lighter dark gray */ 
    --custom-cmplz-doc-category-header-bg-color: #444; /* lighter dark gray */ 
    --custom-cmplz-doc-category-header-border-color: #000; /* black */ 
    --custom-cmplz-doc-category-bg-color: #191919; /* nearly black */ 
    --custom-cmplz-doc-category-border-color: #000; /* black */ 
    --custom-cmplz-doc-dropdown-bg-color: #191919; /* nearly black */ 
    --custom-cmplz-doc-dropdown-border-color: #000; /* black */ 
    --custom-cmplz-doc-cookies-bg-color: #000; /* black */ 
    --custom-cmplz-doc-cookies-border-color: #000; /* black */ 
    --custom-cmplz-doc-cookies-sub-bg-color: #222; /* darkest gray  */ 
    --custom-cmplz-doc-header-bg-color: #333; /* dark gray */  
}

/* -------------------------- */




/* Opt-out and cookie document page styling (may affect other areas) */
.cmplz-document #main-content {
    background-color:var(--custom-cmplz-doc-main-content-bg-color);
}

.cmplz-document .container{
    width:90%!important;
}

.cmplz-document:not(.page){
    background:var(--custom-cmplz-doc-text-bg-color)!important;
    border: 1px solid var(--custom-cmplz-doc-text-border-color)!important;
    padding: 10px 15px!important;
    max-width: 1600px!important;
    margin-bottom: 40px;
}

/* Dropdowns and category blocks */
#cmplz-cookies-overview .cmplz-dropdown summary, 
#cmplz-document .cmplz-dropdown summary {
    background-color: var(--custom-cmplz-doc-dropdown-summary-bg-color);
}

#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header{
    background-color: var(--custom-cmplz-doc-category-header-bg-color);
    border-bottom: 1px solid var(--custom-cmplz-doc-category-header-border-color);
}

#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
    background-color: var(--custom-cmplz-doc-category-bg-color);
    border: 1px solid var(--custom-cmplz-doc-category-border-color);
}

#cmplz-cookies-overview .cmplz-dropdown, #cmplz-document .cmplz-dropdown{
    background-color: var(--custom-cmplz-doc-dropdown-bg-color);
    border: 1px solid var(--custom-cmplz-doc-dropdown-border-color);

}

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose, 
#cmplz-document .cmplz-dropdown .cookies-per-purpose{
    background-color: var(--custom-cmplz-doc-cookies-bg-color);
    border: solid var(--custom-cmplz-doc-cookies-border-color);
    border-width: 1px 0 1px 0;
}

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, 
#cmplz-document .cmplz-dropdown .cookies-per-purpose div {
    background-color: var(--custom-cmplz-doc-cookies-sub-bg-color);
}

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header, 
#cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header, 
#cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .function-header, 
#cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header
{
    background-color: var(--custom-cmplz-doc-header-bg-color)!important;
}

/* Mobile adjustments */
@media all and (max-width: 787px){
    .cmplz-document h1 {
        font-size: 25px!important;
    }
}