/* =====================================
   PUBLIC CONTENT PAGES
   BeschrijfJeWensen.nl

   Shared page-specific stylesheet for:
   - privacy-statement.php
   - cookie-statement.php
   - general-terms.php
   - disclaimer.php
   - about.php
   - faq.php (where applicable)

   Global header/footer styling:
   /assets/css/style.css
===================================== */

:root{
    --public-primary:#5f55d9;
    --public-primary-dark:#4c43c4;
    --public-primary-soft:#f1efff;

    --public-text:#25243a;
    --public-text-soft:#66667a;
    --public-text-light:#858596;

    --public-background:#ffffff;
    --public-surface:#ffffff;
    --public-surface-soft:#fafafd;

    --public-border:#e4e4ea;
    --public-border-soft:#efeff4;

    --public-warning:#8a6d28;
    --public-warning-background:#faf8ef;
    --public-warning-border:#ebe4c8;

    --public-shadow:0 10px 30px rgba(42,39,80,.045);

    --public-radius-small:10px;
    --public-radius-medium:14px;
    --public-radius-large:18px;

    --public-max-width:1180px;
}


/* =====================================
   PAGE
===================================== */

.public-content-page{
    width:100%;

    background:var(--public-background);
    color:var(--public-text);
}

.public-content-page *,
.public-content-page *::before,
.public-content-page *::after{
    box-sizing:border-box;
}


/* =====================================
   SHARED CONTAINER
===================================== */

.public-content-container{
    width:calc(100% - 48px);
    max-width:var(--public-max-width);

    margin:0 auto;
}


/* =====================================
   HERO
===================================== */

.public-content-hero{
    padding:58px 0 52px;

    border-bottom:1px solid #e7e5f2;

    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(95,85,217,.10) 0,
            rgba(95,85,217,.10) 90px,
            transparent 91px
        ),
        radial-gradient(
            circle at 79% 73%,
            rgba(95,85,217,.055) 0,
            rgba(95,85,217,.055) 145px,
            transparent 146px
        ),
        linear-gradient(
            120deg,
            #f5f3ff 0%,
            #fbfaff 65%,
            #f2efff 100%
        );
}

.public-content-hero .public-content-container{
    position:relative;
}

.public-content-eyebrow{
    margin:0 0 11px;

    color:var(--public-primary);

    font-size:12px;
    font-weight:800;
    line-height:1.35;

    letter-spacing:.105em;
    text-transform:uppercase;
}

.public-content-hero h1{
    max-width:820px;

    margin:0;

    color:var(--public-text);

    font-size:clamp(38px,4vw,52px);
    font-weight:800;
    line-height:1.08;

    letter-spacing:-1.35px;
}

.public-content-introduction{
    max-width:760px;

    margin:18px 0 0;

    color:var(--public-text-soft);

    font-size:17px;
    line-height:1.75;
}

.public-content-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 18px;

    margin-top:24px;

    color:var(--public-text-light);

    font-size:12px;
    font-weight:650;
    line-height:1.5;
}

.public-content-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.public-content-meta span::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:#aaa4e8;
}


/* =====================================
   BODY
===================================== */

.public-content-body{
    padding:54px 0 90px;
}


/* =====================================
   TWO COLUMN LAYOUT
===================================== */

.public-content-layout{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:54px;

    align-items:start;
}


/* =====================================
   SIDEBAR
===================================== */

.public-content-sidebar{
    min-width:0;
}

.public-content-navigation{
    position:sticky;
    top:110px;

    display:flex;
    flex-direction:column;

    padding:19px 0;

    border-top:1px solid var(--public-border);
    border-bottom:1px solid var(--public-border);
}

.public-content-navigation-title{
    margin:0;
    padding:0 14px 12px;

    color:var(--public-text-light);

    font-size:11px;
    font-weight:800;
    line-height:1.35;

    letter-spacing:.1em;
    text-transform:uppercase;
}

