/*
Theme Name: Butler Arquitetura
Author: Lucas Junqueira (lucas@ciclope.art.br)
Description: Tema base do site Butler Arquitetura.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1.2
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: butlerarq
Tags: architecture, blank, clean, starter
*/

/* ==========================================================================
  FONTES — Switzer (assets/font)
  Usa a fonte variável, que cobre todos os pesos. Os caminhos são
  relativos a este arquivo (raiz do tema).
  ========================================================================== */

@font-face {
font-family: "Switzer";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("assets/font/Switzer-Variable.woff2") format("woff2"),
	url("assets/font/Switzer-Variable.woff") format("woff"),
	url("assets/font/Switzer-Variable.ttf") format("truetype");
}

@font-face {
font-family: "Switzer";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("assets/font/Switzer-VariableItalic.woff2") format("woff2"),
	url("assets/font/Switzer-VariableItalic.woff") format("woff"),
	url("assets/font/Switzer-VariableItalic.ttf") format("truetype");
}

/* ==========================================================================
  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;
}

/* 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 — Butler Arquitetura
   ========================================================================== */

:root {
	--butlerarq-white: #fff;
	--butlerarq-dark: #111;
	--butlerarq-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
	--butlerarq-font: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Helvetica, Arial, sans-serif;
}

body {
	font-family: var(--butlerarq-font);
	line-height: 1.6;
	color: var(--butlerarq-dark);
	background: var(--butlerarq-white);
}

/* 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(--butlerarq-white);
	color: var(--butlerarq-dark);
	font-weight: 600;
}

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

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

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

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

.butlerarq-header__brand {
	margin: 0;
}

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

/* Menu configurado na página "Menu", exibido em linha ao lado do título. */
.butlerarq-header__start {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	min-width: 0;
}

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

/* Separador entre o título do site e o menu do topo. */
.butlerarq-header__sep {
	color: inherit;
	font-size: 12px;
	line-height: 1;
	opacity: 0.5;
}

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

.butlerarq-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.butlerarq-menu__list a {
	display: inline-block;
	padding: 4px 0;
	color: var(--butlerarq-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;
}

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

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

.butlerarq-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)
   ========================================================================== */

.butlerarq-home {
	position: relative;
	background: var(--butlerarq-dark);
	color: var(--butlerarq-white);
}

/* Área da imagem: mantém a altura de tela cheia. */
.butlerarq-home__stage {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

/* Texto do post exibido, abaixo da imagem (formato da página do post). */
.butlerarq-home__contents {
	background: var(--butlerarq-white);
	color: var(--butlerarq-dark);
}

.butlerarq-home__content {
	display: none;
}

.butlerarq-home__content.is-active {
	display: block;
}

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

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

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

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

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

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

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

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

.butlerarq-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. */
.butlerarq-slide__bottom {
	position: absolute;
	left: clamp(20px, 5vw, 80px);
	right: clamp(20px, 5vw, 80px);
	bottom: clamp(28px, 8vh, 90px);
	z-index: 4;
}

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

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

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

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

.butlerarq-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;
}

.butlerarq-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;
}

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

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

.butlerarq-slide__title {
	margin: 0;
	color: var(--butlerarq-white);
	font-size: clamp(1.425rem, 3.3vw, 3rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.butlerarq-slide__title-link {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

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

.butlerarq-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;
}

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

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

.butlerarq-home__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	pointer-events: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	transition: color 0.25s ease, opacity 0.25s ease;
}

.butlerarq-home__arrow:hover,
.butlerarq-home__arrow:focus-visible {
	color: var(--butlerarq-white);
}

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

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

.butlerarq-home__arrow.is-disabled {
	opacity: 0.22;
	pointer-events: none;
}

/* Estado sem destaques (apenas para quem edita o site). */
.butlerarq-home__empty {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
}

.butlerarq-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 butlerarq-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

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

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

	/* O menu do topo (ao lado do título) aparece apenas em computadores. */
	.butlerarq-header__nav,
	.butlerarq-header__sep {
		display: none;
	}

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

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

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

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

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

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

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

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

	.butlerarq-slide__title {
		font-size: clamp(1.125rem, 5.25vw, 1.65rem);
	}

	.butlerarq-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 claro da página Menu (marca + voltar), sem overlay. */
.butlerarq-mini-header {
	padding: 18px clamp(16px, 4vw, 48px);
	background: var(--butlerarq-white);
	color: var(--butlerarq-dark);
}

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

.butlerarq-mini-header__start {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	min-width: 0;
}

.butlerarq-mini-header__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	color: var(--butlerarq-dark);
	text-decoration: none;
	transition: opacity 0.25s ease;
}

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

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

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

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

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

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

