/* ==========================================================================
   Crown Office Supplies — modern footer

   SITE-WIDE since 2026-07-22 (owner: "swap the global footer to use the one in
   the mock up"). Every selector used to carry a `body.cos-modern-home` prefix
   so the restyle applied only to the mockup page; that prefix is gone and the
   stylesheet is now enqueued unconditionally from functions.php.

   Revert: restore this file and functions.php from
   /root/backups/2026-07-22_footer/.

   Self-contained by design — it declares its own `--cos-f-*` tokens on
   .site-footer instead of borrowing the `--cos-*` set, which is declared on
   `.cos-page`. The footer sits OUTSIDE .cos-page, so borrowing them would have
   left every colour unresolved the moment this went site-wide.

   Structure is Electro's `footer-v2`; we restyle it in place rather than
   overriding the template, so menus, widgets and the handheld footer all keep
   working and stay editable from wp-admin.
   ========================================================================== */

.site-footer {
	--cos-f-navy: #2e094e;
	--cos-f-navy-deep: #1e0435;
	--cos-f-yellow: #fed700;
	--cos-f-text: rgba(255, 255, 255, .68);
	--cos-f-line: rgba(255, 255, 255, .1);

	background: linear-gradient(180deg, var(--cos-f-navy) 0%, var(--cos-f-navy-deep) 100%);
	color: var(--cos-f-text);
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	border-top: 3px solid var(--cos-f-yellow);
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.site-footer .desktop-footer {
	padding-block: clamp(40px, 4.5vw, 64px);
}

.site-footer .footer-bottom-widgets {
	padding-block: clamp(36px, 4vw, 56px);
	border-top: 1px solid var(--cos-f-line);
	background: transparent;
}

/* --------------------------------------------------------------------------
   Widget titles
   -------------------------------------------------------------------------- */

.site-footer .widget-title,
.site-footer h4 {
	font-family: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cos-f-line);
	position: relative;
}

/* short yellow rule riding on the divider */
.site-footer .widget-title::after,
.site-footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 2px;
	background: var(--cos-f-yellow);
}

/* --------------------------------------------------------------------------
   Product widgets (Featured / Top Selling / Suggested)
   -------------------------------------------------------------------------- */

.site-footer .product_list_widget li {
	border-bottom: 1px solid var(--cos-f-line);
	padding-block: 14px;
}
.site-footer .product_list_widget li:last-child { border-bottom: 0; }

.site-footer .product_list_widget a {
	color: rgba(255, 255, 255, .88);
	font-weight: 500;
	font-size: .9rem;
	line-height: 1.45;
	text-decoration: none;
	transition: color .25s ease;
}
.site-footer .product_list_widget a:hover { color: var(--cos-f-yellow); }

/* The product NAME is a <span class="product-title"> inside that <a>, and
   Electro's style.min.css sets `.product_list_widget .product-title { color:
   #0062bd }` — specificity (0,2,0). The generic reset further up this file is
   `.site-footer :where(p, span, li, td, div) { color: inherit }`, which is only
   (0,1,0) because :where() contributes nothing, so Electro won and every
   product name rendered in link-blue on navy.

   Found by probing getComputedStyle + walking document.styleSheets for rules
   matching the span, not by reading selectors. It only surfaced when this
   stylesheet went site-wide (2026-07-22): the mockup homepage's footer has no
   product widgets, so nothing here had ever been tested against them.

   Needs (0,3,0) to win — hence the explicit three-class selector. */
.site-footer .product_list_widget .product-title { color: inherit; }

