/**
 * Footer Component Styles — Ontwo Theme
 *
 * Two-section footer matching legacy design:
 * 1. Orange section (.footer-main__columns) with 3-column layout
 * 2. White legal section (.footer-main-legal) with horizontal layout
 *
 * Uses design tokens from base.css
 */

/* ==========================================================================
   Main Footer Container
   ========================================================================== */

.footer-main {
	background: var(--color-primary);
	font-size: 15px;
	color: var(--color-body);
}

.footer-main ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-main ul li {
	position: relative;
	padding: 0 0 7px;
}

/* ==========================================================================
   Top Section - Orange with 3 Columns
   ========================================================================== */

.footer-main__columns .layout-container {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: var(--spacing-unit) 0;
}

/**
 * 3-column flexbox layout
 */
.footer-main__widget-wrapper {
	display: flex;
	gap: var(--spacing-unit);
}

.footer-main__widget-wrapper > * {
	flex: 1 1 33.3333%;
	margin: 0;
}

.footer-main__widget-wrapper .title {
	display: block;
	font-weight: 700;
	font-size: 22px;
	margin-bottom: var(--spacing-small);
	color: var(--color-white);
}

/* Address column */
.contact__address .name {
	font-weight: 500;
}

.footer-main .contact__address ul li:first-child {
	max-width: 200px;
}

/* Contact column */
.contact__phone {
	font-weight: 500;
}

.footer-main .contact__us ul li a {
	color: var(--color-body);
	text-decoration: underline;
}

.footer-main .contact__us .contact__extra {
	text-decoration: none !important;
	font-weight: 500;
}

/* Direct Navigation column */
.footer-main .nav-direct ul li a {
	color: var(--color-body);
	font-weight: 500;
	text-decoration: none;
}

.footer-main .nav-direct ul li a:hover {
	text-decoration: underline;
}

/* Icon bullets for lists */
.list-icon-before {
	/* No left margin needed - handled by icon spacing */
}

.list-icon-before li,
.list-icon-before .menu-item {
	position: relative;
	display: flex;
	align-items: flex-start;
}

/* When list-icon-before is on ul - targets the links inside li */
.list-icon-before li a,
.list-icon-before .menu-item a,
/* When list-icon-before is on li - targets the direct a child */
li.list-icon-before > a {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Icon alignment for both cases */
.list-icon-before .icon,
li.list-icon-before .icon {
	flex-shrink: 0;
	vertical-align: baseline;
}

.space-list-item {
	margin-top: 28px;
}

/* ==========================================================================
   Bottom Section - White Legal Bar
   ========================================================================== */

.footer-main-legal {
	background: var(--color-white);
	font-size: 14px;
	color: var(--color-gray);
}

.footer-main-legal .layout-container {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: calc(var(--spacing-unit) * 0.5) 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-half);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Social icons in legal bar */
.footer-main-legal .footer-social {
	display: none; /* Hidden on desktop */
}

.footer-main-legal .footer-social ul {
	display: flex;
	gap: var(--spacing-small);
	margin: 0;
	padding: 0;
}

/* Protestant logo */
.footer__logo img {
	width: auto;
	min-width: 177px;
	height: auto;
}

/* Copyright */
.footer-main-legal__copyrights p {
	margin: 0;
}

.footer-main-legal__copyrights a {
	color: var(--color-gray);
	text-decoration: none;
}

.footer-main-legal__copyrights a:hover {
	color: var(--color-primary);
}

/* Footer nav links */
.footer-main-legal__links ul {
	display: flex;
	margin: 0;
	padding: 0;
}

.footer-main-legal__links li {
	margin: 0 0 0 11px;
	padding-left: 1em;
}

.footer-main-legal li a {
	text-decoration: none;
	color: var(--color-gray);
}

.footer-main-legal li a:hover {
	color: var(--color-primary);
}


/* Motto image */
.footer__text img {
	width: auto;
	min-width: 192px;
	height: 20px;
	margin-top: 15px;
}

/* ==========================================================================
   Responsive: Tablet (max-width: 1024px)
   ========================================================================== */

@media screen and (max-width: 1024px) {
	/**
	 * Adjust spacing and column gaps for tablets
	 */
	.footer-main__widget-wrapper {
		gap: var(--spacing-half);
	}

	.footer-main__widget-wrapper .title {
		font-size: 20px;
	}

	.footer-main {
		font-size: 14px;
	}

	/* Reduce logo sizes */
	.footer__logo img {
		min-width: 137px;
	}

	.footer__text img {
		min-width: 137px;
	}

	/* Adjust legal section spacing */
	.footer-main-legal .layout-container {
		gap: var(--spacing-small);
	}
}

/* ==========================================================================
   Responsive: Mobile (max-width: 875px)
   ========================================================================== */

@media screen and (max-width: 875px) {
	/**
	 * Stack columns vertically on mobile
	 */
	.footer-main__widget-wrapper {
		flex-direction: column;
		gap: var(--spacing-unit);
	}

	.footer-main__widget-wrapper > * {
		flex: 1 1 auto;
		width: 100%;
	}

	.footer-main__columns .layout-container {
		width: 100%;
		padding: 50px 25px;
	}

	/* Legal section - stack and center elements */
	.footer-main-legal .layout-container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--spacing-half) 15px;
	}

	/* Show social icons on mobile */
	.footer-main-legal .footer-social {
		display: block;
		order: -2; /* Show before logo */
	}

	/* Center logos on mobile */
	.footer__logo {
		order: -1; /* Move logo to top */
		margin-bottom: 15px;
	}

	.footer__logo img {
		width: 22%;
		min-width: 177px;
	}

	.footer__text {
		margin-top: 15px;
	}

	.footer__text img {
		width: 15%;
		min-width: 192px;
	}

	/* Stack footer nav vertically */
	.footer-main-legal__links ul {
		flex-direction: column;
		text-align: center;
	}

	.footer-main-legal__links li {
		margin: 0;
		padding: 0;
		padding-top: 0.5em;
	}


	/* Adjust social icons spacing */
	.footer-main-legal .footer-social ul {
		justify-content: center;
	}
}