/* --------------------------------------- */
/* ---------- START Custom Hero ---------- */
/* --------------------------------------- */
#page:has(.hero-section) {
    & .hero-section.v1.pennsylvania-key-variant {

        &.has-mask {
            &::after {
                top: unset;
                bottom: 0;
                height: 309px;
                background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 100));
                --mask-opacity: 1;
            }
        }

        .content-active-wrapper:has(.pb-heading) {
            margin-bottom: 30px;
        }

        .draggable-node-list {
            width: max-content;
            justify-content: end;
            float: left;
        }

        .pb-separator {
            margin-bottom: 20px;
        }
    }
}

/* ------------------------------------- */
/* ---------- END Custom Hero ---------- */
/* ------------------------------------- */

/* ---------------------------------------- */
/* ------- START Custom List Styles ------- */
/* ---------------------------------------- */
#page .pb-text {

    &.pennsylvania-key-variant.list-style-type-pdf,
    &.pennsylvania-key-variant.list-style-type-checkbox,
    &.pennsylvania-key-link-list-style,
    &.pennsylvania-key-arrow-list-style,
    &.pennsylvania-key-user-list-style {
        .html-wrapper ul li {
            position: relative;
            padding-left: 2.25em;
            list-style-type: none;

            &::before {
                content: "";
                position: absolute;
                left: 0;

                width: var(--icon-size, 21px);
                height: var(--icon-size, 21px);
                top: var(--icon-top-offset, -0.05em);

                background-image: unset;
                background-size: unset;
                background-repeat: unset;
                background-color: color-mix(in srgb, var(--secondary-color) 90%, black);
                mask-size: cover;
            }
        }
    }

    /* --- PDF & CHECK  --- */
    &.pennsylvania-key-variant {

        &.list-style-type-pdf,
        &.list-style-type-checkbox {
            --icon-size: 21px;
            --icon-top-offset: -0.05em;
        }

        &.list-style-type-pdf .html-wrapper ul li::before {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm-3.741 17.261c.346-.327.932-.647 1.742-.954.366-.725.731-1.523 1.018-2.232-.242-.506-.397-1.039-.464-1.588-.25-2.061 2.083-1.907 1.729.012-.068.368-.23.884-.483 1.536.367.654.849 1.146 1.233 1.472.524-.084 1.271-.17 1.797-.093 1.396.205 1.219 1.744-.021 1.744-.649 0-1.463-.507-1.972-.896-.779.144-1.613.365-2.33.618-.229.44-.536 1.001-.811 1.396-1.143 1.646-2.65.127-1.438-1.015zm1.199.055c-.253.128-.609.348-.801.559-.299.328-.103.586.257.233.178-.172.392-.492.544-.792zm4.44-1.201c.235.158.558.323.911.33.412.008.377-.261-.082-.328-.2-.03-.488-.03-.829-.002zm-2.947-.128c.328-.109 1.036-.274 1.213-.315-.02-.021-.528-.544-.695-.832-.134.335-.509 1.127-.518 1.147zm.314-3.983c-.057.296.029.771.129 1.061.113-.237.255-.806.197-1.085-.056-.279-.262-.299-.326.024z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm-3.741 17.261c.346-.327.932-.647 1.742-.954.366-.725.731-1.523 1.018-2.232-.242-.506-.397-1.039-.464-1.588-.25-2.061 2.083-1.907 1.729.012-.068.368-.23.884-.483 1.536.367.654.849 1.146 1.233 1.472.524-.084 1.271-.17 1.797-.093 1.396.205 1.219 1.744-.021 1.744-.649 0-1.463-.507-1.972-.896-.779.144-1.613.365-2.33.618-.229.44-.536 1.001-.811 1.396-1.143 1.646-2.65.127-1.438-1.015zm1.199.055c-.253.128-.609.348-.801.559-.299.328-.103.586.257.233.178-.172.392-.492.544-.792zm4.44-1.201c.235.158.558.323.911.33.412.008.377-.261-.082-.328-.2-.03-.488-.03-.829-.002zm-2.947-.128c.328-.109 1.036-.274 1.213-.315-.02-.021-.528-.544-.695-.832-.134.335-.509 1.127-.518 1.147zm.314-3.983c-.057.296.029.771.129 1.061.113-.237.255-.806.197-1.085-.056-.279-.262-.299-.326.024z'/%3E%3C/svg%3E");
        }

        &.list-style-type-checkbox .html-wrapper ul li::before {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z'/%3E%3C/svg%3E");
        }
    }

    /* --- LINK & ARROW  --- */
    &.pennsylvania-key-link-list-style,
    &.pennsylvania-key-arrow-list-style,
    &.pennsylvania-key-user-list-style {
        --icon-size: 28px;
        --icon-top-offset: -0.1em;

        .html-wrapper ul {
            line-height: 1.5em;

            li {
                align-content: center;

                &+li {
                    margin-top: 0.25em;
                }
            }
        }
    }

    &.pennsylvania-key-link-list-style .html-wrapper ul li::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z'/%3E%3C/svg%3E");
    }

    &.pennsylvania-key-arrow-list-style .html-wrapper ul li::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM361 417C351.6 426.4 336.4 426.4 327.1 417C317.8 407.6 317.7 392.4 327.1 383.1L366.1 344.1L216 344.1C202.7 344.1 192 333.4 192 320.1C192 306.8 202.7 296.1 216 296.1L366.1 296.1L327.1 257.1C317.7 247.7 317.7 232.5 327.1 223.2C336.5 213.9 351.7 213.8 361 223.2L441 303.2C450.4 312.6 450.4 327.8 441 337.1L361 417.1z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM361 417C351.6 426.4 336.4 426.4 327.1 417C317.8 407.6 317.7 392.4 327.1 383.1L366.1 344.1L216 344.1C202.7 344.1 192 333.4 192 320.1C192 306.8 202.7 296.1 216 296.1L366.1 296.1L327.1 257.1C317.7 247.7 317.7 232.5 327.1 223.2C336.5 213.9 351.7 213.8 361 223.2L441 303.2C450.4 312.6 450.4 327.8 441 337.1L361 417.1z'/%3E%3C/svg%3E");
    }

    &.pennsylvania-key-user-list-style .html-wrapper ul li::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z'/%3E%3C/svg%3E");
    }
}

