/**
 * responsive.css — breakpoints e ajustes responsivos do tema.
 *
 * Carregado DEPOIS de main.css. Os breakpoints acompanham os do Bootstrap 5
 * para coerência com o grid já usado nos templates:
 *
 *   - mobile  : até 575.98px (base, mobile-first — sem media query)
 *   - tablet  : >= 576px (sm) e >= 768px (md)
 *   - desktop : >= 992px (lg)
 *   - wide    : >= 1200px (xl) e >= 1400px (xxl)
 *
 * Mobile-first: o estilo base (sem media query) já cobre o mobile; as regras
 * abaixo apenas ampliam a partir de cada breakpoint.
 */

/* ==========================================================================
   Estabilidade de layout — sem overflow horizontal (todas as larguras)
   --------------------------------------------------------------------------
   Rede de segurança: elementos que comumente estouram a largura do container
   (mídias, formulários, tabelas, pré-formatado) ficam limitados a 100%. Trata
   a raiz do overflow (ex.: <textarea cols="45"> do formulário de comentários
   padrão do WordPress), sem recorrer a overflow-x: hidden — que poderia cortar
   conteúdo posicionado/sticky.
   ========================================================================== */
img,
svg,
video,
iframe,
embed,
object,
table,
pre,
input,
select,
textarea {
	max-width: 100%;
}

input,
select,
textarea {
	box-sizing: border-box;
}

/* O <textarea> do formulário de comentários do WordPress vem com cols="45",
   o que estoura telas estreitas. Forçamos largura fluida. */
textarea {
	width: 100%;
}

/* ==========================================================================
   Mobile (base, até 575.98px)
   --------------------------------------------------------------------------
   Ajustes específicos do menor viewport.
   ========================================================================== */
@media (max-width: 575.98px) {
	/* Seções com respiro um pouco menor no celular. */
	.ee-section {
		padding-block: var(--ee-space-6);
	}

	/* Títulos de seção ligeiramente menores. */
	.ee-section-title {
		font-size: 1.35rem;
	}

	/* Botões do tema ocupam a largura no mobile, quando marcados. */
	.ee-btn-block-sm {
		display: flex;
		width: 100%;
	}

	/* Busca inline do cabeçalho ocupa quase toda a faixa no mobile. */
	.ee-header-search-panel {
		width: min(80vw, 320px);
	}

	/* Footer em coluna única no celular (sobrepõe os col-6 das colunas de links). */
	.footer-top .footer-column {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Faixa inferior empilhada e centralizada. */
	.footer-bottom .row {
		text-align: center;
	}

	.footer-bottom .footer-menu,
	.footer-bottom .footer-legal-nav {
		justify-content: center;
	}
}

/* ==========================================================================
   Tablet pequeno (>= 576px — sm)
   ========================================================================== */
@media (min-width: 576px) {
	.ee-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}

/* ==========================================================================
   Tablet (>= 768px — md)
   ========================================================================== */
@media (min-width: 768px) {
	.ee-section {
		padding-block: var(--ee-space-7);
	}

	/* Container de leitura ganha um respiro lateral maior. */
	.ee-content-container {
		padding-inline: var(--ee-space-3);
	}
}

/* ==========================================================================
   Desktop (>= 992px — lg)
   ========================================================================== */
@media (min-width: 992px) {
	/* Hero com mais respiro vertical no desktop. */
	.ee-hero {
		padding-block: var(--ee-space-8);
	}

	/* Barra lateral "gruda" ao rolar, abaixo do cabeçalho fixo. */
	.sidebar {
		position: sticky;
		top: 96px;
	}

	/* Título do post com escala editorial maior. */
	.single-post .entry-title,
	.single-page .entry-title {
		font-size: 2.5rem;
	}

	/* Em desktop o menu e a busca vivem na navbar; o offcanvas mobile fica oculto. */
	#ee-mobile-menu {
		display: none;
	}
}

/* ==========================================================================
   Wide (>= 1200px — xl)
   ========================================================================== */
@media (min-width: 1200px) {
	.ee-section {
		padding-block: var(--ee-space-8);
	}
}

/* ==========================================================================
   Extra wide (>= 1400px — xxl)
   ========================================================================== */
@media (min-width: 1400px) {
	/* Em telas muito largas, o conteúdo editorial pode respirar mais. */
	.ee-container {
		max-width: var(--ee-container-max);
	}
}