.site-footer .product_list_widget img {
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.site-footer .product_list_widget li:hover img { transform: translateY(-3px); }

.site-footer .product_list_widget .amount,
.site-footer .woocommerce-Price-amount {
	color: var(--cos-f-yellow);
	font-weight: 700;
}
.site-footer .product_list_widget del .amount {
	color: rgba(255, 255, 255, .38);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Contact block
   -------------------------------------------------------------------------- */

/* The desktop footer logo is a dark-on-TRANSPARENT PNG, invisible on a dark
   background, so we knock it out to solid white.
   Scoped to .footer-bottom-widgets deliberately: the handheld footer uses a
   DIFFERENT asset (mrs1ge-short.jpg — an opaque JPEG). brightness(0)+invert(1)
   on an opaque image turns the entire rectangle white, which rendered as a
   mystery grey slab on mobile. Never apply this filter blanket-wide. */
.site-footer .footer-bottom-widgets .footer-logo img {
	max-width: 210px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: .95;
}

/* Handheld logo: opaque artwork, so leave the pixels alone and just size it. */
.site-footer .handheld-footer .footer-logo img,
.site-footer .handheld-footer-bar .footer-logo img {
	max-width: 190px;
	height: auto;
	filter: none;
	border-radius: 6px;
}

.site-footer .footer-call-us {
	margin-top: 26px;
	padding: 18px 20px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--cos-f-line);
	border-radius: 16px;
}

/* Electro marks these up as .call-us-text / .call-us-number spans — target
   them directly, or the generic span rule flattens the number to label size. */
.site-footer .footer-call-us .call-us-text {
	display: block;
	color: var(--cos-f-text);
	font-size: .8rem;
	line-height: 1.4;
	margin-bottom: 4px;
}

.site-footer .footer-call-us .call-us-number,
.site-footer .footer-call-us b,
.site-footer .footer-call-us strong,
.site-footer .footer-call-us a {
	display: block;
	font-family: "Poppins", "Inter", sans-serif;
	color: var(--cos-f-yellow);
	font-size: 1.42rem;
	font-weight: 800;
	letter-spacing: -.02em;
	text-decoration: none;
	line-height: 1.15;
}

.site-footer .footer-call-us .call-us-icon,
.site-footer .footer-call-us i {
	color: var(--cos-f-yellow);
	font-size: 2.1rem;
}

.site-footer .footer-address {
	margin-top: 22px;
	font-size: .88rem;
	line-height: 1.65;
	color: var(--cos-f-text);
}
/* <address> defaults to italic in most UAs. */
.site-footer .footer-address address {
	font-style: normal;
	margin: 0;
	color: var(--cos-f-text);
}

.site-footer .footer-address b,
.site-footer .footer-address strong,
.site-footer .footer-address .footer-address-title {
	display: block;
	color: #fff;
	font-family: "Poppins", "Inter", sans-serif;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Link menus
   -------------------------------------------------------------------------- */

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

.site-footer .widget_nav_menu li {
	margin: 0 0 2px;
	border: 0;
	padding: 0;
}

.site-footer .widget_nav_menu li a {
	display: inline-block;
	color: var(--cos-f-text);
	font-size: .92rem;
	line-height: 1.5;
	padding: 7px 0;
	text-decoration: none;
	transition: color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.site-footer .widget_nav_menu li a:hover {
	color: var(--cos-f-yellow);
	transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   Copyright bar
   -------------------------------------------------------------------------- */

.site-footer .copyright-bar {
	background: rgba(0, 0, 0, .28);
	border-top: 1px solid var(--cos-f-line);
	padding-block: 22px;
	font-size: .85rem;
	color: rgba(255, 255, 255, .5);
}

.site-footer .copyright-bar a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	transition: color .25s ease;
}
.site-footer .copyright-bar a:hover { color: var(--cos-f-yellow); }

.site-footer .copyright-bar .payment img {
	opacity: .65;
	transition: opacity .3s ease;
}
.site-footer .copyright-bar .payment img:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Handheld footer
   --------------------------------------------------------------------------
   IMPORTANT: below ~992px Electro sets .desktop-footer{display:none} and shows
   .handheld-footer instead — a completely separate accordion built from its own
   widgets. It ships with a hard-coded light-grey background (#f2f2f2) and white
   widget panels, so without the overrides below the dark restyle produced white
   text on a white panel: an invisible mobile footer. Any future change to the
   desktop footer must be mirrored here.
   -------------------------------------------------------------------------- */

.site-footer .handheld-footer {
	background: transparent; /* let the .site-footer gradient through */
	padding-block: 8px 20px;
}

.site-footer .handheld-footer .widget,
.site-footer .handheld-footer .widget .body,
.site-footer .handheld-footer .columns {
	background: transparent;
	border-color: var(--cos-f-line);
}

.site-footer .handheld-footer .widget {
	border-bottom: 1px solid var(--cos-f-line);
}

.site-footer .handheld-footer .widget-title,
.site-footer .handheld-footer h4 {
	color: #fff;
	border-bottom: 0;
	padding-block: 16px;
	margin: 0;
}
/* the desktop yellow tick would sit oddly on an accordion row */
.site-footer .handheld-footer .widget-title::after { display: none; }

.site-footer .handheld-footer .widget-title::before,
.site-footer .handheld-footer .widget-title i { color: var(--cos-f-yellow); }

.site-footer .handheld-footer a,
.site-footer .handheld-footer .textwidget,
.site-footer .handheld-footer p {
	color: var(--cos-f-text);
	text-decoration: none;
}
.site-footer .handheld-footer a:hover { color: var(--cos-f-yellow); }

/* the tel: link in the "Reach Out!" text widget deserves to stand out */
.site-footer .handheld-footer .textwidget a[href^="tel:"] {
	font-family: "Poppins", "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--cos-f-yellow);
	letter-spacing: -.02em;
}

.site-footer .handheld-footer-bar {
	background: var(--cos-f-navy-deep);
	border-top: 1px solid var(--cos-f-line);
}
.site-footer .handheld-footer-bar a { color: rgba(255, 255, 255, .8); }
.site-footer .handheld-footer-bar a:hover { color: var(--cos-f-yellow); }

/* The address may contain long unbroken strings; the phone number must NOT be
   allowed to break (it wrapped to "307-317- / 7018"), so it is excluded here
   and given a nowrap + fitted size in the mobile block below. */
.site-footer .footer-address,
.site-footer .handheld-footer .textwidget {
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	/* Electro renders .footer-call-us into the handheld area at a fixed ~180px,
	   which is too narrow for the number at desktop size. */
	.site-footer .footer-call-us {
		width: auto;
		max-width: none;
		margin-inline: 0;
		text-align: left;
	}

	.site-footer .footer-call-us .call-us-number {
		font-size: 1.25rem;
		white-space: nowrap;
		overflow-wrap: normal;
	}
}

/* --------------------------------------------------------------------------
   Generic catch-alls last, so the specific rules above win
   -------------------------------------------------------------------------- */

.site-footer :where(p, span, li, td, div) { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	.site-footer * {
		transition-duration: .001ms !important;
	}
}