/*
Theme Name: Selecta (Hello Elementor Child)
Theme URI: https://www.selectaauditores.com.br/
Description: Child theme for Hello Elementor. Layout lives in Elementor; this theme only holds tweaks that must survive parent updates.
Author: wevolve
Author URI: https://wevolve.dev
Template: hello-elementor
Version: 1.0.0
Text Domain: selecta
*/

/* Only what Elementor controls can't express. Colors come from the kit's CSS variables (DESIGN.md). */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 2px;
}

html {
	scroll-padding-top: 96px; /* anchors (#fale-conosco, #escopo) clear the sticky header */
}

/*
 * Sticky header in pure CSS (Pro's JS sticky clones the whole bar, duplicating menu links and IDs).
 * The header sticks at -topbar height, so the contact bar scrolls away and the main bar stays.
 * Keep in sync with the top bar's min-height in scripts/build/chrome.php.
 */
:root {
	--selecta-topbar-h: 38px;
}
.elementor-location-header {
	position: sticky;
	top: calc(-1 * var(--selecta-topbar-h));
	z-index: 50;
}
.admin-bar .elementor-location-header {
	top: calc(32px - var(--selecta-topbar-h));
}
@media (max-width: 767px) {
	.elementor-location-header,
	.admin-bar .elementor-location-header {
		top: 0; /* top bar is hidden on mobile */
	}
}

/* Rank Math breadcrumb via [rank_math_breadcrumb] */
.selecta-breadcrumb .rank-math-breadcrumb p {
	margin: 0;
	font-size: 14px;
	color: var(--e-global-color-txtsuav);
}
.selecta-breadcrumb .rank-math-breadcrumb a {
	color: var(--e-global-color-accent);
	text-decoration: none;
}
.selecta-breadcrumb .rank-math-breadcrumb a:hover {
	text-decoration: underline;
}
.selecta-breadcrumb .separator {
	margin: 0 6px;
}
/* On the navy hero band the breadcrumb needs the on-dark colours */
.selecta-hero-band .selecta-breadcrumb .rank-math-breadcrumb p {
	color: var(--e-global-color-cinzacl);
}
.selecta-hero-band .selecta-breadcrumb .rank-math-breadcrumb a {
	color: var(--e-global-color-tealcla);
}

/* Whole card is a link (container HTML tag = a) */
.selecta-card-link {
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.selecta-card-link:hover {
	border-color: var(--e-global-color-primary) !important;
	box-shadow: 0 8px 24px rgba(14, 34, 53, 0.08);
	transform: translateY(-2px);
}

/* Inline links in body copy are underlined (DESIGN.md §2) */
.elementor-widget-text-editor p a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor-field-type-acceptance a {
	color: var(--e-global-color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.selecta-card-link { transition: none; }
	.selecta-card-link:hover { transform: none; }
}

/* ── Subframe direction B ─────────────────────────────────────────────────── */

/* Active menu item in bold (Elementor has one typography for all states) */
.elementor-location-header .elementor-nav-menu--main .elementor-item-active {
	font-weight: 600;
}

/* ── Hero com foto (Home) ─────────────────────────────────────────────────── */
/* The photo is a real <img> (eager + fetchpriority, guide §2.2) stretched behind the copy with a navy gradient. */
.selecta-hero-feature {
	position: relative;
	isolation: isolate;
}
.selecta-hero-feature > .selecta-hero-media {
	position: absolute !important;
	inset: 0;
	z-index: -1;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
}
.selecta-hero-feature > .selecta-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.selecta-hero-feature > .selecta-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #0e2235 0%, rgba(14, 34, 53, 0.88) 45%, rgba(14, 34, 53, 0) 100%);
}
@media (max-width: 767px) {
	.selecta-hero-feature > .selecta-hero-media::after {
		background: rgba(14, 34, 53, 0.85);
	}
}

/* ── Numbers strip (doc "big numbers" <li>): credentials bar ─────────────── */
/* Compact horizontal bar: five equal columns (even icon rhythm), icon beside the text, left-aligned like the
   rest of the site, everything vertically centred. */
.selecta-numbers .elementor-icon-list-items {
	display: grid;
	/* The last item is the longest ("Atendimento próximo e humanizado"): only its column is wider, so the
	   spacing between icons (which depends on the columns before each one) stays equal. */
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr);
	background: #fff;
	border: 1px solid var(--e-global-color-borda);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(14, 34, 53, 0.08);
	overflow: hidden;
}
.selecta-numbers .elementor-icon-list-item {
	flex-direction: row;
	align-items: center !important;
	gap: 10px;
	margin: 0 !important;
	padding: 20px 16px !important;
}
.selecta-numbers .elementor-icon-list-item:not(:last-child) {
	border-right: 1px solid var(--e-global-color-borda);
}
.selecta-numbers .elementor-icon-list-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 !important;
	padding: 0 !important; /* Elementor's icon gap pushed every glyph 2px off-centre */
	border-radius: 50%;
	background: var(--e-global-color-tealbg);
}
/* Same optical height for every glyph: Font Awesome icons have different proportions (448×512 vs 640×512),
   so a square box made the wide ones (balança, aperto de mãos) look smaller. */
