/* =====================================================
   MAPAQUALI — DOCUMENTAÇÃO
   Padronizado com o sistema de cores do global.css
===================================================== */


/* =====================================================
   1. BASE
===================================================== */

.mq-documentation {
    width: 100%;

    background: var(--mq-bg);
    color: var(--mq-text);

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


/* =====================================================
   2. HERO
===================================================== */

.mq-documentation__hero {
    padding:
        110px 0 76px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--mq-surface) 94%,
                var(--mq-primary) 6%
            ),
            var(--mq-bg)
        );

    border-bottom:
        1px solid var(--mq-border);

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.mq-documentation__hero-inner {
    max-width:
        900px;
}


.mq-documentation__eyebrow {
    display:
        inline-flex;

    margin-bottom:
        18px;

    color:
        var(--mq-primary);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.mq-documentation__hero h1 {
    max-width:
        850px;

    margin:
        0 0 24px;

    color:
        var(--mq-text);

    font-size:
        clamp(48px, 6vw, 74px);

    font-weight:
        780;

    line-height:
        1;

    letter-spacing:
        -0.045em;

    transition:
        color 0.25s ease;
}


.mq-documentation__hero p {
    max-width:
        720px;

    margin:
        0;

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

    font-size:
        19px;

    line-height:
        1.72;

    transition:
        color 0.25s ease;
}


/* =====================================================
   3. CONTEÚDO
===================================================== */

.mq-documentation__content {
    padding:
        82px 0 110px;
}


.mq-documentation__section-header {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 520px);

    gap:
        48px;

    align-items:
        end;

    margin-bottom:
        44px;
}


.mq-documentation__section-label {
    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--mq-primary);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.mq-documentation__section-header h2 {
    margin:
        0;

    color:
        var(--mq-text);

    font-size:
        clamp(32px, 4vw, 48px);

    line-height:
        1.08;

    letter-spacing:
        -0.035em;

    transition:
        color 0.25s ease;
}


.mq-documentation__section-header > p {
    margin:
        0;

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

    font-size:
        16px;

    line-height:
        1.7;

    transition:
        color 0.25s ease;
}


/* =====================================================
   4. GRADE DE DOCUMENTOS
===================================================== */

.mq-documentation__grid {
    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        28px;

    justify-content:
        start;
}


/* =====================================================
   5. CARD DE DOCUMENTO
   Mantido para documentos futuros
===================================================== */