.butlerarq-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. */
.butlerarq-menu-page__links {
	grid-column: 1 / 4;
	align-self: start;
}

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

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

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

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

.butlerarq-aside__list a {
	display: inline-block;
	padding: 6px 0;
	color: inherit;
	font-size: clamp(1.1rem, 2vw, 1.55rem);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

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

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

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

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

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

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

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

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

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

/* Coluna da direita: listagem de posts em círculos (componente do modelo
   "Lista de posts" — .butlerarq-post-list__circles). */
.butlerarq-menu-page__projects {
	grid-column: 4 / 13;
}

/* Alinhada ao topo da coluna da esquerda, sem a margem do bloco de círculos. */
.butlerarq-menu-page__projects .butlerarq-post-list__circles {
	margin-top: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

.butlerarq-content h1,
.butlerarq-content h2,
.butlerarq-content h3,
.butlerarq-content h4,
.butlerarq-content h5,
.butlerarq-content h6 {
	margin: 0;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: inherit;
}

.butlerarq-content h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.butlerarq-content h3 {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

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

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

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

.butlerarq-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.butlerarq-content figure {
	margin: 1.6em 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.butlerarq-post-list__title {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 4rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

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

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

/* Listagem: imagens de destaque dos posts em círculos, até 3 por linha. */
.butlerarq-post-list__circles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 3.5vw, 48px);
	margin-top: clamp(28px, 5vh, 60px);
}

.butlerarq-post-list__circle-item {
	margin: 0;
}

.butlerarq-post-list__circle {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	color: #ffffff;
	text-decoration: none;
}

.butlerarq-post-list__circle-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Tons de cinza até o mouse passar por cima. */
	filter: grayscale(1);
	transition: filter 0.4s ease, transform 0.6s ease;
}

/* Véu escuro que garante a leitura do título sobre a imagem. */
.butlerarq-post-list__circle-veil {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.35);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Título do post, centralizado dentro do círculo. */
.butlerarq-post-list__circle-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16%;
	font-size: clamp(0.72rem, 1.15vw, 1.05rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: balance;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Mouse (ou foco) sobre a imagem: volta à cor e o título aparece. */
.butlerarq-post-list__circle:hover .butlerarq-post-list__circle-img,
.butlerarq-post-list__circle:focus-visible .butlerarq-post-list__circle-img {
	filter: grayscale(0);
	transform: scale(1.04);
}

.butlerarq-post-list__circle:hover .butlerarq-post-list__circle-veil,
.butlerarq-post-list__circle:focus-visible .butlerarq-post-list__circle-veil,
.butlerarq-post-list__circle:hover .butlerarq-post-list__circle-title,
.butlerarq-post-list__circle:focus-visible .butlerarq-post-list__circle-title {
	opacity: 1;
}

.butlerarq-post-list__circle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media screen and (max-width: 560px) {
	.butlerarq-post-list__circles {
		gap: 12px;
	}

	.butlerarq-post-list__circle-title {
		padding: 10%;
		font-size: clamp(0.65rem, 2.6vw, 0.85rem);
	}
}

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

/*
 * Coluna lateral de subcategorias (só existe quando a categoria da página
 * tem subcategorias). Mesma grade do modelo "Menu": links à esquerda e
 * conteúdo à direita.
 */
.butlerarq-post-list__layout {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(24px, 4vw, 60px);
}

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

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

/* O conteúdo usa a largura padrão de todas as páginas e posts
   (ver .butlerarq-single__inner). */

/* Subcategoria ativa. */
.butlerarq-post-list__aside .butlerarq-aside__list a.is-current {
	opacity: 0.45;
}

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

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

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

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

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

.butlerarq-pagination a:hover,
.butlerarq-pagination a:focus,
.butlerarq-pagination .current {
	border-color: var(--butlerarq-dark);
	background: var(--butlerarq-dark);
	color: var(--butlerarq-white);
}

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

.butlerarq-single {
	background: var(--butlerarq-white);
	color: var(--butlerarq-dark);
}

.butlerarq-single__hero {
	position: relative;
	margin: 0;
}

.butlerarq-single__hero img {
	display: block;
	width: 100%;
	max-height: 85vh;
	object-fit: cover;
}

/* Degradê escuro na base da imagem de destaque. */
.butlerarq-single__hero-shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Título sobreposto à imagem, no canto inferior esquerdo. */
.butlerarq-single__hero-content {
	position: absolute;
	left: clamp(20px, 5vw, 80px);
	right: clamp(20px, 5vw, 80px);
	bottom: clamp(28px, 6vh, 72px);
	z-index: 1;
}

.butlerarq-single__title--hero {
	color: var(--butlerarq-white);
}

/*
 * Largura da área de conteúdo: a mesma em todas as páginas e posts — a da
 * página do modelo "Menu" (e da "Lista de posts" com subcategorias). O hero
 * continua em largura total, pois o respiro é aplicado aqui, na coluna de
 * conteúdo, e não no <main>.
 */
.butlerarq-single__inner {
	max-width: none;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 64px) 90px;
}

/* Margens compactas no celular, como no modelo "Menu". */
@media screen and (max-width: 680px) {
	.butlerarq-single__inner {
		padding: 20px 18px 70px;
	}
}

/* Botões de ação do post: download (meta box "Download") e orçamento. */
.butlerarq-download {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: clamp(24px, 4vh, 40px) 0 0;
}

/* Botão de orçamento quando não há botão de download (fica sozinho). */
.butlerarq-quote {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: clamp(24px, 4vh, 40px) 0 0;
}

.butlerarq-download__button,
.butlerarq-quote__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border: 1px solid currentColor;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.butlerarq-download__button:hover,
.butlerarq-download__button:focus-visible,
.butlerarq-quote__button:hover,
.butlerarq-quote__button:focus-visible {
	opacity: 0.6;
}

/*
 * Blocos "Simple Kit Forms" nos posts: começam escondidos e são revelados
 * pelo botão "Solicite um orçamento". A classe é adicionada ao <html> por um
 * script inline apenas quando o conteúdo tem o bloco — sem JavaScript, o
 * formulário continua visível.
 *
 * O ":not(.is-revealed)" faz o bloco voltar ao display original do plugin ao
 * ser revelado, sem precisar redefinir a propriedade.
 */
html.butlerarq-form-hidden .butlerarq-content .simplekitforms-form-block:not(.is-revealed) {
	display: none;
}

.butlerarq-download__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.butlerarq-download__icon svg {
	display: block;
}

.butlerarq-single__title {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

.butlerarq-single__nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(40px, 7vh, 80px);
	padding-top: 24px;
	border-top: 1px solid rgba(17, 17, 17, 0.15);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.butlerarq-single__nav a {
	color: inherit;
	text-decoration: none;
}

.butlerarq-single__nav a:hover,
.butlerarq-single__nav a:focus {
	opacity: 0.6;
}

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

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

.simplekitforms-form-block .sf-submit {
	background: none !important;
	color: #000 !important;
	border: solid 1px #000 !important;
	text-transform: uppercase !important;
}

.simplekitforms-form-block .sf-submit:hover {
	background: #000 !important;
	color: #fff !important;
}

/* ==========================================================================
   INFORMAÇÕES DO PROJETO OU PRODUTO (post)
   ========================================================================== */

.butlerarq-project {
	margin-top: clamp(28px, 5vh, 56px);
}

/* Sem fotos: mesma largura do texto do post (herdada do container). */

.butlerarq-project__item {
	padding: 14px 0;
}

.butlerarq-project__item:first-child {
	padding-top: 0;
}

/* Linha fina preta separando uma informação da seguinte. */
.butlerarq-project__item + .butlerarq-project__item {
	border-top: 1px solid #000;
}

/*
 * Botão de download quando exibido junto das informações do projeto/produto:
 * segue a mesma cadência dos itens, com a linha fina acima.
 */
.butlerarq-project__info .butlerarq-download {
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid #000;
}

.butlerarq-project__info .butlerarq-download__button {
	padding: 10px 16px;
	font-size: 12px;
}

.butlerarq-project__label {
	font-weight: 600;
}

.butlerarq-project__value {
	margin-left: 4px;
}

.butlerarq-project__text {
	margin-top: 0.4em;
}

.butlerarq-project__text p {
	margin: 0 0 0.8em;
}

.butlerarq-project__text p:last-child {
	margin-bottom: 0;
}

/*
 * A coluna de imagens acompanha a altura da coluna de texto (a mais
 * alta define a linha). A imagem é posicionada fora do fluxo para não
 * influenciar essa altura e é contida integralmente no espaço.
 */
.butlerarq-project__images {
	position: relative;
	min-height: 0;
}

.butlerarq-project__image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.butlerarq-project__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

/* Com fotos: duas colunas ocupando a largura do corpo do texto
   (fotos empilhadas à esquerda; informações à direita). */
.butlerarq-project--with-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
}

@media screen and (max-width: 763px) {
	.butlerarq-project--with-images {
		grid-template-columns: 1fr;
	}

	/* Em uma coluna, a imagem volta ao fluxo e usa a largura normal. */
	.butlerarq-project__images {
		position: static;
		height: auto;
	}

	.butlerarq-project__image {
		position: static;
	}

	.butlerarq-project__image img {
		height: auto;
	}
}

/* ==========================================================================
   BLOCO — GALERIA HORIZONTAL
   Estilos movidos para assets/css/blocks.css, enfileirado junto do bloco
   (assim carrega também no editor, deixando o preview igual ao site).
   ========================================================================== */

/* ==========================================================================
   POST — largura única do corpo do texto
   A área de conteúdo é a mesma em todas as páginas e posts (a da página do
   modelo "Menu"), por isso a variante larga do post deixou de existir e o
   bloco de informações com imagem passou a ocupar essa mesma largura.
   ========================================================================== */

/* ==========================================================================
   PÁGINA MODELO — ÍNDICE DE PROJETOS
   ========================================================================== */

/*
 * Tabela de projetos: um projeto por linha, sem cabeçalho e sem separação
 * entre as colunas. As linhas são divididas por uma linha preta fina e a
 * imagem (quando existe) aparece antes do nome, em recorte circular.
 */
.butlerarq-index-wrap {
	max-width: 100%;
	overflow-x: auto;
}

.butlerarq-index {
	width: 100%;
	margin-top: clamp(28px, 5vh, 56px);
	border-collapse: collapse;
	font-size: clamp(0.82rem, 1.05vw, 1rem);
}

/* Linha preta fina separando uma linha de informação da seguinte. */
.butlerarq-index__row + .butlerarq-index__row {
	border-top: 1px solid #000;
}

.butlerarq-index__row.is-clickable {
	cursor: pointer;
}

.butlerarq-index__cell {
	padding: 14px 28px 14px 0;
	vertical-align: middle;
	text-align: left;
	white-space: nowrap;
}

.butlerarq-index__cell:last-child {
	padding-right: 0;
}

.butlerarq-index__name-cell {
	display: flex;
	align-items: center;
	gap: 14px;
}

.butlerarq-index__thumb {
	display: inline-flex;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 50%;
}

.butlerarq-index__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* O nome do projeto é exibido exatamente como foi digitado. */
.butlerarq-index__name,
.butlerarq-index__link {
	letter-spacing: 0;
}

.butlerarq-index__link {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.butlerarq-index__row.is-clickable:hover .butlerarq-index__link,
.butlerarq-index__link:hover,
.butlerarq-index__link:focus {
	opacity: 0.6;
}

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

@media screen and (max-width: 763px) {
	.butlerarq-index {
		font-size: 0.8rem;
	}

	.butlerarq-index__cell {
		padding: 12px 16px 12px 0;
	}

	.butlerarq-index__name-cell {
		gap: 10px;
	}

	.butlerarq-index__thumb {
		width: 32px;
		height: 32px;
	}
}