/*
Theme Name: TilBuci
Author: Lucas Junqueira (lucas@ciclope.art.br)
Description: Tema base do site TilBuci.
Version: 1.1.2
Requires at least: 6.0
Tested up to: 7.1.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tilbuci
Tags: blog, custom-menu, featured-images, translation-ready, full-width-template
*/

/* ==========================================================================
   RESET DE LAYOUT
   Normaliza a exibição em todos os navegadores (reset + base).
   ========================================================================== */

/* 1. Use uma compreensão mais intuitiva de box-sizing em todo o site. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remove margens e paddings padrão do navegador. */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*
 * Ênfase no conteúdo: o reset acima aplica "font: inherit" a em e strong
 * (e também a i e b), o que remove o itálico e o negrito. Aqui os dois
 * voltam ao comportamento esperado, inclusive no conteúdo do editor de
 * blocos (Gutenberg).
 */
em,
i {
	font-style: italic;
}

strong,
b {
	font-weight: 700;
}

/* 3. Elementos HTML5 passam a se comportar como blocos por padrão. */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

/* 4. Imagens e mídias fluem dentro do contêiner e não ultrapassam. */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 5. Remoção de estilos padrão de lista. */
ol,
ul {
	list-style: none;
}

/* 6. Formulários herdam a tipografia do elemento pai. */
input,
button,
textarea,
select {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
}

button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
	outline: none;
}

/* 7. Links sem decoração nem cor herdada do navegador. */
a {
	color: inherit;
	text-decoration: none;
	background: transparent;
}

/* 8. Citações e code com tipografia própria e sem sangria forçada. */
blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: "";
	content: none;
}

code,
kbd,
samp,
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* 9. Tabelas limpas (sem bordas duplicadas nem espaçamento estranho). */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 10. Linha de base tipográfica consistente em todos os navegadores. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	line-height: 1.5;
	scroll-behavior: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	line-height: 1;
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

/* 11. Fundo e área de rolagem visíveis em navegadores com scrollbar overlay. */
body {
	background: #fff;
	color: #000;
}

/* ==========================================================================
   BASE — TilBuci
   ========================================================================== */

:root {
	--tilbuci-white: #fff;
	--tilbuci-dark: #111;
	--tilbuci-ease: cubic-bezier(0.645, 0.045, 0.355, 1);

	/*
	 * Paleta padrão das páginas e posts: fundo preto, texto e títulos
	 * brancos e links laranja (sempre sublinhados).
	 */
	--tilbuci-bg: #000000;
	--tilbuci-text: #ffffff;
	--tilbuci-link: #ff9900;

	/*
	 * Fonte principal do tema. A Roboto é carregada pelo Google Fonts em
	 * functions.php (handle "tilbuci-fonts"); as demais famílias são o
	 * fallback para quando a fonte externa não estiver disponível.
	 */
	--tilbuci-font: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica,
		Arial, sans-serif, "Apple Color Emoji";
}

body {
	font-family: var(--tilbuci-font);
	line-height: 1.6;
	background: var(--tilbuci-bg);
	color: var(--tilbuci-text);
}

/* Utilidade de acessibilidade. */
.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;
	top: 8px;
	left: 8px;
	z-index: 99999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--tilbuci-white);
	color: var(--tilbuci-dark);
	font-weight: 600;
}

/* ==========================================================================
   TOPO (header) — marca à esquerda, menu à direita
   ========================================================================== */

.tilbuci-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	padding: 18px clamp(16px, 4vw, 48px);
	color: var(--tilbuci-white);
	pointer-events: none;
}

body.admin-bar .tilbuci-header {
	top: 32px;
}

.tilbuci-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: auto;
}

.tilbuci-header__brand {
	margin: 0;
}

.tilbuci-header__brand a {
	color: var(--tilbuci-white);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   MARCA — logo em imagem
   -------------------------------------------------------------------------- */

/*
 * A logo é exibida com 3× a altura do antigo texto do título (1 line-height
 * do contexto tipográfico da marca) e mantém a proporção da imagem.
 */
.tilbuci-brand__logo {
	display: block;
	height: 4.8em;
	width: auto;
}

/* Mantém o link alinhado com a imagem, sem o espaço da linha de base. */
.tilbuci-header__brand a,
.tilbuci-mini-header__brand a {
	display: inline-block;
}

/*
 * Menu configurado na página "Menu", exibido em linha ao lado da marca.
 * O espaço entre a marca e os itens do menu é curto de propósito.
 */
.tilbuci-header__start {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.4vw, 22px);
	min-width: 0;
}

