/*
 * Signalenkaart Responsive CSS
 * Author: Allround Web
*/

/* CSS Variables */
:root {
    /* Tile Colors */
    --aw-tile1-color: #2d9e93;
    --aw-tile2-color: #31afa5;
    --aw-tile3-color: #33beb8;
    --aw-tile4-color: #5bd3ca;
    --aw-tile5-color: #79dbd2;
    --aw-tile6-color: #fcb417;
    --aw-tile7-color: #f5a41b;
    --aw-tile8-color: #ee931f;
    --aw-tile9-color: #ee931f;
    --aw-tile10-color: #df7126;
    --aw-tile11-color: #a71f64;
    --aw-tile12-color: #752062;
    --aw-tile13-color: #42215f;
    --aw-tile14-color: #a3aa21;
    --aw-tile15-color: #b2c225;
    
    /* Base Colors */
    --aw-color-primary: #df7126;
    --aw-color-secondary: #31afa5;
    --aw-color-dark: #522c73;
    --aw-color-text-primary: #000000;
    --aw-color-text-secondary: #4e4b4b;
    --aw-color-text-light: #ffffff;
    --aw-color-white: #ffffff;
    --aw-color-background: #DDDAD0;
}

html,
body {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    font-family: "Poppins", "Montserrat", Sans-serif;
}

/* Hide .aw-show-on-use by default */
body.awcf-signalenkaart-initialized .aw-hide-on-use,
body .aw-show-on-use {
    display: none;
}

/* Show .aw-show-on-use when page is .page-template-page-signalenkaart */
body.awcf-signalenkaart-initialized.page-template-page-signalenkaart .aw-show-on-use {
    display: block;
}

/* Show .aw-hide-on-use on main screen */
body.page-template-page-signalenkaart.awcf-showing-main-screen .aw-hide-on-use {
    display: block;
}

/* Hide .aw-show-on-use on main screen */
body.page-template-page-signalenkaart.awcf-showing-main-screen .aw-show-on-use {
    display: none;
}

/* Show .aw-show-on-use when the page is NOT .page-template-page-signalenkaart */
body:not(.page-template-page-signalenkaart) .aw-show-on-use {
    display: block;
}

/* Hide .aw-reset-button when the page is NOT .page-template-page-signalenkaart */
body:not(.page-template-page-signalenkaart) .aw-show-on-use.aw-reset-button {
    display: none;
}

h2,
h3,
h4,
h5,
h6 {
    color: var(--aw-color-text-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", "Montserrat", sans-serif;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

h1 {
    color: var(--aw-color-primary);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 38px;
    font-weight: 600;
}

h2 {
    color: var(--aw-color-text-primary);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 22px;
    font-weight: 600;
}

.header h2 {
    padding-bottom: 6px;
}

h2.second-title {
    color: var(--aw-tile1-color);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.aw-space-1 {
    height: 10px;
    width: 100%;
}

.header {
    display: flex;
    max-width: 100vw;
    margin: 0 auto;
    background-color: var(--aw-color-white);
    max-height: 160px;
    min-height: 160px;
}

.header-left {
    flex: 0 0 60%;
    padding-left: 15%;
}

.header-right {
    flex: 0 0 20%;
    padding-right: 5%;
}

.header img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: -50px;
    width: 385px;
}

body {
    background-color: var(--aw-color-background);
}

.aw-title,
body .aw-title {
    color: var(--aw-tile1-color);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 25px;
    padding: 0;
}

.aw-title#home {
    padding-bottom: 10px;
}

.content {
    max-width: 1140px;
    margin: 0 auto;
}

.blocks {
    display: flex;
    gap: 1.25%;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 14px;
}

.blocks .content-titel {
    flex: 0 0 19%;
    margin: 0;
    height: 180px;
    word-break: break-word;
    border-radius: 0 50px 0 50px;
}

.blocks .content-titel a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: var(--aw-color-text-light);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    padding: 25px;
    box-sizing: border-box;
    position: relative;
}

.blocks .content-titel a div {
    height: inherit;
    width: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
}

#leeswijzer {
    margin: 30px 0;
}

#leeswijzer .content .content-titel:nth-of-type(1) {
    background-color: var(--aw-tile1-color);
}

