/*
 * Theme Name:  Dea Ferro e Aço
 * Theme URI:   https://gruponovase.com.br
 * Author:      Grupo Nova SE
 * Description: Tema WordPress para Dea Ferro e Aço — landing page industrial com corte plasma, dobra e distribuição de aço carbono.
 * Version:     1.1.0
 * License:     Proprietary
 * Text Domain: deaaco
 */

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
    --bg:       #0c1d2e;
    --surface:  #102538;
    --surface2: #153047;
    --border:   #1a3a58;
    --accent:   #c9a020;
    --accent-h: #dbb52a;
    --text:     #edeae0;
    --muted:    #7e8e9a;
    --dim:      #2a4a66;
    --wa:       #25d366;
    --wa-h:     #1bb357;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg:       #e8f0f8;
        --surface:  #ffffff;
        --surface2: #d8e8f5;
        --border:   #b0cce0;
        --text:     #0c1d2e;
        --muted:    #4a6070;
        --dim:      #8aaabf;
    }
}
:root[data-theme="dark"] {
    --bg:       #0c1d2e;
    --surface:  #102538;
    --surface2: #153047;
    --border:   #1a3a58;
    --text:     #edeae0;
    --muted:    #7e8e9a;
    --dim:      #2a4a66;
}

/* ── RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── HERO GRID PATTERN ───────────────────────────────────────────────── */
.hero-grid-bg {
    background-image:
        linear-gradient(rgba(223, 79, 0, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(223, 79, 0, 0.045) 1px, transparent 1px);
    background-size: 52px 52px;
}
.hero-glow {
    background: radial-gradient(ellipse at 65% 35%, rgba(223, 79, 0, 0.08) 0%, transparent 65%);
}

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
.font-display {
    font-family: 'Barlow Condensed', sans-serif;
}

/* ── BADGE PULSE ─────────────────────────────────────────────────────── */
@keyframes deaaco-blink {
    0%, 100% { opacity: 1; }
    55%       { opacity: 0.3; }
}
.badge-dot {
    animation: deaaco-blink 2.4s ease infinite;
}

/* ── SERVICES GRID ───────────────────────────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--border);
    gap: 1px;
}
.svc-card {
    background: var(--surface);
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.2s;
}
.svc-card:hover { background: var(--surface2); }

/* ── HOW-IT-WORKS STEPS ──────────────────────────────────────────────── */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.5rem;
    margin-top: 2.8rem;
}
.step-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 2.2rem;
    color: var(--accent);
    line-height: 1;
}

/* ── FORM ────────────────────────────────────────────────────────────── */
.dea-input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.7rem 0.9rem;
    border-radius: 3px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    transition: border-color 0.18s;
    width: 100%;
}
.dea-input:focus { outline: none; border-color: var(--accent); }
.dea-input::placeholder { color: var(--dim); }
.dea-textarea { resize: vertical; min-height: 85px; }

/* ── TRUST BAR ───────────────────────────────────────────────────────── */
.trust-scroll {
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.85rem clamp(1rem, 5vw, 3rem);
}
.trust-scroll::-webkit-scrollbar { display: none; }

/* ── THEME TRANSITION ────────────────────────────────────────────────── */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition-property: background-color, border-color, color !important;
    transition-duration: 0.28s !important;
    transition-timing-function: ease !important;
}

/* ── MOBILE DRAWER ───────────────────────────────────────────────────── */
#mobile-menu { display: none; flex-direction: column; }
#mobile-menu.open { display: flex; }

/* ── SKIP LINK ───────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--accent);
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 0 0 3px 0;
}
.skip-link:focus { left: 0; }

/* ── LIGHT MODE ANTI-FOUC ────────────────────────────────────────────── */
html.light-mode-pre body,
html.light-mode-pre body { background-color: #f0ede6 !important; }