/*
 * Imagunet footer styling.
 * Source: old site's Elementor footer template (id 130), scraped CSS in
 * brand-assets/reference-css/post-130.css cross-referenced with the
 * Elementor global-kit typography tokens in post-8.css. Values (padding,
 * gaps, breakpoints, font sizes) are taken directly from that CSS rather
 * than eyeballed, same standard as header.css.
 *
 * Note: unlike the header (which prepends a top bar onto GP's own header
 * markup), this footer fully replaces GeneratePress's default footer
 * (functions.php removes generate_construct_footer and hooks imagunet_footer
 * in its place). Because of that, GP's grid-container max-width constraint —
 * which only gets added to its own `.inside-site-info` wrapper inside
 * generate_construct_footer() — never wraps our markup, so the padding-
 * doubling bug that hit the header (documented in ~/HANDOFF.md) doesn't
 * apply here. No override needed.
 */

:root {
	--imagunet-footer-dark: #0E1C29;
}

.imagunet-footer a {
	text-decoration: none;
}

/* ---------- Top block ---------- */

.imagunet-footer-top {
	background-color: var(--imagunet-secondary);
}

.imagunet-footer-top-inner {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 60px 70px;
	box-sizing: border-box;
}

/* Old site's footer is a 2-row grid, not one long row: row 1 is
 * brand+partner badges, row 2 is contact info+nav columns+social. */
.imagunet-footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 50px;
}

.imagunet-footer-row-1 {
	/* Old site's row 1 also contains a newsletter widget that's hidden at
	 * every breakpoint (see functions.php); with it gone, the partner
	 * badges sit right after the brand column rather than being pushed to
	 * the far edge, so flex-start (not space-between) is correct here. */
	justify-content: flex-start;
	gap: 115px;
}

.imagunet-footer-row-2 {
	justify-content: space-between;
}

.imagunet-footer-brand {
	flex: 0 0 230px;
	max-width: 230px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.imagunet-footer-logo {
	max-width: 165px;
	width: 100%;
	height: auto;
}

.imagunet-footer-tagline {
	margin: 0;
	font-family: 'Plus Jakarta Sans', Sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--imagunet-accent);
}

.imagunet-footer-partners {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px;
}

.imagunet-footer-partner {
	width: auto;
	object-fit: contain;
	object-position: center center;
}

.imagunet-footer-partner-glpi,
.imagunet-footer-partner-wazuh {
	height: 110px;
}

.imagunet-footer-partner-zabbix {
	height: 56px;
}

.imagunet-footer-contact {
	flex: 0 0 auto;
}

.imagunet-footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 270px;
}

.imagunet-footer-contact-list li,
.imagunet-footer-contact-list a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: 'Inter', Sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--imagunet-accent);
}

.imagunet-footer-contact-list svg {
	flex: 0 0 auto;
	width: 16px;
	height: 17px;
	margin-top: 3px;
	fill: var(--imagunet-accent);
}

.imagunet-footer-nav-columns {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px 60px;
}

.imagunet-footer-col {
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 140px;
}

.imagunet-footer-col h3 {
	margin: 0;
	font-family: 'Inter', Sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--imagunet-accent);
}

.imagunet-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.imagunet-footer-menu li a {
	font-family: 'Inter', Sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--imagunet-accent);
	transition: color 0.2s;
}

/* Same GeneratePress dynamic nav-hover collision as the header nav — see
 * header.css for the full explanation. !important only on color. */
.imagunet-footer-menu li a:hover,
.imagunet-footer-menu li a:focus {
	color: var(--imagunet-primary) !important;
}

.imagunet-footer-social {
	min-width: auto;
}

.imagunet-footer-social-icons {
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.imagunet-footer-social-icons a {
	display: flex;
	color: var(--imagunet-accent);
	opacity: 0.85;
	transition: opacity 0.2s;
}

.imagunet-footer-social-icons a:hover {
	opacity: 1;
}

.imagunet-footer-social-icons svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ---------- Bottom bar ---------- */

.imagunet-footer-bottom {
	background-color: var(--imagunet-footer-dark);
}

.imagunet-footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 20px 70px;
	box-sizing: border-box;
}

.imagunet-footer-copyright {
	margin: 0;
	font-family: 'Inter', Sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--imagunet-accent);
}

.imagunet-footer-legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.imagunet-footer-legal-menu li a {
	font-family: 'Inter', Sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--imagunet-accent);
}

.imagunet-footer-legal-menu li a:hover,
.imagunet-footer-legal-menu li a:focus {
	color: var(--imagunet-primary) !important;
}

/* "Terms and Conditions" is plain, non-clickable text on old site (no real
 * href) — kept as a normal, editable menu item (see functions.php) but
 * visually disabled via this class, applied to that item from Appearance >
 * Menus > CSS Classes. */
.imagunet-footer-legal-menu li.imagunet-footer-legal-nolink a {
	pointer-events: none;
	cursor: default;
}

.imagunet-footer-legal-menu li.imagunet-footer-legal-nolink a:hover {
	color: var(--imagunet-accent) !important;
}

/* ---------- Responsive (breakpoints match old site) ---------- */

@media (max-width: 1199px) {
	.imagunet-footer-top-inner {
		padding: 60px 20px;
		text-align: center;
	}

	.imagunet-footer-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.imagunet-footer-brand {
		align-items: center;
	}

	.imagunet-footer-partners {
		justify-content: center;
	}

	.imagunet-footer-partner-glpi,
	.imagunet-footer-partner-wazuh {
		height: 100px;
	}

	.imagunet-footer-partner-zabbix {
		height: 59px;
	}

	.imagunet-footer-contact-list {
		align-items: center;
		margin: 0 auto;
	}

	/* Old site's nav-columns container switches to flex-direction:column at
	 * this exact breakpoint (source: post-130.css, .elementor-element-d7fe135
	 * media(max-width:1199px) rule) — each column stacks full-width instead
	 * of sitting side by side. */
	.imagunet-footer-nav-columns {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 40px;
	}

	.imagunet-footer-col {
		align-items: center;
	}

	.imagunet-footer-bottom-inner {
		padding: 20px 20px;
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 767px) {
	.imagunet-footer-top-inner {
		padding: 60px 12px;
		gap: 40px;
	}

	.imagunet-footer-partner-glpi,
	.imagunet-footer-partner-wazuh {
		height: 80px;
	}

	.imagunet-footer-partner-zabbix {
		height: 49px;
	}

	.imagunet-footer-bottom-inner {
		padding: 20px 12px;
	}
}