/*
Theme Name: CrocoLoot Bricks Child
Theme URI: https://crocoloot.com.br
Author: CrocoLoot
Author URI: https://crocoloot.com.br
Description: Child theme oficial do CrocoLoot para Bricks Builder.
Template: bricks
Version: 0.1.0
Text Domain: crocoloot-bricks-child
*/

/*
 * CrocoLoot — Home premium (referência estrutural:
 * reference/inspirations/heroes/premium-hero-grid-layout-01.png)
 * Sem copiar marca/paleta de terceiros.
 *
 * A) body.home + #brx-content — estiliza home montada no Bricks (secções / classes).
 * B) body.croco-home-code — home em PHP (template-parts); hierarquia .croco-section >
 *    .croco-container > .croco-row > .croco-col (espelha Section / Container / colunas Bricks).
 *    Ativação: define( 'CROCOLOOT_CHILD_CODE_HOME', true ); em wp-config.php.
 *
 * Hero Premium — árvore e classes: ver assets/css/hero-premium.css (cabeçalho do ficheiro).
 * Resumo: Section.croco-hero-premium → Container.croco-hero__grid →
 *   Div.croco-hero-copy | Div.croco-hero-media (filhos directos do Container).
 *
 * Barra no topo (1.ª secção em #brx-content = logo CrocoLoot + Nav aninhável):
 *   .croco-nav-logo       → bloco da imagem do logo (opcional; limita largura)
 *   Hero: classe .croco-hero-premium na Section; fallback = 2.ª secção em #brx-content (home).
 */

/* -------------------------------------------------------------------------
   Documento — impedir scroll horizontal (só vertical)
   ------------------------------------------------------------------------- */
html,
body {
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* -------------------------------------------------------------------------
   Tokens (header home — hero em assets/css/hero-premium.css)
   ------------------------------------------------------------------------- */
:root {
	--croco-brand-accent: #e85c1a;
	--croco-nav-bg: rgba(255, 255, 255, 0.72);
	--croco-nav-border: rgba(12, 16, 22, 0.06);
	--croco-nav-link: #2a3038;
	--croco-nav-link-hover: #0f1218;
	--croco-nav-underline: var(--croco-brand-accent);
	--croco-nav-row-min-h: 4.25rem;

	/* Botões — tokens neutros (valores = big-hero actual; preparação design system) */
	--croco-btn-primary-highlight: #45e822;
	--croco-btn-primary-mid: #39d313;
	--croco-btn-primary-deep: #2fb30f;
	--croco-btn-primary-text: #fff;
	--croco-btn-secondary-bg: #fff;
	--croco-btn-secondary-text: #14171c;
	--croco-btn-secondary-border-color: rgb(20 24 31 / 0.08);

	/* Surfaces — palco premium (valores = .croco-big-hero actual; hero não migrado ainda) */
	--croco-surface-premium-fg: #14171c;
	--croco-surface-premium-bg:
		radial-gradient(
			ellipse 125% 90% at 50% 48%,
			transparent 50%,
			rgb(18 28 52 / 0.055) 100%
		),
		radial-gradient(
			ellipse 72% 58% at 14% 76%,
			rgb(255 145 95 / 0.16) 0%,
			rgb(255 195 150 / 0.07) 40%,
			transparent 70%
		),
		radial-gradient(
			ellipse 78% 62% at 86% 20%,
			rgb(105 140 255 / 0.2) 0%,
			rgb(165 185 255 / 0.09) 42%,
			transparent 66%
		),
		radial-gradient(
			ellipse 92% 78% at 50% 46%,
			rgb(255 255 255 / 0.58) 0%,
			rgb(245 247 252 / 0.32) 38%,
			transparent 68%
		),
		radial-gradient(
			ellipse 68% 92% at 94% 44%,
			rgb(150 175 245 / 0.62) 0%,
			rgb(200 208 242 / 0.34) 44%,
			transparent 64%
		),
		radial-gradient(
			ellipse 65% 82% at 6% 54%,
			rgb(248 230 210 / 0.95) 0%,
			rgb(236 220 200 / 0.45) 48%,
			transparent 66%
		),
		radial-gradient(
			ellipse 55% 55% at 18% 22%,
			rgb(255 255 255 / 0.55) 0%,
			transparent 58%
		),
		linear-gradient(
			118deg,
			#e4dcd4 0%,
			#e6ebf6 34%,
			#d9e3f4 64%,
			#cdd9ef 100%
		);
}

/* -------------------------------------------------------------------------
   Header / navbar — clean, alinhado ao conteúdo (vários IDs Bricks comuns)
   ------------------------------------------------------------------------- */
body.home #brx-header.brx-header,
body.home header#brx-header,
body.home header.brx-header,
body.home #brxe-header {
	box-sizing: border-box;
	background: var(--croco-nav-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--croco-nav-border);
	padding-block: clamp(0.55rem, 1.2vw, 0.85rem);
}