.selecta-numbers .elementor-icon-list-icon svg {
	width: auto !important;
	height: 18px !important;
	max-width: 23px;
	margin: 0 !important;
}
.selecta-numbers .elementor-icon-list-text {
	padding-inline-start: 0 !important;
	padding-left: 0 !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	text-wrap: balance;
}
/* Small laptops (1025–1279px): cells get too narrow for icon + 2 lines side by side, so the icon moves
   above the (still left-aligned) text, which then gets the full cell width. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.selecta-numbers .elementor-icon-list-item {
		flex-direction: column;
		align-items: flex-start !important;
		justify-content: flex-start;
	}
	/* Elementor centres the text with align-self (meant for the row layout); stacked, that centred one-line items */
	.selecta-numbers .elementor-icon-list-text {
		align-self: flex-start !important; /* Elementor's rule is more specific */
	}
}
@media (max-width: 1024px) {
	.selecta-numbers .elementor-icon-list-items {
		grid-template-columns: 1fr;
	}
	.selecta-numbers .elementor-icon-list-item {
		gap: 16px;
		padding: 14px 24px !important;
	}
	.selecta-numbers .elementor-icon-list-item:not(:last-child) {
		border-right: 0;
		border-bottom: 1px solid var(--e-global-color-borda);
	}
	.selecta-numbers .elementor-icon-list-text {
		font-size: 17px !important;
	}
}

/* ── Services: rows of 4, last row centered (7 = 4 + 3) ───────────────────── */
.selecta-services > .selecta-service-card {
	width: calc((100% - 3 * 24px) / 4) !important;
}
@media (max-width: 1024px) {
	.selecta-services > .selecta-service-card { width: calc((100% - 24px) / 2) !important; }
}
@media (max-width: 767px) {
	.selecta-services > .selecta-service-card { width: 100% !important; }
}
.selecta-service-card > .elementor-widget-heading:last-child {
	margin-top: auto; /* "Saiba mais" pinned to the bottom so cards in a row line up */
}
.selecta-service-card > .elementor-widget-heading:last-child .elementor-heading-title {
	font-size: 15px;
	white-space: nowrap;
}

/* ── Lists from the doc: hairline rows, no boxes ──────────────────────────── */
/* Design review 31/10/2026: a box means "clickable" (service cards, form). Lists are rows on a rule. */
.selecta-list .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(var(--selecta-cols, 3), minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 0;
	counter-reset: selecta-step;
}
.selecta-cols-1 { --selecta-cols: 1; }
.selecta-cols-2 { --selecta-cols: 2; }
.selecta-cols-3 { --selecta-cols: 3; }
.selecta-cols-5 { --selecta-cols: 5; }
@media (max-width: 1024px) {
	.selecta-cols-3,
	.selecta-cols-5 { --selecta-cols: 2; }
}
@media (max-width: 767px) {
	.selecta-list { --selecta-cols: 1 !important; }
}
.selecta-list .elementor-icon-list-item {
	align-items: baseline !important;
	margin: 0 !important;
	padding: 20px 0 !important;
	border-top: 1px solid var(--e-global-color-borda);
}
.selecta-list .elementor-icon-list-icon {
	flex: none;
}
.selecta-list .elementor-icon-list-icon svg {
	position: relative;
	top: 1px;
}
.selecta-list-plain .elementor-icon-list-icon {
	display: none;
}
.selecta-list-plain .elementor-icon-list-text,
.selecta-list-number .elementor-icon-list-text {
	padding-inline-start: 0 !important;
	padding-left: 0 !important;
}

/* Numbered process (scope): number in a fixed column, steps read top to bottom */
.selecta-list-number .elementor-icon-list-icon {
	display: none;
}
.selecta-list-number .elementor-icon-list-item {
	gap: 24px;
}
.selecta-list-number .elementor-icon-list-item::before {
	counter-increment: selecta-step;
	content: counter(selecta-step, decimal-leading-zero);
	flex: none;
	width: 2ch;
	font-family: "Exo 2", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	color: var(--e-global-color-primary);
}

/* ── Signature: the logo's diagonal stripes, large, on the navy hero band ──── */
/* Drawn from the mark itself (assets/img/stripes.svg), so it can only belong to Selecta. */
.selecta-hero-band {
	background-image: url("assets/img/stripes.svg?v=1") /* bump ?v= when the file changes (1-year cache) */;
	background-repeat: no-repeat;
	background-position: right -170px center; /* motif stays clear of the copy (max ~640px wide) */
	background-size: auto 135%;
}
@media (max-width: 1024px) {
	.selecta-hero-band { background-position: right -160px bottom -40px; background-size: auto 120%; }
}
@media (max-width: 767px) {
	.selecta-hero-band { background-position: right -120px bottom -30px; background-size: auto 70%; }
}

