/*
Theme Name: Blog dos Engenheiros
Theme URI: https://blogdosengenheiros.com.br
Author: Duo Design
Description: Tema de blocos (Full Site Editing) do Blog dos Engenheiros, construído a partir do redesign "Blog dos Engenheiros - Home". Usa apenas blocos nativos do WordPress, template parts e patterns.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blog-dos-engenheiros
Tags: blog, block-templates, full-site-editing, news, one-column, editor-style, block-patterns
*/

/* -------------------------------------------------------------------------
 * Sumário
 * 1.  Base
 * 2.  Topbar
 * 3.  Cabeçalho (marca, navegação, busca)
 * 4.  Folha clara (bde-paper)
 * 5.  Hero
 * 6.  Newsletter
 * 7.  Grades de posts / cards
 * 8.  Banner do e-book
 * 9.  Rodapé
 * 10. Conteúdo (single / page / arquivo)
 * 11. Responsivo
 * ---------------------------------------------------------------------- */

/* 1. Base ---------------------------------------------------------------- */

:root {
	--bde-radius-lg: 24px;
	--bde-radius-md: 12px;
	--bde-radius-sm: 8px;
	--bde-pill: 100px;
	--bde-gutter: clamp(16px, 2.4vw, 36px);
	--bde-field-border: rgba(217, 217, 217, 0.32);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
}

a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--muted);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Marca d'água decorativa usada no banner do e-book e no rodapé. */
.bde-watermark {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bde-watermark::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 517px;
	height: 517px;
	background-color: rgba(242, 242, 242, 0.02);
	-webkit-mask: url(assets/images/logo-mark.svg) no-repeat center / contain;
	mask: url(assets/images/logo-mark.svg) no-repeat center / contain;
	pointer-events: none;
}

/* 2. Topbar -------------------------------------------------------------- */

.bde-topbar {
	min-height: 73px;
}

.bde-topbar p {
	margin: 0;
}

.bde-topbar .wp-block-social-links {
	margin-left: 8px;
}

/* 3. Cabeçalho ----------------------------------------------------------- */

.bde-masthead {
	min-height: 53px;
}

.bde-brand .wp-block-site-logo img {
	display: block;
	width: 47px;
	height: 47px;
}

/* O logotipo entra como máscara para herdar a cor do contexto (claro/escuro)
   e continuar nítido em qualquer densidade de tela. */
.bde-wordmark {
	display: block;
	width: 148px;
	height: 52px;
	flex: 0 0 auto;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: url(assets/images/wordmark.svg) no-repeat center / contain;
	mask: url(assets/images/wordmark.svg) no-repeat center / contain;
}

.bde-footer__mark {
	display: block;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: url(assets/images/logo-mark.svg) no-repeat center / contain;
	mask: url(assets/images/logo-mark.svg) no-repeat center / contain;
}

/* is-style-logos-only pinta cada ícone com a cor da marca do serviço; aqui
   eles precisam ser monocromáticos, herdando a cor do bloco que os contém. */
.bde-topbar .wp-block-social-links.is-style-logos-only .wp-social-link,
.bde-topbar .wp-block-social-links.is-style-logos-only .wp-social-link a {
	color: var(--wp--preset--color--base);
}

.bde-footer .wp-block-social-links.is-style-logos-only .wp-social-link,
.bde-footer .wp-block-social-links.is-style-logos-only .wp-social-link a {
	color: var(--wp--preset--color--white);
}

.bde-topbar .wp-block-social-links.is-style-logos-only .wp-social-link:hover,
.bde-footer .wp-block-social-links.is-style-logos-only .wp-social-link:hover {
	color: var(--wp--preset--color--accent);
}

.bde-topbar .wp-block-social-links,
.bde-footer .wp-block-social-links {
	gap: 16px;
}

.bde-nav .wp-block-navigation__container {
	gap: 44px;
}

.bde-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	color: var(--wp--preset--color--black);
}

/* Busca em pílula, com botão circular à direita. */
.bde-search {
	width: 100%;
	max-width: 408px;
}

.bde-search .wp-block-search__inside-wrapper {
	height: 38px;
	padding: 0 0 0 24px;
	border: 0;
	border-radius: var(--bde-pill);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
	background: transparent;
	gap: 0;
}

