/* ────────────────────────────────────────────────────────────
   03-site-footer.css — Site Footer
   Zones:
     1. .footer-widgets   — top footer: 4-column widget grid (gray bg)
     2. .site-info        — bottom bar: copyright left + Privacy Policy right

   GP footer anatomy (actual HTML):
     div.site-footer
       div#footer-widgets.footer-widgets
         div.footer-widgets-container.grid-container
           div.inside-footer-widgets
             div.footer-widget-1  (logo · social · admin address · restore address)
             div.footer-widget-2  (helpful links nav menu w/ widget title)
             div.footer-widget-3  (empty — hidden via CSS)
             div.footer-widget-4  (badge gallery · 501c3 text · equal housing image+text)
             div.footer-widget-5  (empty — hidden via CSS)
       footer.site-info
         div.inside-site-info.grid-container
           div.footer-bar         (Privacy Policy — right)
           div.copyright-bar      (© year — left)
   ──────────────────────────────────────────────────────────── */


/* ── 1. Widget wrapper ────────────────────────────────────── */

.site-footer .footer-widgets {
	background-color: var(--color-gray-primary);
}

/* Flex row for the columns; vertical rhythm via padding-block */
.site-footer .inside-footer-widgets {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--spacing-lg);
	padding-block: var(--spacing-xl);
}

/* Remove GP's default widget inner padding — we own the spacing */
.site-footer .inside-footer-widgets .widget.inner-padding {
	padding: 0;
}

/* Space between stacked widgets within a column */
.site-footer .inside-footer-widgets .widget + .widget {
	margin-top: var(--spacing-md);
}

/* Hide empty widget columns (GP requires 5 to be registered) */
.site-footer .footer-widget-5 {
	display: none;
}


/* ── Column widths — 4 active columns ────────────────────── */

.site-footer .footer-widget-1 { flex: 0 0 27%; }
.site-footer .footer-widget-2 { flex: 0 0 18%; }
.site-footer .footer-widget-4 { flex: 1 1 0; }


/* ── Logo image ───────────────────────────────────────────── */

.site-footer .footer-widget-1 .wp-block-image img {
	display: block;
	max-width: 180px;
	height: auto;
}


/* ── Social links — strip WP colored circles ──────────────── */

.site-footer .wp-block-social-links {
	gap: var(--spacing-xs) !important;
	padding: 0 !important;
}

.site-footer .wp-block-social-links .wp-social-link {
	background-color: transparent !important;
	padding: 0 !important;
	color: var(--color-blue-dark) !important;
	transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-1px);
	opacity: 0.7;
}

.site-footer .wp-block-social-links .wp-social-link svg {
	width: 30px !important;
	height: 30px !important;
	fill: currentColor !important;
}


/* ── Widget typography ────────────────────────────────────── */

/* Widget title (Helpful Links heading) */
.site-footer .inside-footer-widgets .widget-title {
	font-family: var(--font-primary);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-heading);
	margin: 0 0 var(--spacing-sm);
}

/* Body text */
.site-footer .inside-footer-widgets p {
	margin: 0 0 var(--spacing-xs);
	color: var(--color-text-body);
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-normal);
}

.site-footer .inside-footer-widgets p:last-child {
	margin-bottom: 0;
}

/* Bold labels within address blocks */
.site-footer .inside-footer-widgets p strong {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-heading);
}

/* Links inside widget columns */
.site-footer .inside-footer-widgets a {
	color: var(--color-text-body);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.site-footer .inside-footer-widgets a:hover,
.site-footer .inside-footer-widgets a:focus-visible {
	color: var(--color-blue-primary);
}

.site-footer .inside-footer-widgets a:focus-visible {
	outline: 2px solid var(--color-blue-primary);
	outline-offset: 2px;
}


/* ── Nav menu (Helpful Links) ─────────────────────────────── */

.site-footer .inside-footer-widgets .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.site-footer .inside-footer-widgets .menu li {
	margin: 0;
}


/* ── Badge images (Charity Navigator / Candid) ────────────── */

.site-footer .wp-block-gallery {
	gap: var(--spacing-sm) !important;
}

.site-footer .wp-block-gallery .wp-block-image {
	width: auto !important;
	flex: 0 0 auto !important;
}

.site-footer .wp-block-gallery .wp-block-image img {
	max-height: 110px;
	width: auto;
	object-fit: contain;
}

/* 501c3 text — slightly smaller */
.site-footer #block-14 p {
	font-size: var(--text-body-sm);
}


/* ── Equal housing — image floats left of text ────────────── */

/* The image widget (block-19) uses WP's alignleft float.
   Remove stacking margins so it and the text widget sit together. */
.site-footer #block-19,
.site-footer #block-17 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;	
}

/* Boost the image width, overriding the inline style="width:60px" */
.site-footer #block-19 .wp-block-image img {
	width: 60px !important;
	height: auto !important;
}

/* Small text for the equal housing statement */
.site-footer #block-17 p,
.site-footer #block-22 p {
	font-size: var(--text-label);
	line-height: var(--line-height-normal);
}

/* Clear the float after the text block so it doesn't bleed into the bottom bar */
.site-footer #block-17::after {
	content: "";
	display: table;
	clear: both;
}


/* ── 2. Bottom bar ────────────────────────────────────────── */

.site-footer .site-info {
	background-color: #111111;
}

.site-footer .inside-site-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	padding-block: var(--spacing-md);
}

.site-footer .copyright-bar {
	flex: 0 1 auto;
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--line-height-snug);
	margin: 0;
}

/* Footer bar (right side — Privacy Policy widget) */
.site-footer .footer-bar {
	flex: 0 1 auto;
	margin: 0;
}

.site-footer .footer-bar .widget.inner-padding {
	padding: 0;
}

.site-footer .footer-bar p {
	margin: 0;
}

.site-footer .site-info a {
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.site-footer .site-info a:hover,
.site-footer .site-info a:focus-visible {
	color: var(--color-blue-primary);
}

.site-footer .site-info a:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}


/* ── Responsive ───────────────────────────────────────────── */

@media (min-width: 1024px) {
	.site-footer .inside-footer-widgets,
	.site-footer .inside-site-info {
		padding-inline: 30px;
	}
}

@media (max-width: 900px) {
	.site-footer .inside-footer-widgets {
		flex-wrap: wrap;
		gap: var(--spacing-xl);
	}

	.site-footer .footer-widget-1 { flex: 0 0 100%; }
	.site-footer .footer-widget-2 { flex: 1 1 40%; }
	.site-footer .footer-widget-4 { flex: 1 1 40%; }
}

@media (max-width: 768px) {
	.footer-widgets-container {
		padding-inline: 15px !important;
	}
}

@media (max-width: 600px) {
	.site-footer .footer-widget-2,
	.site-footer .footer-widget-4 {
		flex: 0 0 100%;
	}

	.site-footer .inside-site-info {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xs);
	}
}