.tilbuci-header__nav {
	min-width: 0;
}

.tilbuci-header__nav-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px clamp(12px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tilbuci-header__nav-list a {
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tilbuci-header__nav-list a:hover,
.tilbuci-header__nav-list a:focus {
	opacity: 0.6;
}

.tilbuci-header__menu {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--tilbuci-white);
	cursor: pointer;
	font: inherit;
	transition: opacity 0.25s ease;
}

.tilbuci-header__menu:hover {
	opacity: 0.7;
}

.tilbuci-header__menu-bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 12px;
}

.tilbuci-header__menu-bars span {
	display: block;
	height: 1px;
	width: 100%;
	background: currentColor;
}

/* ==========================================================================
   MENU OVERLAY
   ========================================================================== */

.tilbuci-menu {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 6vw, 64px);
	background: var(--tilbuci-white);
	color: var(--tilbuci-dark);
	transform: translateY(-101%);
	transition: transform 0.55s var(--tilbuci-ease);
	visibility: hidden;
	overflow-y: auto;
}

.tilbuci-menu.is-open {
	transform: none;
	visibility: visible;
}

.tilbuci-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tilbuci-menu__brand {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}

.tilbuci-menu__close {
	position: relative;
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	cursor: pointer;
}

.tilbuci-menu__close span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 24px;
	height: 1px;
	background: var(--tilbuci-dark);
}

.tilbuci-menu__close span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.tilbuci-menu__close span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.tilbuci-menu__nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}

.tilbuci-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tilbuci-menu__list li + li {
	margin-top: 8px;
}

.tilbuci-menu__list a {
	display: inline-block;
	padding: 4px 0;
	color: var(--tilbuci-dark);
	font-size: clamp(1.5rem, 5vw, 3rem);
	font-weight: 300;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tilbuci-menu__list a:hover,
.tilbuci-menu__list a:focus {
	opacity: 0.45;
}

.tilbuci-menu__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tilbuci-menu__list .sub-menu a {
	font-size: clamp(0.9rem, 2vw, 1rem);
	letter-spacing: 0.08em;
}

body.menu-is-open {
	overflow: hidden;
}

/* ==========================================================================
   HOME — slides de tela cheia (destaques)
   ========================================================================== */

.tilbuci-home {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--tilbuci-bg);
	color: var(--tilbuci-text);
}

.tilbuci-home__slides,
.tilbuci-slide {
	position: absolute;
	inset: 0;
}

.tilbuci-slide {
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.9s ease;
}

.tilbuci-slide.is-active {
	z-index: 2;
	opacity: 1;
	pointer-events: auto;
}

.tilbuci-slide__media,
.tilbuci-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.tilbuci-slide__img {
	object-fit: cover;
	object-position: center;
}