/* -------------------------------------- */
/* ------- END Custom List Styles ------- */
/* -------------------------------------- */

/* ------------------------------------------- */
/* ------- START Image with box shadow ------- */
/* ------------------------------------------- */
#page .pb-image.has-box-shadow img {
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------- */
/* ------- END Image with box shadow ------- */
/* ----------------------------------------- */

/* -------------------------------------- */
/* --------- START Custom Quote --------- */
/* -------------------------------------- */
#page .pb-quote.pennsylvania-key-variant {
    border-left: none;
    transition: transform 150ms ease-out;

    &:hover {
        transform: translate3d(0, -15px, 0);

        .quote-wrapper {
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
        }
    }

    & .quote-wrapper {
        position: relative;
        background-color: var(--quote-main-color);
        padding: 33px 35px;
        border-radius: 5px;
        margin-bottom: 35px;
        transition: box-shadow 150ms ease-out;

        &::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 15px 15px 0 15px;
            border-style: solid;
            border-color: var(--quote-main-color) transparent transparent transparent;
        }

        .quote-text {
            line-height: 1.7;
            font-size: 15px;
        }
    }

    & .cite-wrapper .quote-cite {
        display: flex;
        flex-direction: column;

        .quote-author,
        .quote-source {
            justify-content: center;
        }

        .quote-author {
            font-weight: 700;
            letter-spacing: 1px;
            border-right: none;
        }

        .quote-source {
            font-style: italic;
        }
    }
}


/* ------------------------------------ */
/* --------- END Custom Quote --------- */
/* ------------------------------------ */

/* ----------------------------------------------------------------- */
/* --------- START Dark Buttons [Pennsylvania Key Variant] --------- */
/* ----------------------------------------------------------------- */
#page .pb-button.pennsylvania-key-variant .button-theme-dark {
    --dark-button: var(--secondary-color);
    --dark-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--secondary-color) 20%, transparent) 60%, var(--secondary-color));

    & .title-text {
        color: var(--secondary-color-contrast);
    }

    & .style-2-bar {
        border-color: var(--secondary-color-contrast);
    }

    & .custom-icon>svg {
        fill: var(--secondary-color-contrast);
    }

    &.button-type-square.button-style-2 .arrow-button {
        circle {
            fill: var(--secondary-color-contrast);
            stroke: var(--secondary-color-contrast);
        }

        path {
            stroke: var(--secondary-color);
        }

        rect {
            fill: var(--secondary-color);
        }
    }
}

/* --------------------------------------------------------------- */
/* --------- END Dark Buttons [Pennsylvania Key Variant] --------- */
/* --------------------------------------------------------------- */

/* ------------------------------------------ */
/* --------- START Custom Separator --------- */
/* ------------------------------------------ */
#page .pb-separator.pennsylvania-key-variant .separator-container {
    border-bottom: none !important;
    position: relative;
    height: 2px;

    &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35%;
        border-bottom: var(--border-bottom);
    }

    &::after {
        content: "";
        position: absolute;
        left: 35%;
        right: 0;
        bottom: 0;
        height: 2px;
        background-color: rgba(204, 204, 204, 0.3);
    }
}

/* ---------------------------------------- */
/* --------- END Custom Separator --------- */
/* ---------------------------------------- */

/* ---------------------------------------- */
/* --------- START Custom Card V1 --------- */
/* ---------------------------------------- */
#page .single-column-row.pennsylvania-key-variant.card-v1 {
    position: relative;

    & .node-manager-container {
        position: static;
    }

    & .pb-button a {
        border: none;
        min-height: auto;
        position: static;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        &:hover {
            background-color: initial;

            .custom-icon>svg {
                fill: initial;
            }
        }

        .custom-icon-wrapper {
            margin-bottom: 0;
        }

        .title-text {
            display: none;
        }
    }
}

/* -------------------------------------- */
/* --------- END Custom Card V1 --------- */
/* -------------------------------------- */

/* ---------------------------------------- */
/* --------- START Custom Card V2 --------- */
/* ---------------------------------------- */
#page .single-column-row.pennsylvania-key-variant.card-v2 {

    & .draggable-node-list {
        position: relative;

        &>.content-active-wrapper:nth-child(1) {
            position: absolute;
            top: -7px;
            left: 0;
            width: 32px;
            height: 32px;

            .pb-button,
            .buttons-container,
            a.button,
            .custom-icon-wrapper,
            .custom-icon {
                display: block;
                margin: 0;
                background: transparent;
                pointer-events: none !important;
            }

            .title-text {
                display: none;
            }

            .pb-button {
                min-height: auto;
            }

            .custom-icon svg {
                width: 32px;
                height: 32px;
                fill: var(--secondary-color);
            }
        }

        &>.content-active-wrapper:nth-child(2) {
            padding-left: 45px;
        }
    }
}

/* -------------------------------------- */
/* --------- END Custom Card V2 --------- */
/* -------------------------------------- */