/* ==========================================================================
   GUIA CLT - Design System: Base
   ==========================================================================
   Estilos fundamentais para body, tipografia, links, listas, imagens,
   tabelas, blockquotes, buttons e forms.

   NÃO coloque estilos de componentes aqui. Use components.css.
   NÃO coloque estilos de layout aqui. Use templates.css.
   ========================================================================== */


/* ── BODY ─────────────────────────────────────────────────────────────────── */

body {
color: var(--gc-text-body);
font-family: var(--gc-font-body);
font-size: var(--gc-text-base);
line-height: var(--gc-leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* ── HEADINGS ─────────────────────────────────────────────────────────────── */

h1, h2,
.entry-content h1,
.entry-content h2 {
color: var(--gc-text-heading);
font-family: 'Sora', sans-serif;
font-weight: var(--gc-weight-bold);
line-height: var(--gc-leading-tight);
margin-top: var(--gc-space-2xl);
margin-bottom: var(--gc-space-md);
}

h3, h4, h5, h6,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
color: var(--gc-text-heading);
font-family: var(--gc-font-heading);
font-weight: var(--gc-weight-bold);
line-height: var(--gc-leading-tight);
margin-top: var(--gc-space-2xl);
margin-bottom: var(--gc-space-md);
}

.entry-content h1 { font-size: var(--gc-text-4xl); }
.entry-content h2 { font-size: var(--gc-text-3xl); }
.entry-content h3 { font-size: var(--gc-text-2xl); }
.entry-content h4 { font-size: var(--gc-text-xl); }
.entry-content h5 { font-size: var(--gc-text-lg); font-weight: var(--gc-weight-semibold); }
.entry-content h6 { font-size: var(--gc-text-md); font-weight: var(--gc-weight-semibold); }

/* Primeiro heading do conteúdo não precisa de margin-top extra */
.entry-content > h1:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child {
margin-top: 0;
}

@media (max-width: 639px) {
.entry-content h1 { font-size: var(--gc-text-3xl); }
.entry-content h2 { font-size: var(--gc-text-2xl); }
.entry-content h3 { font-size: var(--gc-text-xl); }
}


/* ── PARÁGRAFOS ───────────────────────────────────────────────────────────── */

.entry-content p {
margin-bottom: var(--gc-space-lg);
line-height: var(--gc-leading-relaxed);
}

.entry-content p:last-child {
margin-bottom: 0;
}


/* ── LINKS ────────────────────────────────────────────────────────────────── */

.entry-content a {
color: var(--gc-link-color);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color var(--gc-transition-fast);
}

.entry-content a:hover {
color: var(--gc-link-hover);
text-decoration-thickness: 2px;
}

.entry-content a:visited {
color: var(--gc-link-visited);
}


/* ── LISTAS ───────────────────────────────────────────────────────────────── */

.entry-content ul,
.entry-content ol {
margin-bottom: var(--gc-space-lg);
padding-left: var(--gc-space-xl);
}

.entry-content li {
margin-bottom: var(--gc-space-sm);
line-height: var(--gc-leading-relaxed);
}

.entry-content li:last-child {
margin-bottom: 0;
}

.entry-content ul li {
list-style-type: disc;
}

.entry-content ol li {
list-style-type: decimal;
}

.entry-content li > ul,
.entry-content li > ol {
margin-top: var(--gc-space-sm);
margin-bottom: 0;
}


/* ── IMAGENS ──────────────────────────────────────────────────────────────── */

.entry-content img {
max-width: 100%;
height: auto;
border-radius: var(--gc-radius-md);
}

.entry-content figure {
margin: var(--gc-space-2xl) 0;
}

.entry-content figcaption {
color: var(--gc-text-muted);
font-size: var(--gc-text-sm);
text-align: center;
margin-top: var(--gc-space-sm);
}


/* ── BLOCKQUOTES ──────────────────────────────────────────────────────────── */

.entry-content blockquote {
border-left: 4px solid var(--gc-color-primary);
background: var(--gc-bg-muted);
padding: var(--gc-space-lg) var(--gc-space-xl);
margin: var(--gc-space-2xl) 0;
border-radius: 0 var(--gc-radius-md) var(--gc-radius-md) 0;
font-style: italic;
color: var(--gc-text-strong);
}

.entry-content blockquote p {
margin-bottom: var(--gc-space-sm);
}

.entry-content blockquote p:last-child {
margin-bottom: 0;
}

.entry-content blockquote cite {
display: block;
margin-top: var(--gc-space-md);
font-size: var(--gc-text-sm);
font-style: normal;
color: var(--gc-text-muted);
}


/* ── TABELAS ──────────────────────────────────────────────────────────────── */

.entry-content table {
width: 100%;
border-collapse: collapse;
margin: var(--gc-space-2xl) 0;
font-size: var(--gc-text-sm);
border-radius: var(--gc-radius-md);
overflow: hidden;
}

.entry-content thead {
background: var(--gc-color-primary);
color: var(--gc-text-inverse);
}

.entry-content th {
padding: var(--gc-space-md) var(--gc-space-lg);
text-align: left;
font-weight: var(--gc-weight-semibold);
font-size: var(--gc-text-sm);
letter-spacing: 0.025em;
}

.entry-content td {
padding: var(--gc-space-md) var(--gc-space-lg);
border-bottom: 1px solid var(--gc-border-light);
color: var(--gc-text-body);
}

.entry-content tbody tr:hover {
background: var(--gc-bg-subtle);
}

.entry-content tbody tr:last-child td {
border-bottom: none;
}

/* Tabela responsiva: scroll horizontal em mobile */
.guiaclt-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--gc-space-2xl) 0;
border: 1px solid var(--gc-border-light);
border-radius: var(--gc-radius-md);
}

