/* Mailservice-specific styles.
   Shared foundation: /shared/assets/css/main.css
   Keep Mailservice-only layout and view details here. */

:root{
    --mail-bg:#f2f4f7;
    --mail-content-bg:#f7f7f5;
    --mail-sidebar-bg:#f5f3ee;
    --mail-sidebar-border:rgba(15,59,102,.14);
    --mail-brand:#0f3b66;
    --mail-brand-dark:#0a2c4d;
    --mail-gold:#b08d57;
    --mail-text:#1f2f3f;
    --mail-text-soft:#586574;
    --mail-text-muted:#7a8491;
    --mail-shadow-mobile:12px 0 30px rgba(15,23,42,.14);
}

.mailservice-progress{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.mailservice-code-form{
    max-width:520px;
}
.form-grid.mailservice-signup-grid{
    grid-template-columns:minmax(96px, 120px) minmax(220px, 340px) minmax(360px, 1fr);
}
.mailservice-signup-member{
    grid-column:1;
    grid-row:1;
}
.mailservice-signup-member input{
    max-width:92px;
    text-align:center;
}
.mailservice-signup-lastname{
    grid-column:2;
    grid-row:1;
}
.mailservice-signup-email{
    grid-column:1 / span 2;
    grid-row:2;
}
.mailservice-signup-privacy{
    grid-column:3;
    grid-row:1;
    justify-self:start;
}
.mailservice-privacy-consent{
    width:max-content;
    max-width:none;
}
.mailservice-privacy-consent .checkbox-item{
    width:max-content;
    min-height:50px;
    height:50px;
    align-items:center;
    padding:0 16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-12);
    box-shadow:none;
}
.mailservice-privacy-consent .checkbox-text{
    line-height:1.35;
}
.mailservice-privacy-consent .checkbox-control{
    margin-top:0;
}
.mailservice-layout .mobile-menu-toggle{
    background:var(--mail-brand);
}
/* =========================
   MAILSERVICE
   ========================= */

.mailservice-layout{
    min-height:100vh;
    width:100%;
}

.mailservice-layout .view-title{
    color:var(--mail-brand);
}

.mailservice-layout .view-intro{
    color:var(--site-copy-color);
}

.mailservice-layout .view-section-text{
    color:var(--site-copy-color);
}

.mailservice-layout .info-card p{
    color:var(--site-copy-color);
}

.mailservice-layout .privacy-kicker{
    color:var(--mail-gold);
}

.mailservice-layout .privacy-text{
    color:var(--site-copy-color);
}

.mailservice-sidebar{
    --sidebar-footer-border:var(--mail-sidebar-border);
    --sidebar-note-color:var(--mail-text-soft);
    position:fixed;
    top:0;
    left:0;
    width:var(--sidebar-width);
    height:100vh;
    height:100dvh;
    background:var(--mail-sidebar-bg);
    border-right:1px solid var(--mail-sidebar-border);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:4px 16px 18px;
    z-index:1000;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

.mailservice-sidebar-top{
    display:flex;
    flex-direction:column;
    min-height:0;
    flex:1 1 auto;
}

.mailservice-sidebar-brand{
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid var(--mail-sidebar-border);
}

.mailservice-sidebar-title{
    font-size:21px;
    line-height:1.15;
    font-weight:800;
    color:var(--mail-brand);
    letter-spacing:-.01em;
}

.mailservice-sidebar-subtitle{
    margin-top:5px;
    font-size:10px;
    line-height:1.35;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--mail-gold);
}

.mailservice-nav{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.mailservice-nav-link{
    position:relative;
    display:block;
    padding:10px 12px 10px 14px;
    border-radius:var(--radius-10);
    color:#31485d;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    transition:background .18s ease,color .18s ease,padding-left .18s ease;
}

.mailservice-nav-link:hover,
.mailservice-nav-link:focus{
    background:rgba(15,59,102,.06);
    color:var(--mail-brand);
    padding-left:16px;
}

.mailservice-nav-link.is-active{
    background:var(--mail-brand);
    color:#f8fbff;
    padding-left:18px;
    box-shadow:0 8px 18px rgba(15,59,102,.18);
}

.mailservice-nav-link.is-active:hover,
.mailservice-nav-link.is-active:focus{
    background:var(--mail-brand-dark);
    color:#ffffff;
    padding-left:18px;
}

.mailservice-nav-link.is-active::before{
    content:"";
    position:absolute;
    left:7px;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:var(--radius-pill);
    background:var(--mail-gold);
}

.mailservice-content{
    margin-left:var(--sidebar-width);
    min-height:100vh;
    padding:var(--site-content-pad);
    background:
        linear-gradient(rgba(245,243,238,0.52), rgba(245,243,238,0.52)),
        url('/shared/assets/sidebar-paper.jpg');
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.mailservice-panel{
    width:100%;
    max-width:var(--content-max);
    margin:0 auto;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
}

.mailservice-panel.is-narrow{
    max-width:var(--content-narrow);
}

.mailservice-panel.is-text{
    max-width:var(--content-text);
}
.mailservice-public-home{
    max-width:var(--content-max);
}
.mailservice-public-header{
    max-width:none;
}
.mailservice-association-subtitle{
    color:var(--mail-gold);
}
.mailservice-public-subtitle{
    margin:0 0 12px;
    letter-spacing:.10em;
    color:var(--mail-gold);
}
.mailservice-public-copy-section .view-section-text{
    display:block;
    max-width:none;
}
.mailservice-public-copy-section .view-section-text p{
    margin-block-start:1em;
    margin-block-end:1em;
}
.mailservice-public-side{
    min-width:0;
}
.mailservice-public-membership-card{
    min-height:220px;
}

@media (max-width:980px){
    .mailservice-public-main,
    .mailservice-public-side{
        display:contents;
    }

    .mailservice-public-copy-section:first-child{
        order:1;
    }

    .mailservice-public-copy-section:nth-child(2){
        order:2;
    }

    .mailservice-public-membership-card{
        order:3;
    }
}

@media (max-width:991px){
    .mailservice-sidebar{
        box-shadow:var(--mail-shadow-mobile);
    }
}

@media (max-width:760px){
    .form-grid.mailservice-signup-grid{
        grid-template-columns:1fr;
    }

    .mailservice-signup-member,
    .mailservice-signup-lastname,
    .mailservice-signup-email,
    .mailservice-signup-privacy{
        grid-column:auto;
        grid-row:auto;
    }

    .mailservice-signup-member input{
        max-width:none;
        text-align:left;
    }

    .mailservice-privacy-consent{
        width:100%;
        margin-top:0;
    }

    .mailservice-privacy-consent .checkbox-item{
        width:100%;
        height:auto;
        min-height:46px;
        padding:11px 16px;
    }

    .mailservice-privacy-consent .checkbox-text{
        line-height:1.55;
    }
}