#leeswijzer .content .content-titel:nth-of-type(2) {
    background-color: var(--aw-tile2-color);
}

#leeswijzer .content .content-titel:nth-of-type(3) {
    background-color: var(--aw-tile3-color);
}

#leeswijzer .content .content-titel:nth-of-type(4) {
    background-color: var(--aw-tile4-color);
}

#leeswijzer .content .content-titel:nth-of-type(5) {
    background-color: var(--aw-tile5-color);
}

#leeswijzer .content .content-titel:nth-of-type(6) {
    background-color: var(--aw-tile6-color);
}

#leeswijzer .content .content-titel:nth-of-type(7) {
    background-color: var(--aw-tile7-color);
}

#leeswijzer .content .content-titel:nth-of-type(8) {
    background-color: var(--aw-tile8-color);
}

#leeswijzer .content .content-titel:nth-of-type(9) {
    background-color: var(--aw-tile9-color);
}

#leeswijzer .content .content-titel:nth-of-type(10) {
    background-color: var(--aw-tile10-color);
}

#leeswijzer .content .content-titel:nth-of-type(11) {
    background-color: var(--aw-tile11-color);
}

#leeswijzer .content .content-titel:nth-of-type(12) {
    background-color: var(--aw-tile12-color);
}

#leeswijzer .content .content-titel:nth-of-type(13) {
    background-color: var(--aw-tile13-color);
}

#leeswijzer .content .content-titel:nth-of-type(14) {
    background-color: var(--aw-tile14-color);
}

#leeswijzer .content .content-titel:nth-of-type(15) {
    background-color: var(--aw-tile15-color);
}

#leeswijzer .content .content-titel {
    transition: .5s;
}

#leeswijzer .content .content-titel:hover {
    background-color: var(--aw-color-dark);
}

/* Page background colors */
#leeswijzer .content .content-container:nth-of-type(2) {
    background-color: var(--aw-tile1-color);
}

#leeswijzer .content .content-container:nth-of-type(3) {
    background-color: var(--aw-tile2-color);
}

#leeswijzer .content .content-container:nth-of-type(4) {
    background-color: var(--aw-tile3-color);
}

#leeswijzer .content .content-container:nth-of-type(5) {
    background-color: var(--aw-tile4-color);
}

#leeswijzer .content .content-container:nth-of-type(6) {
    background-color: var(--aw-tile5-color);
}

#leeswijzer .content .content-container:nth-of-type(7) {
    background-color: var(--aw-tile6-color);
}

#leeswijzer .content .content-container:nth-of-type(8) {
    background-color: var(--aw-tile7-color);
}

#leeswijzer .content .content-container:nth-of-type(9) {
    background-color: var(--aw-tile8-color);
}

#leeswijzer .content .content-container:nth-of-type(10) {
    background-color: var(--aw-tile9-color);
}

#leeswijzer .content .content-container:nth-of-type(11) {
    background-color: var(--aw-tile10-color);
}

#leeswijzer .content .content-container:nth-of-type(12) {
    background-color: var(--aw-tile11-color);
}

#leeswijzer .content .content-container:nth-of-type(13) {
    background-color: var(--aw-tile12-color);
}

#leeswijzer .content .content-container:nth-of-type(14) {
    background-color: var(--aw-tile13-color);
}

#leeswijzer .content .content-container:nth-of-type(15) {
    background-color: var(--aw-tile14-color);
}

#leeswijzer .content .content-container:nth-of-type(16) {
    background-color: var(--aw-tile15-color);
}

.signalenkaart-page-template .page-content {
    padding: 26px;
    background-color: var(--aw-color-white);
    max-width: 1140px;
    margin: 20px auto;
}

.signalenkaart-page-template .page-content a {
    color: var(--aw-color-secondary);
    text-decoration: none;
    font-weight: 700;
}

.signalenkaart-page-template .page-content h3 {
    color: var(--aw-color-primary);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-weight: 600;
    font-size: 24px;
}

.signalenkaart-page-template .page-content p {
    color: var(--aw-color-text-primary);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-weight: 400;
    line-height: 1.5em;
}

.signalenkaart-page-template .page-content img {
    float: right;
    padding-left: 50px;
    padding-bottom: 50px;
}

