/* ============================================================
   complaint-process.css
   Only styles unique to the complaint process page.
   All sitewide layout, sidebar, TOC, and content section
   styles live in style.css.
============================================================ */

/* ============================================================
   CAN / CANNOT INFO BOXES
============================================================ */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}

.info-box {
    border-radius: 6px;
    padding: 20px 22px;
}

.info-box-title {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-box-title .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.info-box ul {
    padding-left: 18px;
    margin: 0;
}

.info-box li {
    font-size: 0.92rem;
    margin-bottom: 7px;
    line-height: 1.45;
}

.info-box.can {
    background: var(--green-light);
    border: 1px solid #C8DDA0;
}
.info-box.can .info-box-title { color: #4A6B1A; }
.info-box.can .dot { background: var(--green); }
.info-box.can li { color: #3D5A15; }

.info-box.cannot {
    background: var(--orange-light);
    border: 1px solid #F7C4B5;
}
.info-box.cannot .info-box-title { color: #B84A2A; }
.info-box.cannot .dot { background: var(--orange); }
.info-box.cannot li { color: #8C3A20; }

/* ============================================================
   OUTCOME CARDS (Dismissal / Resolution / Investigation)
============================================================ */
.outcome-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 16px 0;
}

.outcome-card {
    background: var(--blue-light);
    border: 1px solid #C5D8EE;
    border-radius: 6px;
    padding: 18px 20px;
}

.outcome-card h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.outcome-card p {
    font-size: 0.88rem;
    color: var(--text-mid);
    line-height: 1.5;
    margin: 0;
}


/* ============================================================
   MOBILE BREAKPOINT — page specific overrides only
============================================================ */
@media (max-width: 800px) {
    .info-grid { grid-template-columns: 1fr; }
    .outcome-cards { grid-template-columns: 1fr; }
    .cta-section {
        flex-direction: column;
        align-items: flex-start;
    }
}