/*
Theme Name: Animalart
Theme URI: https://animalart.com.br
Author: Samuel Neves
Author URI: https://samuelneves.com.br
Description: Tema WordPress + WooCommerce sob medida para a Animalart, loja de comedouros e acessórios para pets. Funcionalidades nativas do tema com o mínimo de plugins possível.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
WC requires at least: 6.0.0
WC tested up to: 9.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: animalart
*/

/*
 * Este arquivo existe principalmente pelo cabeçalho Animalart acima — obrigatório
 * para o WordPress reconhecer a pasta como um tema instalável. O CSS de
 * fato vive em módulos separados, carregados sob demanda por página em
 * cada `inc/woocommerce/*.php` (ver ONBOARDING.md) — sem tudo num arquivo
 * só, sem CSS carregando onde não é usado.
 *
 * Reset mínimo e variáveis base do design system ficam aqui, por serem
 * verdadeiramente globais (usadas em toda página, não só num módulo).
 */

/*
 * Tipografia oficial Animalart para web/UI. Os arquivos históricos DMSans
 * foram preservados fora de `assets/` em `legacy/studioalmadolar/` e não são
 * distribuídos como parte da identidade ativa do tema.
 * Escolha restrita a duas variações autohospedadas:
 * - Regular (400): leitura, navegação e controles comuns.
 * - Black (900): display, títulos, CTAs e marca textual.
 *
 * `font-synthesis: none` evita que o navegador crie pesos falsos e
 * mantenha a assinatura geométrica da família Brandon Grotesque.
 */
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('assets/fonts/BrandonGrotesque-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('assets/fonts/BrandonGrotesque-Black.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

:root {
    /* Animalart: tokens novos para componentes migrados gradualmente. As variáveis
       Studio Alma do Lar abaixo permanecem como aliases legados até que cada
       módulo seja migrado em sua própria branch, evitando regressões globais. */
    --animalart-yellow: #ffcd00;
    --animalart-yellow-soft: #fff9d6;
    --animalart-ink: #171717;
    --animalart-muted: #666666;
    --animalart-paper: #ffffff;
    --animalart-surface-muted: #f7f7f7;
    --animalart-line: #e5e5e5;
    --animalart-radius-sm: 4px;
    --animalart-radius-md: 8px;
    --animalart-radius-pill: 999px;
    --animalart-font-body: 'Brandon Grotesque', Arial, sans-serif;
    --animalart-font-display: 'Brandon Grotesque', Arial, sans-serif;
    --animalart-content-max: 1440px;
    --animalart-content-reading: 800px;
    --animalart-surface-pearl: #fbfbfb;
    --animalart-line-strong: rgba(23, 23, 23, 0.28);
    --animalart-focus: #171717;
    --animalart-ui-radius-card: 18px;
    --animalart-ui-radius-control: 999px;
    --animalart-ui-section-space: clamp(3.5rem, 7vw, 6rem);
    --animalart-ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    --studioalmadolar-accent: #2f2a26;
    --studioalmadolar-accent-soft: #efe9e3;
    --studioalmadolar-success: #2f7d4f;
    --studioalmadolar-danger: #aa3333;
    --studioalmadolar-danger-contrast: #ffffff;
    --studioalmadolar-muted: #6e625a;
    --studioalmadolar-radius: 10px;

    /* Superfície e linha — variações do próprio accent, nunca cor solta
       nova, para header/footer terem uma superfície levemente distinta
       do branco do conteúdo sem introduzir uma segunda paleta. */
    --studioalmadolar-paper: #faf8f5;
    --studioalmadolar-line: rgba(47, 42, 38, 0.14);
    --studioalmadolar-ink: #2f2a26;
    --studioalmadolar-ink-soft: rgba(47, 42, 38, 0.68);
    --studioalmadolar-surface: #ffffff;
    --studioalmadolar-surface-muted: #fafafa;
    --studioalmadolar-surface-elevated: #ffffff;
    --studioalmadolar-line-strong: rgba(47, 42, 38, 0.35);
    --studioalmadolar-accent-contrast: #ffffff;
    --studioalmadolar-link: #5d3c28;
    --studioalmadolar-focus: #8b5e3c;
    --studioalmadolar-focus-ring: rgba(139, 94, 60, 0.25);
    /* Alias legado apontando para a dupla Brandon oficial. Somente os pesos
       400 e 900 são baixados; módulos antigos continuam independentes. */
    --studioalmadolar-font-display: 'Brandon Grotesque', sans-serif;
    --studioalmadolar-font-body: 'Brandon Grotesque', sans-serif;
}

body {
    margin: 0;
    font-family: var(--studioalmadolar-font-body);
    font-synthesis: none;
    font-weight: 400;
    color: var(--studioalmadolar-ink);
    background: var(--studioalmadolar-surface);
}

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

strong,
b {
    font-weight: 600;
}

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

h1, h2, h3, h4 {
    font-family: var(--studioalmadolar-font-display);
    font-weight: 600;
    margin: 0 0 0.5em;
}

/*
 * Container de Page padrão — largura de leitura (Módulo 1, page.php).
 * Espaçamento segue DESIGN.md Seção 2 ("Container"): 4em 2em no desktop,
 * 12vw 3vw no mobile.
 */
.page-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4em 2em;
}

