/**
 * FPL Theme Footer Component Styles
 *
 * Implements the 3-section institutional footer:
 * 1. Government Information Resources horizontal strip
 * 2. Main 4-column corporate footer (Branding, Assets, About, Contacts)
 * 3. Copyright and legal navigation bar
 *
 * @package FPL
 */

:root {
	--fpl-footer-logo-max-width: 240px;
	--fpl-footer-logo-max-height: 60px;
}

/* ==========================================================================
   Section 1: Government Information Resources Card Grid (HOME-01H)
   ========================================================================== */
.fpl-gov-resources-section,
.footer-gov-resources {
	background-color: #F8FAFA;
	border-top: 1px solid var(--wp--preset--color--border-light, #E2E8F0);
	border-bottom: 1px solid var(--wp--preset--color--border-light, #E2E8F0);
	padding: 36px 24px;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 3;
	margin-top: 0;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
}

.fpl-gov-resources-container {
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.fpl-gov-resources-header {
	margin: 0 0 20px 0;
}

.fpl-gov-resources-heading {
	font-family: var(--fpl-font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--baltico, #165567);
	line-height: 1.3;
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--wp--preset--color--aviazone, #00AFCA);
	display: inline-block;
}

.fpl-gov-resources-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.fpl-gov-resources-grid.has-1-items {
	grid-template-columns: minmax(0, 360px);
	justify-content: center;
}

.fpl-gov-resources-grid.has-2-items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fpl-gov-resources-grid.has-3-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fpl-gov-resources-grid.has-4-items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fpl-gov-resources-grid.has-5-items {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fpl-gov-resources-grid.has-6-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fpl-gov-resources-grid.has-7-items,
.fpl-gov-resources-grid.has-8-items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fpl-gov-resources-grid.has-9-items,
.fpl-gov-resources-grid.has-10-items {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fpl-gov-resources-grid.has-many-items {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.fpl-gov-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background-color: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid rgba(22, 85, 103, 0.12);
	border-radius: 8px;
	padding: 12px 14px;
	text-decoration: none;
	color: var(--wp--preset--color--baltico, #165567);
	box-sizing: border-box;
	height: 100%;
	min-height: 60px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fpl-gov-card:hover {
	border-color: var(--wp--preset--color--aviazone, #00AFCA);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(22, 85, 103, 0.08);
}

.fpl-gov-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--aviazone, #00AFCA);
	outline-offset: 2px;
	border-radius: 8px;
}

.fpl-gov-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

.fpl-gov-card-icon img,
.fpl-gov-card-icon svg {
	width: 30px;
	height: 30px;
	max-height: 30px;
	object-fit: contain;
	display: block;
}

.fpl-gov-card-title {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-main, #1B2A2F);
	word-break: normal;
	overflow-wrap: break-word;
}

.fpl-gov-card-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--aviazone, #00AFCA);
	transition: transform 0.2s ease;
}

.fpl-gov-card:hover .fpl-gov-card-arrow {
	transform: translateX(3px);
}

/* Backward-compatibility shims for legacy strip elements if any */
.footer-gov-container {
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}

/* ==========================================================================
   Section 2: Main Corporate Footer
   ========================================================================== */
.site-footer {
	background-color: var(--wp--preset--color--diviza);
	color: var(--wp--preset--color--white);
	padding: 70px 24px 30px;
	position: relative;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
}

/* Background Corporate Mark Watermark */
.footer-watermark {
	position: absolute;
	right: -100px;
	bottom: -100px;
	width: 500px;
	height: 500px;
	opacity: 0.04;
	pointer-events: none;
	color: var(--wp--preset--color--white);
	z-index: 1;
}

.footer-content {
	max-width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Footer Grid Layout (4 Columns default with 3 active slots)
   -------------------------------------------------------------------------- */
.footer-grid {
	display: grid;
	grid-template-columns: 2fr repeat(var(--footer-slots, 3), minmax(0, 1fr));
	gap: 48px;
	margin-bottom: 50px;
}

/* 4-column balanced layout (Brand + 3 slots) */
.footer-grid.has-3-slots {
	grid-template-columns: 2fr 1fr 1fr 1.3fr;
	gap: 48px;
}

.footer-grid.has-4-slots {
	grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr;
	gap: 36px;
}

.footer-grid.has-2-slots {
	grid-template-columns: 2fr 1fr 1fr;
	gap: 48px;
}

.footer-grid.has-1-slots {
	grid-template-columns: 2fr 1.5fr;
	gap: 48px;
}

.footer-grid.has-0-slots {
	grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   Column Headings & Typography
   -------------------------------------------------------------------------- */
.footer-column h3 {
	color: var(--wp--preset--color--white);
	font-family: var(--fpl-font-heading);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin: 0 0 24px 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--wp--preset--color--aviazone);
	display: inline-block;
}

/* Brand Column */
.footer-column-brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	max-width: 100%;
}

.footer-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--fpl-footer-logo-max-width, 240px);
	max-height: var(--fpl-footer-logo-max-height, 60px);
	object-fit: contain;
}

.footer-slogan {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--cielo);
	opacity: 0.85;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Social Media Buttons
   -------------------------------------------------------------------------- */
.footer-social-links {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.footer-social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background-color: transparent;
	color: var(--wp--preset--color--white);
	transition: all 0.2s ease-in-out;
}

.footer-social-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.footer-social-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--aviazone);
	outline-offset: 3px;
}

/* Brand specific hover and focus styles */
.footer-social-btn.social-youtube:hover,
.footer-social-btn.social-youtube:focus-visible {
	background-color: #CC181E;
	border-color: #CC181E;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.footer-social-btn.social-telegram:hover,
.footer-social-btn.social-telegram:focus-visible {
	background-color: #229ED9;
	border-color: #229ED9;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.footer-social-btn.social-instagram:hover,
.footer-social-btn.social-instagram:focus-visible {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	border-color: transparent;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.footer-social-btn.social-facebook:hover,
.footer-social-btn.social-facebook:focus-visible {
	background-color: #1877F2;
	border-color: #1877F2;
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Navigation Menus (Columns 2 & 3 with Chevron Arrows)
   -------------------------------------------------------------------------- */
.footer-nav {
	display: block;
	margin: 0;
	padding: 0;
}

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

.footer-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: var(--wp--preset--color--cielo);
	opacity: 0.85;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.footer-menu a::after {
	content: "›";
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	opacity: 0.55;
	flex-shrink: 0;
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

.footer-menu a:hover {
	color: var(--wp--preset--color--aviazone);
	opacity: 1;
}

.footer-menu a:hover::after {
	opacity: 1;
	color: var(--wp--preset--color--aviazone);
	transform: translateX(3px);
}

.footer-menu a:focus-visible {
	outline: 2px solid var(--wp--preset--color--aviazone);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Contacts Column (Column 4)
   -------------------------------------------------------------------------- */
.footer-contacts-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
	color: var(--wp--preset--color--cielo);
	opacity: 0.9;
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.5;
}

.footer-contact-item svg {
	width: 18px;
	height: 18px;
	fill: var(--wp--preset--color--aviazone);
	flex-shrink: 0;
	margin-top: 2px;
}

.footer-contact-item a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease-in-out;
}

.footer-contact-item a:hover {
	color: var(--wp--preset--color--aviazone);
}

.footer-contact-item a:focus-visible {
	outline: 2px solid var(--wp--preset--color--aviazone);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   Section 3: Copyright and Legal Navigation Bar
   ========================================================================== */
.footer-divider {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 40px 0 24px;
}

.footer-bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--wp--preset--color--acciao);
}

.footer-copyright {
	line-height: 1.5;
}

.footer-legal-nav {
	display: block;
}

.footer-bottom-links {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-bottom-links a {
	color: var(--wp--preset--color--acciao);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.footer-bottom-links a:hover {
	color: var(--wp--preset--color--white);
}

.footer-bottom-links a:focus-visible {
	outline: 2px solid var(--wp--preset--color--aviazone);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Desktop Pipe Dividers */
@media (min-width: 1024px) {
	.footer-bottom-links li + li::before {
		content: "|";
		margin-right: 20px;
		color: rgba(255, 255, 255, 0.25);
		user-select: none;
	}
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 1200px) and (min-width: 1024px) {
	.fpl-gov-resources-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
	.footer-grid.has-3-slots {
		gap: 32px;
	}
}

@media (max-width: 1023px) and (min-width: 768px) {
	.fpl-gov-resources-section {
		padding: 32px 20px;
	}
	.fpl-gov-resources-grid,
	.fpl-gov-resources-grid[class*="has-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px;
	}
	.fpl-gov-card-title {
		font-size: 12px;
	}
	.footer-grid,
	.footer-grid.has-4-slots,
	.footer-grid.has-3-slots,
	.footer-grid.has-2-slots,
	.footer-grid.has-1-slots {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
	.footer-column-brand {
		grid-column: span 2;
		max-width: 580px;
	}
	.footer-bottom-bar {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}
	.footer-bottom-links {
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.fpl-gov-resources-section {
		padding: 24px 16px;
	}
	.fpl-gov-resources-header {
		margin-bottom: 16px;
	}
	.fpl-gov-resources-heading {
		font-size: 16px;
	}
	.fpl-gov-resources-grid,
	.fpl-gov-resources-grid[class*="has-"] {
		grid-template-columns: 1fr !important;
		gap: 10px;
	}
	.fpl-gov-card {
		padding: 10px 12px;
		min-height: 52px;
		gap: 10px;
	}
	.fpl-gov-card-icon {
		width: 26px;
		height: 26px;
	}
	.fpl-gov-card-icon img,
	.fpl-gov-card-icon svg {
		width: 24px;
		height: 24px;
	}
	.fpl-gov-card-title {
		font-size: 10.5px;
		line-height: 1.25;
	}
	.fpl-gov-card-arrow {
		font-size: 12px;
	}
	.site-footer {
		padding: 48px 16px 24px;
	}
	.footer-grid,
	.footer-grid.has-4-slots,
	.footer-grid.has-3-slots,
	.footer-grid.has-2-slots,
	.footer-grid.has-1-slots {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-bottom: 36px;
	}
	.footer-column-brand {
		grid-column: span 1;
		width: 100%;
		max-width: 100%;
	}
	.footer-logo {
		max-width: min(var(--fpl-footer-logo-max-width, 240px), 100%);
		max-height: var(--fpl-footer-logo-max-height, 60px);
	}
	.footer-bottom-bar {
		flex-direction: column;
		gap: 14px;
		text-align: center;
	}
	.footer-bottom-links {
		flex-direction: column;
		gap: 10px;
		align-items: center;
	}
}

@media (max-width: 360px) {
	.fpl-gov-resources-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.fpl-gov-card {
		padding: 10px 12px;
		gap: 10px;
	}
	.fpl-gov-card-title {
		font-size: 11.5px;
	}
}