/*
Theme Name: Espaço Extra Self Storage
Theme URI: https://espacoextraselfstorage.com.br
Author: Muito Mais Digital
Author URI: https://muitomaisdigital.com.br
Description: Tema WordPress one-page para a landing page de geração de leads do Espaço Extra Self Storage (Rondonópolis - MT). Estrutura em 6 dobras, Tailwind CSS utilitário e captação via Contact Form 7.
Version: 1.3.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: espacoextra
*/

/* ==========================================================================
   Base / reset leve
   ========================================================================== */

:root {
	--azul-escuro: #051741;
	--azul-principal: #145994;
	--azul-claro: #d9eaff;
	--verde-lima: #95c309;
	--verde-apoio: #628c1f;
	--azul-acinzentado: #8aa1b5;
	--laranja: #ea8b0c;
	--branco: #ffffff;
	--preto: #000000;
}

/* Fontes self-hosted — Manual: Jost (principal) + Montserrat (secundária) */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/jost-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/jost-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/jost-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/jost-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/jost-latin-800-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Montserrat", "Jost", ui-sans-serif, system-ui, sans-serif;
	background-color: var(--branco);
	color: var(--azul-escuro);
}

.font-display {
	font-family: "Jost", "Montserrat", ui-sans-serif, system-ui, sans-serif;
}

/* ==========================================================================
   Acessibilidade — foco visível em todo elemento interativo
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--verde-lima);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Placeholder de imagem (unidade em construção)
   Bloco leve em CSS/SVG, nunca uma imagem pesada — ver boas-praticas.md
   ========================================================================== */

.ee-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: var(--azul-claro);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(5, 23, 65, 0.06) 0px,
		rgba(5, 23, 65, 0.06) 2px,
		transparent 2px,
		transparent 14px
	);
	border: 2px dashed rgba(5, 23, 65, 0.25);
	border-radius: 1rem;
	overflow: hidden;
}

.ee-placeholder__icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--azul-escuro);
	opacity: 0.5;
}

.ee-placeholder__label {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	right: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.1rem;
	text-align: center;
	color: var(--azul-escuro);
	opacity: 0.6;
}

/* ==========================================================================
   Honeypot do formulário (anti-spam) — ver inc/cf7.php e boas-praticas.md
   Escondido via posicionamento, nunca com display:none (bots ignoram isso)
   ========================================================================== */

.ee-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ==========================================================================
   Contact Form 7 — visual alinhado ao formulário do Hero
   ========================================================================== */

.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

.wpcf7 form.ee-cf7,
.wpcf7 form {
	margin: 0;
}

.wpcf7 form .ee-cf7-fields,
.wpcf7 form > .grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Hero desktop: formulário compacto para caber na 1ª viewport */
@media (min-width: 1024px) {
	#hero .ee-hero-form .ee-cf7-fields,
	#hero .ee-hero-form .wpcf7 form .ee-cf7-fields {
		gap: 0.55rem;
	}

	#hero .ee-hero-form .wpcf7 form .ee-cf7-fields > label,
	#hero .ee-hero-form .wpcf7 form legend {
		font-size: 0.8125rem;
		line-height: 1.1rem;
	}

	#hero .ee-hero-form .wpcf7 form .wpcf7-form-control-wrap {
		margin-top: 0.15rem;
	}

	#hero .ee-hero-form .wpcf7 form input[type="text"],
	#hero .ee-hero-form .wpcf7 form input[type="email"],
	#hero .ee-hero-form .wpcf7 form input[type="tel"] {
		padding: 0.55rem 0.85rem;
		font-size: 0.8125rem;
		border-radius: 0.625rem;
	}

	#hero .ee-hero-form .wpcf7 form .ee-cf7-checkboxes {
		margin-top: 0.15rem;
	}

	#hero .ee-hero-form .wpcf7 form .ee-cf7-checkboxes .wpcf7-checkbox,
	#hero .ee-hero-form .wpcf7 form span.wpcf7-form-control.wpcf7-checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.4rem 0.65rem;
	}

	#hero .ee-hero-form .wpcf7 form .wpcf7-list-item label {
		font-size: 0.75rem;
		line-height: 1.2;
		gap: 0.4rem;
	}

	#hero .ee-hero-form .wpcf7 form input.wpcf7-submit,
	#hero .ee-hero-form .wpcf7 form .wpcf7-submit {
		margin-top: 0.15rem;
		padding: 0.7rem 1rem;
		font-size: 0.9375rem;
		border-radius: 0.625rem;
	}

	#hero .ee-hero-form #ee-hero-form-fallback {
		gap: 0.55rem;
	}
}

