/*
 * Footer domain stylesheet — mirrors inc/footer/ (see tasks/footer.md).
 *
 * Enqueued site-wide by just2euro_footer_assets() in inc/footer.php, depending
 * on 'generate-child' so the :root tokens in style.css load first. Covers the
 * three-column row (two menu columns + the Facebook embed) and the copyright
 * bar. The columns render inside GeneratePress's <footer class="site-info">,
 * above the copyright bar (generate_before_copyright); GP's footer widgets are
 * locked to 0, so #footer-widgets never renders.
 *
 * Columns are independently guarded in PHP (unassigned menu / empty FB URL), so
 * the layout must degrade to two or one column with no stray gaps — hence the
 * flex-wrap row rather than a fixed three-track grid.
 */

/* ---------------------------------------------------------------------------
   Footer shell
   --------------------------------------------------------------------------- */

.site-info {
	background-color: var(--j2e-surface);
	color: var(--j2e-gray-text);
	border-top: 3px solid var(--j2e-purple);
}

/* GP lays .inside-site-info out as a centered flex row (justify-content:
   space-between) for its one-line credit. We stack the column row above the
   copyright bar instead, left-aligned, and let .copyright-bar re-center itself. */
.site-info .inside-site-info {
	display: block;
	padding-top: 2.5rem;
	padding-bottom: 1rem;
	text-align: left;
}

/* ---------------------------------------------------------------------------
   Three-column row
   --------------------------------------------------------------------------- */

.j2e-footer-cols {
	display: flex;
	flex-wrap: nowrap;
	gap: 2rem 3rem;
	margin-bottom: 2rem;
}

/* The two text columns absorb all the horizontal flex — they share the leftover
   space and shrink freely (links just reflow onto more lines). The Facebook
   column holds a fixed width instead: it's a raw <iframe> rendered server-side
   at a fixed pixel size, so a narrower box clips it rather than scaling it (only
   the JS SDK reflows). Keeping the card fixed and letting the text give way
   keeps all three on one row down to the stack breakpoint, instead of the card
   dropping to a second row on its own. With a column guarded out (unassigned
   menu / empty FB URL) the rest just fill the row. */
.j2e-footer-col--menu {
	flex: 1 1 0;
	min-width: 0;
}

.j2e-footer-col--facebook {
	flex: 0 0 var(--j2e-footer-fb-width);
}

/* At the theme's mobile breakpoint the two text columns sit side by side
   (two-up) and the Facebook card wraps onto its own full-width row beneath them
   (its iframe still caps at --j2e-footer-fb-width). Re-enable wrap — the row is
   nowrap above —
   and tighten the column gap for the narrower screen. */
@media (max-width: 768px) {
	.j2e-footer-cols {
		flex-wrap: wrap;
		column-gap: 1.5rem;
	}

	.j2e-footer-col--menu {
		flex: 1 1 40%;
	}

	.j2e-footer-col--facebook {
		flex: 1 1 100%;
	}
}

.j2e-footer-col__title {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--j2e-border);
	color: var(--j2e-purple);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   Footer menu link lists
   --------------------------------------------------------------------------- */

.j2e-footer-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.j2e-footer-menu__list li {
	margin: 0 0 0.5rem;
}

.j2e-footer-menu__list a {
	color: var(--j2e-gray-text);
	text-decoration: none;
	transition: color 0.15s ease;
}

.j2e-footer-menu__list a:hover,
.j2e-footer-menu__list a:focus,
.j2e-footer-menu__list .current-menu-item > a {
	color: var(--j2e-link);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Facebook embed
   --------------------------------------------------------------------------- */

.j2e-footer-facebook__embed {
	display: block;
	width: 100%;
	max-width: var(--j2e-footer-fb-width);
	border: none;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Copyright bar — GP's .copyright-bar, our generate_copyright text only.
   --------------------------------------------------------------------------- */

.site-info .copyright-bar {
	padding-top: 1.25rem;
	border-top: 1px solid var(--j2e-border);
	color: var(--j2e-muted);
	font-size: 0.875rem;
	text-align: center;
}

.site-info .copyright-bar .copyright {
	color: inherit;
}