body.home #brx-header .brxe-container,
body.home header#brx-header .brxe-container,
body.home header.brx-header .brxe-container,
body.home #brxe-header .brxe-container {
	box-sizing: border-box;
	width: 100%;
	max-width: min(76rem, 100%);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4.5vw, 2.75rem);
	min-height: calc(var(--croco-nav-row-min-h) - 0.5rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

body.home #brx-header .brxe-nav-menu a,
body.home header.brx-header .brxe-nav-menu a {
	color: var(--croco-nav-link);
	font-weight: 500;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	transition: color 0.15s ease, opacity 0.15s ease;
}

body.home #brx-header .brxe-nav-menu a:hover,
body.home header.brx-header .brxe-nav-menu a:hover {
	color: var(--croco-nav-link-hover);
}

/* Header Bricks: linha logo | menu (1.ª secção do conteúdo = navbar; Hero = 2.ª) */
body.home #brx-content > .brxe-section:first-child,
body.home #brx-content > section:first-child {
	box-sizing: border-box;
	background: var(--croco-nav-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--croco-nav-border);
	padding-block: clamp(0.65rem, 1.5vw, 1rem);
	padding-inline: clamp(1.25rem, 4.5vw, 2.75rem);
}

body.home #brx-content > .brxe-section:first-child .brxe-container,
body.home #brx-content > section:first-child .brxe-container {
	box-sizing: border-box;
	width: 100%;
	max-width: min(76rem, 100%);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.75rem;
	min-height: var(--croco-nav-row-min-h);
}

/* Logo à esquerda — opcional: classe .croco-nav-logo no bloco da imagem */
body.home #brx-content > .brxe-section:first-child .croco-nav-logo,
body.home #brx-content > section:first-child .croco-nav-logo {
	flex: 0 0 auto;
	max-width: 10.5rem;
}

body.home #brx-content > .brxe-section:first-child .croco-nav-logo img,
body.home #brx-content > section:first-child .croco-nav-logo img {
	display: block;
	height: auto;
	width: 100%;
}

/* Nav à direita */
body.home #brx-content > .brxe-section:first-child .brxe-nav-nested,
body.home #brx-content > section:first-child .brxe-nav-nested {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul,
body.home #brx-content > section:first-child .brxe-nav-nested > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.15rem 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul > li,
body.home #brx-content > section:first-child .brxe-nav-nested > ul > li {
	position: relative;
	margin: 0;
	padding: 0;
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul > li > a,
body.home #brx-content > section:first-child .brxe-nav-nested > ul > li > a {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.65rem;
	font-size: 0.93rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--croco-nav-link);
	text-decoration: none;
	border-radius: 0.35rem;
	transition: color 0.16s ease, background 0.16s ease;
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul > li > a:hover,
body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul > li.current-menu-item > a,
body.home #brx-content > section:first-child .brxe-nav-nested > ul > li > a:hover,
body.home #brx-content > section:first-child .brxe-nav-nested > ul > li.current-menu-item > a {
	color: var(--croco-nav-link-hover);
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul > li > a::after,
body.home #brx-content > section:first-child .brxe-nav-nested > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0.65rem;
	right: 0.65rem;
	bottom: 0.2rem;
	height: 2px;
	border-radius: 2px;
	background: var(--croco-nav-underline);
	opacity: 0;
	transform: scaleX(0.65);
	transition: opacity 0.18s ease, transform 0.2s ease;
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul > li > a:hover::after,
body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul > li.current-menu-item > a::after,
body.home #brx-content > section:first-child .brxe-nav-nested > ul > li > a:hover::after,
body.home #brx-content > section:first-child .brxe-nav-nested > ul > li.current-menu-item > a::after {
	opacity: 1;
	transform: scaleX(1);
}

