/*
Theme Name: Gráfica NSP
Author: PluginTema
Description: Tema institucional da Gráfica Nossa Senhora da Paz — moderno, minimalista e responsivo.
Version: 1.0.0
Text Domain: grafica-nsp
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   VARIÁVEIS CSS — Sistema de Design
   ========================================================= */
:root {
	/* Cores da marca */
	--color-primary:        #064B76;
	--color-primary-dark:   #033756;
	--color-primary-light:  #0A6BA6;
	--color-primary-muted:  #EAF2F8;
	--color-yellow:         #FFF212;
	--color-yellow-dark:    #DDD000;
	--color-pink:           #EC268F;
	--color-pink-dark:      #C41B77;

	/* Backgrounds */
	--color-bg:             #FAF9F7;
	--color-bg-white:       #ffffff;
	--color-surface:        #F3F1ED;
	--color-surface-blue:   #EDF3F8;
	--color-footer-bg:      #052F4A;
	--color-footer-mid:     #064060;

	/* Texto */
	--color-text:           #1C1C1E;
	--color-text-muted:     #5A5A68;
	--color-text-light:     #8A8A96;
	--color-heading:        #0D0D12;

	/* Links */
	--color-link:           var(--color-primary);
	--color-link-hover:     var(--color-primary-dark);

	/* Bordas */
	--color-border:         #E0DDD8;
	--color-border-light:   #EEECE8;

	/* Botões */
	--color-btn:            var(--color-primary);
	--color-btn-text:       #ffffff;

	/* Tipografia */
	--font-display:         'Barlow Condensed', 'Barlow', system-ui, sans-serif;
	--font-base:            'Barlow', system-ui, -apple-system, sans-serif;
	--font-mono:            ui-monospace, "SFMono-Regular", Consolas, monospace;

	/* Espaçamentos */
	--size-max-width:       1160px;
	--size-padding-x:       1.5rem;
	--section-padding:      5rem;

	/* Raios */
	--radius-sm:            4px;
	--radius:               8px;
	--radius-lg:            16px;
	--radius-xl:            24px;

	/* Sombras */
	--shadow-sm:            0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
	--shadow:               0 4px 16px rgba(6,75,118,.08), 0 2px 6px rgba(0,0,0,.06);
	--shadow-lg:            0 12px 40px rgba(6,75,118,.12), 0 4px 12px rgba(0,0,0,.08);
	--shadow-header:        0 2px 20px rgba(6,75,118,.12);

	/* Transições */
	--transition:           .2s ease;
	--transition-slow:      .35s ease;

	/* Z-index */
	--z-header:             1000;
	--z-dropdown:           1100;

	/* Legado — compatibilidade com base existente */
	--color-surface-old:    #F3F1ED;
	--color-btn-old:        var(--color-primary);
	--size-padding-y:       2rem;
	--radius-old:           var(--radius);
	--transition-old:       var(--transition);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Bloqueia scroll quando menu mobile aberto */
body.nav-open {
	overflow: hidden;
}

/* =========================================================
   TIPOGRAFIA BASE
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .75rem;
	color: var(--color-heading);
	font-family: var(--font-base);
	font-weight: 700;
	line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 1rem; }

p {
	margin: 0 0 1.25rem;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

/* =========================================================
   LISTAS
   ========================================================= */
ul, ol {
	margin: 0 0 1.25rem 1.5rem;
	padding: 0;
}

li {
	margin-bottom: .35rem;
}

/* =========================================================
   IMAGENS & MÍDIA
   ========================================================= */
img, svg, video, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0 0 1.5rem;
}

figcaption {
	font-size: .875rem;
	color: var(--color-text-light);
	margin-top: .4rem;
}

/* =========================================================
   FORMULÁRIOS
   ========================================================= */
input,
textarea,
select {
	font-family: var(--font-base);
	font-size: 1rem;
	padding: .6rem 1rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-bg-white);
	color: var(--color-text);
	width: 100%;
	transition: border-color var(--transition), box-shadow var(--transition);
	appearance: none;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(6,75,118,.15);
}

textarea {
	resize: vertical;
	min-height: 120px;
}

