/*
Theme Name: Blog do Mário Flávio
Author: Tábula Digital / Fábio Belo
Author URI: https://tabuladigital.com.br
Description: Tema responsivo do Blog do Mário Flávio, com cache editorial e anúncios dinâmicos.
Version: 3.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: bmarioflavio
Tags: blog, news, two-columns, custom-logo, custom-menu, featured-images
*/

:root {
	--color-brand: #121330;
	--color-brand-hover: #262952;
	--color-text: #24263c;
	--color-muted: #626473;
	--color-border: #dedee6;
	--color-surface: #f6f6f9;
	--color-background: #fff;
	--space-1: .5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--radius: .25rem;
	--container: 1200px;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}
a { color: var(--color-brand); text-underline-offset: .18em; }
a:hover { color: var(--color-brand-hover); }
button, input, select, textarea { font: inherit; }
button, input[type="submit"] { cursor: pointer; }
img, video { max-width: 100%; height: auto; }
iframe, embed, object { max-width: 100%; }
figure { max-width: 100%; margin-inline: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #547ac6; outline-offset: 4px; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--color-brand); overflow-wrap: anywhere; }
p { margin: 0 0 var(--space-2); }
.container { width: min(var(--container), calc(100% - 2rem)); margin-inline: auto; }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	z-index: 100000;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	padding: .75rem 1rem;
	background: #fff;
	color: var(--color-brand);
}