/* ── Reading measure ≤ ~70 characters ─────────────────────────────────────── */
.elementor-widget-text-editor p {
	max-width: 68ch;
}

/* Footer: separator between "Política de Privacidade" and the credit (no middle dots) */
.selecta-sep {
	display: inline-block;
	width: 24px;
}

/* Long e-mail addresses (footer contact column at ~1040px) may break instead of overflowing the page */
a[href^="mailto:"] .elementor-icon-list-text,
a[href^="mailto:"] {
	overflow-wrap: anywhere;
}

/* ── Statement ledger (Home · Diferenciais) ───────────────────────────────── */
.selecta-statements .elementor-icon-list-items {
	column-gap: 48px;
}
.selecta-statements .elementor-icon-list-item {
	align-items: flex-start !important;
	gap: 16px;
	padding: 24px 0 !important;
}
/* Auditor's tick: the mark beside a verified figure. Bump ?v= when the file changes (1-year cache). */
.selecta-statements .elementor-icon-list-item::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 2px; /* centred on the first line (22px × 1.3) */
	background: url("assets/img/tick.svg?v=1") no-repeat center / contain;
}
.selecta-statements .elementor-icon-list-text {
	font-size: 22px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
/* Close the ledger: rule under the last row (two items on desktop/tablet, one when stacked) */
.selecta-statements .elementor-icon-list-item:nth-last-child(-n + 2) {
	border-bottom: 1px solid var(--e-global-color-borda);
}
@media (max-width: 1024px) {
	.selecta-statements .elementor-icon-list-text { font-size: 20px !important; }
	.selecta-statements .elementor-icon-list-item::before { margin-top: 1px; }
}
@media (max-width: 767px) {
	.selecta-statements .elementor-icon-list-item { padding: 18px 0 !important; gap: 14px; }
	.selecta-statements .elementor-icon-list-text { font-size: 19px !important; }
	.selecta-statements .elementor-icon-list-item::before { width: 22px; height: 22px; margin-top: 1px; }
	.selecta-statements .elementor-icon-list-item:nth-last-child(2) { border-bottom: 0; }
}

/* Headings break into even lines (no one-word orphans like "empresa" alone on line 2) */
.elementor-heading-title {
	text-wrap: balance;
}

/* ── Principles (Sobre · Valores): values panel, heading in the first cell ──── */
.selecta-values {
	background: var(--e-global-color-borda); /* shows through the 1px gaps as the dividers */
	border: 1px solid var(--e-global-color-borda);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(14, 34, 53, 0.08);
	overflow: hidden;
}
.selecta-values > .e-con,
.selecta-values > .e-con-inner > .e-con {
	background: #fff;
}
.selecta-values > .e-con-inner,
.selecta-values {
	grid-auto-rows: 1fr; /* both rows the same height */
}
.selecta-values-head {
	justify-content: flex-start;
}
.selecta-values-head h2 {
	font-size: 34px !important;
	line-height: 1.15 !important;
}
.selecta-value .elementor-icon-list-item {
	flex-direction: column;
	align-items: flex-start !important;
	gap: 20px;
	margin: 0 !important;
}
.selecta-value .elementor-icon-list-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--e-global-color-tealbg);
}
.selecta-value .elementor-icon-list-icon svg {
	width: auto !important;
	height: 22px !important;
	max-width: 28px;
	margin: 0 !important;
}
.selecta-value .elementor-icon-list-text {
	align-self: flex-start !important; /* Elementor centres it for the row layout */
	padding-inline-start: 0 !important;
	padding-left: 0 !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-wrap: balance;
}
@media (max-width: 1024px) {
	.selecta-values-head h2 { font-size: 30px !important; }
	.selecta-value .elementor-icon-list-text { font-size: 20px !important; }
}
@media (max-width: 767px) {
	.selecta-values-head h2 { font-size: 26px !important; }
	.selecta-values > .e-con-inner,
	.selecta-values { grid-auto-rows: auto; } /* equal rows only matter side by side */
	.selecta-values > .e-con,
	.selecta-values > .e-con-inner > .e-con { padding: 20px !important; }
	.selecta-value .elementor-icon-list-text { align-self: center !important; }
	/* Stacked: icon beside the text keeps five rows compact */
	.selecta-value .elementor-icon-list-item { flex-direction: row; align-items: center !important; gap: 16px; }
	.selecta-value .elementor-icon-list-icon { width: 44px; height: 44px; }
	.selecta-value .elementor-icon-list-icon svg { height: 19px !important; }
	.selecta-value .elementor-icon-list-text { font-size: 19px !important; }
}