/* ==================================================
   SALA DE SEMINÁRIOS — LCC-UFMG

   REFERÊNCIA: MANUAIS E DOCUMENTOS

   Padrão:
   - Títulos pretos
   - Introdução justificada
   - Textos de 18px
   - Subtítulos com traço azul
   - Tabelas responsivas
   - Alto contraste e acessibilidade
   ================================================== */


/* ==================================================
   1. VARIÁVEIS E ESTRUTURA
   ================================================== */

.lcc-seminar-page {

    --seminar-heading: #000000;
    --seminar-text: #1f2937;

    --seminar-blue: #0046ad;
    --seminar-blue-hover: #002f6c;

    --seminar-border: #cbd5e1;
    --seminar-row-border: #d7dce5;

    --seminar-surface: #ffffff;

    --seminar-table-header: #f1f5f9;
    --seminar-table-header-text: #071d41;

    --seminar-focus: #1351b4;

    width: 100%;
    min-width: 0;
    max-width: 1200px;

    margin: 0 auto;

    padding:
        clamp(2rem, 4vw, 4rem)
        clamp(1rem, 3vw, 2rem)
        4rem;

    color: var(--seminar-text);
    background: var(--seminar-surface);

    font-family: inherit;

    font-size: 1.125rem;
    line-height: 1.6;

    overflow-wrap: break-word;
}


/* Box sizing restrito à página */

.lcc-seminar-page,
.lcc-seminar-page::before,
.lcc-seminar-page::after,
.lcc-seminar-page *,
.lcc-seminar-page *::before,
.lcc-seminar-page *::after {

    box-sizing: border-box;

}


/* ==================================================
   2. CABEÇALHO
   ================================================== */

.lcc-seminar-page .lcc-seminar-header {

    margin: 0 0 3rem;
    padding: 0;

}


/* Título principal — H1 */

.lcc-seminar-page .lcc-seminar-header h1 {

    margin: 0 0 0.75rem;

    color: var(--seminar-heading);

    font-family: inherit;

    font-size: 2.75rem;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.025em;

    text-align: left;

}


/* Introdução — 18px e justificada */

.lcc-seminar-page .lcc-seminar-header p {

    max-width: 52rem;

    margin: 0;

    color: var(--seminar-text);

    font-family: inherit;

    font-size: 1.125rem;
    font-weight: 400;

    line-height: 1.6;

    text-align: justify;
    text-justify: inter-word;

    overflow-wrap: break-word;
    hyphens: auto;

}


/* ==================================================
   3. SEÇÕES
   ================================================== */

.lcc-seminar-page .lcc-seminar-section {

    margin: 0 0 3.5rem;
    padding: 0;

    scroll-margin-top: 100px;

}


.lcc-seminar-page .lcc-seminar-section:last-child {

    margin-bottom: 0;

}


/* ==================================================
   4. SUBTÍTULOS — H2
   ================================================== */

.lcc-seminar-page .lcc-seminar-section h2 {

    margin: 0;

    color: var(--seminar-heading);

    font-family: inherit;

    font-size: 1.75rem;
    font-weight: 700;

    line-height: 1.35;
    letter-spacing: -0.02em;

    text-align: left;

}


/* ==================================================
   5. TRAÇO AZUL DOS SUBTÍTULOS
   ================================================== */

.lcc-seminar-page .lcc-seminar-title-line {

    display: block;

    width: 30px;
    height: 2px;

    margin: 2.25rem 0 1.25rem;

    background-color: var(--seminar-blue);

    border: 0;

}


/* ==================================================
   6. TEXTOS E PARÁGRAFOS
   ================================================== */

.lcc-seminar-page .lcc-seminar-section p {

    margin: 0 0 1rem;

    color: var(--seminar-text);

    font-family: inherit;

    font-size: 1.125rem;
    font-weight: 400;

    line-height: 1.6;

    text-align: justify;
    text-justify: inter-word;

    overflow-wrap: break-word;
    hyphens: auto;

}


/* Último parágrafo da seção */

.lcc-seminar-page .lcc-seminar-section p:last-child {

    margin-bottom: 0;

}


/* ==================================================
   7. TEXTO DA RESERVA
   ================================================== */

.lcc-seminar-page .lcc-seminar-section .lcc-seminar-text {

    width: 100%;
    max-width: 75rem;

    margin: 0 0 1.5rem;

    color: var(--seminar-text);

    font-family: inherit;

    font-size: 1.125rem;
    font-weight: 400;

    line-height: 1.6;

    text-align: justify;
    text-justify: inter-word;

    overflow-wrap: break-word;
    hyphens: auto;

}


/* ==================================================
   8. CONTÊINER DAS TABELAS
   ================================================== */