.bde-search .wp-block-search__input {
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
}

.bde-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.bde-search .wp-block-search__input:focus {
	outline: none;
}

.bde-search .wp-block-search__inside-wrapper:focus-within {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

.bde-search .wp-block-search__button {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	min-width: 38px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.bde-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--accent);
}

/* Substitui o ícone padrão do core pelo ícone de busca do design. */
.bde-search .wp-block-search__button svg {
	display: none;
}

.bde-search .wp-block-search__button::after {
	content: "";
	width: 15.2px;
	height: 15.2px;
	background: currentColor;
	-webkit-mask: url(assets/images/search.svg) no-repeat center / contain;
	mask: url(assets/images/search.svg) no-repeat center / contain;
}

/* 4. Folha clara --------------------------------------------------------- */

.bde-paper {
	border-radius: var(--bde-radius-lg);
}

/* 5. Hero ---------------------------------------------------------------- */

/* Imagem e texto ficam na mesma célula do grid: a altura do destaque é sempre
   a maior das duas, então um título longo nunca é cortado — o que acontecia
   com posicionamento absoluto em telas estreitas. */
.bde-hero {
	display: grid;
	border-radius: var(--bde-radius-lg);
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--placeholder);
}

.bde-hero__media,
.bde-hero__body {
	grid-area: 1 / 1;
	min-width: 0;
}

.bde-hero__media {
	margin: 0;
}

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

/* O texto ocupa a faixa escura do degradê, na base da imagem. O wrapper não
   intercepta cliques, para o link da imagem continuar valendo. */
.bde-hero__body {
	align-self: end;
	/* O figure da imagem destacada é position:relative, então pinta acima de um
	   irmão estático. Posicionar o texto também o traz de volta para a frente. */
	position: relative;
	z-index: 1;
	padding: clamp(72px, 12vw, 200px) clamp(20px, 2.2vw, 41px) clamp(24px, 3vw, 48px);
	background: var(--wp--preset--gradient--hero-scrim);
	pointer-events: none;
}

.bde-hero__body > * {
	pointer-events: auto;
}

.bde-hero__title {
	margin: 0;
	max-width: 1100px;
	text-wrap: pretty;
}

.bde-hero__title a {
	color: inherit;
}

.bde-hero__title a:hover {
	color: var(--wp--preset--color--accent);
}

.bde-hero-empty {
	margin: 0;
}

/* Larguras das colunas flex do banner do e-book e do rodapé. */
.bde-ebook__text {
	flex: 1 1 480px;
}

.bde-ebook__cover {
	flex: 0 0 auto;
	margin: 0;
}

.bde-footer__claim {
	flex: 0 1 461px;
}

.bde-footer__signup {
	flex: 0 1 913px;
}

.bde-masthead__nav {
	flex: 1 1 auto;
	justify-content: flex-end;
}

/* 6. Newsletter ---------------------------------------------------------- */

.bde-newsletter {
	border-radius: var(--bde-radius-md);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.bde-newsletter--bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 109px;
	padding: 16px 20px 16px 41px;
}

.bde-newsletter--bar .bde-newsletter__intro {
	flex: 0 1 447px;
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 26px;
}

.bde-newsletter--bar .bde-newsletter__form {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.bde-newsletter--stacked {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.bde-newsletter--stacked .bde-newsletter__intro {
	max-width: 447px;
	margin: 0 0 42px;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 26px;
}

.bde-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin: 0;
}

.bde-newsletter--stacked .bde-newsletter__form {
	gap: 35px;
}

.bde-newsletter__field {
	flex: 1 1 200px;
	min-width: 0;
	max-width: 288px;
	height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--bde-radius-sm);
	box-shadow: inset 0 0 0 1px var(--bde-field-border);
	background: transparent;
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1;
}

.bde-newsletter--stacked .bde-newsletter__field {
	flex-basis: 320px;
	max-width: 437px;
}

.bde-newsletter__field::placeholder {
	color: var(--wp--preset--color--field);
	opacity: 1;
}