.footer-logo img {
    width: 300px;
    height: 158px;
    object-fit: contain;
    object-position: left;
}

.content-container {
    display: none;
    margin-top: 30px;
    padding: 35px;
    border-radius: 50px;
}

/* Show content container when active */
.content-container.active {
    display: block !important;
}

.content-container div,
.content-container p,
.content-container span,
.content-container strong,
.content-container ul,
.content-container li {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    color: var(--aw-color-text-light);
}

.content-container .content-post>p,
.content-aandachtsgebieden>p,
.content-risicofactoren>p,
.content-uitleg>p,
.content-opslaan-in-pdf>p {
    color: var(--aw-color-text-light);
    margin: -10px 0 15px 0;
    padding: 0;
}

.content-container .content-post ul,
.risicofactoren ul,
.aandachtsgebied-content-item,
.content-aandachtsgebieden ul,
.content-risicofactoren ul,
.signals ul,
.content-container ul {
    background-color: var(--aw-color-white);
    color: var(--aw-color-text-primary);
    padding: 30px;
    margin: 30px 0;
    border-radius: 50px;
}

.content-aandachtsgebieden ul {
    list-style: none;
}

.content-container .content-post ul,
.risicofactoren ul,
.aandachtsgebied-content-item p,
.aandachtsgebied-content-item span,
.aandachtsgebied-content-item strong,
.aandachtsgebied-content-item ul,
.aandachtsgebied-content-item li,
body .content-container .content-post ul,
body .risicofactoren ul,
body div .aandachtsgebied-content-item p,
body div .aandachtsgebied-content-item span,
body div .aandachtsgebied-content-item strong,
body div .aandachtsgebied-content-item ul,
body div .aandachtsgebied-content-item li,
body div .aandachtsgebied-content-item ul li {
    background-color: var(--aw-color-white);
    color: var(--aw-color-text-primary);
}

body div .aandachtsgebied-content-item ul,
body div .aandachtsgebied-content-item ul.aandachtsgebied-signalen-list,
body div .aandachtsgebied-content-item ul.aandachtsgebied-signalen-2-list {
    padding: 0 5px;
    margin: 20px 0;
}

#leeswijzer .content .content-container .content-post ul li p,
#leeswijzer .content .content-container .aanvullingen ul li p,
#leeswijzer .content .content-container .content-risicofactoren ul li p,
#leeswijzer .content .content-container .content-aandachtsgebieden ul li p {
    color: var(--aw-color-text-primary);
    margin: 0;
    padding-left: 20px;
    user-select: none;
}

#leeswijzer .content .content-container .content-post ul li,
#leeswijzer .content .content-container .aanvullingen ul li,
#leeswijzer .content .content-container .content-risicofactoren ul li,
#leeswijzer .content .content-container .content-aandachtsgebieden ul li,
body div .aandachtsgebied-content-item ul li {
    list-style-type: none;
    padding-bottom: 10px;
    line-height: 1.5em;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    user-select: none;
}

/* Content lists (not checkbox lists) should have disc bullets */
body div .aandachtsgebied-content-item ul:not(.aandachtsgebied-signalen-list):not(.aandachtsgebied-signalen-2-list) li {
    list-style-type: disc !important;
    display: list-item !important;
    padding-left: 0 !important;
    margin-left: 20px !important;
}

ul li,
ol li {
    margin: 0;
    padding: 0;
}

#leeswijzer .content .content-container .content-post ul li input,
#leeswijzer .content .content-container .aanvullingen ul li input,
#leeswijzer .content .content-container .content-risicofactoren ul li input,
#leeswijzer .content .content-container .content-aandachtsgebieden ul li input {
    float: left;
    padding: 0;
    margin: 4px 0px;
    height: 18px;
    width: 18px;
    min-width: 18px;
    min-height: 18px;
}

.seksueel-misbruik,
.vrouwelijke-verminking,
.verstandelijke-beperking,
.aandachtsgebieden,
.risicofactoren,
.uitleg,
.opslaan-in-pdf {
    display: none;
}

/* Active states - show sections when they have the active class */
.seksueel-misbruik.active,
.vrouwelijke-verminking.active,
.verstandelijke-beperking.active,
.aandachtsgebieden.active,
.risicofactoren.active,
.uitleg.active,
.opslaan-in-pdf.active,
.signals.active {
    display: block !important;
}

