/*
 Theme Name:   Complai
 Theme URI:    
 Description:  Child theme for Complai by Refreshworks
 Author:       Refreshworks
 Author URI:   https://refreshworks.ai/
 Template:     hello-elementor
 Version:      1.0.2
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  complai
*/


/* ==========================================================================
   WACHTWOORDBEVEILIGDE PAGINA'S
   Markup: zie functions.php sectie 20.
   Elke regel is geprefixt met .cw-password. Dit child-stylesheet laadt vóór
   hello-elementor en de Elementor-kit, dus de specificiteit moet hoger zijn
   dan hun .post-password-form- en p-regels.
   ========================================================================== */

.cw-password {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    min-height: 60vh;
    /* De sticky header valt over de content heen: 6rem houdt er ruimte voor vrij */
    padding: calc(6rem + clamp(1.5rem, 4vw, 3rem)) 1.25rem clamp(3rem, 8vw, 6rem);
    background-color: #FAFAFB;
}

.cw-password .cw-password__card {
    box-sizing: border-box;
    width: 100%;
    max-width: 27.5rem;
    margin: 0;
    padding: clamp(1.75rem, 5vw, 2.5rem);
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #E8EAEE;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 30, 52, .04), 0 12px 32px -12px rgba(16, 30, 52, .14);
}

/* hello-elementor zet de <p>'s in dit formulier op display:flex */
.cw-password .cw-password__card p {
    display: block;
    align-items: normal;
    width: auto;
}

.cw-password .cw-password__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    color: #194B63;
    background-color: #D8F2FD;
    border-radius: 50%;
}

.cw-password .cw-password__icon svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
}

.cw-password .cw-password__title {
    margin: 0 0 .5rem;
    font-family: inherit;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: #101E34;
}

.cw-password .cw-password__intro {
    margin: 0 0 1.75rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: #545E6E;
}

.cw-password .cw-password__error {
    margin: 0 0 1.25rem;
    padding: .625rem .875rem;
    text-align: left;
    font-size: .875rem;
    line-height: 1.4;
    color: #8A1C1C;
    background-color: #FDECEC;
    border-radius: 10px;
}

.cw-password .cw-password__label {
    display: block;
    margin-bottom: .5rem;
    text-align: left;
    font-size: .875rem;
    font-weight: 500;
    color: #233045;
}

.cw-password .cw-password__input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: .8125rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    color: #101E34;
    background-color: #FFFFFF;
    border: 1px solid #D5D9E0;
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cw-password .cw-password__input:focus {
    outline: none;
    border-color: #194B63;
    box-shadow: 0 0 0 3px rgba(25, 75, 99, .15);
}

.cw-password .cw-password__submit {
    display: block;
    width: 100%;
    margin: 1rem 0 0;
    margin-inline-start: 0;
    padding: .9375rem 1.5rem;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1;
    color: #FFFFFF;
    background-color: #101E34;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cw-password .cw-password__submit:hover,
.cw-password .cw-password__submit:focus-visible {
    background-color: #194B63;
}

.cw-password .cw-password__help {
    margin: 1.5rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: #6A7383;
}