.public-content-navigation a{
    position:relative;

    display:block;

    padding:8px 14px;

    border-radius:8px;

    color:#686779;

    font-size:13px;
    font-weight:600;
    line-height:1.4;

    text-decoration:none;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.public-content-navigation a:hover{
    background:#f3f1ff;
    color:var(--public-primary);

    transform:translateX(2px);
}

.public-content-navigation a:focus-visible{
    outline:3px solid rgba(95,85,217,.18);
    outline-offset:2px;
}


/* =====================================
   ARTICLE
===================================== */

.public-content-article{
    min-width:0;

    padding:4px 0 0;
}


/* =====================================
   CONTENT SECTIONS
===================================== */

.public-content-section{
    min-width:0;

    scroll-margin-top:125px;
}

.public-content-section + .public-content-section{
    margin-top:46px;
    padding-top:46px;

    border-top:1px solid var(--public-border-soft);
}

.public-content-section h2{
    max-width:780px;

    margin:0 0 18px;

    color:var(--public-text);

    font-size:27px;
    font-weight:800;
    line-height:1.25;

    letter-spacing:-.5px;
}

.public-content-section h3{
    max-width:780px;

    margin:28px 0 12px;

    color:var(--public-text);

    font-size:19px;
    font-weight:800;
    line-height:1.35;

    letter-spacing:-.25px;
}

.public-content-section h4{
    margin:24px 0 10px;

    color:var(--public-text);

    font-size:16px;
    font-weight:800;
    line-height:1.4;
}

.public-content-section p{
    max-width:800px;

    margin:0 0 16px;

    color:#565568;

    font-size:15px;
    line-height:1.8;
}

.public-content-section p:last-child{
    margin-bottom:0;
}

.public-content-section strong{
    color:#363548;

    font-weight:800;
}


/* =====================================
   LINKS
===================================== */

.public-content-section a{
    color:var(--public-primary);

    font-weight:700;
    text-decoration:none;

    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.public-content-section a:hover{
    color:var(--public-primary-dark);

    text-decoration:underline;
}

.public-content-section a:focus-visible{
    outline:3px solid rgba(95,85,217,.18);
    outline-offset:2px;
    border-radius:3px;
}


/* =====================================
   LISTS
===================================== */

.public-content-section ul,
.public-content-section ol{
    max-width:800px;

    margin:18px 0 20px;
    padding:0;

    list-style:none;
}

.public-content-section li{
    position:relative;

    margin:0;
    padding:7px 0 7px 27px;

    color:#565568;

    font-size:15px;
    line-height:1.7;
}

.public-content-section ul > li::before{
    content:"";

    position:absolute;

    left:4px;
    top:18px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#aaa4e8;

    box-shadow:
        0 0 0 4px rgba(95,85,217,.07);
}

.public-content-section ol{
    counter-reset:public-content-counter;
}

.public-content-section ol > li{
    counter-increment:public-content-counter;

    padding-left:38px;
}

.public-content-section ol > li::before{
    content:counter(public-content-counter);

    position:absolute;

    left:0;
    top:8px;

    width:25px;
    height:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--public-primary-soft);
    color:var(--public-primary);

    font-size:11px;
    font-weight:800;
    line-height:1;
}


/* =====================================
   NOTICES
===================================== */

.public-content-notice{
    max-width:800px;

    margin:24px 0;
    padding:19px 21px;

    border:1px solid #dfdcf7;
    border-radius:var(--public-radius-small);

    background:#f6f4ff;
}

.public-content-notice strong{
    display:block;

    margin:0 0 6px;

    color:#3c385d;

    font-size:14px;
    font-weight:800;
    line-height:1.45;
}

.public-content-notice p{
    margin:0;

    color:#625e80;

    font-size:13px;
    line-height:1.7;
}

.public-content-notice-warning{
    border-color:var(--public-warning-border);

    background:var(--public-warning-background);
}

.public-content-notice-warning strong{
    color:#66572f;
}

.public-content-notice-warning p{
    color:#756944;
}


/* =====================================
   OPTIONAL INTRO CARD

   Reusable for About / FAQ / other
   public content pages.
===================================== */

.public-content-card{
    max-width:800px;

    margin:24px 0;
    padding:25px 27px;

    border:1px solid var(--public-border);
    border-radius:var(--public-radius-medium);

    background:var(--public-surface);

    box-shadow:var(--public-shadow);
}

.public-content-card h2,
.public-content-card h3{
    margin-top:0;
}

.public-content-card p:last-child,
.public-content-card ul:last-child,
.public-content-card ol:last-child{
    margin-bottom:0;
}


/* =====================================
   OPTIONAL GRID

   Reusable for About / FAQ / Contact.
===================================== */

.public-content-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;

    margin:24px 0;
}