.tilbuci-slide--noimg {
	background: linear-gradient(135deg, #262626 0%, var(--tilbuci-dark) 100%);
}

/* Vinhetas de legibilidade (gradientes do topo e da base). */
.tilbuci-slide__shade {
	position: absolute;
	left: 0;
	width: 100%;
	height: 26vh;
	z-index: 3;
	pointer-events: none;
}

.tilbuci-slide__shade--top {
	top: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

.tilbuci-slide__shade--bottom {
	bottom: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Base do slide: informações à esquerda e redes sociais à direita.
   No desktop os títulos ficam um pouco mais baixos que antes
   (bottom: clamp(28px, 8vh, 90px) -> clamp(20px, 5.5vh, 62px)). */
.tilbuci-slide__bottom {
	position: absolute;
	left: clamp(20px, 5vw, 80px);
	right: clamp(20px, 5vw, 80px);
	bottom: clamp(20px, 5.5vh, 62px);
	z-index: 4;
}

/* Informações do projeto no canto inferior esquerdo. */
.tilbuci-slide__body {
	width: 100%;
}

/* Título e redes sociais na mesma linha, alinhados pela base do título. */
.tilbuci-slide__headline {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 56px);
}

.tilbuci-slide__title {
	flex: 0 1 auto;
	max-width: min(680px, 60vw);
}

/* Redes sociais no canto inferior direito, alinhadas à base do título. */
.tilbuci-slide__social {
	flex: 0 0 auto;
}

.tilbuci-slide__social-list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tilbuci-slide__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tilbuci-slide__social-link svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tilbuci-slide__social-link:hover,
.tilbuci-slide__social-link:focus {
	opacity: 0.6;
}

/* O título aparece como digitado (sem caixa alta), em weight 400, e com
   80% do tamanho anterior: clamp(1.9rem, 4.4vw, 4rem) -> 80%. */
.tilbuci-slide__title {
	margin: 0;
	color: var(--tilbuci-text);
	font-size: clamp(1.52rem, 3.52vw, 3.2rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.05em;

	/*
	 * Contorno preto fino (1px) ao redor do texto, para manter a
	 * legibilidade sobre as fotos dos slides. Feito com text-shadow em 8
	 * direções: assim o contorno fica por fora das letras e não reduz o
	 * peso do texto claro (o que aconteceria com -webkit-text-stroke).
	 * O valor é herdado pelo link do título, que é o dono do texto.
	 */
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000,
		-1px 0 0 #000,
		1px 0 0 #000,
		0 -1px 0 #000,
		0 1px 0 #000;
}

/*
 * Ícone e texto são itens de flex: assim o ícone fica centralizado na
 * vertical com o bloco de texto e, quando o título quebra em mais de uma
 * linha, as linhas seguintes alinham com o início do texto (e não com o
 * ícone). O espaço entre os dois vem do "gap".
 */
.tilbuci-slide__title-link {
	display: flex;
	align-items: center;
	gap: 0.3em;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

/*
 * Ícone de link no início do título. Como fica dentro do mesmo <a>, o
 * clique no ícone também leva ao post. O tamanho acompanha a fonte do
 * título (unidade em) e o espaçamento até o texto vem do "gap" do link.
 */
.tilbuci-slide__title-icon {
	display: block;
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	color: inherit;
}

/* Bloco de texto do título: pode encolher e quebrar em várias linhas. */
.tilbuci-slide__title-text {
	min-width: 0;
}

.tilbuci-slide__title-link:hover,
.tilbuci-slide__title-link:focus-visible {
	opacity: 0.7;
}

.tilbuci-slide__desc {
	margin: 14px 0 0;
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
	font-weight: 300;
	letter-spacing: 0.02em;
}

.tilbuci-slide.is-active .tilbuci-slide__title,
.tilbuci-slide.is-active .tilbuci-slide__desc {
	animation: tilbuci-fade-up 0.8s var(--tilbuci-ease) 0.2s both;
}

/* Setas laterais (navegação entre posts da categoria). */
.tilbuci-home__ui {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.tilbuci-home__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.18);
	color: var(--tilbuci-white);
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.tilbuci-home__arrow:hover,
.tilbuci-home__arrow:focus-visible {
	border-color: var(--tilbuci-white);
	background: rgba(255, 255, 255, 0.16);
}

.tilbuci-home__arrow--prev {
	left: clamp(12px, 2.5vw, 34px);
}

.tilbuci-home__arrow--next {
	right: clamp(12px, 2.5vw, 34px);
}

/* Estado sem destaques (apenas para quem edita o site). */
.tilbuci-home__empty {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.tilbuci-admin-hint {
	max-width: 540px;
	margin: 0;
	padding: 22px 24px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
	text-align: center;
	border: 1px dashed rgba(255, 255, 255, 0.35);
}

@keyframes tilbuci-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   RESPONSIVO / ACESSIBILIDADE
   ========================================================================== */

@media screen and (max-width: 763px) {
	.tilbuci-header {
		padding: 14px 18px;
	}

	/* O menu do topo (ao lado da marca) aparece apenas em computadores. */
	.tilbuci-header__nav {
		display: none;
	}

	/* Redes sociais em uma linha nos celulares. */
	.tilbuci-aside__social-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 20px;
	}

	body.admin-bar .tilbuci-header {
		top: 46px;
	}

	.tilbuci-slide__bottom {
		left: 20px;
		right: 20px;
		bottom: 136px;
	}

	.tilbuci-slide__headline {
		flex-direction: column;
		align-items: flex-start;
	}

	.tilbuci-slide__title {
		max-width: none;
	}

	/* Ícones abaixo do título, alinhados à esquerda. */
	.tilbuci-slide__social {
		align-self: flex-start;
	}

	.tilbuci-slide__social-list {
		justify-content: flex-start;
	}

	/* Sobe o degradê escuro da base para acompanhar o título. */
	.tilbuci-slide__shade--bottom {
		height: 58vh;
	}

	.tilbuci-slide__title {
		font-size: clamp(1.2rem, 5.6vw, 1.76rem);
	}

	.tilbuci-home__arrow {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   PÁGINA MODELO — MENU
   ========================================================================== */

/* Topo das páginas e posts (marca + acesso ao menu), sem overlay:
   fundo preto e texto branco. */
.tilbuci-mini-header {
	padding: 18px clamp(16px, 4vw, 48px);
	background: var(--tilbuci-bg);
	color: var(--tilbuci-text);
}

.tilbuci-mini-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Espaço curto entre a marca e os itens do menu. */
.tilbuci-mini-header__start {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.4vw, 22px);
	min-width: 0;
}

/* Ícone do menu, alinhado à direita: branco. */
.tilbuci-mini-header__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	color: var(--tilbuci-text);
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.tilbuci-mini-header__menu:hover,
.tilbuci-mini-header__menu:focus {
	opacity: 0.6;
}

.tilbuci-mini-header__brand {
	margin: 0;
}

.tilbuci-mini-header__brand a {
	color: var(--tilbuci-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	text-decoration: none;
}

.tilbuci-mini-header__back {
	color: var(--tilbuci-text);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tilbuci-mini-header__back:hover,
.tilbuci-mini-header__back:focus {
	opacity: 0.5;
}

/* Corpo da página Menu: grade de duas colunas. */
.tilbuci-menu-page {
	min-height: 100vh;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 64px) 90px;
	background: var(--tilbuci-bg);
	color: var(--tilbuci-text);
}

.tilbuci-menu-page__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(24px, 4vw, 60px);
}

/* Coluna da esquerda: título, links das seções e redes sociais. */
.tilbuci-menu-page__links {
	grid-column: 1 / 4;
	align-self: start;
}

/* Texto de introdução opcional (só é renderizado quando preenchido). */
.tilbuci-menu-page__intro {
	max-width: 46ch;
	margin: 0 0 clamp(32px, 6vh, 64px);
}

/* Aside compartilhado (Menu e Texto): links das seções + redes sociais. */
.tilbuci-aside__nav {
	margin: 0;
}

.tilbuci-aside__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tilbuci-aside__list li + li {
	margin-top: 4px;
}

/* Itens do menu lateral: exibidos como digitados (sem caixa alta) e em
   weight 400. */
.tilbuci-aside__list a {
	display: inline-block;
	padding: 6px 0;
	color: inherit;
	font-size: clamp(1.1rem, 2vw, 1.55rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.tilbuci-aside__list a:hover,
.tilbuci-aside__list a:focus {
	opacity: 0.55;
}

.tilbuci-aside__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tilbuci-aside__list .sub-menu a {
	font-size: 0.85rem;
	letter-spacing: 0.12em;
}

.tilbuci-aside__social {
	margin-top: clamp(40px, 8vh, 90px);
}

/* Redes sociais empilhadas (uma por linha) no desktop. */
.tilbuci-aside__social-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tilbuci-aside__social-list a {
	color: inherit;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tilbuci-aside__social-list a:hover,
.tilbuci-aside__social-list a:focus {
	opacity: 0.45;
}

.tilbuci-aside__social-list li {
	display: inline-flex;
}

.tilbuci-aside__empty {
	max-width: 340px;
	margin: 0;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.5;
	border: 1px dashed rgba(255, 255, 255, 0.3);
}

/* Coluna da direita: listagem gráfica dos destaques. */
.tilbuci-menu-page__projects {
	grid-column: 4 / 13;
}

.tilbuci-menu-page__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px);
}

.tilbuci-menu-card {
	display: block;
	color: var(--tilbuci-text);
	text-decoration: none;
}

.tilbuci-menu-card__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.06);
}

.tilbuci-menu-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--tilbuci-ease);
}

.tilbuci-menu-card:hover .tilbuci-menu-card__thumb img {
	transform: scale(1.04);
}

.tilbuci-menu-card__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
}

.tilbuci-menu-card__meta {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/*
 * Ícone de link no lugar da antiga numeração. O tamanho acompanha a
 * mesma escala do título do card.
 */
.tilbuci-menu-card__icon {
	flex: 0 0 auto;
	font-size: clamp(0.95rem, 1.4vw, 1.25rem);
	width: 0.6em;
	height: 0.6em;
	color: currentColor;
}

.tilbuci-menu-card__title {
	flex: 1;
	color: var(--tilbuci-text);
	font-size: clamp(0.95rem, 1.4vw, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
}


.tilbuci-menu-page__empty {
	max-width: 520px;
	margin: 0;
	padding: 22px 24px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	line-height: 1.6;
	border: 1px dashed rgba(255, 255, 255, 0.3);
}

/* Responsivo da página Menu. */
@media screen and (max-width: 1100px) {
	.tilbuci-menu-page__grid {
		display: block;
	}

	.tilbuci-menu-page__projects {
		margin-top: clamp(40px, 8vh, 80px);
	}
}

@media screen and (max-width: 680px) {
	.tilbuci-mini-header {
		padding: 14px 18px;
	}

	.tilbuci-menu-page {
		padding: 20px 18px 70px;
	}

	.tilbuci-menu-page__cards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   HOME — capa vertical (mobile)
   ========================================================================== */

.tilbuci-slide__img--mobile {
	display: none;
}

@media screen and (max-width: 763px) {
	.tilbuci-slide--has-mobile .tilbuci-slide__img--desktop {
		display: none;
	}

	.tilbuci-slide--has-mobile .tilbuci-slide__img--mobile {
		display: block;
	}
}

/* ==========================================================================
   CONTEÚDO LIVRE (Gutenberg) — tipografia base
   ========================================================================== */

.tilbuci-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: inherit;
}

.tilbuci-content > * + * {
	margin-top: 1.25em;
}

/*
 * Parágrafos: 0.2em de espaço abaixo quando o elemento seguinte não é
 * outro parágrafo. Entre dois parágrafos consecutivos o espaçamento vem
 * apenas de "> * + *", então o margin-bottom é zerado nesse caso.
 */
.tilbuci-content p {
	margin-bottom: 0.2em;
}

.tilbuci-content p + p {
	margin-bottom: 0;
}

.tilbuci-content h1,
.tilbuci-content h2,
.tilbuci-content h3,
.tilbuci-content h4,
.tilbuci-content h5,
.tilbuci-content h6 {
	margin: 0;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--tilbuci-text);
	text-transform: none;
}

/*
 * Espaço acima dos títulos de seção. Como estas regras vêm depois do
 * "margin: 0" aplicado a todos os títulos, elas prevalecem e o valor
 * também substitui o espaçamento genérico de "> * + *".
 */
.tilbuci-content h2 {
	margin-top: 0.4em;
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.tilbuci-content h3 {
	margin-top: 0.2em;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.tilbuci-content ul {
	padding-left: 1.4em;
	list-style: disc;
}

.tilbuci-content ol {
	padding-left: 1.4em;
	list-style: decimal;
}

.tilbuci-content li + li {
	margin-top: 0.4em;
}

.tilbuci-content a {
	color: var(--tilbuci-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tilbuci-content a:hover,
.tilbuci-content a:focus {
	text-decoration: none;
}

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

/*
 * iframes (vídeos incorporados pelo editor): um iframe não tem proporção
 * intrínseca, então "height: auto" o reduz à altura padrão do navegador
 * (~150px). Por isso a proporção 16:9 é aplicada como padrão. Os embeds
 * que o WordPress já envolve com proporção própria têm regra mais
 * específica e continuam prevalecendo (ver 'responsive-embeds' em
 * functions.php).
 */
.tilbuci-content iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* Figuras sem margens superior e inferior (o espaçamento vem do
   espaçamento entre blocos do conteúdo). */
.tilbuci-content figure {
	margin: 0;
}

.tilbuci-content figcaption {
	margin-top: 0.6em;
	font-size: 0.85rem;
	opacity: 0.7;
}

.tilbuci-content blockquote {
	margin: 1.6em 0;
	padding-left: 1.2em;
	border-left: 2px solid currentColor;
	font-style: italic;
}

.tilbuci-content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tilbuci-content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

/* ==========================================================================
   PÁGINA MODELO — TEXTO
   ========================================================================== */

.tilbuci-text-page {
	min-height: 100vh;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 64px) 90px;
	background: var(--tilbuci-page-bg, var(--tilbuci-bg));
	color: var(--tilbuci-page-color, var(--tilbuci-text));
}

.tilbuci-text-page__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(24px, 4vw, 60px);
}

.tilbuci-text-page__aside {
	grid-column: 1 / 4;
	align-self: start;
}

.tilbuci-text-page__content {
	grid-column: 4 / 13;
}

.tilbuci-text-page__title {
	margin: 0 0 clamp(24px, 4vh, 48px);
	color: var(--tilbuci-text);
	font-size: clamp(2rem, 4.5vw, 4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
}

@media screen and (max-width: 1100px) {
	.tilbuci-text-page__grid {
		display: block;
	}

	.tilbuci-text-page__aside {
		margin-bottom: clamp(36px, 7vh, 72px);
	}
}

/* ==========================================================================
   PÁGINA MODELO — MÍNIMO
   ========================================================================== */

.tilbuci-minimal-body {
	margin: 0;
	background: var(--tilbuci-min-bg, var(--tilbuci-bg));
	color: var(--tilbuci-min-text, var(--tilbuci-text));
}

.tilbuci-minimal {
	min-height: 100vh;
	background: var(--tilbuci-min-bg, var(--tilbuci-bg));
	color: var(--tilbuci-min-text, var(--tilbuci-text));
}

/* Área do conteúdo: largura em % da página, centralizada. */
.tilbuci-minimal__inner {
	width: var(--tilbuci-min-width, 60%);
	max-width: 100%;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 72px) 0;
}

/* Títulos h1 a h3 com cor própria. */
.tilbuci-minimal__content h1,
.tilbuci-minimal__content h2,
.tilbuci-minimal__content h3 {
	color: var(--tilbuci-min-heading, var(--tilbuci-text));
	font-weight: 400;
	text-transform: none;
}

/* Links laranja, sempre sublinhados, sem sublinhado no mouseover. */
.tilbuci-minimal__content a {
	color: var(--tilbuci-min-link, var(--tilbuci-link));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tilbuci-minimal__content a:hover,
.tilbuci-minimal__content a:focus {
	text-decoration: none;
}

/* Dispositivos móveis: largura própria (em % da tela). */
@media screen and (max-width: 763px) {
	.tilbuci-minimal__inner {
		width: var(--tilbuci-min-width-mobile, 90%);
	}
}

/* ==========================================================================
   PÁGINA MODELO — LISTA DE POSTS
   ========================================================================== */

.tilbuci-post-list {
	min-height: 100vh;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 64px) 90px;
	background: var(--tilbuci-bg);
	color: var(--tilbuci-text);
}

.tilbuci-post-list__title {
	margin: 0;
	color: var(--tilbuci-text);
	font-size: clamp(2rem, 4.5vw, 4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
}

.tilbuci-post-list__intro {
	max-width: 70ch;
	margin-top: 18px;
}

.tilbuci-post-list__hero {
	margin: clamp(28px, 5vh, 64px) 0 0;
}

.tilbuci-post-list__hero img {
	display: block;
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
}

.tilbuci-post-list__items {
	margin-top: clamp(28px, 5vh, 60px);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tilbuci-post-list__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.tilbuci-post-list__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px;
	padding: clamp(18px, 3vh, 32px) 0;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tilbuci-post-list__link:hover,
.tilbuci-post-list__link:focus {
	opacity: 0.6;
}

/* Item com imagem de listagem: miniatura + texto + seta. */
.tilbuci-post-list__link--has-thumb {
	grid-template-columns: auto 1fr auto;
}

.tilbuci-post-list__item-thumb {
	display: block;
	width: clamp(96px, 14vw, 160px);
	overflow: hidden;
}

.tilbuci-post-list__item-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Celulares: a imagem vai para cima (ocupando a linha inteira) e o texto
 * embaixo, com a seta ainda alinhada ao texto. Em computadores a
 * exibição em colunas (miniatura + texto + seta) permanece.
 */
@media screen and (max-width: 763px) {
	.tilbuci-post-list__link--has-thumb {
		grid-template-columns: 1fr auto;
	}

	.tilbuci-post-list__item-thumb {
		grid-column: 1 / -1;
		width: 100%;
	}
}

.tilbuci-post-list__item-title {
	margin: 0;
	color: var(--tilbuci-text);
	font-size: clamp(1.2rem, 2.2vw, 1.9rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.tilbuci-post-list__item-excerpt {
	max-width: 70ch;
	margin: 0.5em 0 0;
	font-size: 0.95rem;
	font-weight: 300;
	opacity: 0.7;
}

.tilbuci-post-list__item-arrow {
	transition: transform 0.25s ease;
}

.tilbuci-post-list__link:hover .tilbuci-post-list__item-arrow {
	transform: translateX(5px);
}

.tilbuci-post-list__empty {
	max-width: 520px;
	margin: 0;
	padding: 22px 24px;
	font-size: 15px;
	line-height: 1.6;
	border: 1px dashed rgba(255, 255, 255, 0.3);
}

/* Paginação. */
.tilbuci-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: clamp(32px, 6vh, 64px);
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.tilbuci-pagination__item {
	display: inline-flex;
}

.tilbuci-pagination a,
.tilbuci-pagination > .tilbuci-pagination__item > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: inherit;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tilbuci-pagination a:hover,
.tilbuci-pagination a:focus,
.tilbuci-pagination .current {
	border-color: var(--tilbuci-text);
	background: var(--tilbuci-text);
	color: var(--tilbuci-bg);
}

/* ==========================================================================
   MODELO PADRÃO DE POST (single)
   ========================================================================== */

.tilbuci-single {
	background: var(--tilbuci-bg);
	color: var(--tilbuci-text);
}

.tilbuci-single__hero {
	margin: 0;
}

/* Altura do destaque inicial: 60% da altura anterior (85vh -> 51vh). */
.tilbuci-single__hero img {
	display: block;
	width: 100%;
	max-height: 51vh;
	object-fit: cover;
}

.tilbuci-single__inner {
	max-width: min(820px, 90vw);
	margin: 0 auto;
	padding: clamp(28px, 6vh, 72px) 20px 90px;
}

.tilbuci-single__title {
	margin: 0;
	color: var(--tilbuci-text);
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: none;
}

.tilbuci-single .tilbuci-content {
	margin-top: clamp(28px, 5vh, 56px);
}

/* ==========================================================================
   LISTA DE POSTS — menu à esquerda (como no modelo "Texto")
   ========================================================================== */

.tilbuci-post-list__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(24px, 4vw, 60px);
}

.tilbuci-post-list__aside {
	grid-column: 1 / 4;
	align-self: start;
}

.tilbuci-post-list__main {
	grid-column: 4 / 13;
	min-width: 0;
}

@media screen and (max-width: 1100px) {
	.tilbuci-post-list__grid {
		display: block;
	}

	.tilbuci-post-list__aside {
		margin-bottom: clamp(36px, 7vh, 72px);
	}
}

/* ==========================================================================
   FORMULÁRIOS — SimpleKit Forms
   ========================================================================== */

.simplekitforms-form-block {
	max-width: none !important;
	background: none !important;
}

.simplekitforms-form-block .sf-submit {
	background: none !important;
	color: var(--tilbuci-text) !important;
	border: solid 1px var(--tilbuci-text) !important;
	text-transform: uppercase !important;
}

.simplekitforms-form-block .sf-submit:hover {
	background: var(--tilbuci-text) !important;
	color: var(--tilbuci-bg) !important;
}

/* ==========================================================================
   LINKS — padrão global
   ========================================================================== */

/*
 * Padrão do tema: link laranja e sempre sublinhado, perdendo o sublinhado
 * no mouseover/foco. Componentes que declaram estilo próprio (marca, menu
 * do topo, menu lateral, cards, controles e títulos dos slides) continuam
 * valendo, pois têm especificidade maior ou regra posterior.
 */
a {
	color: var(--tilbuci-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	text-decoration: none;
}