/* Submenu (aninhável): fundo sólido leve */
body.home #brx-content > .brxe-section:first-child .brxe-nav-nested .sub-menu,
body.home #brx-content > section:first-child .brxe-nav-nested .sub-menu {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid var(--croco-nav-border);
	border-radius: 0.65rem;
	box-shadow: 0 12px 36px rgba(12, 16, 26, 0.08);
	padding: 0.35rem 0;
	min-width: 11rem;
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-nested .sub-menu a::after,
body.home #brx-content > section:first-child .brxe-nav-nested .sub-menu a::after {
	display: none;
}

@media (max-width: 767px) {
	body.home #brx-content > .brxe-section:first-child .brxe-container,
	body.home #brx-content > section:first-child .brxe-container {
		flex-direction: column;
		align-items: flex-start;
	}

	body.home #brx-content > .brxe-section:first-child .brxe-nav-nested,
	body.home #brx-content > section:first-child .brxe-nav-nested {
		width: 100%;
		justify-content: flex-start;
	}

	body.home #brx-content > .brxe-section:first-child .brxe-nav-nested > ul,
	body.home #brx-content > section:first-child .brxe-nav-nested > ul {
		justify-content: flex-start;
	}
}

/* Nav simples (.brxe-nav-menu) na mesma barra, se existir */
body.home #brx-content > .brxe-section:first-child .brxe-nav-menu a,
body.home #brx-content > section:first-child .brxe-nav-menu a {
	position: relative;
	display: inline-flex;
	padding: 0.45rem 0.65rem;
	font-size: 0.93rem;
	font-weight: 500;
	color: var(--croco-nav-link);
	text-decoration: none;
	transition: color 0.16s ease;
}

body.home #brx-content > .brxe-section:first-child .brxe-nav-menu a:hover,
body.home #brx-content > section:first-child .brxe-nav-menu a:hover {
	color: var(--croco-nav-link-hover);
}

/* =========================================================================
   Home em código (.croco-home-code) — Section / Container / Row / Col
   (espelha mental model Bricks; sem #brx-content nesta view)
   ========================================================================= */
.croco-home-code {
	--croco-code-bg: #ffffff;
	--croco-code-text: #0f1218;
	--croco-code-muted: #4b5260;
	--croco-code-accent: #1a5688;
	--croco-code-accent-hover: #144a73;
	--croco-code-border: rgba(12, 18, 24, 0.08);
	--croco-code-hero-bg-a: #f4f6f9;
	--croco-code-hero-bg-b: #e8ecf4;
	--croco-code-glow-warm: rgba(255, 188, 155, 0.12);
	--croco-code-glow-cool: rgba(130, 155, 210, 0.1);
	--croco-code-max: 76rem;
	--croco-code-radius-card: clamp(1.15rem, 2.2vw, 1.75rem);
	--croco-code-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	margin: 0;
	font-family: var(--croco-code-font);
	color: var(--croco-code-text);
	background: var(--croco-code-bg);
	-webkit-font-smoothing: antialiased;
}

.croco-home-code *,
.croco-home-code *::before,
.croco-home-code *::after {
	box-sizing: border-box;
}

.croco-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 99999;
	padding: 0.75rem 1rem;
	background: var(--croco-code-text);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.35rem;
}

.croco-skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	overflow: visible;
}

/* --- Section: site header --- */
.croco-home-code .croco-section--site-header {
	background: #fafbfc;
	border-bottom: 1px solid var(--croco-code-border);
}

.croco-home-code .croco-container--header {
	width: 100%;
	max-width: min(var(--croco-code-max), 100%);
	margin-inline: auto;
	padding-block: clamp(0.65rem, 1.4vw, 1.05rem);
	padding-inline: clamp(1.25rem, 4vw, 2.75rem);
}

.croco-home-code .croco-row--header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.75rem;
	min-height: clamp(4rem, 10vw, 4.75rem);
}

.croco-home-code .croco-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.croco-home-code .croco-logo-img {
	display: block;
	height: auto;
	width: auto;
	max-width: clamp(7.5rem, 22vw, 10.5rem);
	max-height: clamp(2.25rem, 6vw, 2.85rem);
	object-fit: contain;
}

.croco-home-code .croco-logo-text {
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	text-decoration: none;
	color: var(--croco-code-text);
}

.croco-home-code .croco-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.15rem 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.croco-home-code .croco-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.7rem;
	font-size: 0.93rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #2a3038;
	text-decoration: none;
	border-radius: 0.35rem;
	transition: color 0.16s ease, background 0.16s ease;
}

.croco-home-code .croco-nav__link:hover {
	color: var(--croco-code-text);
}