.mq-document-card {
    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    max-width:
        422px;

    min-height:
        372px;

    padding:
        26px 27px 28px;

    box-sizing:
        border-box;

    background:
        var(--mq-surface);

    border:
        1px solid var(--mq-border);

    border-radius:
        20px;

    box-shadow:
        var(--mq-shadow);

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


.mq-document-card:hover {
    transform:
        translateY(-6px);

    border-color:
        var(--mq-border-hover);

    box-shadow:
        var(--mq-shadow-strong);
}


/* =====================================================
   6. ÍCONE DO DOCUMENTO
===================================================== */

.mq-document-card__icon {
    display:
        grid;

    width:
        54px;

    height:
        54px;

    margin-bottom:
        26px;

    place-items:
        center;

    color:
        var(--mq-primary);

    background:
        linear-gradient(
            145deg,
            var(--mq-icon-bg-start) 0%,
            var(--mq-icon-bg-end) 100%
        );

    border:
        1px solid var(--mq-icon-border);

    border-radius:
        16px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}


/* Ícone em CSS para evitar remoção do SVG pelo WordPress */

.mq-document-card__icon svg {
    display:
        none !important;
}


.mq-document-card__icon--pdf::before,
.mq-document-card__icon:empty::before {
    content:
        "";

    display:
        block;

    width:
        28px;

    height:
        28px;

    background-color:
        currentColor;

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;

    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8'/><path d='M8 17h6'/></g></svg>");

    mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8'/><path d='M8 17h6'/></g></svg>");
}


/* =====================================================
   7. CONTEÚDO DO CARD
===================================================== */

.mq-document-card__body {
    flex:
        1;
}


.mq-document-card__type {
    display:
        flex;

    gap:
        7px;

    margin-bottom:
        12px;

    color:
        var(--mq-primary);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.mq-document-card h3 {
    margin:
        0 0 14px;

    color:
        var(--mq-text);

    font-size:
        23px;

    font-weight:
        500;

    line-height:
        1.18;

    letter-spacing:
        -0.025em;

    transition:
        color 0.25s ease;
}


.mq-document-card p {
    margin:
        0;

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

    font-size:
        15px;

    line-height:
        1.68;

    transition:
        color 0.25s ease;
}


/* =====================================================
   8. RODAPÉ DO CARD
===================================================== */

.mq-document-card__footer {
    min-height:
        26px;

    margin-top:
        auto;

    padding-top:
        26px;

    border-top:
        1px solid var(--mq-border);

    transition:
        border-color 0.25s ease;
}


.mq-document-card__link {
    display:
        inline-flex;

    gap:
        9px;

    align-items:
        center;

    color:
        var(--mq-link);

    font-size:
        14px;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}


.mq-document-card__link:hover {
    color:
        var(--mq-primary-hover);

    text-decoration:
        underline;

    text-underline-offset:
        4px;
}


.mq-document-card__unavailable {
    color:
        var(--mq-text-muted);

    font-size:
        14px;

    font-weight:
        650;
}


/* =====================================================
   9. AVISO
===================================================== */

.mq-documentation__notice {
    display:
        flex;

    gap:
        18px;

    align-items:
        flex-start;

    margin-top:
        42px;

    padding:
        24px 26px;

    background:
        var(--mq-surface-soft);

    border:
        1px solid var(--mq-border);

    border-radius:
        18px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.mq-documentation__notice-icon {
    display:
        grid;

    flex:
        0 0 34px;

    width:
        34px;

    height:
        34px;

    place-items:
        center;

    color:
        #ffffff;

    background:
        var(--mq-primary);

    border-radius:
        50%;

    font-size:
        16px;

    font-weight:
        800;
}


.mq-documentation__notice strong {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--mq-text);

    font-size:
        16px;

    transition:
        color 0.25s ease;
}


.mq-documentation__notice p {
    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.65;

    transition:
        color 0.25s ease;
}


/* =====================================================
   10. ESTADO VAZIO — SEM DOCUMENTOS
===================================================== */

.mq-documentation__empty {
    width:
        100%;

    max-width:
        760px;

    padding:
        52px 42px;

    box-sizing:
        border-box;

    text-align:
        center;

    background:
        var(--mq-surface);

    border:
        1px dashed var(--mq-border);

    border-radius:
        20px;

    box-shadow:
        var(--mq-shadow);

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


/* Ícone do estado vazio */

.mq-documentation__empty-icon {
    display:
        block;

    position:
        relative;

    width:
        58px;

    height:
        58px;

    margin:
        0 auto 22px;

    color:
        var(--mq-primary);

    background:
        linear-gradient(
            145deg,
            var(--mq-icon-bg-start) 0%,
            var(--mq-icon-bg-end) 100%
        );

    border:
        1px solid var(--mq-icon-border);

    border-radius:
        17px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}


/* Documento desenhado via CSS */

.mq-documentation__empty-icon::before {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        29px;

    height:
        29px;

    background-color:
        var(--mq-primary);

    transform:
        translate(-50%, -50%);

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;

    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8'/><path d='M8 17h5'/></g></svg>");

    mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8'/><path d='M8 17h5'/></g></svg>");
}


/* Título do estado vazio */

.mq-documentation__empty h3 {
    margin:
        0 0 12px;

    color:
        var(--mq-text);

    font-size:
        22px;

    font-weight:
        650;

    line-height:
        1.3;

    letter-spacing:
        -0.02em;

    transition:
        color 0.25s ease;
}


/* Descrição do estado vazio */

.mq-documentation__empty p {
    max-width:
        590px;

    margin:
        0 auto;

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

    font-size:
        15px;

    line-height:
        1.7;

    transition:
        color 0.25s ease;
}


/* =====================================================
   11. DARK MODE — AJUSTES FINOS
===================================================== */

html[data-theme="dark"]
.mq-document-card {
    background:
        var(--mq-surface);

    border-color:
        var(--mq-border);

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


html[data-theme="dark"]
.mq-document-card:hover {
    border-color:
        var(--mq-border-hover);

    box-shadow:
        var(--mq-shadow-strong);
}


html[data-theme="dark"]
.mq-documentation__notice {
    background:
        var(--mq-surface-soft);

    border-color:
        var(--mq-border);
}


html[data-theme="dark"]
.mq-documentation__empty {
    background:
        var(--mq-surface);

    border-color:
        var(--mq-border);

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


/* =====================================================
   12. RESPONSIVIDADE — TABLET
===================================================== */

@media (max-width: 980px) {

    .mq-documentation__section-header {
        grid-template-columns:
            1fr;

        gap:
            18px;

        align-items:
            start;
    }


    .mq-documentation__section-header > p {
        max-width:
            680px;
    }


    .mq-documentation__grid {
        grid-template-columns:
            1fr;
    }
}


/* =====================================================
   13. RESPONSIVIDADE — MOBILE
===================================================== */

@media (max-width: 680px) {

    .mq-documentation__hero {
        padding:
            84px 0 58px;
    }


    .mq-documentation__hero h1 {
        font-size:
            clamp(42px, 13vw, 58px);
    }


    .mq-documentation__hero p {
        font-size:
            17px;
    }


    .mq-documentation__content {
        padding:
            62px 0 86px;
    }


    .mq-documentation__grid {
        grid-template-columns:
            1fr;
    }


    .mq-document-card {
        max-width:
            none;

        min-height:
            0;

        padding:
            28px;
    }


    .mq-documentation__notice {
        padding:
            22px;
    }


    /* Estado vazio */

    .mq-documentation__empty {
        max-width:
            none;

        padding:
            40px 24px;
    }


    .mq-documentation__empty-icon {
        width:
            52px;

        height:
            52px;

        margin-bottom:
            18px;
    }


    .mq-documentation__empty-icon::before {
        width:
            26px;

        height:
            26px;
    }


    .mq-documentation__empty h3 {
        font-size:
            19px;
    }


    .mq-documentation__empty p {
        font-size:
            14px;
    }
}


/* =====================================================
   14. REDUÇÃO DE MOVIMENTO
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .mq-document-card,
    .mq-document-card__icon,
    .mq-document-card__link,
    .mq-documentation__notice,
    .mq-documentation__empty,
    .mq-documentation__empty-icon {
        transition:
            none;
    }


    .mq-document-card:hover {
        transform:
            none;
    }
}