@media (min-width: 1280px) {
	#hero .ee-hero-form .wpcf7 form .ee-cf7-checkboxes .wpcf7-checkbox,
	#hero .ee-hero-form .wpcf7 form span.wpcf7-form-control.wpcf7-checkbox {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wpcf7 form .ee-cf7-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	.wpcf7 form .ee-cf7-row {
		grid-template-columns: 1fr 1fr;
	}
}

.wpcf7 form .ee-cf7-fields > label,
.wpcf7 form .ee-cf7-label {
	display: block;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	color: var(--azul-escuro);
}

.wpcf7 form legend {
	display: block;
	padding: 0;
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--azul-escuro);
}

.wpcf7 form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.wpcf7 form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.25rem;
}

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form input[type="url"],
.wpcf7 form input[type="number"],
.wpcf7 form textarea,
.wpcf7 form select {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--azul-escuro);
	background: #fff;
	border: 1px solid rgba(5, 23, 65, 0.15);
	border-radius: 0.75rem;
	box-sizing: border-box;
}

.wpcf7 form input::placeholder,
.wpcf7 form textarea::placeholder {
	color: rgba(5, 23, 65, 0.65);
}

.wpcf7 form input:focus,
.wpcf7 form textarea:focus,
.wpcf7 form select:focus {
	outline: none;
	border-color: var(--verde-lima);
	box-shadow: 0 0 0 3px rgba(149, 195, 9, 0.35);
}

/* Tipo de uso — checkboxes em grid limpo */
.wpcf7 form .ee-cf7-checkboxes {
	margin-top: 0.25rem;
}

.wpcf7 form .ee-cf7-checkboxes .wpcf7-form-control-wrap {
	margin-top: 0;
	width: 100%;
}

.wpcf7 form .ee-cf7-checkboxes .wpcf7-checkbox,
.wpcf7 form span.wpcf7-form-control.wpcf7-checkbox {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem 0.75rem;
	width: 100%;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.wpcf7 form .ee-cf7-checkboxes .wpcf7-checkbox,
	.wpcf7 form span.wpcf7-form-control.wpcf7-checkbox {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wpcf7 form .wpcf7-list-item {
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wpcf7 form .wpcf7-list-item label {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.3;
	color: rgba(5, 23, 65, 0.9);
	cursor: pointer;
}

.wpcf7 form .wpcf7-list-item input[type="checkbox"] {
	appearance: auto;
	display: inline-block;
	width: 1rem !important;
	height: 1rem !important;
	min-width: 1rem;
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	vertical-align: middle;
	accent-color: var(--azul-escuro);
	border-radius: 0.25rem;
}

.wpcf7 form .wpcf7-list-item-label {
	display: inline;
	font-weight: 400;
}

.wpcf7 form input.wpcf7-submit,
.wpcf7 form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.875rem 1.25rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--azul-escuro);
	background-color: var(--verde-lima);
	border: 0;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wpcf7 form input.wpcf7-submit:hover,
.wpcf7 form .wpcf7-submit:hover {
	background-color: #628c1f;
}

.wpcf7 form .wpcf7-response-output {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	height: 0;
	overflow: hidden;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	display: block;
	height: auto;
	overflow: visible;
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	border: 1px solid rgba(149, 195, 9, 0.5);
	background: rgba(149, 195, 9, 0.15);
	color: var(--azul-escuro);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border: 1px solid rgba(185, 28, 28, 0.35);
	background: rgba(254, 226, 226, 0.8);
	color: #991b1b;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: #b91c1c;
}

.wpcf7 form .wpcf7-spinner {
	margin: 0.5rem auto 0;
}

/* Header: sólido no topo (sobre o hero); leve transparência só após scroll */
.ee-header.is-scrolled {
	background-color: rgba(5, 23, 65, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Hero: fundo sem placeholder “fantasma” no meio da tela */
#hero .ee-hero__bg {
	background-color: var(--azul-claro);
}

/* Mobile: véu branco bem fraco no meio (leitura do texto escuro); desktop: overlay azul */
#hero .ee-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.12) 0%,
		rgba(255, 255, 255, 0.28) 42%,
		rgba(255, 255, 255, 0.18) 72%,
		rgba(255, 255, 255, 0.08) 100%
	);
}

@media (min-width: 1024px) {
	#hero .ee-hero__bg {
		background-color: var(--azul-escuro);
		background-image: repeating-linear-gradient(
			135deg,
			rgba(219, 230, 251, 0.06) 0px,
			rgba(219, 230, 251, 0.06) 2px,
			transparent 2px,
			transparent 14px
		);
	}

	#hero .ee-hero__overlay {
		background: rgba(5, 23, 65, 0.58);
	}
}