.croco-home-code .croco-nav__link::after {
	content: "";
	position: absolute;
	left: 0.65rem;
	right: 0.65rem;
	bottom: 0.15rem;
	height: 2px;
	border-radius: 2px;
	background: var(--croco-code-accent);
	opacity: 0;
	transform: scaleX(0.65);
	transition: opacity 0.18s ease, transform 0.2s ease;
}

.croco-home-code .croco-nav__link:hover::after,
.croco-home-code .croco-nav__link.is-current::after {
	opacity: 1;
	transform: scaleX(1);
}

.croco-home-code .croco-nav__link.is-current {
	color: var(--croco-code-text);
	font-weight: 600;
}

@media (max-width: 767px) {
	.croco-home-code .croco-row--header {
		flex-direction: column;
		align-items: flex-start;
	}

	.croco-home-code .croco-nav__list {
		justify-content: flex-start;
	}
}

/* --- Section: hero --- */
.croco-home-code .croco-section--hero {
	padding-block: clamp(3.25rem, 8.5vw, 6.5rem);
	padding-inline: clamp(1.25rem, 4vw, 2.75rem);
	background:
		radial-gradient(ellipse 78% 62% at 8% 4%, var(--croco-code-glow-warm) 0%, transparent 55%),
		radial-gradient(ellipse 72% 58% at 94% 8%, var(--croco-code-glow-cool) 0%, transparent 55%),
		linear-gradient(168deg, var(--croco-code-hero-bg-a) 0%, var(--croco-code-hero-bg-b) 100%);
	border-bottom: 1px solid rgba(12, 18, 24, 0.06);
}

.croco-home-code .croco-container--hero {
	width: 100%;
	max-width: min(var(--croco-code-max), 100%);
	margin-inline: auto;
}

.croco-home-code .croco-row--hero {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 960px) {
	.croco-home-code .croco-row--hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
		column-gap: clamp(2.25rem, 5vw, 4rem);
	}
}

.croco-home-code .croco-col--copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.6rem, 1.3vw, 1rem);
	max-width: 36rem;
}

.croco-home-code .croco-hero__eyebrow {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--croco-code-accent);
}

.croco-home-code .croco-hero__title {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.038em;
	line-height: 1.05;
	font-size: clamp(2.15rem, 4.8vw, 3.5rem);
	color: var(--croco-code-text);
}

.croco-home-code .croco-hero__lead {
	margin: 0;
	font-size: clamp(0.98rem, 1.25vw, 1.12rem);
	line-height: 1.65;
	color: var(--croco-code-muted);
	max-width: 34rem;
}

.croco-home-code .croco-row--cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: clamp(0.35rem, 1.2vw, 1rem);
}

.croco-home-code .croco-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem 1.65rem;
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 999px;
	border: 1px solid transparent;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease;
}

.croco-home-code .croco-button:hover {
	transform: translateY(-1px);
}

.croco-home-code .croco-button--primary {
	background: var(--croco-code-accent);
	color: #fff;
	box-shadow: 0 10px 28px rgba(26, 86, 136, 0.28);
}

.croco-home-code .croco-button--primary:hover {
	background: var(--croco-code-accent-hover);
	box-shadow: 0 12px 32px rgba(26, 86, 136, 0.32);
}

.croco-home-code .croco-button--outline {
	background: #fff;
	color: var(--croco-code-text);
	border-color: rgba(12, 18, 24, 0.12);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.croco-home-code .croco-button--outline:hover {
	border-color: rgba(12, 18, 24, 0.2);
	background: #fafbfc;
}

.croco-home-code .croco-col--media {
	min-width: 0;
}

.croco-home-code .croco-block--media-surface {
	border-radius: var(--croco-code-radius-card);
	overflow: hidden;
	background: #fff;
	aspect-ratio: 4 / 3;
	max-height: min(70vh, 32rem);
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.95),
		0 24px 56px rgba(12, 16, 26, 0.12),
		0 8px 22px rgba(12, 16, 26, 0.07);
}

.croco-home-code .croco-block__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.croco-home-code .croco-block__media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 12rem;
	background: linear-gradient(145deg, #e4e9f2 0%, #f0f3f8 50%, #dce3ef 100%);
	color: #5c6578;
	font-weight: 700;
	font-size: clamp(1rem, 2.5vw, 1.35rem);
	letter-spacing: -0.02em;
}

.croco-home-code .croco-block__media-placeholder-label {
	opacity: 0.85;
}