.page-container__title {
    max-width: 800px;
    margin: 0 auto 1em;
}

.page-container__content {
    max-width: 800px;
    margin: 0 auto;
}

/* Modelo "Largura Total" — sem limite de largura no container em si;
   título/conteúdo internos mantêm sua própria largura de leitura. */
@media (max-width: 782px) {
    h1 {
        font-size: 6vw;
    }

    .page-container {
        padding: 12vw 3vw;
    }

}

.page-container--full-width {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.page-container__header--full-width,
.page-container__title--full-width,
.page-container__content--full-width {
    box-sizing: border-box;
    width: min(100%, var(--animalart-content-max, 1440px));
    max-width: var(--animalart-content-max, 1440px);
    margin-left: auto;
    margin-right: auto;
    padding: 0 2em;
}

@media (max-width: 782px) {
    .page-container__header--full-width,
    .page-container__title--full-width,
    .page-container__content--full-width {
        padding: 0 1em;
    }
}

.site-footer {
    border-top: 1px solid #e5e5e5;
    padding: 2em;
    text-align: center;
    margin-top: 4em;
}

.site-footer__credit {
    font-size: 0.85em;
    opacity: 0.7;
    margin: 0;
}

.site-footer__credit a {
    color: inherit;
}

/*
 * Botão reusável (Reusable Component global) — regra dos 2: usado a partir
 * desta sessão pelo card de produto da loja (`shop.css`) e pelo botão de
 * "Adicionar ao carrinho"/variação da página de produto individual
 * (`product.css`). Fica aqui (style.css) por ser sitewide, em vez de
 * duplicado em cada módulo — ver `3-reusable-components-methodology.md`,
 * seção 7. O painel do minicart (`minicart.css`) segue com seus próprios
 * botões por enquanto (dívida técnica menor, marcada em
 * DOCUMENTACAO.md — migrar quando o módulo de carrinho for revisado).
 */
.studioalmadolar-btn {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.7em 1.4em;
    border-radius: var(--studioalmadolar-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

@media (max-width: 782px) {
    .studioalmadolar-btn {
        font-size: 4vw;
    }
}

.studioalmadolar-btn--primary {
    background: var(--studioalmadolar-accent);
    border-color: var(--studioalmadolar-accent);
    color: var(--studioalmadolar-accent-contrast, #fff);
}

.studioalmadolar-btn--primary:hover {
    filter: brightness(1.1);
}

.studioalmadolar-btn--outline {
    background: var(--studioalmadolar-surface-elevated, #fff);
    border-color: var(--studioalmadolar-line-strong);
    color: var(--studioalmadolar-accent);
}

.studioalmadolar-btn--outline:hover {
    border-color: var(--studioalmadolar-accent);
}

.studioalmadolar-btn--block {
    display: flex;
    width: 100%;
}

.studioalmadolar-btn:disabled,
.studioalmadolar-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }
}


/* Animalart: shell reutilizável para páginas comuns e institucionais. */
.animalart-page-shell {
    max-width: 1440px;
    margin-inline: auto;
}

.animalart-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    max-width: 800px;
    margin: 0 auto 1.5rem;
    color: var(--animalart-muted, #666);
    font-size: 0.78rem;
    line-height: 1.4;
}

.animalart-breadcrumbs a {
    color: var(--animalart-ink, #171717);
    font-weight: 600;
    text-underline-offset: 3px;
}

.animalart-page-shell__header {
    max-width: 800px;
    margin: 0 auto 2rem;
}

.animalart-page-shell__eyebrow {
    margin: 0 0 0.65rem;
    color: var(--animalart-muted, #666);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.animalart-page-shell__header .page-container__title {
    margin-bottom: 0;
    color: var(--animalart-ink, #171717);
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.animalart-page-shell__content {
    color: var(--animalart-ink, #171717);
    line-height: 1.7;
}

.animalart-page-shell__content :is(h2, h3, h4) {
    margin-top: 2em;
    color: var(--animalart-ink, #171717);
    line-height: 1.15;
}

.animalart-page-shell__content a {
    color: var(--animalart-ink, #171717);
    text-underline-offset: 3px;
}

.animalart-page-shell__content :is(img, video, iframe) {
    max-width: 100%;
}

@media (max-width: 782px) {
    .animalart-page-shell {
        padding: 12vw 1rem;
    }

    .animalart-breadcrumbs,
    .animalart-page-shell__header,
    .animalart-page-shell__content {
        max-width: none;
    }
}