/**
 * Yodha Fuel — site footer.
 *
 * Styles the new footer.php / template-parts/footer/site-footer.php full
 * override (see those files' own doc comments for why this replaced
 * Storefront's native footer rather than just styling it with CSS, as
 * assets/css/layout.css's old "FOOTER" section briefly did — that section
 * has been removed from layout.css now that it targets markup this site no
 * longer renders).
 *
 * Loaded sitewide, unconditionally (the footer appears on every page) —
 * see inc/enqueue.php, enqueued right after components.css, the same way
 * every other always-on stylesheet in this theme is.
 *
 * Reuses the existing design system throughout: --color-bg-dark /
 * --color-text-inverse(-muted) / --yodha-orange(-dark) / --space-* /
 * --border-width / --color-border-dark / --fs-* / --ls-label /
 * --transition-fast tokens (variables.css), and the global .yf-container
 * utility (layout.css) for horizontal centering/padding — no new design
 * tokens, no new button system, no new JavaScript.
 *
 * Mobile-first: single-column stack is the 375px default; a two-column
 * grid appears at 768px (tablet), and the full four-column layout (a
 * wider brand column plus three equal nav columns) at 1024px+ (desktop) —
 * the same shared 480 / 768 / 1024 / 1280px breakpoints used everywhere
 * else in this theme (the header is the one deliberate exception, with
 * its own single 900px breakpoint — see layout.css's header section).
 */

/* ============================================================
   FOOTER — base (dark, matches header/hero/final-CTA dark sections)
   ============================================================ */
.yf-site-footer {
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse-muted);
	/* Defensive backstop, not the fix itself (see assets/css/layout.css,
	   "WOOCOMMERCE FULL-WIDTH CONTENT", for the real cause and the actual
	   fix): guarantees this footer always renders below any floated
	   content anywhere above it in #page, so an opaque footer background
	   can never again paint over un-cleared floated content the way it
	   did here, regardless of what introduces the next float. */
	clear: both;
}

.yf-site-footer a {
	color: var(--color-text-inverse);
	text-decoration: none;
}

.yf-site-footer a:hover,
.yf-site-footer a:focus-visible {
	color: var(--yodha-orange);
}

.yf-footer-main {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

.yf-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

/* ------------------------------------------------------------
   BRAND COLUMN
   ------------------------------------------------------------ */
.yf-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}

.yf-footer-logo {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.yf-footer-logo__image {
	display: block;
	height: auto;
	width: auto;
	max-height: 48px;
	max-width: 180px;
}

.yf-footer-logo__text {
	font-family: var(--font-heading);
	font-weight: var(--fw-heavy);
	font-size: var(--fs-body);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-inverse);
}

.yf-footer-tagline {
	margin: var(--space-2xs) 0 0;
	color: var(--yodha-orange);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-size: var(--fs-label);
}

.yf-footer-description {
	margin: 0;
	max-width: 36ch;
	color: var(--color-text-inverse-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.yf-footer-story-link {
	display: inline-block;
	margin-top: var(--space-2xs);
	color: var(--color-text-inverse);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	border-bottom: var(--border-width) solid var(--yodha-orange);
	padding-bottom: 2px;
}

.yf-footer-story-link:hover,
.yf-footer-story-link:focus-visible {
	color: var(--yodha-orange);
}

/* Instagram/Facebook — scoped to this footer social row only (deliberately
   NOT sharing assets/css/layout.css's .yf-navicon header-icon class, even
   though the visual treatment below is modelled on it, so a future change
   to either one can never leak into the other).

   A little extra top margin (on top of .yf-footer-brand's own flex `gap`)
   separates this row from "OUR STORY" as its own visually distinct group,
   per the "below the our story area" requirement. Each link is a 40×40
   tap target (comfortable on mobile, matching the header's own icon
   buttons) with the icon centred inside and sized up slightly from the
   header's 20px default (24px) so it stays legible against the larger
   tap target. Colour is deliberately NOT set here: .yf-site-footer a
   (above) already makes every footer link --color-text-inverse (white)
   by default and var(--yodha-orange) / #F55301 on hover+focus-visible —
   these links inherit that for free via the SVG's stroke="currentColor"
   (see yodha_fuel_icon(), inc/template-tags.php), so the colour half of
   the hover/focus effect never needs repeating here. The soft white
   plate background below is this rule's one addition: the same
   subtle, non-colour-alone focus affordance the header's icon buttons
   use, so focus is visible for keyboard users beyond the colour change
   alone, and hover/tap feedback reads as a deliberate button, not just a
   bare glyph. */
.yf-footer-social {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-xs);
}

.yf-footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.yf-footer-social__link .yf-icon {
	width: 24px;
	height: 24px;
}

.yf-footer-social__link:hover,
.yf-footer-social__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------
   NAVIGATION COLUMNS
   ------------------------------------------------------------ */
.yf-footer-heading {
	margin: 0 0 var(--space-sm);
	color: var(--color-text-inverse);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
}

.yf-footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yf-footer-menu a {
	display: inline-block;
	min-height: 24px;
	font-size: var(--fs-small);
}

/* Sub-items of an admin-assigned WordPress menu (if any) — indented,
   never hidden; this footer makes no assumption that assigned menus are
   flat. */
.yf-footer-menu .sub-menu {
	margin: var(--space-2xs) 0 0 var(--space-md);
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------
   COPYRIGHT BAR
   ------------------------------------------------------------ */
.yf-footer-bottom {
	border-top: var(--border-width) solid var(--color-border-dark);
}

.yf-footer-bottom__inner {
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
	text-align: center;
}

.yf-footer-bottom p {
	margin: 0;
	color: var(--color-text-inverse-muted);
	font-size: var(--fs-small);
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* 768px — tablet: two columns (brand+shop on the first row, support+legal
   on the second — natural reading order, wraps cleanly). */
@media (min-width: 768px) {
	.yf-footer-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: var(--space-2xl) var(--space-xl);
	}

	.yf-footer-main {
		padding-top: var(--space-3xl);
		padding-bottom: var(--space-3xl);
	}
}

/* 1024px — desktop: one row, brand column wider than the three equal nav
   columns. */
@media (min-width: 1024px) {
	.yf-footer-grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: var(--space-2xl);
	}

	.yf-footer-main {
		padding-top: var(--space-4xl);
		padding-bottom: var(--space-4xl);
	}
}