.public-content-grid-card{
    min-width:0;

    padding:24px;

    border:1px solid var(--public-border);
    border-radius:var(--public-radius-medium);

    background:var(--public-surface);

    box-shadow:0 8px 24px rgba(42,39,80,.03);
}

.public-content-grid-card h3{
    margin:0 0 10px;

    color:var(--public-text);

    font-size:18px;
    font-weight:800;
    line-height:1.35;
}

.public-content-grid-card p{
    margin:0;

    color:var(--public-text-soft);

    font-size:14px;
    line-height:1.7;
}


/* =====================================
   OPTIONAL INFORMATION ROWS

   Reusable for legal documents.
===================================== */

.public-content-info-list{
    max-width:800px;

    margin:24px 0;

    border-top:1px solid var(--public-border);
}

.public-content-info-row{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:28px;

    padding:18px 0;

    border-bottom:1px solid var(--public-border);
}

.public-content-info-row strong{
    color:var(--public-text);

    font-size:13px;
    font-weight:800;
    line-height:1.5;
}

.public-content-info-row span,
.public-content-info-row p{
    margin:0;

    color:var(--public-text-soft);

    font-size:14px;
    line-height:1.65;
}


/* =====================================
   OPTIONAL FAQ ELEMENTS
===================================== */

.public-content-faq{
    max-width:800px;

    margin:24px 0;
}

.public-content-faq-item{
    border-bottom:1px solid var(--public-border);
}

.public-content-faq-item:first-child{
    border-top:1px solid var(--public-border);
}

.public-content-faq-item summary{
    position:relative;

    padding:19px 42px 19px 0;

    color:var(--public-text);

    font-size:15px;
    font-weight:800;
    line-height:1.5;

    cursor:pointer;

    list-style:none;
}

.public-content-faq-item summary::-webkit-details-marker{
    display:none;
}

.public-content-faq-item summary::after{
    content:"+";

    position:absolute;

    right:5px;
    top:50%;

    transform:translateY(-50%);

    color:var(--public-primary);

    font-size:24px;
    font-weight:500;
    line-height:1;
}

.public-content-faq-item[open] summary::after{
    content:"−";
}

.public-content-faq-answer{
    padding:0 42px 20px 0;
}

.public-content-faq-answer p{
    margin:0;

    color:var(--public-text-soft);

    font-size:14px;
    line-height:1.75;
}


/* =====================================
   TEXT SELECTION
===================================== */

.public-content-page ::selection{
    background:rgba(95,85,217,.18);
}


/* =====================================
   RESPONSIVE - SMALL DESKTOP
===================================== */

@media (max-width:1050px){

    .public-content-layout{
        grid-template-columns:215px minmax(0,1fr);
        gap:38px;
    }

    .public-content-navigation a{
        padding-left:11px;
        padding-right:11px;

        font-size:12px;
    }

    .public-content-navigation-title{
        padding-left:11px;
        padding-right:11px;
    }

}


/* =====================================
   RESPONSIVE - TABLET
===================================== */

