/**
 * Global site footer.
 *
 * Values matched against the live legacy site's computed styles (Porto's
 * own footer builder output has no readable source -- see
 * docs/architecture.md). Does NOT include the trust-badge band or contact
 * form seen above the footer on the homepage -- confirmed those are that
 * page's own content, not part of this template.
 */

.site-footer {
	background: #272723;
	font-family: "Roboto", sans-serif;
}

/*
 * "Get in touch" ribbon -- decorative only, not a link/button (confirmed
 * via the live site: no href, no click handler). Values taken directly
 * from the live site's own #footer .footer-ribbon rule. It's
 * position: absolute against .site-footer__main (below, position:
 * relative), matching live's structure (the ribbon is absolutely
 * positioned against the same .container that holds the columns) --
 * top: 0 sits it at .site-footer__main's own top edge regardless of that
 * element's padding-top, then margin-top: -16px pulls it up further,
 * poking into the white space above the footer.
 */
.site-footer__ribbon {
	position: absolute;
	top: 0;
	margin: -16px 0 0;
	padding: 10px 20px 6px;
	background: #47c249;
	color: #fff;
	font-family: "Shadows Into Light", cursive;
	font-size: 20.8px;
	line-height: 23px;
	z-index: 101;
}

/*
 * The folded corner -- a CSS triangle (0-height box, transparent top
 * border, solid right border) sitting immediately left of the ribbon,
 * giving the illusion the ribbon material wraps behind itself. Colour is
 * live's own darker shade of the ribbon green, not the footer's dark
 * grey -- confirmed via computed styles, not a guess.
 */
.site-footer__ribbon::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	width: 7px;
	height: 0;
	border-right: 10px solid #2f8e31;
	border-top: 16px solid transparent;
}

/*
 * Width/gutter comes from the shared `.site-container` utility (main.css)
 * applied alongside this class in footer.php -- the same rule the header
 * and category page use, made persistent site-wide rather than the
 * hardcoded 1200px cap this started with. position: relative makes this
 * the ribbon's positioning context (see .site-footer__ribbon above).
 */
.site-footer__main {
	position: relative;
	padding-top: 56px;
	padding-bottom: 64px;
}

/*
 * Outer row: the 4-column grid (brand + 3 nav columns) and legal as
 * separate flex items -- NOT one shared 5-column grid, so legal's own
 * height (long-form prose, wraps more as it narrows) can never stretch
 * the row that brand/nav columns are aligned against. See footer.php.
 */
.site-footer__columns {
	display: flex;
	align-items: stretch;
}

/*
 * Brand column narrowed (was 1.2fr) so the nav columns start further
 * left -- confirmed live.
 */
.site-footer__columns-main {
	display: grid;
	grid-template-columns: 1fr 0.9fr 0.9fr 0.9fr;
	gap: 40px;
	flex: 1 1 auto;
}

/*
 * flex: 0 0 <width> instead of a grid fr-share now that it's a flex
 * sibling of .site-footer__columns-main, not a grid column -- width
 * tuned so "mobility products," ends line 1 without "healthcare" also
 * fitting on it (matches the old 1.6fr's proportions). margin-left is
 * extra breathing room specifically before this column, since it's no
 * longer sharing an even `gap` with the others.
 */
.site-footer__column--legal {
	flex: 0 0 22%;
	margin-left: 64px;
}

/*
 * Grid's default align-items: stretch already makes every column this
 * height (confirmed live: the nav columns and legal column all bottom
 * out together) -- logo stays at its natural top position, and this
 * flex-column + margin-top: auto on the social row (below) pushes just
 * that row down to the same shared bottom, without moving the logo or
 * the widget-title headings, which is what actually broke last time
 * (align-items: end shifted the whole column, headings included).
 */
.site-footer__column--brand {
	display: flex;
	flex-direction: column;
}

.site-footer__column .widget-title {
	margin: 0 0 33px;
	color: #a8a8a8;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.site-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__column li {
	margin-bottom: 28px;
}

.site-footer__column li:last-child {
	margin-bottom: 0;
}

/* No hover effect, per the user's request -- just the static state. */
.site-footer__column:not(.site-footer__column--brand):not(.site-footer__column--legal) a {
	color: #fff;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.2px;
	text-decoration: none;
}

/*
 * font-size: !important -- the widget's own content carries an inline
 * style="font-size:16px" (baked in via the block editor, confirmed live
 * via the DOM, not a guess), which beats a plain stylesheet rule
 * regardless of specificity.
 */
.site-footer__column--legal p {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 13px !important;
	line-height: 1.6;
	letter-spacing: -0.32px;
}

.site-footer__column--legal a {
	font-size: inherit;
	font-weight: bold;
	text-decoration: underline;
}

/* font-size: !important -- same inline-style override problem as the
   rule above; this second paragraph has its own inline font-size too. */
.site-footer__column--legal p + p {
	margin-top: 8px;
	font-size: 10px !important;
	letter-spacing: normal;
	color: #a8a8a8;
}

/* "RSD" specifically -- plain white, no bold/underline, no hover. */
.site-footer__column--legal p + p a {
	color: #fff;
	font-weight: normal;
	text-decoration: none;
}

.footer_logo_wrao img {
	max-width: 200px;
}

/*
 * .site-footer__column--brand scoped in front (2-class specificity) --
 * confirmed live this is needed to beat .site-footer__column ul's own
 * margin: 0 reset a few rules up, which is also 2 classes and otherwise
 * wins the tie and silently zeroes this margin-top back out.
 */
.site-footer__column--brand .site-footer__social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin-top: auto;
	padding: 0;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #33332f;
	color: #fff;
}

.site-footer__bottom {
	background: #47c249;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 12.96px;
	text-align: center;
	padding: 15px 20px;
}

/*
 * Confirmed on the live site (re-checked 2026-09-10 -- the first pass here
 * was wrong): mobile is 2 columns, not a single stacked column. Brand and
 * legal each span the full width; the three nav columns (Customer Care /
 * More / Quick Links) wrap naturally 2-per-row, leaving Quick Links alone
 * with an empty cell beside it -- that's real live behaviour, not a bug,
 * so don't "fix" it into a 3rd column later without checking first.
 */
@media (max-width: 991px) {
	/* Stack .site-footer__columns-main above the legal column. */
	.site-footer__columns {
		flex-direction: column;
	}

	.site-footer__columns-main {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__column--brand {
		grid-column: 1 / -1;
	}

	/*
	 * margin-top restores the vertical gap that used to come for free
	 * from the old shared grid's row-gap before .site-footer__columns
	 * became a flex column -- without it, Warranty Request Form and Get
	 * To Know More were touching with zero space between them.
	 */
	.site-footer__column--legal {
		flex-basis: auto;
		margin-left: 0;
		margin-top: 40px;
	}

	/*
	 * Quick Links (the 4th column: brand, Customer Care, More, Quick
	 * Links) also goes full-width -- at half the mobile width it was
	 * wrapping "Competitive Pricing Policy" onto two lines. Full-width
	 * fixes that without touching any type styling.
	 */
	.site-footer__column:nth-child(4) {
		grid-column: 1 / -1;
	}

	/* Was 15px, increased further per the user's request. */
	.site-footer__column li {
		margin-bottom: 20px;
	}

	/*
	 * margin-top: auto (desktop) has nothing to push against once brand
	 * is alone in its own full-width row here, so it collapses to no gap
	 * at all -- a fixed value instead.
	 */
	.site-footer__column--brand .site-footer__social {
		margin-top: 24px;
	}
}