/* Hide signals section by default, show when active */
.signals {
    display: none;
}

.signals.active {
    display: block !important;
}

/* Main content active state */
.main-content {
    display: none;
}

.main-content.active {
    display: block !important;
}

#leeswijzer .content .content-container ul * {
    color: var(--aw-color-text-primary);
}

body .buttons>a,
body .buttons>a>div {
    font-weight: 700;
    font-size: 25px;
    font-family: "Poppins", "Montserrat", sans-serif;
    text-decoration: none;
    cursor: pointer;
    color: var(--aw-color-text-light);
}

body .buttons {
    display: flex;
    justify-content: space-between;
}

body .back-to-home {
    cursor: pointer;
}

.aanvullingen {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    font-family: "Poppins", "Montserrat", sans-serif;
    text-decoration: none;
    margin-bottom: 20px;
}

.content-container h2 {
    color: var(--aw-color-text-light);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 15px;
    padding-bottom: 0;
}

.content-container h3 {
    color: var(--aw-color-text-light);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-weight: 600;
    font-size: 24px;
}

.content-container p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    color: var(--aw-color-text-light);
    font-family: "Poppins", "Montserrat", Sans-serif;
}

.hidden {
    display: none;
}

.aanvullingen h3:not(:first-child) {
    margin-top: 30px;
}

.aanvullingen h3 {
    margin-bottom: 10px;
}

.page-id-1454 .header-left h2,
.page-id-1454 .header-left h1,
.page-id-1454 .blocks,
.page-id-1454 .aw-title,
.page-id-1476 .header-left h2,
.page-id-1476 .header-left h1,
.page-id-1476 .blocks,
.page-id-1476 .aw-title,
.page-id-3900 .header-left h2,
.page-id-3900 .header-left h1,
.page-id-3900 .blocks,
.page-id-3900 .aw-title {
    display: none;
}

body .aw-page-title {
    color: var(--aw-color-primary);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 38px;
    font-weight: 600;
}

body .aw-site-title {
    color: var(--aw-color-text-primary);
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 22px;
    font-weight: 600;
}

.signalenkaart-page-template .page-content ul,
.signalenkaart-page-template .page-content ol {
    font-family: "Poppins", "Montserrat", Sans-serif;
}

.aw-back {
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--aw-color-secondary);
    display: inline-block;
    line-height: 1.5em;
    padding: 12px 24px;
    border-radius: 3px;
    color: var(--aw-color-text-light);
    fill: var(--aw-color-text-light);
    text-align: center;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    text-decoration: none;
}

.aw-knop {
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--aw-color-dark);
    display: inline-block;
    line-height: 1.5em;
    padding: 12px 24px;
    border-radius: 3px;
    color: var(--aw-color-text-light);
    fill: var(--aw-color-text-light);
    text-align: center;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    text-decoration: none;
}

.aw-knop a {
    background-color: transparent;
    color: var(--aw-color-text-light);
    text-decoration: none;
}

.aw-knop:hover {
    background-color: var(--aw-color-secondary) !important;
}

.terug {
    cursor: pointer;
}



@media only screen and (max-width: 725px) {
    .header-left h2 {
        font-size: 15px;
    }

    .header-left h1 {
        font-size: 17px;
    }

    .header {
        min-height: 100px;
    }
}

/* Aandachtsgebied content styling */
.aandachtsgebied-content-item h3,
.aandachtsgebied-content-item .aw-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--aw-color-text-primary);
    font-size: 18px;
    font-weight: bold;
}

.aandachtsgebied-content-item p {
    margin-bottom: 20px;
    line-height: 1.5em;
    margin-top: 5px;
}

/* PDF output styling for aandachtsgebied items */
.aandachtsgebied-item {
    margin-bottom: 25px;
    page-break-inside: avoid;
}

.aandachtsgebied-item h4 {
    margin-bottom: 10px;
    color: var(--aw-color-text-primary);
    font-size: 16px;
    font-weight: bold;
}

/* Sub-category styling */
.subcategory-label {
    list-style: none !important;
    padding: 0 0 5px 0 !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    border-bottom: 1px solid #ddd;
    background-color: transparent !important;
}

