/* ==========================================================================
   MAIN — Custom Properties globais + Reset base
   ========================================================================== */

:root {
    /* --- Cores globais --- */
    --color-accent:     #DE8ABC;
    --color-bg:         #CECECE;

    /* Textura de pontos "BG texture/Default" (Figma) — fonte única, reusada
       no fundo das páginas e no gallery viewer. Ponto ~2px SÓLIDO #191916 numa
       grade esparsa 108px; a discrição vem do tamanho+espaçamento, não de alpha.
       Em dark mode o --color-bg escurece e o ponto #191916 some naturalmente. */
    --bg-dots:      radial-gradient(#191916 1px, transparent 1px);
    --bg-dots-size: 108px 108px;

    /* Primary: #FFFFFF com variantes de opacidade */
    --color-primary-10:  rgba(255, 255, 255, 0.1);
    --color-primary-20:  rgba(255, 255, 255, 0.2);
    --color-primary-30:  rgba(255, 255, 255, 0.3);
    --color-primary-40:  rgba(255, 255, 255, 0.4);
    --color-primary-50:  rgba(255, 255, 255, 0.5);
    --color-primary-60:  rgba(255, 255, 255, 0.6);
    --color-primary-70:  rgba(255, 255, 255, 0.7);
    --color-primary-80:  rgba(255, 255, 255, 0.8);
    --color-primary-90:  rgba(255, 255, 255, 0.9);
    --color-primary-100: rgba(255, 255, 255, 1);

    /* On Accent: #191916 com variantes de opacidade */
    --color-on-accent-10:  rgba(25, 25, 22, 0.1);
    --color-on-accent-20:  rgba(25, 25, 22, 0.2);
    --color-on-accent-30:  rgba(25, 25, 22, 0.3);
    --color-on-accent-40:  rgba(25, 25, 22, 0.4);
    --color-on-accent-50:  rgba(25, 25, 22, 0.5);
    --color-on-accent-60:  rgba(25, 25, 22, 0.6);
    --color-on-accent-70:  rgba(25, 25, 22, 0.7);
    --color-on-accent-80:  rgba(25, 25, 22, 0.8);
    --color-on-accent-90:  rgba(25, 25, 22, 0.9);
    --color-on-accent-100: rgba(25, 25, 22, 1);

    /* On Primary: #191916 com variantes de opacidade */
    --color-on-primary-10:  rgba(25, 25, 22, 0.1);
    --color-on-primary-20:  rgba(25, 25, 22, 0.2);
    --color-on-primary-30:  rgba(25, 25, 22, 0.3);
    --color-on-primary-40:  rgba(25, 25, 22, 0.4);
    --color-on-primary-50:  rgba(25, 25, 22, 0.5);
    --color-on-primary-60:  rgba(25, 25, 22, 0.6);
    --color-on-primary-70:  rgba(25, 25, 22, 0.7);
    --color-on-primary-80:  rgba(25, 25, 22, 0.8);
    --color-on-primary-90:  rgba(25, 25, 22, 0.9);
    --color-on-primary-100: rgba(25, 25, 22, 1);

    /* Tokens semânticos — usados nos componentes */
    --color-surface:    var(--color-primary-100);
    --color-text:       var(--color-on-primary-100);
    --color-border:     var(--color-on-primary-20);

    /* Espaçamentos */
    --gap-grid:       32px;
    --container-pad:  32px;
}

/* --- Dark mode --- */
/* Primary (#FFFFFF) e On Primary (#191916) trocam. Accent e On Accent mantidos. */
[data-theme="dark"] {
    /* Primary vira #191916 */
    --color-primary-10:  rgba(25, 25, 22, 0.1);
    --color-primary-20:  rgba(25, 25, 22, 0.2);
    --color-primary-30:  rgba(25, 25, 22, 0.3);
    --color-primary-40:  rgba(25, 25, 22, 0.4);
    --color-primary-50:  rgba(25, 25, 22, 0.5);
    --color-primary-60:  rgba(25, 25, 22, 0.6);
    --color-primary-70:  rgba(25, 25, 22, 0.7);
    --color-primary-80:  rgba(25, 25, 22, 0.8);
    --color-primary-90:  rgba(25, 25, 22, 0.9);
    --color-primary-100: rgba(25, 25, 22, 1);

    /* On Primary vira #FFFFFF */
    --color-on-primary-10:  rgba(255, 255, 255, 0.1);
    --color-on-primary-20:  rgba(255, 255, 255, 0.2);
    --color-on-primary-30:  rgba(255, 255, 255, 0.3);
    --color-on-primary-40:  rgba(255, 255, 255, 0.4);
    --color-on-primary-50:  rgba(255, 255, 255, 0.5);
    --color-on-primary-60:  rgba(255, 255, 255, 0.6);
    --color-on-primary-70:  rgba(255, 255, 255, 0.7);
    --color-on-primary-80:  rgba(255, 255, 255, 0.8);
    --color-on-primary-90:  rgba(255, 255, 255, 0.9);
    --color-on-primary-100: rgba(255, 255, 255, 1);

    --color-bg: #191916;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    background-image: var(--bg-dots);
    background-size: var(--bg-dots-size);
    color: var(--color-text);
    /* troca de tema instantânea/atômica: sem transition de bg/cor (evitava ver a
       estrutura do grid — tiles vs gutters — defasada durante o fade) */
    /* sticky footer: conteúdo curto não deixa o footer subir */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* o <main> cresce e empurra o footer pra base */
body > main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

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

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

/* --- Header --- */
.site-header {
    position: relative;
    background-color: var(--color-bg);
    height: 64px;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1729px;
    margin-inline: auto;
    padding-inline: 32px;
}

.site-header__left,
.site-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.site-header__separator {
    position: absolute;
    bottom: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background-color: var(--color-border);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
    font-weight: 600;
    color: var(--color-text);
}

.breadcrumb__item {
    color: var(--color-on-primary-80);
    text-decoration: none;
}

.breadcrumb__item--current {
    color: var(--color-on-primary-80);
}

.breadcrumb__sep {
    color: var(--color-on-primary-40);
    padding-inline: 4px;
    font-weight: 400;
}

/* Controles do header */
.header-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
    font-weight: 600;
    color: var(--color-on-primary-80);
    transition: background-color 0.15s ease, transform 0.15s ease;
    line-height: 1;
}

.header-ctrl:hover {
    background-color: var(--color-on-primary-10);
    transform: translateY(1px);
}

/* -Aa / +Aa: tamanho fixo, não deve escalar com o font-size ajustável do usuário */
.js-font-decrease,
.js-font-increase {
    font-size: 20px;
}

.icon--moon {
    display: block;
    width: 18px;
    height: 18px;
    color: var(--color-text);
    transition: color 0.2s ease;
}

/* --- Container --- */
.container {
    width: 100%;
    max-width: 1729px;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* --- Menu flutuante --- */
.main-menu {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
}

/* Botão de voltar — canto inferior esquerdo, mesma linha do menu (Figma mainMenu/Back) */
.page-back {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    background-color: rgba(25, 25, 22, 0.9);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.page-back:hover { background-color: rgba(25, 25, 22, 1); }

.page-back svg { width: 22px; height: 22px; display: block; }
.page-back svg path { stroke: rgba(255, 255, 255, 0.9); }

@media (max-width: 600px) {
    .page-back { left: 16px; }
}

.main-menu__pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(25, 25, 22, 0.9);
    border-radius: 100px;
    padding: 8px;
    overflow: hidden;
    box-sizing: border-box;
    /* Figma: Smart Animate · Ease In/Out · 300ms — encolhe a largura E desbota junto (cross-dissolve com a bolinha) */
    transition:
        width 0.3s cubic-bezier(0.42, 0, 0.58, 1),
        opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.main-menu__btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 48px;
    border: none;
    background: none;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        padding 0.3s cubic-bezier(0.42, 0, 0.58, 1);
    text-decoration: none;
}

.main-menu__btn:not(.is-active):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.main-menu__btn.is-active {
    padding-inline: 16px;
    width: auto;
    min-width: 48px; /* piso: evita o botão encolher de 48→~22 no instante da troca (dip) */
}

.main-menu__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.main-menu__label {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-width 0.3s cubic-bezier(0.42, 0, 0.58, 1),
        margin-left 0.3s cubic-bezier(0.42, 0, 0.58, 1),
        opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.main-menu__btn.is-active .main-menu__label {
    /* largura EXATA do texto (medida em JS) — evita a barra inchar/encolher na troca */
    max-width: var(--label-w, 120px);
    margin-left: 8px;
    opacity: 1;
}

/* realce que desliza entre os itens (Figma: Smart Animate · Ease In/Out · 300ms) */
.main-menu__indicator {
    position: absolute;
    top: 8px;
    left: 0;
    width: 48px;
    height: 48px;
    border-radius: 48px;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(8px);
    pointer-events: none;
    z-index: 0;
    transition:
        transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),
        width 0.3s cubic-bezier(0.42, 0, 0.58, 1),
        opacity 0.15s ease;
}

.main-menu__indicator.is-hidden {
    opacity: 0;
}

.main-menu__collapsed {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 101; /* acima da pill para cobri-la no fim do cross-fade */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    border: none;
    background-color: var(--color-bg);
    cursor: pointer;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Figma: Smart Animate · Ease In/Out · 300ms */
    transition:
        opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),
        visibility 0s linear 0.3s;
}

/* recolhido: a pill encolhe a largura (JS) + desbota; a bolinha faz fade-in por cima */
body.menu-collapsed .main-menu__pill {
    opacity: 0;
    pointer-events: none;
}

body.menu-collapsed .main-menu__collapsed {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),
        visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .main-menu__pill,
    .main-menu__collapsed {
        transition-duration: 0s;
    }
}