@media (max-width:820px){

    .public-content-hero{
        padding:48px 0 44px;
    }

    .public-content-body{
        padding-top:38px;
    }

    .public-content-layout{
        grid-template-columns:1fr;
        gap:38px;
    }

    .public-content-navigation{
        position:static;

        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px;

        padding:16px;

        border:1px solid var(--public-border);
        border-radius:var(--public-radius-medium);

        background:var(--public-surface-soft);
    }

    .public-content-navigation-title{
        grid-column:1 / -1;

        padding:0 4px 9px;
    }

    .public-content-navigation a{
        padding:8px 9px;
    }

    .public-content-section{
        scroll-margin-top:95px;
    }

    .public-content-section + .public-content-section{
        margin-top:40px;
        padding-top:40px;
    }

}


/* =====================================
   RESPONSIVE - MOBILE
===================================== */

@media (max-width:650px){

    .public-content-container{
        width:calc(100% - 30px);
    }

    .public-content-hero{
        padding:39px 0 37px;

        background:
            radial-gradient(
                circle at 108% 8%,
                rgba(95,85,217,.09) 0,
                rgba(95,85,217,.09) 95px,
                transparent 96px
            ),
            linear-gradient(
                120deg,
                #f5f3ff 0%,
                #fbfaff 100%
            );
    }

    .public-content-hero h1{
        font-size:36px;
        letter-spacing:-.9px;
    }

    .public-content-introduction{
        margin-top:15px;

        font-size:15px;
        line-height:1.7;
    }

    .public-content-meta{
        margin-top:20px;
    }

    .public-content-body{
        padding:30px 0 62px;
    }

    .public-content-layout{
        gap:32px;
    }

    .public-content-navigation{
        grid-template-columns:1fr;

        padding:14px;
    }

    .public-content-navigation-title{
        grid-column:auto;
    }

    .public-content-section + .public-content-section{
        margin-top:34px;
        padding-top:34px;
    }

    .public-content-section h2{
        margin-bottom:15px;

        font-size:24px;
    }

    .public-content-section h3{
        font-size:18px;
    }

    .public-content-section p,
    .public-content-section li{
        font-size:14px;
    }

    .public-content-section p{
        line-height:1.75;
    }

    .public-content-section li{
        line-height:1.65;
    }

    .public-content-notice{
        padding:17px 18px;
    }

    .public-content-grid{
        grid-template-columns:1fr;
    }

    .public-content-info-row{
        grid-template-columns:1fr;
        gap:6px;
    }

}


/* =====================================
   RESPONSIVE - SMALL MOBILE
===================================== */

@media (max-width:420px){

    .public-content-container{
        width:calc(100% - 24px);
    }

    .public-content-hero h1{
        font-size:32px;
    }

    .public-content-eyebrow{
        font-size:11px;
    }

    .public-content-navigation{
        padding:12px;
    }

    .public-content-card,
    .public-content-grid-card{
        padding:20px;
    }

    .public-content-faq-item summary{
        padding-right:35px;
    }

    .public-content-faq-answer{
        padding-right:20px;
    }

}



/* =====================================
   ABOUT PAGE
===================================== */

.public-content-section-label{
    margin:0 0 8px !important;

    color:var(--public-primary) !important;

    font-size:11px !important;
    font-weight:800 !important;
    line-height:1.35 !important;

    letter-spacing:.1em;
    text-transform:uppercase;
}

.public-about-lead{
    color:#3f3d53 !important;

    font-size:18px !important;
    font-weight:700;
    line-height:1.65 !important;
}


/* =====================================
   ABOUT VALUES
===================================== */

.public-about-values{
    margin-top:28px;
}

.public-about-values .public-content-grid-card{
    position:relative;

    min-height:210px;

    display:flex;
    flex-direction:column;

    padding:25px;

    overflow:hidden;
}

.public-about-value-icon{
    width:38px;
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-bottom:20px;

    border-radius:11px;

    background:var(--public-primary-soft);
    color:var(--public-primary);

    font-size:12px;
    font-weight:800;
    line-height:1;
}

.public-about-values .public-content-grid-card h3{
    margin:0 0 9px;
}

.public-about-values .public-content-grid-card p{
    margin:0;

    font-size:13px;
    line-height:1.7;
}


/* =====================================
   ABOUT PRIVACY PANEL
===================================== */