.bde-newsletter__field:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.bde-newsletter__submit {
	flex: 0 0 auto;
	width: 259px;
	max-width: 100%;
	height: 54px;
	border: 0;
	border-radius: var(--bde-radius-md);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--button-ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.bde-newsletter__submit:hover {
	background: var(--wp--preset--color--accent-dark);
}

/* Honeypot: escondido de humanos, visível para bots que preenchem tudo. */
.bde-newsletter__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.bde-newsletter__notice {
	flex: 1 0 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
}

.bde-newsletter__notice--ok {
	color: var(--wp--preset--color--accent);
}

.bde-newsletter__notice--erro {
	color: #ff9b9b;
}

/* 7. Grades de posts / cards --------------------------------------------- */

.bde-section__title {
	margin: 0;
}

.bde-cards .wp-block-post-template {
	gap: 21px;
}

.bde-cards .wp-block-post-featured-image {
	margin: 0;
	border-radius: var(--bde-radius-md);
	overflow: hidden;
	background: var(--wp--preset--color--placeholder);
}

.bde-cards .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.bde-cards .wp-block-post-template > li:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.bde-cards .wp-block-post-author-name {
	margin: 12px 0 0;
}

.bde-cards .wp-block-post-title {
	margin: 15px 0 0;
	max-width: 425px;
	text-wrap: pretty;
}

.bde-cards .wp-block-post-title a {
	color: inherit;
}

/* Termos como pílulas: a primeira em destaque, as demais neutras. */
.bde-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

.bde-pill {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 20px;
	border-radius: var(--bde-pill);
	background: var(--wp--preset--color--tag);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.bde-pill--primary {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--placeholder);
}

a.bde-pill:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--button-ink);
}

/* 8. Banner do e-book ---------------------------------------------------- */

.bde-ebook {
	border-radius: var(--bde-radius-md);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	padding: 40px;
	gap: 40px;
}

.bde-ebook::before {
	left: 400px;
	top: -90px;
}

.bde-ebook__eyebrow {
	margin: 0;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.bde-ebook__title {
	margin: 44px 0 0;
	max-width: 912px;
	text-wrap: pretty;
}

.bde-ebook__cover img {
	width: 312px;
	height: 418px;
	max-width: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--placeholder);
}

/* 9. Rodapé -------------------------------------------------------------- */

.bde-footer {
	padding: 200px var(--bde-gutter) 60px;
}

.bde-footer::before {
	left: 420px;
	top: 60px;
}

.bde-footer__claim {
	max-width: 461px;
	margin: 0;
	text-wrap: pretty;
}

.bde-footer__mail {
	display: inline-block;
	max-width: 201px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--placeholder);
}

/* 10. Conteúdo ----------------------------------------------------------- */

.bde-entry {
	margin-inline: auto;
}

.bde-entry__meta {
	color: var(--wp--preset--color--muted);
}

.bde-entry .wp-block-post-featured-image img,
.bde-cards .wp-block-post-featured-image img {
	border-radius: inherit;
}

.bde-entry__content > * + * {
	margin-block-start: 1.2em;
}

.bde-entry__content :where(h2, h3, h4) {
	margin-block-start: 1.8em;
}

.bde-entry__content :where(img, figure) {
	border-radius: var(--bde-radius-md);
}

.bde-entry__content blockquote {
	margin: 2em 0;
	padding-left: 24px;
	border-left: 3px solid var(--wp--preset--color--accent);
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
	border-radius: var(--bde-pill);
}

/* 10b. Menu móvel: gaveta lateral --------------------------------------- */

/* O core abre o menu como uma sobreposição de tela cheia. Aqui o container
   vira só o fundo escurecido e o painel desliza pela direita.

   A classe `.is-menu-open` aparece repetida nos seletores de propósito: as
   regras equivalentes do core têm a mesma especificidade e podem ser impressas
   depois da folha do tema (assets de bloco separados), então repetir a classe
   é o que garante a precedência. */

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