.lcc-seminar-page .lcc-seminar-table-wrapper {

    position: relative;

    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow-x: auto;

    border: 1px solid var(--seminar-border);
    border-radius: 4px;

    background: var(--seminar-surface);

    -webkit-overflow-scrolling: touch;

}


/* ==================================================
   9. ESTRUTURA DAS TABELAS
   ================================================== */

.lcc-seminar-page .lcc-seminar-table {

    width: 100%;

    margin: 0;

    border: 0;

    border-collapse: collapse;
    border-spacing: 0;

    table-layout: fixed;

    color: var(--seminar-text);

    background: var(--seminar-surface);

    font-family: inherit;

    font-size: 0.9375rem;
    line-height: 1.5;

}


/* ==================================================
   10. CÉLULAS
   ================================================== */

.lcc-seminar-page .lcc-seminar-table th,
.lcc-seminar-page .lcc-seminar-table td {

    padding: 12px 14px;

    border: 0;

    border-right:
        1px solid var(--seminar-border);

    border-bottom:
        1px solid var(--seminar-row-border);

    color: var(--seminar-text);

    background: var(--seminar-surface);

    font-family: inherit;

    font-size: 0.9375rem;
    line-height: 1.5;

    text-align: left;

    vertical-align: top;

    white-space: normal;

    word-break: normal;
    overflow-wrap: break-word;

}


/* ==================================================
   11. CABEÇALHO DAS TABELAS
   ================================================== */

.lcc-seminar-page .lcc-seminar-table thead th {

    color: var(--seminar-table-header-text);

    background: var(--seminar-table-header);

    font-weight: 600;

    text-align: left;

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

}


/* Proporção das colunas */

.lcc-seminar-page
.lcc-seminar-table thead th:first-child {

    width: 39%;

}


.lcc-seminar-page
.lcc-seminar-table thead th:last-child {

    width: 61%;

}


/* ==================================================
   12. CORPO DAS TABELAS
   ================================================== */

.lcc-seminar-page .lcc-seminar-table tbody th {

    color: var(--seminar-text);

    font-weight: 400;

    text-align: left;

}


.lcc-seminar-page .lcc-seminar-table tbody td {

    color: var(--seminar-text);

    font-weight: 400;

    text-align: left;

}


/* Remove a última borda vertical */

.lcc-seminar-page
.lcc-seminar-table tr > :last-child {

    border-right: 0;

}


/* Remove a última borda horizontal */

.lcc-seminar-page
.lcc-seminar-table tbody tr:last-child > * {

    border-bottom: 0;

}


/* ==================================================
   13. LINKS
   ================================================== */

.lcc-seminar-page a {

    color: var(--seminar-blue);

    font-weight: 600;

    text-decoration: underline;

    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    overflow-wrap: anywhere;

}


.lcc-seminar-page a:hover {

    color: var(--seminar-blue-hover);

    text-decoration-thickness: 2px;

}


/* Foco visível para navegação por teclado */

.lcc-seminar-page a:focus-visible,
.lcc-seminar-page .lcc-seminar-table-wrapper:focus-visible {

    outline: 3px solid var(--seminar-focus);
    outline-offset: 3px;

    border-radius: 2px;

}


/* ==================================================
   14. LEGENDAS ACESSÍVEIS
   ================================================== */

.lcc-seminar-page .lcc-seminar-visually-hidden {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;

}


/* ==================================================
   15. RESPONSIVIDADE — TABLETS
   ================================================== */

@media (max-width: 768px) {

    .lcc-seminar-page {

        padding-top: 2rem;
        padding-bottom: 3rem;

    }


    /* Cabeçalho */

    .lcc-seminar-page .lcc-seminar-header {

        margin-bottom: 2.5rem;

    }


    .lcc-seminar-page .lcc-seminar-header h1 {

        font-size: 2.25rem;

        line-height: 1.25;

    }


    /* Subtítulos */

    .lcc-seminar-page .lcc-seminar-section h2 {

        font-size: 1.5rem;

        line-height: 1.4;

    }


    /* Seções */

    .lcc-seminar-page .lcc-seminar-section {

        margin-bottom: 3rem;

    }


    /* Traço azul */

    .lcc-seminar-page .lcc-seminar-title-line {

        margin: 2rem 0 1.25rem;

    }

}


/* ==================================================
   16. RESPONSIVIDADE — CELULARES
   ================================================== */