/* Header and navigation. */
.site-header { background: var(--color-brand); color: #fff; }
.header-inner { display: flex; align-items: center; gap: var(--space-4); min-height: 145px; }
.site-branding { min-width: 0; margin-right: auto; }
.brand, .custom-logo-link { display: block; line-height: 0; }
.brand-image, .custom-logo { display: block; width: auto; max-width: 100%; height: 120px; object-fit: contain; }
.header-portrait { display: block; align-self: flex-end; width: auto; height: 145px; }
.header-portrait img { display: block; width: auto; height: 100%; max-width: none; }
.site-navigation { position: relative; z-index: 5; }
.site-navigation ul { list-style: none; margin: 0; padding: 0; }
.site-navigation .menu { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-navigation li { position: relative; }
.site-navigation a { display: block; padding: .65rem .25rem; color: #fff; text-decoration: none; }
.site-navigation a:hover, .site-navigation .current-menu-item > a { text-decoration: underline; }
.site-navigation .sub-menu { display: none; position: absolute; min-width: 180px; right: 0; padding: var(--space-1); background: var(--color-brand); }
.site-navigation li:hover > .sub-menu, .site-navigation li:focus-within > .sub-menu { display: block; }
.menu-toggle { border: 1px solid #8b8c9a; border-radius: var(--radius); padding: .4rem .7rem; background: transparent; color: #fff; }
.tracking-frame { display: none; visibility: hidden; border: 0; }

/* All templates share the same columns and spacing. */
.site-layout { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr); gap: var(--space-5); padding-block: var(--space-4); align-items: start; }
.site-main, .site-sidebar { min-width: 0; }
.page-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.page-header h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.archive-description { margin-top: var(--space-2); color: var(--color-muted); }
.post-card { padding-block: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); text-align: center; }
.entry-title { margin: 0 0 .75rem; font-size: clamp(1.65rem, 3vw, 2.2rem); font-weight: 750; letter-spacing: -.025em; }
.entry-title a { text-decoration: none; }
.entry-title a:hover { text-decoration: underline; }
.entry-meta { color: var(--color-muted); font-size: .8rem; margin-bottom: var(--space-3); }
.post-thumbnail { display: block; margin-block: var(--space-3); }
.entry-image { display: block; margin-inline: auto; width: auto; border-radius: var(--radius); }
.entry-summary { text-align: left; color: var(--color-muted); overflow-wrap: anywhere; }
.button, .page-numbers, .page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .6rem 1rem;
	border: 1px solid var(--color-brand);
	border-radius: var(--radius);
	background: var(--color-brand);
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.button:hover, .button:focus-visible { background: var(--color-brand-hover); color: #fff; }
.read-more { margin-top: var(--space-1); }

/* Reading styles, editor blocks and legacy alignment classes. */
.single-entry { padding-block: var(--space-3) var(--space-4); }
.single-entry .entry-header { text-align: center; margin-bottom: var(--space-4); }
.single-entry .entry-title { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.entry-content { font-size: 1.0625rem; line-height: 1.8; overflow-wrap: anywhere; }
.entry-content > :first-child { margin-top: 0; }
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content img { height: auto; }
.entry-content iframe { max-width: 100%; }
.entry-content blockquote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-brand); background: var(--color-surface); }
.entry-content pre { overflow-x: auto; padding: var(--space-2); background: var(--color-surface); }
.entry-content table { max-width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--color-border); padding: .5rem; }
.wp-block-table { overflow-x: auto; }
.aligncenter { display: block; clear: both; margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--space-3) var(--space-2) 0; }
.alignright { float: right; margin: 0 0 var(--space-2) var(--space-3); }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: .85rem; color: var(--color-muted); }
.gallery { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gallery-item { flex: 1 1 180px; margin: 0; }
.gallery-caption { font-size: .85rem; }
.sticky { border-top: 3px solid var(--color-brand); }

/* Search, widgets and dynamic advertising. */
.site-sidebar { display: grid; gap: var(--space-4); padding-top: var(--space-3); }
.search-form label { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.search-fields { display: flex; gap: var(--space-1); }
.search-fields input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #a5a6b1; border-radius: var(--radius); padding: .5rem .75rem; color: var(--color-text); background: #fff; }
.widget { overflow-wrap: anywhere; }
.widget-title { margin: 0 0 var(--space-2); font-size: 1.25rem; }
.widget img { display: block; margin-inline: auto; }
.widget ul, .widget ol { padding-left: 1.25rem; }
.widget li + li { margin-top: var(--space-1); }
.ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; overflow: hidden; margin-block: var(--space-3); }
.ad-slot-header { margin: 0; padding: var(--space-2); background: var(--color-surface); }
.ad-slot img { max-width: 100% !important; height: auto !important; }
.ad-slot > div { max-width: 100%; }

/* Pagination and footer. */
.pagination { margin-block: var(--space-4); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.page-numbers { background: #fff; color: var(--color-brand); min-width: 44px; }
.page-numbers.current, a.page-numbers:hover { background: var(--color-brand); color: #fff; }
.page-numbers.dots { border-color: transparent; }
.post-navigation { border-top: 1px solid var(--color-border); padding-block: var(--space-3); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: var(--space-3); }
.post-navigation .nav-links > div { flex: 1; overflow-wrap: anywhere; }
.post-navigation .nav-next { text-align: right; }
.page-links { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block: var(--space-3); }
.empty-state { padding-block: var(--space-3); }
.site-footer { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-block: var(--space-3); background: var(--color-surface); color: var(--color-muted); font-size: .8rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.footer-inner p { margin: 0; }

@media (max-width: 991px) {
	.header-inner { gap: var(--space-3); }
	.header-portrait { height: 120px; }
	.brand-image, .custom-logo { height: 95px; }
	.site-layout { gap: var(--space-3); }
}
@media (max-width: 767px) {
	.header-inner { flex-wrap: wrap; min-height: 94px; gap: var(--space-2); padding-block: .75rem; }
	.site-branding { max-width: calc(100% - 100px); }
	.brand-image, .custom-logo { height: auto; max-height: 70px; }
	.header-portrait { display: none; }
	.site-navigation { flex-basis: 100%; }
	.site-navigation .menu { display: flex; flex-direction: column; gap: .25rem; }
	.site-navigation .sub-menu { display: block; position: static; padding-left: var(--space-3); }
	.site-layout { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-3); }
	.site-sidebar { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
	.entry-title { letter-spacing: -.015em; }
	.footer-inner { flex-direction: column; text-align: center; }
	.alignleft, .alignright { float: none; display: block; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; }
}