label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: .35rem;
	color: var(--color-heading);
}

/* =========================================================
   BOTÕES BASE
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	background-color: var(--color-btn);
	color: var(--color-btn-text);
	font-family: var(--font-base);
	font-size: .95rem;
	font-weight: 600;
	border: 2px solid var(--color-btn);
	border-radius: var(--radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
	line-height: 1.4;
	white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(6,75,118,.25);
	text-decoration: none;
}

.btn:focus-visible {
	outline: 3px solid var(--color-yellow);
	outline-offset: 2px;
}

.btn-outline {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background-color: var(--color-primary);
	color: #fff;
}

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

.btn-white:hover,
.btn-white:focus-visible {
	background-color: var(--color-yellow);
	border-color: var(--color-yellow);
	color: var(--color-primary-dark);
}

.btn-whatsapp {
	background-color: #25D366;
	border-color: #25D366;
	color: #fff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
	background-color: #1EBE58;
	border-color: #1EBE58;
	color: #fff;
}

.btn svg {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}

.btn-lg {
	padding: .9rem 2.25rem;
	font-size: 1rem;
}

/* =========================================================
   LAYOUT GERAL
   ========================================================= */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

.container {
	max-width: var(--size-max-width);
	margin-inline: auto;
	padding-inline: var(--size-padding-x);
}

/* =========================================================
   POSTS / ARTIGOS (páginas internas)
   ========================================================= */
.site-content.inner-content {
	padding: 3rem 0;
}

.post,
.page {
	margin-bottom: 3rem;
}

.entry-header {
	margin-bottom: 1.5rem;
}

.entry-title {
	margin-bottom: .5rem;
}

.entry-title a {
	text-decoration: none;
	color: var(--color-heading);
}

.entry-title a:hover {
	color: var(--color-link);
}

.entry-meta {
	font-size: .875rem;
	color: var(--color-text-muted);
}

.entry-content {
	line-height: 1.8;
}

.entry-footer {
	font-size: .875rem;
	color: var(--color-text-muted);
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
	margin-top: 1.5rem;
}

/* =========================================================
   PAGINAÇÃO
   ========================================================= */
.pagination,
.post-navigation {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.nav-links {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.page-numbers {
	display: inline-flex;
	gap: .35rem;
	align-items: center;
	flex-wrap: wrap;
}

.page-numbers a,
.page-numbers span {
	padding: .35rem .7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: .9rem;
	color: var(--color-text);
}

.page-numbers .current {
	background-color: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* =========================================================
   TABELAS
   ========================================================= */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: .95rem;
}

th, td {
	padding: .6rem .9rem;
	border: 1px solid var(--color-border);
	text-align: left;
}

th {
	background-color: var(--color-surface);
	font-weight: 600;
}

/* =========================================================
   BLOCKQUOTE / CODE
   ========================================================= */
blockquote {
	margin: 0 0 1.5rem;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--color-primary-muted);
	color: var(--color-text-muted);
	font-style: italic;
}

pre {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	overflow-x: auto;
	margin-bottom: 1.5rem;
}

code {
	font-family: var(--font-mono);
	font-size: .875em;
	background-color: var(--color-surface);
	padding: .15em .4em;
	border-radius: 3px;
}

pre code {
	background: none;
	padding: 0;
}

/* =========================================================
   404
   ========================================================= */
.error-404 {
	text-align: center;
	padding: 5rem 0;
}

/* =========================================================
   ALINHAMENTOS GUTENBERG
   ========================================================= */
.entry-content .alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.entry-content .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.entry-content .aligncenter { margin-inline: auto; display: block; }
.entry-content .alignwide  { max-width: calc(var(--size-max-width) + 6rem); margin-inline: auto; }
.entry-content .alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); }

/* =========================================================
   RESPONSIVIDADE BASE
   ========================================================= */
@media (max-width: 768px) {
	:root {
		--size-padding-x: 1rem;
		--section-padding: 3rem;
	}

	.nav-links {
		flex-direction: column;
		gap: .5rem;
	}

	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		margin: 0 0 1rem;
	}
}