@media (max-width: 480px) {

    /* Margens laterais de 16px */

    .lcc-seminar-page {

        width: 100%;

        padding:
            3rem
            1rem
            3rem;

    }


    /* Cabeçalho */

    .lcc-seminar-page .lcc-seminar-header {

        margin-bottom: 2rem;

    }


    /* H1 — 32px */

    .lcc-seminar-page .lcc-seminar-header h1 {

        margin-bottom: 0.75rem;

        font-size: 2rem;
        font-weight: 700;

        line-height: 1.25;
        letter-spacing: -0.025em;

    }


    /* Introdução — 18px e justificada */

    .lcc-seminar-page .lcc-seminar-header p {

        max-width: 100%;

        font-size: 1.125rem;
        font-weight: 400;

        line-height: 1.6;

        text-align: justify;
        text-justify: inter-word;

        hyphens: auto;

    }


    /* Seções */

    .lcc-seminar-page .lcc-seminar-section {

        margin-bottom: 3rem;

    }


    /* H2 — 22px */

    .lcc-seminar-page .lcc-seminar-section h2 {

        font-size: 1.375rem;
        font-weight: 700;

        line-height: 1.4;
        letter-spacing: -0.015em;

    }


    /* Traço azul */

    .lcc-seminar-page .lcc-seminar-title-line {

        width: 30px;
        height: 2px;

        margin: 2.25rem 0 1.25rem;

    }


    /* Parágrafos — 18px */

    .lcc-seminar-page .lcc-seminar-section p,
    .lcc-seminar-page .lcc-seminar-section .lcc-seminar-text {

        font-size: 1.125rem;

        line-height: 1.6;

        text-align: justify;
        text-justify: inter-word;

    }


    /* Tabelas com rolagem horizontal */

    .lcc-seminar-page .lcc-seminar-table-wrapper {

        width: 100%;
        max-width: 100%;

        overflow-x: auto;

    }


    .lcc-seminar-page .lcc-seminar-table {

        width: 100%;

        min-width: 480px;

        table-layout: fixed;

    }


    .lcc-seminar-page .lcc-seminar-table th,
    .lcc-seminar-page .lcc-seminar-table td {

        padding: 10px 12px;

        font-size: 0.875rem;

        line-height: 1.5;

        text-align: left;

    }

}


/* ==================================================
   17. ALTO CONTRASTE DO PORTAL
   ================================================== */

body.high-contrast .lcc-seminar-page,
body.alto-contraste .lcc-seminar-page {

    --seminar-heading: #ffffff;
    --seminar-text: #ffffff;

    --seminar-blue: #ffeb3b;
    --seminar-blue-hover: #ffffff;

    --seminar-border: #ffffff;
    --seminar-row-border: #ffffff;

    --seminar-surface: #000000;

    --seminar-table-header: #000000;
    --seminar-table-header-text: #ffffff;

    --seminar-focus: #ffeb3b;

}


/* ==================================================
   18. CORES FORÇADAS PELO SISTEMA
   ================================================== */

@media (forced-colors: active) {

    .lcc-seminar-page,
    body.high-contrast .lcc-seminar-page,
    body.alto-contraste .lcc-seminar-page {

        --seminar-heading: CanvasText;
        --seminar-text: CanvasText;

        --seminar-blue: LinkText;
        --seminar-blue-hover: LinkText;

        --seminar-border: CanvasText;
        --seminar-row-border: CanvasText;

        --seminar-surface: Canvas;

        --seminar-table-header: Canvas;
        --seminar-table-header-text: CanvasText;

        --seminar-focus: Highlight;

    }


    .lcc-seminar-page .lcc-seminar-title-line {

        height: 0;

        border-top: 2px solid CanvasText;

        background: none;

    }

}


/* ==================================================
   19. IMPRESSÃO
   ================================================== */

@media print {

    .lcc-seminar-page {

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        color: #000000;

        font-size: 11pt;

    }


    .lcc-seminar-page .lcc-seminar-header h1,
    .lcc-seminar-page .lcc-seminar-section h2,
    .lcc-seminar-page .lcc-seminar-section p {

        color: #000000;

    }


    .lcc-seminar-page .lcc-seminar-section h2 {

        break-after: avoid;

    }


    .lcc-seminar-page .lcc-seminar-section {

        break-inside: auto;

    }


    .lcc-seminar-page .lcc-seminar-table-wrapper {

        overflow: visible;

    }


    .lcc-seminar-page .lcc-seminar-table {

        width: 100%;

        min-width: 0;

        table-layout: auto;

    }


    .lcc-seminar-page .lcc-seminar-table tr {

        break-inside: avoid;

    }


    .lcc-seminar-page a {

        color: #000000;

        text-decoration: none;

    }

}


/* ==================================================
   20. ACESSIBILIDADE
   REDUÇÃO DE MOVIMENTO
   ================================================== */

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

    .lcc-seminar-page *,
    .lcc-seminar-page *::before,
    .lcc-seminar-page *::after {

        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;

    }

}