/* =========================================================
   NC State Parks Informational Site
   Legal / Terms / Declaration CSS
   Suggested path:
   /assets/css/apps/ext/nc-stateparks/legal-v1.css
   ========================================================= */

body{
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
    color:#241a35;
}

.wrap{
    width:min(1200px, calc(100% - 2rem));
    margin:auto;
    padding:1rem 0 2rem;
}

.card{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.45);
    border-radius:22px;
    padding:1rem;
    margin-top:1rem;
    box-shadow:0 16px 40px rgba(42,24,70,.14);
    color:#241a35;
}

.hero h1{
    margin:0;
    font-size:clamp(1.8rem, 3vw, 2.7rem);
    line-height:1.1;
    color:#241a35;
}

.hero p{
    margin:.55rem 0 0;
    color:#5a4c7a;
    max-width:75ch;
    line-height:1.65;
}

.grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:1rem;
}

.entry{
    padding:1rem;
    border-radius:16px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(120,90,170,.12);
    margin-bottom:.75rem;
    box-shadow:0 8px 22px rgba(42,24,70,.08);
}

.entry a{
    text-decoration:none;
    color:#241a35;
    font-weight:700;
}

.entry a:hover{
    color:#6a37c7;
}

.meta{
    font-size:.92rem;
    color:#64557f;
    margin-top:.25rem;
    line-height:1.5;
}

.info{
    margin:.75rem 0;
}

.label{
    font-size:.74rem;
    color:#6d5f88;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:.2rem;
}

.value{
    font-size:.98rem;
    line-height:1.65;
    color:#241a35;
    word-break:break-word;
}

.value a{
    color:#5c2fc2;
    font-weight:600;
    text-decoration:none;
}

.value a:hover{
    text-decoration:underline;
}

.section-title{
    margin:0 0 .9rem;
    font-size:1.2rem;
    color:#241a35;
}

.pill{
    display:inline-block;
    padding:.45rem .7rem;
    border-radius:999px;
    background:rgba(122,46,230,.10);
    color:#5b2dc2;
    font-size:.82rem;
    font-weight:700;
    margin:.2rem .35rem .2rem 0;
}

.kpi{
    padding:.9rem 1rem;
    border-radius:16px;
    background:rgba(255,255,255,.84);
    border:1px solid rgba(120,90,170,.12);
    margin-bottom:.75rem;
}

.kpi .num{
    font-size:1.6rem;
    font-weight:800;
    color:#241a35;
}

.kpi .txt{
    color:#64557f;
    margin-top:.2rem;
}

.notice{
    background:rgba(122,46,230,.08);
    border:1px solid rgba(122,46,230,.14);
}

.notice p{
    margin:.6rem 0 0;
    color:#4d4167;
    line-height:1.7;
}

.notice h2{
    margin:0;
    color:#241a35;
    font-size:1.15rem;
}

.notice strong{
    color:#241a35;
}

.notice a{
    color:#4f28b8;
    font-weight:700;
    text-decoration:none;
}

.notice a:hover{
    text-decoration:underline;
}

.list-stack{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    margin-top:.35rem;
}

.empty{
    color:#6d5f88;
}

.footer{
    margin-top:1.5rem;
    padding:1rem;
    text-align:center;
    background:rgba(255,255,255,.68);
    border-radius:18px;
    color:#4a3c68;
    box-shadow:0 10px 25px rgba(42,24,70,.10);
    line-height:1.65;
}

.footer a{
    color:#241a35;
    font-weight:700;
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

ul,
ol{
    margin:.7rem 0 0 1.15rem;
    padding:0;
}

li{
    margin:.35rem 0;
    color:#43355d;
    line-height:1.65;
}

hr{
    border:none;
    height:1px;
    background:rgba(120,90,170,.16);
    margin:1.2rem 0;
}

.small-note,
.legal-note,
.soft-text{
    color:#5f5278;
    line-height:1.6;
}

.link-list{
    list-style:none;
    margin:0;
    padding:0;
}

.link-list li{
    margin:.55rem 0;
}

.link-list a{
    color:#4f28b8;
    font-weight:600;
    text-decoration:none;
}

.link-list a:hover{
    text-decoration:underline;
}

.declaration-bar{
    font-size:.98rem;
    line-height:1.65;
}

.declaration-bar strong{
    display:block;
}

.content-block + .content-block{
    margin-top:1rem;
}

@media (max-width:900px){
    .grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:700px){
    .wrap{
        width:min(100% - 1rem, 1200px);
    }

    .card{
        padding:1rem;
    }

    .hero h1{
        font-size:clamp(1.65rem, 7vw, 2.3rem);
    }

    .section-title{
        font-size:1.08rem;
    }

    .value,
    .meta,
    .footer{
        font-size:.95rem;
    }
}