/*
Theme Name: Ana Beatriz — Arquitetura (GeneratePress Child)
Theme URI: https://anabeatriz.arq.br
Description: Tema filho do GeneratePress para o site da arquiteta Ana Beatriz Viana de Amorim. Identidade minimalista e editorial — paleta vinho + azul-claro, tipografia Cormorant Garamond (títulos) e Inter (texto).
Author: Ana Beatriz Viana de Amorim
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-anabeatriz
*/

/* =====================================================================
   1. DESIGN TOKENS (variáveis de identidade)
   Regra 60/30/10 — neutros (base) / vinho (marca) / azul-claro (detalhe)
   ===================================================================== */
:root {
    /* Vinho / bordô — cor dominante */
    --ab-vinho:        #6E1423;
    --ab-vinho-escuro: #4E0E19;
    --ab-vinho-suave:  #8A2233;

    /* Azul-claro / celeste — acento (só detalhes) */
    --ab-azul:      #B2DBE7;
    --ab-azul-mais: #8FC7D8;

    /* Neutros — base do site */
    --ab-fundo:      #F7F5F2;
    --ab-branco:     #FFFFFF;
    --ab-texto:      #2B2B2B;
    --ab-texto-2:    #6B6B6B;
    --ab-linha:      #E3E0DB;

    /* Tipografia */
    --ab-fonte-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --ab-fonte-corpo:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Ritmo / espaçamento */
    --ab-radio: 2px;              /* cantos discretos */
    --ab-secao: clamp(3rem, 8vw, 7rem); /* respiro vertical entre seções */
}

/* =====================================================================
   2. BASE
   ===================================================================== */
body {
    font-family: var(--ab-fonte-corpo);
    color: var(--ab-texto);
    background-color: var(--ab-fundo);
    font-weight: 400;
    line-height: 1.75;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

.grid-container {
    max-width: 1180px;
}

/* Títulos — serifada editorial */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-family: var(--ab-fonte-titulo);
    color: var(--ab-texto);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.2px;
}

h1, .entry-title { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

p { margin-bottom: 1.4em; }

/* Texto secundário */
.entry-meta,
.ab-meta {
    color: var(--ab-texto-2);
    font-size: 0.85rem;
}

/* =====================================================================
   3. LINKS
   Link vinho -> hover azul (detalhe)
   ===================================================================== */
a { color: var(--ab-vinho); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--ab-azul-mais); }

/* =====================================================================
   4. CABEÇALHO / RODAPÉ
   ===================================================================== */
.site-header {
    background-color: var(--ab-fundo);
    border-bottom: 1px solid var(--ab-linha);
}

.main-navigation,
.main-navigation ul ul {
    background-color: transparent;
}

.main-navigation .main-nav ul li a {
    font-family: var(--ab-fonte-corpo);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ab-texto);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
    color: var(--ab-vinho);
}

.site-info,
.site-footer {
    background-color: var(--ab-vinho-escuro);
    color: var(--ab-branco);
}
.site-info a,
.site-footer a { color: var(--ab-azul); }
.site-info a:hover,
.site-footer a:hover { color: var(--ab-branco); }

/* =====================================================================
   5. LABELS / TAGS (toque editorial)
   ===================================================================== */
.ab-label {
    display: inline-block;
    font-family: var(--ab-fonte-corpo);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ab-texto-2);
}
.ab-label--vinho { color: var(--ab-vinho); }

/* Linha fina divisória de detalhe */
.ab-regua {
    width: 56px;
    height: 2px;
    background-color: var(--ab-azul);
    border: 0;
    margin: 1.4rem 0;
}

/* =====================================================================
   6. BOTÕES
   Primário: vinho preenchido | Secundário: contorno vinho
   ===================================================================== */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.ab-btn {
    font-family: var(--ab-fonte-corpo);
    font-weight: 500;
    letter-spacing: 0.04em;
    background-color: var(--ab-vinho);
    color: var(--ab-branco);
    border: 1px solid var(--ab-vinho);
    border-radius: var(--ab-radio);
    padding: 0.75em 1.6em;
    transition: background-color .2s ease, color .2s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.ab-btn:hover {
    background-color: var(--ab-vinho-suave);
    border-color: var(--ab-vinho-suave);
    color: var(--ab-branco);
}

.ab-btn--contorno {
    background-color: transparent;
    color: var(--ab-vinho);
}
.ab-btn--contorno:hover {
    background-color: var(--ab-vinho);
    color: var(--ab-branco);
}

/* =====================================================================
   7. GRADE DE PROJETOS (arquivos de CPT)
   Minimalista, espaçamento uniforme, imagens protagonistas
   ===================================================================== */
.ab-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.5rem;
    margin: var(--ab-secao) 0;
}
.ab-card { background: var(--ab-branco); }
.ab-card__img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    display: block;
}
.ab-card__titulo {
    font-family: var(--ab-fonte-titulo);
    font-size: 1.5rem;
    margin: 0.8rem 0 0.2rem;
}

/* =====================================================================
   8. IMAGENS E MÍDIA
   ===================================================================== */
img { height: auto; max-width: 100%; }
figure { margin: 2rem 0; }

/* =====================================================================
   9. ACESSIBILIDADE — foco visível
   ===================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--ab-azul-mais);
    outline-offset: 2px;
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}