/**
 * IONYX Home V2 — utility styles for the Divi 5 module-based Home layout.
 * Pure presentation helpers (checks, dots, underlines, flags, footer links).
 * Classes are applied from Divi module "CSS Class" fields in the Home V2 layout.
 */

/* Eyebrow kicker */
.ionyx-eyebrow p {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
}

/* Yellow underline after section titles */
.ionyx-underline h1:after,
.ionyx-underline h2:after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: #ffb81c;
	border-radius: 2px;
	margin-top: 14px;
}

.ionyx-underline-c h2:after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: #ffb81c;
	border-radius: 2px;
	margin: 14px auto 0;
}

/* Yellow check bullets */
.ionyx-checks ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ionyx-checks li {
	padding-left: 1.7em;
	position: relative;
	margin-bottom: 0.6em;
}

.ionyx-checks li:before {
	content: "\2714";
	position: absolute;
	left: 0;
	color: #ffb81c;
	font-weight: 700;
}

/* Yellow dot bullets */
.ionyx-dots ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ionyx-dots li {
	padding-left: 1.15em;
	position: relative;
	margin-bottom: 0.45em;
}

.ionyx-dots li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ffb81c;
}

/* Country chips with flags (standards section) */
.ionyx-flags ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.ionyx-flags li {
	background: #fff;
	border: 1px solid rgba(14, 34, 64, 0.12);
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 600;
	color: #0e2240;
}

/* Footer navigation lists */
.ionyx-footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ionyx-footer-nav li {
	margin-bottom: 0.55em;
}

.ionyx-footer-nav a {
	color: #c9d4e4;
	text-decoration: none;
}

.ionyx-footer-nav a:hover {
	color: #ffb81c;
}

/* Footer legal links */
.ionyx-legal a {
	color: #8fa0b8;
	text-decoration: none;
	margin-left: 18px;
}

/* Consistent product image height inside "¿Qué necesitas hoy?" blurbs */
.ionyx-needs-card .et_pb_main_blurb_image img,
.ionyx-needs-card img {
	max-height: 170px;
	width: auto;
	object-fit: contain;
}

/* Hero brand box: divider rows like the mockup */
.ionyx-hero-brandrow {
	padding: 9px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.16 );
}

.et_pb_blurb.ionyx-card-blurb {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.ionyx-card-blurb .et_pb_blurb_content,
.ionyx-card-blurb .et_pb_blurb_container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.ionyx-card-blurb .et_pb_blurb_description {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* "Ver más →" pinned to the card bottom in needs cards */
.ionyx-needs-card .et_pb_blurb_description > p:last-child {
	margin-top: auto;
	padding-top: 12px;
}

/* -------------------------------------------------------------------------
 * Uniform internal rhythm inside card grids (min-height BANDS, not fixed
 * card sizes): logos share one band, 1-2 line titles share a band, brand
 * descriptions share a band → bullets start at the same height per row.
 * ------------------------------------------------------------------------- */

/* Brand cards: logo band. Assets are pre-normalized (480x200 canvas, logo
 * centered with padding), so a fixed-height band + contain gives every card
 * an identical logo footprint regardless of the brand's real proportions. */
.et_pb_module.ionyx-brand-logo {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 4px;
}

.ionyx-brand-logo img {
	height: 72px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain;
	object-position: left center;
}

/* Trench (white logo) sits on a navy chip: give the chip a steady footprint */
.ionyx-brand-logo.et_pb_image--has-bg,
.ionyx-brand-logo[class*="background"] img {
	object-position: center;
}

/* Hero brand box: uniform normalized logos */
.ionyx-hero-logo img {
	height: 40px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain;
	object-position: left center;
}

/* Card titles (brand + sector cards): reserve two lines */
.et_pb_column.ionyx-card h3 {
	min-height: 2.8em;
}

/* Brand description band: reserve three lines so bullet lists align */
.ionyx-brand-desc {
	min-height: 68px;
	display: block;
}

/* Blurb card titles (needs + equipment): reserve two lines */
.ionyx-card-blurb h3 {
	min-height: 2.75em;
}

/* Trust strip: title band so descriptions start level */
.ionyx-trust-card h3 {
	min-height: 2.6em;
}

/* Supply-type chips (projects block D2) */
.ionyx-chips ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ionyx-chips li {
	background: #f4f6fa;
	border: 1px solid rgba( 14, 34, 64, 0.14 );
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 600;
	color: #0e2240;
	font-size: 13px;
}

/* FAQ accordion: numbered blue circles per question (docx mockup image11) */
.ionyx-faq-acc {
	counter-reset: ionyx-faq;
}

/* Divi keeps its own +/- icon on ::before (right side); the number uses ::after. */
.ionyx-faq-acc .et_pb_toggle_title {
	position: relative;
	padding-left: 44px !important;
}

.ionyx-faq-acc .et_pb_toggle_title::after {
	counter-increment: ionyx-faq;
	content: counter( ionyx-faq );
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
	position: absolute;
	left: 0;
	right: auto;
	top: 50%;
	transform: translateY( -50% );
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #1f6feb;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

/* Subtle lift on hover for needs cards */
.ionyx-needs-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ionyx-needs-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 16px 34px rgba( 14, 34, 64, 0.14 );
}

@media ( max-width: 767px ) {
	.ionyx-flags ul {
		grid-template-columns: 1fr;
	}
}