ul .subcategory-label:first-child {
    margin-top: 0 !important;
}

.subcategory-label strong {
    color: var(--aw-color-primary) !important;
    font-size: 18px;
    line-height: 1.5em;
    font-weight: 700;
    font-family: "Poppins", "Montserrat", Sans-serif;
}

/* Section explanation styling */
.section-explanation {
    background-color: transparent;
    color: var(--aw-color-text-light);
    padding: 0;
    margin: 5px 0;
}

.section-explanation p {
    margin: 0 !important;
    background-color: transparent;
    color: var(--aw-color-text-light) !important;
}

/* Aandachtsgebieden label styling to match other sections */
#leeswijzer .content .content-container .content-aandachtsgebieden ul li label {
    color: var(--aw-color-text-primary);
    cursor: pointer;
    display: block;
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    width: 100%;
}

#leeswijzer .content .content-container .content-aandachtsgebieden ul li label:hover {
    color: #333333;
}

/* Aandachtsgebied signals styling in uitleg section */
.aandachtsgebied-signalen-list,
.aandachtsgebied-signalen-2-list {
    background-color: var(--aw-color-white);
    color: var(--aw-color-text-primary);
    padding: 20px;
    margin: 10px 0 16px 0;
}

.aandachtsgebied-signalen-list li,
.aandachtsgebied-signalen-2-list li {
    list-style-type: none;
    padding-bottom: 12px;
    line-height: 1.5em;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
}

.aandachtsgebied-signalen-list li input,
.aandachtsgebied-signalen-2-list li input {
    float: left;
    padding: 0;
    margin: 4px 0px;
    height: 18px;
    width: 18px;
    min-width: 18px;
    min-height: 18px;
}

.aandachtsgebied-signalen-list li label,
.aandachtsgebied-signalen-2-list li label {
    color: var(--aw-color-text-primary);
    cursor: pointer;
    display: block;
    font-family: "Poppins", "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    width: 100%;
}

.aandachtsgebied-signalen-list li label:hover,
.aandachtsgebied-signalen-2-list li label:hover {
    color: #333333;
}

/* Mobile */
@media(max-width: 768px) {

    .content-container,
    #leeswijzer {
        margin-top: 20px;
    }

    .content-container {
        padding: 20px;
        border-radius: 30px;
    }

    .blocks .content-titel a {
        font-size: 15px;
    }

    .content-container h2 {
        font-size: 21px;
    }

    .content-container h3 {
        font-size: 19px;
    }

    .content-container p,
    #leeswijzer .content .content-container .content-post ul li input,
    #leeswijzer .content .content-container .aanvullingen ul li input,
    #leeswijzer .content .content-container .content-risicofactoren ul li input,
    #leeswijzer .content .content-container .content-aandachtsgebieden ul li input,
    #leeswijzer .content .content-container .content-post ul li,
    #leeswijzer .content .content-container .aanvullingen ul li,
    #leeswijzer .content .content-container .content-risicofactoren ul li,
    #leeswijzer .content .content-container .content-aandachtsgebieden ul li,
    body div .aandachtsgebied-content-item ul li,
    #leeswijzer .content .content-container .content-aandachtsgebieden ul li label,
    #leeswijzer .aandachtsgebied-signalen-list li label,
    #leeswijzer .aandachtsgebied-signalen-2-list li label {
        font-size: 16px;
    }

    body .buttons>a,
    body .buttons>a>div {
        font-size: 22px;
    }

    .content-container .content-post ul,
    .risicofactoren ul,
    .aandachtsgebied-content-item,
    .content-aandachtsgebieden ul,
    .content-risicofactoren ul,
    .signals ul,
    .content-container ul {
        padding: 20px;
        border-radius: 30px;
    }

    .blocks {
        column-gap: 15px;
        row-gap: 5px;
    }

    .blocks .content-titel {
        flex: 0 0 calc(50% - 10px);
        margin-bottom: 14px;
    }

    .header {
        flex-wrap: wrap;
        min-height: auto;
        padding: 20px 0;
    }

    .header-left,
    .header-right {
        flex: 0 0 100%;
        text-align: center;
        padding: 0;
    }

    .header-left {
        margin-bottom: 10px;
    }

    .header img {
        margin-bottom: 0;
        width: 250px;
    }
}