.public-about-privacy-panel{
    max-width:800px;

    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    gap:20px;

    align-items:start;

    margin:25px 0 0;
    padding:25px 27px;

    border:1px solid #dedbf7;
    border-radius:var(--public-radius-medium);

    background:
        linear-gradient(
            120deg,
            #f5f3ff 0%,
            #faf9ff 100%
        );
}

.public-about-privacy-icon{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#e5e1ff;
    color:var(--public-primary);

    font-size:20px;
    font-weight:900;
}

.public-about-privacy-panel strong{
    display:block;

    margin:1px 0 7px;

    color:var(--public-text);

    font-size:15px;
    font-weight:800;
    line-height:1.45;
}

.public-about-privacy-panel p{
    margin:0;

    color:var(--public-text-soft);

    font-size:13px;
    line-height:1.7;
}

.public-about-privacy-panel a{
    display:inline-flex;

    margin-top:13px;

    color:var(--public-primary);

    font-size:13px;
    font-weight:800;
    line-height:1.4;

    text-decoration:none;
}

.public-about-privacy-panel a:hover{
    color:var(--public-primary-dark);

    text-decoration:underline;
}


/* =====================================
   ABOUT SUPPORT CARD
===================================== */

.public-about-support-card{
    max-width:800px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 230px;
    gap:38px;

    align-items:center;

    margin:27px 0 23px;
    padding:30px;

    border:1px solid #ddd9fb;
    border-radius:var(--public-radius-large);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(95,85,217,.10) 0,
            rgba(95,85,217,.10) 90px,
            transparent 91px
        ),
        linear-gradient(
            120deg,
            #f3f1ff 0%,
            #faf9ff 100%
        );
}

.public-about-support-content{
    min-width:0;
}

.public-about-support-content .public-content-eyebrow{
    margin-bottom:7px;
}

.public-about-support-content h3{
    margin:0;

    color:var(--public-text);

    font-size:21px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:-.35px;
}

.public-about-support-content > p:last-child{
    margin:12px 0 0;

    color:var(--public-text-soft);

    font-size:13px;
    line-height:1.7;
}

.public-about-support-action{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
}