@media (max-width: 1023px) {
	#hero .ee-hero__img,
	#hero .ee-hero__bg img,
	#hero .ee-hero__bg picture img {
		object-position: center 45%;
	}

	#hero .ee-hero__lead {
		max-width: 34rem;
		margin-left: auto;
		margin-right: auto;
	}

	#hero .ee-hero-sheet__handle {
		background: rgba(5, 23, 65, 0.2);
	}
}

#hero .ee-placeholder,
#hero .ee-placeholder__icon,
#hero .ee-placeholder__label {
	display: none !important;
}

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */

.ee-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.ee-accordion__panel > div {
	overflow: hidden;
}

.ee-accordion__item[data-open="true"] .ee-accordion__panel {
	grid-template-rows: 1fr;
}

.ee-accordion__item[data-open="true"] .ee-accordion__chevron {
	transform: rotate(180deg);
}

.ee-accordion__chevron {
	transition: transform 0.25s ease;
}

/* ==========================================================================
   Timeline "Como funciona" — conectores entre passos
   ========================================================================== */

.ee-timeline__connector {
	background-image: repeating-linear-gradient(
		to right,
		rgba(149, 195, 9, 0.6) 0,
		rgba(149, 195, 9, 0.6) 8px,
		transparent 8px,
		transparent 16px
	);
}

/* ==========================================================================
   Barra superior dos cards de tipos de box (progressão de tamanho)
   ========================================================================== */

.ee-box-card__bar {
	height: var(--ee-bar-height, 6px);
	background-color: var(--verde-lima);
	border-radius: 999px 999px 0 0;
}

/* ==========================================================================
   Hero — formulário em bottom sheet no mobile (desktop permanece inline)
   ========================================================================== */

.ee-hero-sheet__backdrop {
	display: none;
}

@media (max-width: 1023px) {
	.ee-hero-sheet__backdrop[data-open="true"] {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 10050;
		background: rgba(5, 23, 65, 0.55);
	}

	.ee-hero-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10060;
		max-height: min(92svh, 920px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
		transform: translate3d(0, 110%, 0);
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.28s ease, visibility 0.28s;
	}

	.ee-hero-sheet[data-open="true"] {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		pointer-events: auto;
	}

	.ee-hero-sheet__handle {
		width: 2.5rem;
		height: 0.25rem;
		margin: 0.5rem auto 0.75rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.55);
	}

	.ee-hero-sheet .ee-hero__card {
		position: relative;
		z-index: 1;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
	}

	body.ee-hero-sheet-open {
		overflow: hidden;
		touch-action: none;
	}
}

@media (min-width: 1024px) {
	.ee-hero-sheet {
		position: static;
		transform: none;
		visibility: visible;
		pointer-events: auto;
		max-height: none;
		overflow: visible;
		padding: 0;
	}

	.ee-hero-sheet__backdrop {
		display: none !important;
	}
}

/* ==========================================================================
   Botão flutuante WhatsApp
   ========================================================================== */

.ee-whatsapp-fab {
	position: fixed;
	right: 1rem;
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 10040;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	border-radius: 999px;
	background-color: #25d366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(5, 23, 65, 0.28);
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.ee-whatsapp-fab:hover,
.ee-whatsapp-fab:focus-visible {
	color: #fff;
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(5, 23, 65, 0.34);
	outline: none;
}

.ee-whatsapp-fab:focus-visible {
	box-shadow: 0 0 0 3px rgba(149, 195, 9, 0.55), 0 10px 28px rgba(5, 23, 65, 0.34);
}

.ee-whatsapp-fab__icon {
	width: 1.85rem;
	height: 1.85rem;
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.ee-whatsapp-fab {
		width: 4rem;
		height: 4rem;
		right: 1.25rem;
		bottom: max(1.25rem, env(safe-area-inset-bottom));
	}

	.ee-whatsapp-fab__icon {
		width: 2rem;
		height: 2rem;
	}
}

body.ee-hero-sheet-open .ee-whatsapp-fab {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* reCAPTCHA v3 — badge oculto; aviso obrigatório no rodapé (seção privacidade) */
.grecaptcha-badge {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}