/**
 * @author    Unbox | Marco Moura
 * @link      https://unboxbr.com.br
 * @project   AutoFeira
 * @module    Tema Unbox (unbox-theme)
 * @version   1.1.0
 * @updated   2026-05-22 19:56
 * @license   Proprietário — Todos os direitos reservados
 */

/* ============================================================================
 * Unbox Theme — main.css
 * Design System AutoFeira (light-only).
 * Camada base: tokens, reset leve, tipografia e componentes globais.
 * ========================================================================== */

:root {
    /* === LIGHT MODE (único modo do projeto AutoFeira) === */
    --bg0: #f0f0f4;
    --bg1: #ffffff;
    --bg2: #ffffff;
    --bg3: #f4f4f8;
    --bg4: #e6e6ec;

    --b1: #e0e0e8;
    --b2: #cacad4;

    --t1: #111113;
    --t2: #3a3a4a;
    --t3: #9090a0;

    --inp:  #f8f8fb;
    --inpb: #d4d4de;
    --ti:   #111113;

    /* === MARCA (sempre fixas) === */
    --or:  #f97316;
    --or2: #e06810;
    --og:  rgba(249, 115, 22, .18);
    --bl:  #3b82f6;
    --gr:  #22c55e;
    --rd:  #ef4444;
    --am:  #f59e0b;

    /* Layout */
    --container-max: 1280px;
    --container-pad: 24px;
}

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

* {
    transition: background .2s, color .2s, border-color .2s;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    background: var(--bg0);
    color: var(--t1);
}

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

a {
    color: var(--or);
    text-decoration: none;
}

a:hover {
    color: var(--or2);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', sans-serif;
    color: var(--t1);
    margin: 0 0 .5em;
    line-height: 1.25;
    font-weight: 600;
}

code, pre, kbd {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------------------
 * Acessibilidade
 * ------------------------------------------------------------------------- */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.skip-link:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    background: var(--t1);
    color: #fff;
    padding: 8px 12px;
    z-index: 100000;
    left: 8px;
    top: 8px;
    position: fixed;
    border-radius: 7px;
}

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

/* ---------------------------------------------------------------------------
 * Header / Nav
 * ------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg1);
    border-bottom: 1px solid var(--b1);
    min-height: 73px;
    display: flex;
    align-items: center;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--t1);
}

.site-brand__logo,
.site-brand .custom-logo {
    height: 36px;
    width: auto;
    display: block;
}

.site-brand--text {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--t1);
}

.site-brand--text:hover {
    color: var(--or);
}

.site-nav__list {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-nav__list a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    color: var(--t2);
    border-radius: 7px;
    font-weight: 500;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
    background: rgba(249, 115, 22, .13);
    color: var(--or);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
.site-footer {
    margin-top: 64px;
    background: var(--bg1);
    border-top: 1px solid var(--b1);
    padding: 32px 0;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: center;
}

.site-footer__tag {
    color: var(--t3);
    margin: 8px 0 0;
    font-size: 13px;
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer__list a {
    color: var(--t2);
    font-size: 14px;
}

.site-footer__col--credits {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.site-footer__credits-label {
    font-size: 12px;
    color: var(--t3);
}

.site-footer__credits-logo {
    height: 26px;
    width: auto;
}

.site-footer__version {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--t3);
}

@media (max-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .site-footer__list { justify-content: flex-start; }
    .site-footer__col--credits {
        text-align: left;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------------------
 * Componentes — Cards / Seções
 * ------------------------------------------------------------------------- */
.unbox-card {
    background: var(--bg2);
    border: 1px solid var(--b1);
    border-radius: 10px;
    padding: 18px 22px;
}

/* ---------------------------------------------------------------------------
 * Botões
 * ------------------------------------------------------------------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--or);
    color: #fff;
    border-radius: 7px;
    padding: 7px 13px;
    font-weight: 600;
    border: 1px solid var(--or);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
}

.btn-primary:hover {
    background: var(--or2);
    border-color: var(--or2);
    color: #fff;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--b2);
    color: var(--t2);
    border-radius: 7px;
    padding: 7px 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
}

.btn-secondary:hover {
    border-color: rgba(249, 115, 22, .4);
    color: var(--or);
}

/* ---------------------------------------------------------------------------
 * Inputs
 * ------------------------------------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    background: var(--inp);
    border: 1px solid var(--inpb);
    border-radius: 7px;
    color: var(--ti);
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(249, 115, 22, .5);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}

/* ---------------------------------------------------------------------------
 * Badges de Status
 * ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.badge--aguardando { color: var(--am); background: rgba(245, 158, 11, .13); }
.badge--confirmado { color: var(--bl); background: rgba(59, 130, 246, .13); }
.badge--concluido  { color: var(--gr); background: rgba(34, 197, 94, .13); }
.badge--erro       { color: var(--rd); background: rgba(239, 68, 68, .13); }

/* ---------------------------------------------------------------------------
 * Scrollbar fina (padrão Unbox)
 * ------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--b2) transparent;
}

*::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--b2);
    border-radius: 999px;
}

/* ---------------------------------------------------------------------------
 * Site main spacing
 * ------------------------------------------------------------------------- */
.site-main {
    padding-block: 32px 64px;
}

/* ---------------------------------------------------------------------------
 * Layout switches (controlados via meta box "Configurações do Tema")
 * ------------------------------------------------------------------------- */

/* Altura da admin bar do WP — expõe como var para o plugin posicionar
 * elementos fixed/sticky corretamente (sidebar do painel, etc). */
body { --wp-admin-bar-h: 0px; }
body.admin-bar { --wp-admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar { --wp-admin-bar-h: 46px; }
}

/* Largura total — container vira fluido, sem max-width */
.unbox-layout-full .site-main,
.unbox-layout-full .site-main > .container,
.unbox-layout-full .hero > .container,
.unbox-layout-full .vitrine > .container {
    max-width: none;
}

/* Zera TODO espaçamento do main quando largura total — conteúdo cola
 * na borda da viewport (apenas a admin bar do WP fica acima). */
.unbox-layout-full .site-main {
    padding: 0;
    margin: 0;
}

.unbox-layout-full .site-main > .container {
    padding-inline: 0;
}

/* entry-content full não recebe wpautop margin no topo */
.entry-content--full > :first-child {
    margin-top: 0;
}

/* Ocultar header do site */
.no-site-header .site-header {
    display: none;
}

/* Ocultar rodapé do site */
.no-site-footer .site-footer {
    display: none;
}

/* Ocultar título da página (entry-title / hero__title em páginas) */
.no-page-title .entry-title,
.no-page-title .entry-header,
.no-page-title .hero {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Responsividade do Layout Mobile Independente [NOVO - 2026-05-22]
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Força o container principal a ocupar largura total */
    body.unbox-layout-mobile-full .site-main > .container {
        max-width: none;
        padding-inline: 0;
    }

    /* Achata o card do post para edge-to-edge e remove bordas/sombra/cantos */
    body.unbox-layout-mobile-full .site-main .unbox-card {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 18px 16px;
    }
}