.public-about-support-button{
    min-height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:11px 17px;

    border:1px solid var(--public-primary);
    border-radius:10px;

    background:var(--public-primary);
    color:#fff !important;

    font-size:13px;
    font-weight:800;
    line-height:1.35;

    text-align:center;
    text-decoration:none !important;

    box-shadow:0 6px 14px rgba(95,85,217,.17);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.public-about-support-button:hover{
    background:var(--public-primary-dark);
    border-color:var(--public-primary-dark);

    color:#fff !important;

    transform:translateY(-1px);

    box-shadow:0 9px 20px rgba(95,85,217,.23);
}

.public-about-support-action span{
    color:var(--public-text-light);

    font-size:11px;
    font-weight:600;
    line-height:1.5;

    text-align:center;
}

.public-about-thanks{
    color:#4b4960 !important;

    font-weight:700;
}


/* =====================================
   ABOUT PAGE RESPONSIVE
===================================== */

@media (max-width:820px){

    .public-about-support-card{
        grid-template-columns:1fr;
        gap:24px;
    }

    .public-about-support-action{
        max-width:280px;
    }

}


@media (max-width:650px){

    .public-about-lead{
        font-size:16px !important;
    }

    .public-about-values .public-content-grid-card{
        min-height:0;
    }

    .public-about-privacy-panel{
        grid-template-columns:1fr;

        padding:22px;
    }

    .public-about-support-card{
        padding:24px 22px;
    }

    .public-about-support-action{
        max-width:none;
    }

    .public-about-support-button{
        width:100%;
    }

}


/* =====================================
   FAQ PAGE
===================================== */


/* =====================================
   FAQ CATEGORY CARDS
===================================== */

.public-faq-categories{
    margin-top:28px;
}

.public-faq-category-card{
    position:relative;

    min-height:235px;

    display:flex;
    flex-direction:column;

    padding:25px;

    color:inherit !important;
    text-decoration:none !important;

    overflow:hidden;

    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.public-faq-category-card:hover{
    border-color:#d7d3f4;

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(42,39,80,.07);
}

.public-faq-category-card:focus-visible{
    outline:3px solid rgba(95,85,217,.18);
    outline-offset:3px;
}

.public-faq-category-number{
    width:38px;
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 38px;

    margin-bottom:20px;

    border-radius:11px;

    background:var(--public-primary-soft);
    color:var(--public-primary);

    font-size:12px;
    font-weight:800;
    line-height:1;
}

.public-faq-category-card h3{
    margin:0 0 9px;

    color:var(--public-text);

    font-size:18px;
    font-weight:800;
    line-height:1.35;

    letter-spacing:-.25px;
}

.public-faq-category-card p{
    margin:0 0 20px;

    color:var(--public-text-soft);

    font-size:13px;
    line-height:1.7;
}

.public-faq-category-link{
    display:inline-flex;
    align-items:center;

    margin-top:auto;

    color:var(--public-primary);

    font-size:12px;
    font-weight:800;
    line-height:1.4;
}


/* =====================================
   FAQ ACCORDION IMPROVEMENTS
===================================== */

.public-faq-page .public-content-faq{
    margin-top:27px;
}

.public-faq-page .public-content-faq-item{
    transition:
        border-color .18s ease,
        background .18s ease;
}

.public-faq-page .public-content-faq-item[open]{
    border-bottom-color:#dedbf5;
}

.public-faq-page .public-content-faq-item summary{
    transition:
        color .18s ease,
        padding-left .18s ease;
}

.public-faq-page .public-content-faq-item summary:hover{
    color:var(--public-primary);
}

.public-faq-page .public-content-faq-item summary:focus-visible{
    outline:3px solid rgba(95,85,217,.18);
    outline-offset:3px;
    border-radius:5px;
}

.public-faq-page .public-content-faq-item[open] summary{
    color:var(--public-primary);
}

.public-faq-page .public-content-faq-item[open] summary::after{
    color:var(--public-primary-dark);
}

.public-faq-page .public-content-faq-answer{
    max-width:760px;
}

.public-faq-page .public-content-faq-answer p{
    margin:0 0 12px;

    color:var(--public-text-soft);

    font-size:14px;
    line-height:1.75;
}

.public-faq-page .public-content-faq-answer p:last-child{
    margin-bottom:0;
}


/* =====================================
   FAQ CONTACT CARD
===================================== */

.public-faq-contact-card{
    max-width:800px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 185px;
    gap:34px;

    align-items:center;

    padding:29px 30px;

    border:1px solid #ddd9fb;
    border-radius:var(--public-radius-large);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(95,85,217,.10) 0,
            rgba(95,85,217,.10) 85px,
            transparent 86px
        ),
        linear-gradient(
            120deg,
            #f3f1ff 0%,
            #faf9ff 100%
        );
}

.public-faq-contact-card > div{
    min-width:0;
}

.public-faq-contact-card .public-content-eyebrow{
    margin-bottom:7px;
}

.public-faq-contact-card h2{
    margin:0;

    color:var(--public-text);

    font-size:23px;
    font-weight:800;
    line-height:1.3;

    letter-spacing:-.4px;
}

.public-faq-contact-card > div > p:last-child{
    margin:12px 0 0;

    color:var(--public-text-soft);

    font-size:13px;
    line-height:1.7;
}

.public-faq-contact-button{
    min-height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:11px 17px;

    border:1px solid var(--public-primary);
    border-radius:10px;

    background:var(--public-primary);
    color:#fff !important;

    font-size:13px;
    font-weight:800;
    line-height:1.35;

    text-align:center;
    text-decoration:none !important;

    box-shadow:0 6px 14px rgba(95,85,217,.17);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.public-faq-contact-button:hover{
    background:var(--public-primary-dark);
    border-color:var(--public-primary-dark);

    color:#fff !important;

    transform:translateY(-1px);

    box-shadow:0 9px 20px rgba(95,85,217,.23);
}

.public-faq-contact-button:focus-visible{
    outline:3px solid rgba(95,85,217,.22);
    outline-offset:3px;
}


/* =====================================
   FAQ PAGE RESPONSIVE
===================================== */

@media (max-width:820px){

    .public-faq-category-card{
        min-height:220px;
    }

    .public-faq-contact-card{
        grid-template-columns:1fr;
        gap:23px;
    }

    .public-faq-contact-button{
        width:fit-content;
        min-width:185px;
    }

}


@media (max-width:650px){

    .public-faq-categories{
        margin-top:24px;
    }

    .public-faq-category-card{
        min-height:0;
    }

    .public-faq-page .public-content-faq{
        margin-top:22px;
    }

    .public-faq-page .public-content-faq-item summary{
        padding-top:17px;
        padding-bottom:17px;
    }

    .public-faq-page .public-content-faq-answer{
        padding-right:24px;
        padding-bottom:19px;
    }

    .public-faq-contact-card{
        padding:24px 22px;
    }

    .public-faq-contact-card h2{
        font-size:21px;
    }

    .public-faq-contact-button{
        width:100%;
        min-width:0;
    }

}


@media (max-width:420px){

    .public-faq-category-card{
        padding:20px;
    }

    .public-faq-category-number{
        margin-bottom:16px;
    }

    .public-faq-contact-card{
        padding:21px 19px;
    }

}


/* =====================================
   CONTACT PAGE
===================================== */


/* =====================================
   CONTACT CATEGORY CARDS
===================================== */

.public-contact-categories{
    margin-top:28px;
}

.public-contact-category-card{
    position:relative;

    min-height:220px;

    display:flex;
    flex-direction:column;

    padding:25px;

    overflow:hidden;
}

.public-contact-category-number{
    width:38px;
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 38px;

    margin-bottom:20px;

    border-radius:11px;

    background:var(--public-primary-soft);
    color:var(--public-primary);

    font-size:12px;
    font-weight:800;
    line-height:1;
}

.public-contact-category-card h3{
    margin:0 0 9px;

    color:var(--public-text);

    font-size:18px;
    font-weight:800;
    line-height:1.35;

    letter-spacing:-.25px;
}

.public-contact-category-card p{
    margin:0;

    color:var(--public-text-soft);

    font-size:13px;
    line-height:1.7;
}


/* =====================================
   CONTACT STATUS MESSAGES
===================================== */

.public-contact-message{
    max-width:800px;

    margin:25px 0;
    padding:20px 22px;

    border:1px solid;
    border-radius:var(--public-radius-medium);
}

.public-contact-message strong{
    display:block;

    margin-bottom:5px;

    font-size:14px;
    font-weight:800;
    line-height:1.45;
}

.public-contact-message p{
    margin:0;

    font-size:13px;
    line-height:1.65;
}

.public-contact-message ul{
    margin:12px 0 0;
    padding-left:20px;
}

.public-contact-message li{
    margin:5px 0;

    font-size:13px;
    line-height:1.6;
}

.public-contact-message-success{
    border-color:#b8dfc7;

    background:#f1faf4;
    color:#245f39;
}

.public-contact-message-error{
    border-color:#e5c4c4;

    background:#fff5f5;
    color:#7a3030;
}


/* =====================================
   CONTACT FORM
===================================== */

.public-contact-form{
    position:relative;

    max-width:800px;

    margin-top:28px;
    padding:30px;

    border:1px solid var(--public-border);
    border-radius:var(--public-radius-large);

    background:#fff;

    box-shadow:0 10px 32px rgba(42,39,80,.045);
}

.public-contact-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.public-contact-field{
    min-width:0;

    margin-bottom:21px;
}

.public-contact-field label{
    display:block;

    margin:0 0 8px;

    color:var(--public-text);

    font-size:13px;
    font-weight:800;
    line-height:1.4;
}

.public-contact-field input,
.public-contact-field select,
.public-contact-field textarea{
    width:100%;

    display:block;

    box-sizing:border-box;

    border:1px solid #d9d7e5;
    border-radius:10px;

    background:#fff;
    color:var(--public-text);

    font-family:inherit;
    font-size:14px;
    line-height:1.5;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.public-contact-field input,
.public-contact-field select{
    min-height:46px;

    padding:10px 13px;
}

.public-contact-field textarea{
    min-height:190px;

    padding:12px 13px;

    resize:vertical;
}

.public-contact-field input:hover,
.public-contact-field select:hover,
.public-contact-field textarea:hover{
    border-color:#c8c4df;
}

.public-contact-field input:focus,
.public-contact-field select:focus,
.public-contact-field textarea:focus{
    outline:none;

    border-color:var(--public-primary);

    box-shadow:0 0 0 3px rgba(95,85,217,.12);
}

.public-contact-field input::placeholder,
.public-contact-field textarea::placeholder{
    color:#9a97aa;
}

.public-contact-field-help{
    margin:7px 0 0 !important;

    color:var(--public-text-light) !important;

    font-size:11px !important;
    line-height:1.55 !important;
}


/* =====================================
   CONTACT PRIVACY CONSENT
===================================== */

.public-contact-consent{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    gap:11px;

    align-items:start;

    margin:3px 0 24px;
    padding:17px 18px;

    border:1px solid #e1dff0;
    border-radius:10px;

    background:#faf9ff;
}

.public-contact-consent input{
    width:17px;
    height:17px;

    margin:2px 0 0;

    accent-color:var(--public-primary);
}

.public-contact-consent label{
    color:var(--public-text-soft);

    font-size:12px;
    line-height:1.65;
}

.public-contact-consent a{
    color:var(--public-primary);

    font-weight:800;
    text-decoration:none;
}

.public-contact-consent a:hover{
    color:var(--public-primary-dark);

    text-decoration:underline;
}


/* =====================================
   CONTACT SUBMIT
===================================== */

.public-contact-submit{
    display:flex;
    align-items:center;
    gap:20px;

    padding-top:3px;
}

.public-contact-submit button{
    min-width:175px;
    min-height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:11px 19px;

    border:1px solid var(--public-primary);
    border-radius:10px;

    background:var(--public-primary);
    color:#fff;

    font-family:inherit;
    font-size:13px;
    font-weight:800;
    line-height:1.35;

    cursor:pointer;

    box-shadow:0 6px 14px rgba(95,85,217,.17);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.public-contact-submit button:hover{
    background:var(--public-primary-dark);
    border-color:var(--public-primary-dark);

    transform:translateY(-1px);

    box-shadow:0 9px 20px rgba(95,85,217,.23);
}

.public-contact-submit button:focus-visible{
    outline:3px solid rgba(95,85,217,.22);
    outline-offset:3px;
}

.public-contact-submit p{
    max-width:390px;

    margin:0 !important;

    color:var(--public-text-light) !important;

    font-size:11px !important;
    line-height:1.55 !important;
}


/* =====================================
   CONTACT HONEYPOT
===================================== */

.public-contact-honeypot{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;

    white-space:nowrap !important;

    pointer-events:none !important;
}


/* =====================================
   CONTACT PAGE RESPONSIVE
===================================== */

@media (max-width:820px){

    .public-contact-category-card{
        min-height:205px;
    }

    .public-contact-form{
        padding:26px;
    }

}


@media (max-width:650px){

    .public-contact-categories{
        margin-top:24px;
    }

    .public-contact-category-card{
        min-height:0;
    }

    .public-contact-form{
        margin-top:24px;
        padding:23px 21px;
    }

    .public-contact-form-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .public-contact-submit{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .public-contact-submit button{
        width:100%;
    }

    .public-contact-submit p{
        max-width:none;

        text-align:center;
    }

}


@media (max-width:420px){

    .public-contact-category-card{
        padding:20px;
    }

    .public-contact-category-number{
        margin-bottom:16px;
    }

    .public-contact-form{
        padding:20px 18px;
    }

    .public-contact-consent{
        padding:15px;
    }

}