.guiaclt-table-wrapper table {
margin: 0;
min-width: 600px;
}


/* ── CODE ─────────────────────────────────────────────────────────────────── */

.entry-content code {
font-family: var(--gc-font-mono);
font-size: 0.875em;
background: var(--gc-bg-muted);
padding: 0.15em 0.4em;
border-radius: var(--gc-radius-sm);
color: var(--gc-text-strong);
}

.entry-content pre {
background: var(--gc-text-heading);
color: var(--gc-bg-muted);
padding: var(--gc-space-lg) var(--gc-space-xl);
border-radius: var(--gc-radius-md);
overflow-x: auto;
margin: var(--gc-space-2xl) 0;
font-size: var(--gc-text-sm);
line-height: 1.6;
}

.entry-content pre code {
background: none;
padding: 0;
color: inherit;
}


/* ── HR ───────────────────────────────────────────────────────────────────── */

.entry-content hr {
border: none;
border-top: 1px solid var(--gc-border-light);
margin: var(--gc-space-3xl) 0;
}


/* ── BOTÕES ───────────────────────────────────────────────────────────────── */

.guiaclt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gc-space-sm);
padding: var(--gc-space-md) var(--gc-space-xl);
font-family: var(--gc-font-body);
font-size: var(--gc-text-base);
font-weight: var(--gc-weight-semibold);
line-height: 1;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--gc-radius-md);
cursor: pointer;
transition: all var(--gc-transition-base);
}

.guiaclt-btn:focus-visible {
outline: 2px solid var(--gc-color-primary);
outline-offset: 2px;
}

/* Focus global — elementos interativos do design system */
a[class*="guiaclt-"]:focus-visible,
button[class*="guiaclt-"]:focus-visible {
outline: 2px solid var(--gc-color-primary);
outline-offset: 2px;
}

/* Primário */
.guiaclt-btn--primary {
background: var(--gc-color-primary);
color: var(--gc-text-inverse);
}

.guiaclt-btn--primary:hover {
background: var(--gc-color-primary-dark);
color: var(--gc-text-inverse);
text-decoration: none;
}

/* Secundário */
.guiaclt-btn--secondary {
background: var(--gc-bg-surface);
color: var(--gc-color-primary);
border-color: var(--gc-color-primary);
}

.guiaclt-btn--secondary:hover {
background: var(--gc-color-primary);
color: var(--gc-text-inverse);
text-decoration: none;
}

/* Ghost */
.guiaclt-btn--ghost {
background: transparent;
color: var(--gc-color-primary);
}

.guiaclt-btn--ghost:hover {
background: var(--gc-color-primary-light);
text-decoration: none;
}

/* Tamanhos */
.guiaclt-btn--sm {
padding: var(--gc-space-sm) var(--gc-space-md);
font-size: var(--gc-text-sm);
}

.guiaclt-btn--lg {
padding: var(--gc-space-lg) var(--gc-space-2xl);
font-size: var(--gc-text-lg);
}


/* ── FORMULÁRIOS ──────────────────────────────────────────────────────────── */

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="number"],
.entry-content input[type="search"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content select,
.entry-content textarea {
width: 100%;
padding: var(--gc-space-md);
font-family: var(--gc-font-body);
font-size: var(--gc-text-base);
color: var(--gc-text-body);
background: var(--gc-bg-surface);
border: 1px solid var(--gc-border-medium);
border-radius: var(--gc-radius-md);
transition: border-color var(--gc-transition-fast), box-shadow var(--gc-transition-fast);
}

.entry-content input:focus,
.entry-content select:focus,
.entry-content textarea:focus {
border-color: var(--gc-color-primary);
box-shadow: 0 0 0 3px var(--gc-color-primary-light);
outline: none;
}

.entry-content label {
display: block;
margin-bottom: var(--gc-space-xs);
font-weight: var(--gc-weight-medium);
color: var(--gc-text-strong);
font-size: var(--gc-text-sm);
}


/* ── SELEÇÃO DE TEXTO ─────────────────────────────────────────────────────── */

::selection {
background: var(--gc-color-primary);
color: var(--gc-text-inverse);
}