/* O fundo branco do core vem de
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)`,
   que tem especificidade 0,5,0 — acima das regras de layout acima. O core
   oferece a classe `disable-default-overlay` como saída, mas ela precisaria
   estar no container, e o bloco só deixa acrescentar classes ao <nav>. Daí o
   seletor abaixo espelhar o do core com uma classe a mais: 0,6,0, que vence
   sem depender da ordem em que as folhas são impressas. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open {
	background: rgba(18, 18, 22, 0.55);
}

/* O painel propriamente dito. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
	flex: 0 0 auto;
	width: min(360px, 86vw);
	max-width: none;
	margin: 0;
	padding: 68px 24px 40px;
	box-sizing: border-box;
	overflow-y: auto;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4);
}

/* O core empilha margens e paddings pensados para a sobreposição cheia.
   O `position: static` é necessário: enquanto o dialog for `relative`, o botão
   de fechar (absoluto) ancora nele e cai em cima do primeiro item. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-dialog {
	margin: 0;
	position: static;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding: 0;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 20px;
	right: 22px;
	color: var(--wp--preset--color--white);
}

/* Os itens herdam o alinhamento à direita do cabeçalho; na gaveta eles
   precisam ocupar a largura toda. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item {
	width: 100%;
	gap: 0;
	align-items: stretch;
	justify-content: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid rgba(227, 227, 227, 0.14);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--lg);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

/* Entrada e saída.

   Antes isto era `animation ... both`, e o efeito colateral era grave: com o
   fill-mode segurando o quadro inicial, o menu ficava preso fora da tela e
   invisível sempre que a animação não disparava. Como transição, o estado de
   repouso do menu aberto é o visível — se a transição não rodar, ele
   simplesmente aparece, sem animação.

   O estado fechado só vale abaixo de 600px, que é onde o core esconde o menu
   atrás do botão; acima disso o mesmo container é a navegação normal do
   cabeçalho e não pode ficar transparente. */
@media (max-width: 599px) {
	.wp-block-navigation__responsive-container {
		opacity: 0;
		transition: opacity 0.24s ease, display 0.32s allow-discrete;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-close {
		transform: translateX(100%);
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
		opacity: 1;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
		transform: translateX(0);
	}

	/* Sem isto o navegador não tem de onde partir ao sair de display:none. */
	@starting-style {
		.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
			opacity: 0;
		}

		.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
			transform: translateX(100%);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container,
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-close {
		transition: none;
	}
}

/* 11. Responsivo --------------------------------------------------------- */

@media (max-width: 1279px) {
	.bde-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.bde-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bde-ebook {
		flex-direction: column;
	}

	.bde-ebook__cover img {
		width: 100%;
		height: auto;
		aspect-ratio: 312 / 418;
	}

	.bde-footer {
		padding-top: 120px;
	}
}

@media (max-width: 781px) {
	/* Marca e botão do menu dividem a primeira linha; a busca cai para a
	   segunda. `display: contents` dissolve o grupo do bloco para que navegação
	   e busca virem itens diretos do cabeçalho e possam ser ordenados. */
	/* `.wp-block-group-is-layout-flex` do core também é 0,1,0 e é impresso
	   depois da folha do tema, daí o seletor descendente. */
	.bde-masthead > .bde-masthead__nav {
		display: contents;
	}

	.bde-masthead .bde-nav {
		order: 1;
		flex: 0 0 auto;
	}

	.bde-masthead .bde-search {
		order: 2;
		flex: 1 0 100%;
	}
}

@media (max-width: 599px) {
	/* Marca reduzida na largura em que o menu vira botão. */
	.bde-brand .wp-block-site-logo img {
		width: 34px;
		height: 34px;
	}

	.bde-wordmark {
		width: 106px;
		height: 37px;
	}

	.bde-brand {
		gap: 10px;
	}
}

@media (max-width: 781px) {
	.bde-topbar {
		justify-content: center !important;
	}

	.bde-newsletter--bar {
		padding: 24px;
	}

	.bde-newsletter__submit {
		width: 100%;
	}

	.bde-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bde-cards .wp-block-post-title {
		max-width: none;
	}

	.bde-watermark::before {
		display: none;
	}

	/* No mobile o texto sai de cima da imagem e vira um painel logo abaixo:
	   sobrepor cobriria a foto inteira numa tela estreita. */
	.bde-hero__media {
		grid-area: 1 / 1;
	}

	.bde-hero__media img {
		aspect-ratio: 3 / 2 !important;
	}

	.bde-hero__body {
		grid-area: 2 / 1;
		padding: 24px 20px 28px;
		background: var(--wp--preset--color--contrast);
	}

	.bde-footer {
		padding-top: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bde-cards .wp-block-post-featured-image img {
		transition: none;
	}

	.bde-cards .wp-block-post-template > li:hover .wp-block-post-featured-image img {
		transform: none;
	}
}