/**
 * ==========================================================================
 * ACP-SG
 * Associação Cidade Praia Salto Grande
 *
 * CSS BASE DO SITE
 * ==========================================================================
 */


/* ==========================================================================
   RESET
========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    min-height: 100vh;
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

ul,
ol {
    list-style: none;
}


/* ==========================================================================
   VARIÁVEIS DA IDENTIDADE
========================================================================== */

:root {

    /* Cores principais */
    --cor-primaria: #315b45;
    --cor-primaria-escura: #244534;
    --cor-primaria-clara: #6f9279;

    /* Água / natureza */
    --cor-agua: #3d7f8a;
    --cor-agua-escura: #285e68;
    --cor-natureza: #7d9b61;

    /* Neutros */
    --cor-fundo: #ffffff;
    --cor-fundo-claro: #f7f7f5;
    --cor-fundo-bege: #f4f1e9;

    --cor-texto: #28302b;
    --cor-texto-suave: #657069;
    --cor-branco: #ffffff;
    --cor-preto: #111111;

    /* Bordas */
    --cor-borda: rgba(0, 0, 0, 0.10);

    /* Layout */
    --largura-container: 1240px;
    --espaco-lateral: 30px;

    /* Bordas */
    --raio-pequeno: 3px;
    --raio-medio: 6px;
    --raio-grande: 12px;

    /* Sombras */
    --sombra-suave: 0 10px 30px rgba(0, 0, 0, 0.07);
    --sombra-card: 0 18px 40px rgba(0, 0, 0, 0.09);

    /* Transições */
    --transicao: 0.25s ease;
}


/* ==========================================================================
   SELEÇÃO DE TEXTO
========================================================================== */

::selection {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}


/* ==========================================================================
   CONTAINER
========================================================================== */

.container {
    width: min(
        calc(100% - (var(--espaco-lateral) * 2)),
        var(--largura-container)
    );

    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   TIPOGRAFIA GERAL
========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cor-texto);
    font-weight: 700;
    line-height: 1.2;
}

p {
    color: var(--cor-texto-suave);
}

strong {
    font-weight: 700;
}

small {
    font-size: 0.875rem;
}


/* ==========================================================================
   LINKS
========================================================================== */

a {
    text-decoration: none;
    transition:
        color var(--transicao),
        opacity var(--transicao);
}

a:hover {
    color: var(--cor-primaria);
}


/* ==========================================================================
   BOTÕES
========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 25px;

    border: 2px solid transparent;
    border-radius: var(--raio-pequeno);

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    text-align: center;

    transition:
        background-color var(--transicao),
        color var(--transicao),
        border-color var(--transicao),
        transform var(--transicao),
        box-shadow var(--transicao);
}

.btn:hover {
    transform: translateY(-2px);
}


/* Botão principal */

.btn-primary {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

.btn-primary:hover {
    background: var(--cor-primaria-escura);
    color: var(--cor-branco);
}


/* Botão secundário */

.btn-secondary {
    background: var(--cor-agua);
    color: var(--cor-branco);
}

.btn-secondary:hover {
    background: var(--cor-agua-escura);
    color: var(--cor-branco);
}


/* Botão contornado */

.btn-outline {
    border-color: currentColor;
    background: transparent;
    color: var(--cor-primaria);
}

.btn-outline:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-branco);
}


/* Botão contornado sobre fundo escuro */

.hero-home .btn-outline {
    color: var(--cor-branco);
    border-color: rgba(255, 255, 255, 0.8);
}

.hero-home .btn-outline:hover {
    background: var(--cor-branco);
    border-color: var(--cor-branco);
    color: var(--cor-primaria-escura);
}


/* ==========================================================================
   FORMULÁRIOS
========================================================================== */

input,
textarea,
select {
    width: 100%;
    padding: 13px 15px;

    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);

    background: var(--cor-branco);
    color: var(--cor-texto);

    outline: none;

    transition:
        border-color var(--transicao),
        box-shadow var(--transicao);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(49, 91, 69, 0.10);
}

textarea {
    min-height: 150px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #929a95;
}


/* ==========================================================================
   ACESSIBILIDADE
========================================================================== */

:focus-visible {
    outline: 3px solid var(--cor-agua);
    outline-offset: 3px;
}


/* Esconde elementos visualmente,
   mas mantém acessíveis para leitores de tela */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


/* ==========================================================================
   SEPARADORES
========================================================================== */

.section-divider {
    width: 60px;
    height: 3px;
    margin: 20px 0;

    background: var(--cor-primaria);
}


/* ==========================================================================
   UTILITÁRIOS
========================================================================== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.hidden {
    display: none !important;
}

.no-scroll {
    overflow: hidden;
}


/* ==========================================================================
   ÁREA DE CONTEÚDO
========================================================================== */

main {
    display: block;
}

section {
    position: relative;
}


/* ==========================================================================
   IMAGENS
========================================================================== */

.image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-rounded {
    border-radius: var(--raio-medio);
}


/* ==========================================================================
   RESPONSIVIDADE BASE
========================================================================== */

@media (max-width: 768px) {

    :root {
        --espaco-lateral: 20px;
    }

    html {
        font-size: 15px;
    }

    .container {
        width: min(
            calc(100% - (var(--espaco-lateral) * 2)),
            var(--largura-container)
        );
    }

    .btn {
        min-height: 50px;
        padding: 13px 22px;
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}