/*
Theme Name: Sec21 Child
Theme URI: https://bibliaalmeida21.com.br
Description: Tema filho do Hello Elementor para a Bíblia Almeida Século 21. Cabeçalho, rodapé e estilos próprios.
Author: Edições Vida Nova
Template: hello-elementor
Version: 1.0.0
Text Domain: sec21-child
*/

:root {
	--sec21-verde-escuro: #1b342e;
	--sec21-verde: #529984;
	--sec21-verde-claro: #489a84;
	--sec21-texto: #1d1d1d;
	--sec21-fundo-alt: #f2f0f0;
	--sec21-borda: #e5e5e5;
	--sec21-largura: 1170px;
}

html body {
	border: 0;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.72;
	color: var(--sec21-texto);
	background: #fff;
	margin: 0;
}
/* Kit do Elementor: mesma fonte e cores do tema */
body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family: "Rubik";
	--e-global-typography-secondary-font-family: "Rubik";
	--e-global-typography-text-font-family: "Rubik";
	--e-global-typography-accent-font-family: "Rubik";
	--e-global-color-primary: #28201d;
	--e-global-color-secondary: #1b342e;
	--e-global-color-text: #1d1d1d;
	--e-global-color-accent: #529984;
}
.elementor-widget-heading .elementor-heading-title { font-family: "Rubik", sans-serif; color: #28201d; line-height: 1.15; }
.elementor-widget-heading h4.elementor-heading-title { font-size: 1.75em; font-weight: 500; line-height: 1.23; }
.elementor-widget-heading h3.elementor-heading-title { font-size: 2.25em; font-weight: 700; }
.elementor-widget-text-editor { font-family: "Rubik", sans-serif; font-size: 1em; line-height: 1.72; color: #1d1d1d; }
.elementor-widget-text-editor h4 { font-size: 1.75em; font-weight: 500; line-height: 1.23; margin: 1.2em 0 .6em; }
.elementor-widget-text-editor p { margin: 0 0 1.2em; }
.elementor-widget-text-editor ul { margin: 0 0 1.2em 1.2em; padding: 0; }
.elementor-widget-text-editor a { color: var(--sec21-verde-escuro); text-decoration: underline; }

html body a { color: var(--sec21-verde-escuro); text-decoration: none; }
html body a:hover { color: var(--sec21-verde); }

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-family: "Rubik", sans-serif; color: #28201d; }
html body h3 { font-size: 2.25em; font-weight: 700; line-height: 1.15; margin: 0 0 .9em; }
html body h4 { font-size: 1.75em; font-weight: 500; line-height: 1.23; margin: 1.5em 0 .9em; }
html body h5 { font-size: 1.375em; font-weight: 500; line-height: 1.25; }

.sec21-wrap { width: var(--sec21-largura); max-width: 100%; margin: 0 auto; box-sizing: border-box; }
html body .site-main { width: var(--sec21-largura); max-width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 15px; }
.page-content { margin: 0; }

/* Cabeçalho ------------------------------------------------------------- */
.sec21-header { position: relative; }
.sec21-topbar {
	position: absolute; top: 0; left: 0; right: 0; z-index: 10;
	display: flex; align-items: center; justify-content: space-between;
	padding: 2em 3em; box-sizing: border-box;
}
.sec21-topbar nav, .sec21-topbar .sec21-menu { white-space: nowrap; }
.sec21-topbar .sec21-logo img { display: block; width: 120px; height: 55px; }
.sec21-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; }
.sec21-menu li { margin: 0; padding: 0; }
.sec21-menu a {
	display: block; padding: 1em .85em; color: #fff; font-weight: 500; font-size: 15px; white-space: nowrap;
	transition: color .3s ease;
}
.sec21-menu a:hover { color: var(--sec21-verde); }
.sec21-menu .current-menu-item > a,
.sec21-menu .current_page_item > a { color: var(--sec21-verde); }
html body .sec21-menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: .2em .4em; border-radius: 0; }

.sec21-banner {
	background-color: var(--sec21-verde-escuro);
	background-size: cover; background-position: center;
	padding: 0 3em 40px; box-sizing: border-box; text-align: center;
	padding-top: 178px;
}
.sec21-banner .sec21-logo-a21 { padding: 20px 0; }
.sec21-banner .sec21-logo-a21 img { max-width: 100%; height: auto; display: inline-block; }

.sec21-versiculo-faixa {
	background: var(--sec21-verde-escuro); color: #fff;
	padding: 20px 3em; min-height: 85px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.sec21-versiculo-faixa .sec21-wrap { width: 66.6667%; margin: 0 auto; }

/* Rodapé ---------------------------------------------------------------- */
.sec21-footer { border-top: 1px solid var(--sec21-borda); background: #fff; color: #28201d; }
.sec21-footer .sec21-wrap { padding: 1.7em 15px; font-size: .9em; }

/* Home: carrossel de Bíblias ------------------------------------------- */
.sec21-carrossel { position: relative; padding: 0; }
.sec21-carrossel-pista {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; margin: 0; padding: 0; list-style: none;
}
.sec21-carrossel-pista::-webkit-scrollbar { display: none; }
.sec21-carrossel-pista li { flex: 0 0 20%; scroll-snap-align: start; box-sizing: border-box; padding: 0 8px; margin: 0; }
.sec21-carrossel-pista img { width: 100%; height: auto; display: block; }
html body .sec21-carrossel-seta {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; padding: 0;
	width: 40px; height: 40px; border-radius: 50%; border: 0;
	background: var(--sec21-verde); color: #fff; font-size: 26px; line-height: 38px; cursor: pointer;
}
html body .sec21-carrossel-seta:hover { background: var(--sec21-verde-escuro); color: #fff; }
.sec21-carrossel-ant { left: 10px; }
.sec21-carrossel-prox { right: 10px; }

@media (max-width: 1024px) {
	.sec21-carrossel-pista li { flex-basis: 33.3333%; }
	.sec21-versiculo-faixa .sec21-wrap { width: 100%; margin-left: 0; }
}
@media (max-width: 767px) {
	.sec21-topbar { padding: 1em 1.2em; }
	.sec21-banner { padding-left: 1.2em; padding-right: 1.2em; }
	.sec21-carrossel-pista li { flex-basis: 50%; }
	html body h3 { font-size: 1.75em; }
	html body h4 { font-size: 1.4em; }
}

/* Menu sanduíche: abaixo de 1280px os 7 itens não cabem em uma linha */
@media (max-width: 1279px) {
	html body .sec21-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .6); border-radius: 6px; font-size: 26px; line-height: 1; }
	html body .sec21-menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
	.sec21-topbar { padding: 1em 1.5em; }
	.sec21-topbar .sec21-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; background: var(--sec21-verde-escuro); padding: .5em 0; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
	.sec21-topbar .sec21-menu.aberto { display: flex; }
	.sec21-menu a { padding: .9em 1.5em; font-size: 16px; }
	.sec21-banner { padding-top: 120px; }
}
@media (max-width: 767px) {
	.sec21-banner { padding-left: 1.2em; padding-right: 1.2em; }
	.sec21-header, body { overflow-x: clip; }
	.sec21-versiculo-faixa { padding: 16px 1.2em; }
}
img { max-width: 100%; height: auto; }