/*
 * Ildacyana Ramos — Block Theme
 * assets/css/custom.css — Fase 1: Estrutura Base
 *
 * Este arquivo cobre exclusivamente o que o theme.json não alcança.
 * Não duplicar tokens já declarados em theme.json.
 * Não usar !important salvo exceção documentada.
 * Toda adição futura deve ser justificada.
 *
 * [DEC] Design System Rota D — Gate 6B.2
 * [IMP] Implementação — Fase 1
 */


/* ==========================================================================
   1. VARIÁVEIS CSS LOCAIS
   Espelham os tokens do theme.json como custom properties nativas.
   Permitem uso em contextos que o tema wp não alcança (pseudo-elementos,
   seletores complexos, transições).
   ========================================================================== */

:root {
    --ir-bg:          #FAF8F5; /* [DEC] Fundo principal */
    --ir-surface:     #F0EBE3; /* [DEC] Surface secundária */
    --ir-carvao:      #2C2826; /* [DEC] Texto principal e botão primário */
    --ir-grafite:     #5C5450; /* [DEC] Texto secundário */
    --ir-oliva-dec:   #8A9070; /* [DEC] Acento decorativo */
    --ir-oliva-txt:   #5C6347; /* [DEC] Acento textual — WCAG AA ~6.1:1 */
    --ir-borda:       #E2DAD2; /* [DEC] Divisores e bordas */

    --ir-transition:  200ms ease; /* [DEC] Transição padrão */
    --ir-radius-btn:  4px;        /* [DEC] Border-radius do botão */
    --ir-radius-card: 8px;        /* [DEC] Border-radius dos cards */
}


/* ==========================================================================
   2. RESET MÍNIMO
   Apenas ajustes necessários para consistência entre navegadores
   que o Gutenberg não cobre por padrão.
   ========================================================================== */

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

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   3. FOCO VISÍVEL — ACESSIBILIDADE
   [DEC] Gate 6B — outline 2px solid oliva-dec, offset 3px
   Aplicado globalmente. Garante WCAG 2.4.7.
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--ir-oliva-dec);
    outline-offset: 3px;
}

/* Remove outline padrão do navegador apenas quando focus-visible está ativo */
:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   4. BOTÃO PRIMÁRIO — HOVER E FOCUS
   [DEC] Carvão preenchido → oliva-txt no hover
   O theme.json declara os estados base; o CSS cobre as transições
   e o hover, que não são suportados nativamente em theme.json v3.
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
    transition: background-color var(--ir-transition),
                color var(--ir-transition);
    cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--ir-oliva-txt) !important;
    /* !important necessário: o theme.json inline style tem especificidade alta.
       Exceção documentada — remover quando WordPress suportar :hover em theme.json */
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
    outline: 2px solid var(--ir-oliva-dec);
    outline-offset: 3px;
}


/* ==========================================================================
   5. LINK-CTA — ESTILO TEXTUAL
   [DEC] Source Sans 3 500 · oliva-txt · seta → · hover carvão + underline
   Classe utilitária aplicada nos patterns via className do bloco.
   ========================================================================== */

.ir-link-cta {
    font-family: var(--wp--preset--font-family--source-sans);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--ir-oliva-txt);
    text-decoration: none;
    transition: color var(--ir-transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ir-link-cta:hover {
    color: var(--ir-carvao);
    text-decoration: underline;
}

.ir-link-cta:focus-visible {
    outline: 2px solid var(--ir-oliva-dec);
    outline-offset: 3px;
}

/* Seta como pseudo-elemento — não depende de ícone externo */
.ir-link-cta::after {
    content: "→";
    transition: transform var(--ir-transition);
}

.ir-link-cta:hover::after {
    transform: translateX(3px);
}


/* ==========================================================================
   6. CARD TEMÁTICO — BORDER-LEFT OLIVA
   [DEC] border-left: 3px solid oliva-dec · background surface · border-radius 8px
   Classe utilitária aplicada nos patterns de card.
   O hover escurece levemente o background.
   ========================================================================== */

.ir-card {
    background-color: var(--ir-surface);
    border-left: 3px solid var(--ir-oliva-dec);
    border-radius: var(--ir-radius-card);
    transition: background-color var(--ir-transition);
}

.ir-card:hover {
    background-color: #E8E0D5; /* ~5% mais escuro que surface — sem token pois é estado */
}


/* ==========================================================================
   7. LINHA DE ASSINATURA VISUAL
   [DEC] Linha fina oliva-dec · 36px desktop · 28px mobile
   Elemento decorativo que precede o H1 no hero e abre seções.
   ========================================================================== */

.ir-linha-assinatura {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--ir-oliva-dec);
    margin-bottom: 20px;
    border: none;
}

