/* =========================================================
   SGSA — ESTILOS GLOBAIS
   Fundo, tipografia, variáveis e elementos compartilhados
   por todas as páginas Flask/Jinja2.
   ========================================================= */

:root {
    --sgsa-gold: #d7a33d;
    --sgsa-gold-light: #f0c66b;

    --sgsa-red: #721b20;
    --sgsa-red-dark: #4b1016;
    --sgsa-red-light: #8d252a;

    --sgsa-purple: #17091f;
    --sgsa-purple-light: #281033;

    --sgsa-black: #090706;

    --sgsa-menu-height: 82px;
    --sgsa-max-width: 1500px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #241409;
}

body {
    position: relative;
    min-height: 100vh;
    margin: 0;

    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;

    overflow-x: hidden;

    background-color: #241409;
    background-image: url("../assets/fundo.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Camada para garantir que páginas vazias também mantenham a identidade */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(20, 7, 8, .18),
            rgba(20, 7, 8, .28)
        );
}

a {
    color: inherit;
    text-decoration: none !important;
}

a:hover {
    color: inherit;
    text-decoration: none !important;
}

/* =========================================================
   ATMOSFERA GLOBAL
   ========================================================= */

.sgsa-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sgsa-light-beam {
    position: absolute;

    width: 55vw;
    height: 20vh;

    opacity: .11;
    filter: blur(45px);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(215, 163, 61, .7),
        transparent
    );

    transform: rotate(-18deg);
}

.sgsa-light-beam-1 {
    top: 8%;
    left: -20%;
}

.sgsa-light-beam-2 {
    top: 55%;
    right: -30%;
    opacity: .07;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */


/* =========================================================
   MENU GLOBAL — PADRÃO ÚNICO
   Responsabilidade exclusiva do layout global.
   ========================================================= */

.sgsa-bottom-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--sgsa-menu-height);
    z-index: 9999;
    box-sizing: border-box;

    border-top: 1px solid rgba(215, 163, 61, .22);
    background: rgba(8, 6, 7, .96);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.sgsa-menu-inner {
    width: 100%;
    max-width: 900px;
    height: 100%;
    margin: 0 auto;
    padding: 0;

    display: flex;
    align-items: stretch;
    justify-content: center;

    box-sizing: border-box;
}

.sgsa-menu-inner a {
    position: relative;

    flex: 1 1 0;
    min-width: 0;
    width: 20%;
    height: 100%;
    padding: 10px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    color: rgba(255, 255, 255, .55);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1.1;
    text-align: center;
    white-space: normal;

    text-decoration: none !important;

    transition:
        color .25s ease,
        background-color .25s ease;
}

.sgsa-menu-inner a:hover,
.sgsa-menu-inner a.active {
    color: var(--sgsa-gold-light);
    background: rgba(215, 163, 61, .04);
}

.sgsa-menu-inner a::before {
    content: "";

    position: absolute;
    top: 0;
    left: 25%;

    width: 50%;
    height: 2px;

    background: var(--sgsa-gold);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .25s ease;
}

.sgsa-menu-inner a:hover::before,
.sgsa-menu-inner a.active::before {
    transform: scaleX(1);
}

.sgsa-menu-icon {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1;
}


/* =========================================================
   MENU — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .sgsa-bottom-menu {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: var(--sgsa-menu-height);
        background: rgba(8, 6, 7, .97);

        /* Evita composição excessiva em navegadores móveis. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .sgsa-menu-inner {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }

    .sgsa-menu-inner a {
        flex: 1 1 0;
        min-width: 0;
        width: 20%;
        height: 100%;
        padding: 7px 3px;

        font-size: .45rem;
        letter-spacing: .05em;
        line-height: 1.1;
    }

    .sgsa-menu-icon {
        font-size: .95rem;
    }
}


/* =========================================================
   ESTABILIDADE GLOBAL EM TELAS PEQUENAS
   ========================================================= */

@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   ELEMENTOS RESPONSIVOS GLOBAIS
   ========================================================= */

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
input,
textarea,
select {
    max-width: 100%;
}