/**
 * ZBC Footer — single-row layout (Logo & Socials | News | Radio |
 * Television | Contact), matching zizonline.com.
 *
 * Pairs with zbc-footer.js, which moves the theme's native
 * "Logo & Socials" block (`.bottom-footer-section`) into
 * `.footer-columns .block-inner` as a 5th `.footer-col`.
 *
 * ---------------------------------------------------------------------------
 * WHY THE BREAKPOINT IS 1025px AND NOT 992px — read before changing
 * ---------------------------------------------------------------------------
 * Foxiz's own footer column rules switch to desktop at `min-width: 1025px`:
 *
 *     .footer-columns .footer-col                 { flex-basis: 50%  }  (base)
 *     .footer-columns .footer-col:first-child     { flex-basis: 100% }  (base)
 *     .footer-4c      .footer-col:last-child      { flex-basis: 100% }  (base)
 *     @media (min-width:1025px) .footer-col       { flex-basis: 20%  }
 *     @media (min-width:1025px) .footer-4c .footer-col:first-child,
 *                               .footer-4c .footer-col:last-child
 *                                                 { flex-basis: 30%  }
 *
 * An earlier draft of this file used `min-width: 992px`, which created a
 * dead zone from 992–1024px: our 5-across rule was active while the theme
 * still considered the viewport a tablet, cramming five link columns into
 * ~1000px. Matching 1025px exactly removes that band. Verified across
 * 390 / 768 / 1000 / 1024 / 1025 / 1369px — every width resolves to whole
 * rows with no overflow.
 *
 * ---------------------------------------------------------------------------
 * WHY THESE SELECTORS ARE SO LONG
 * ---------------------------------------------------------------------------
 * Foxiz sizes the first and last footer columns with `:first-child` /
 * `:last-child`, which outrank a plain `.footer-col` selector. Because our
 * brand block is inserted as the FIRST child, a lower-specificity rule
 * loses and the logo column blows out to 100%, pushing the four link
 * columns onto a second row. `.footer-wrap .footer-columns.footer-4c
 * .footer-col` (0,4,0) beats `.footer-columns .footer-col:first-child`
 * (0,2,1), so the five columns stay equal. Don't shorten these.
 *
 * Note the container class stays `footer-4c` even though there are now five
 * columns — it's the theme's own class and removing it re-exposes the
 * `:first-child` 100% rule. Left in place deliberately.
 *
 * Everything is scoped under `.footer-wrap` so nothing here can leak into
 * other flex layouts on the site.
 */

/* Thin ZIZ-yellow top border on the footer, matching the reference design. */
.footer-wrap .footer-inner.has-border {
	border-top: 3px solid #f5c518;
}

/* Slightly larger logo now that it heads a column rather than sitting in
   the copyright strip. Set via the theme's OWN variable so Foxiz's
   `@media (max-width:767px) { height: calc(var(--flogo-height) * .8) }`
   phone rule keeps working instead of being overridden. */
.footer-wrap .footer-col--brand {
	--flogo-height: 64px;
}

/* Stack the brand block: logo, then tagline, then socials.
   AT ALL WIDTHS, deliberately. Foxiz's base rule makes
   `.bottom-footer-section` a centred flex ROW — correct for the full-width
   copyright bar it used to live in, wrong here. Once the tagline is added
   there are three children, and leaving it a row puts
   logo | tagline | icons side by side, which is unreadable on a phone. */
.footer-wrap .footer-col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* Foxiz pushes the social list right with `margin-left: auto` — again
   correct in the old bar, but in a column it shoves the icons to the far
   edge away from the logo. Reset it and allow wrapping when the column is
   narrow. */
.footer-wrap .footer-col--brand .footer-social-list {
	margin-left: 0;
	flex-wrap: wrap;
}

/* Station tagline. Inherits the footer's light-scheme text colour but
   dialled back, so it reads as supporting copy rather than competing with
   the column headings. */
.footer-wrap .zbc-footer-tagline {
	margin: 0;
	max-width: 34ch;
	font-size: 13px;
	line-height: 1.6;
	opacity: 0.75;
}

/* --- Tablet and below: brand full width on top, then a clean 2x2. -------
   Without the last-child override, Foxiz gives Contact 100% and leaves
   Television stranded alone at 50%. This pairs them up instead. */
@media (max-width: 1024px) {

	.footer-wrap .footer-columns.footer-4c .footer-col--brand {
		flex-basis: 100%;
		width: 100%;
	}

	.footer-wrap .footer-columns.footer-4c .footer-col:last-child {
		flex-basis: 50%;
		width: 50%;
	}

	/* Full-width row on tablet/phone, so the tagline can run wider. */
	.footer-wrap .zbc-footer-tagline {
		max-width: 52ch;
	}
}

/* --- Desktop: five equal columns on one row. --------------------------- */
@media (min-width: 1025px) {

	.footer-wrap .footer-columns.footer-4c .footer-col {
		flex-basis: 20%;
		width: 20%;
	}

	.footer-wrap .footer-col--brand {
		gap: 18px;
	}
}