/* Mobile: menu centralizado no rodapé (Figma 514:2455) — no desktop fica à direita.
   Centraliza via margin auto entre left:0/right:0 (sem transform → imune a override). */
@media (max-width: 600px) {
    .main-menu {
        left: 0;
        right: 0;
        width: max-content;
        margin-inline: auto;
    }
    .main-menu__collapsed {
        left: 0;
        right: 0;
        margin-inline: auto;
    }
}

.main-menu__collapsed .main-menu__icon {
    width: 64px;
    height: 64px;
}

/* --- Page layout --- */
.page-home,
.page-tag,
.page-edicao {
    padding-top: 32px;
}

/* Imagem de fundo por edição (var injetada no wp_head); sem var = fundo padrão */
.page-edicao {
    background-image: var(--edicao-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--color-accent);
    margin-top: 64px;
}

.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 48px;
    padding-block: 48px;
}

/* footer responsivo: sem isso as 4 colunas estouram a viewport (scroll horizontal) */
@media (max-width: 1024px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.footer__bio {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.footer__avatar {
    width: 130px;
    height: 168px;
    object-fit: cover;
    flex-shrink: 0;
}

.footer__bio-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__bio-text {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-on-accent-100);
}

.footer__bio-author {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-accent-100);
}

.footer__heading {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-accent-60);
    margin-bottom: 8px;
}

.footer__sitemap ul,
.footer__trendy ol {
    list-style: none;
}

.footer__sitemap li,
.footer__trendy li {
    border-bottom: 1px solid var(--color-on-accent-20);
    padding-block: 12px;
}

.footer__sitemap a,
.footer__trendy a {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-on-accent-100);
    display: flex;
    gap: 12px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__sitemap a:hover,
.footer__trendy a:hover {
    transform: translateX(14px);
}

.footer__trendy-num {
    color: var(--color-on-accent-50);
    font-weight: 400;
    min-width: 16px;
}

.footer__license {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__license-badge {
    width: 88px;
    height: auto;
}

.footer__license p {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-on-accent-100);
}

.footer__license a {
    color: var(--color-on-accent-100);
    text-decoration: underline;
}