@media (max-width: 767px) {
    .ir-linha-assinatura {
        width: 28px;
        margin-bottom: 16px;
    }
}


/* ==========================================================================
   8. BLOCO REFLEXIVO — PERGUNTA COM BORDER-LEFT
   [DEC] background surface · border-left 3px oliva-dec · padding 24px 32px
   Usado em páginas temáticas para perguntas de identificação.
   ========================================================================== */

.ir-bloco-reflexivo {
    background-color: var(--ir-surface);
    border-left: 3px solid var(--ir-oliva-dec);
    border-radius: 0; /* [DEC] border-radius zero em bordas single-sided */
    padding: 24px 32px;
}

.ir-bloco-reflexivo p {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 18px;
    font-weight: 400;
    color: var(--ir-carvao);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 767px) {
    .ir-bloco-reflexivo {
        padding: 20px 20px;
    }

    .ir-bloco-reflexivo p {
        font-size: 16px;
    }
}


/* ==========================================================================
   9. LABEL DE SEÇÃO — TEXTO EM UPPERCASE
   [DEC] Source Sans 3 500 · 10px · tracking 0.13em · uppercase · oliva-txt
   Usado acima dos títulos de seção para identificar o contexto.
   ========================================================================== */

.ir-sec-label {
    font-family: var(--wp--preset--font-family--source-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ir-oliva-txt);
    display: block;
    margin-bottom: 6px;
}


/* ==========================================================================
   10. RESPONSIVIDADE — AJUSTES DE ESPAÇAMENTO
   [DEC] Em mobile, reduzir xl, 2xl e 3xl em ~40%
   Aplicado via classes utilitárias nos patterns de seção.
   ========================================================================== */

/* Seção padrão — padding vertical */
.ir-sec-padding {
    padding-top: var(--wp--preset--spacing--xl);    /* 64px */
    padding-bottom: var(--wp--preset--spacing--xl); /* 64px */
}

@media (max-width: 767px) {
    .ir-sec-padding {
        padding-top: var(--wp--preset--spacing--lg);    /* 40px — ~37% menor */
        padding-bottom: var(--wp--preset--spacing--lg);
    }
}

/* Seção hero — padding maior */
.ir-sec-hero {
    padding-top: var(--wp--preset--spacing--3xl);
    padding-bottom: var(--wp--preset--spacing--2xl);
}

@media (max-width: 767px) {
    .ir-sec-hero {
        padding-top: var(--wp--preset--spacing--xl);
        padding-bottom: var(--wp--preset--spacing--xl);
    }
}


/* ==========================================================================
   11. IMAGENS — OBJECT-FIT E CROPS
   [DEC] Fotografias com crops específicos por breakpoint — Gate 6C.1
   Aplicado via classes nas imagens do hero e da seção sobre.
   ========================================================================== */

.ir-foto-hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%; /* [DEC] crop desktop aprovado Gate 6C.1 */
}

@media (max-width: 767px) {
    .ir-foto-hero {
        object-position: 50% 10%; /* [DEC] crop mobile aprovado Gate 6C.1 */
        height: 260px;
    }
}

.ir-foto-sobre {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%; /* [DEC] crop desktop aprovado Gate 6C.1 */
}

@media (max-width: 767px) {
    .ir-foto-sobre {
        object-position: 50% 5%; /* [DEC] crop mobile aprovado Gate 6C.1 */
        height: 260px;
    }
}


/* ==========================================================================
   12. SKIP LINK — ACESSIBILIDADE
   [DEC] Gate 6B — acessibilidade · link para pular para o conteúdo principal
   ========================================================================== */

.ir-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--ir-carvao);
    color: var(--ir-bg);
    padding: 8px 16px;
    font-family: var(--wp--preset--font-family--source-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.1s ease;
}

.ir-skip-link:focus {
    top: 0;
}


/* ==========================================================================
   FIM DO ARQUIVO — Fase 1: Estrutura Base
   Próximas adições apenas após aprovação de cada fase subsequente.
   ========================================================================== */