/**
 * Footer — Discount Pet Food
 *
 * A light pass to bring the footer in line with the rest of the site. The
 * typography was already right (Montserrat, white on green), so this only
 * fixes what was actually wrong:
 *
 *  - Footer links were 16px tall with 3px between them. That is below the 24px
 *    minimum target size in WCAG 2.5.8 and nowhere near the 44px used
 *    everywhere else in this build, so they were awkward to tap and hard to
 *    scan down.
 *  - Nothing happened on hover, and there was no focus ring at all, so the
 *    footer was the one region of the site a keyboard user could get lost in.
 *
 * The row spacing itself is set per column by Elementor at
 *   .elementor-33 .elementor-element.elementor-element-XXXXXXX
 *   .elementor-icon-list-items:not(.elementor-inline-items)
 *   .elementor-icon-list-item:not(:last-child)
 * which is (0,7,0) and written separately for every column. Rather than
 * out-specify that four times over, the target grows on the ANCHOR, where
 * Elementor sets no padding and an ordinary rule wins.
 *
 * Tokens come from header.css, which is enqueued globally.
 */

/* ------------------------------------------------------------- link rows */

.jupiterx-footer .elementor-icon-list-item > a {
	display: inline-flex;
	align-items: center;
	/* 34px rather than 44px: a 9-item category column at 44px would run to
	   nearly 400px on its own. This clears the 24px AA minimum comfortably and
	   more than doubles what was there. */
	min-height: 34px;
	padding: 2px 0;
}

/* The transition belongs on the span, not the anchor: the colour change on
   hover is applied to .elementor-icon-list-text, so a transition on the <a>
   animates nothing. */
.jupiterx-footer .elementor-icon-list-item > a .elementor-icon-list-text {
	transition: color var(--dpf-speed) ease;
}

.jupiterx-footer .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.jupiterx-footer .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
	color: var(--dpf-yellow);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Yellow, not green: a green ring is invisible on the green footer. */
.jupiterx-footer a:focus,
.jupiterx-footer a:focus-visible {
	outline: 3px solid var(--dpf-yellow);
	outline-offset: 3px;
	border-radius: 3px;
}

.jupiterx-footer a:focus:not(:focus-visible) {
	outline: 0;
}

/* The contact column's links are already yellow, so they invert on hover
   instead of turning a colour they already are. */
.jupiterx-footer .elementor-widget-text-editor a:hover,
.jupiterx-footer .elementor-widget-text-editor a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------- headings */

/*
 * Each column should read as one unit. The heading sat 29px clear of its first
 * link: the column's own 20px row-gap plus the padding that now sits inside
 * each link. A margin on the heading widget does nothing here (Elementor holds
 * that at 0), so this closes the space from the list side, where nothing
 * competes, and only where a list actually follows a heading.
 */
.jupiterx-footer .elementor-widget-heading + .elementor-widget-icon-list {
	margin-top: -10px;
}

/*
 * A short accent rule under each column heading. The four columns previously
 * ran together as one field of white text with nothing marking where each one
 * began; this gives the eye a start point per column and is the only place the
 * brand yellow appears down here apart from the links.
 */
.jupiterx-footer .elementor-heading-title {
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
	letter-spacing: 0.02em;
}

.jupiterx-footer .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--dpf-yellow);
}

/* --------------------------------------------------- opening hours block */

/*
 * This shop is collection only, so "when are you open" is the question the
 * footer most has to answer. It used to be one paragraph of <br>-separated
 * lines, which is the hardest possible shape to scan for a time. Days and
 * times now sit in two aligned columns.
 */
.jupiterx-footer .dpf-foot-label {
	margin: 0 0 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
}

.jupiterx-footer .dpf-hours {
	margin: 0 0 14px;
	padding: 0;
	max-width: 260px;
	list-style: none;
}

.jupiterx-footer .dpf-hours li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
	line-height: 1.4;
}

.jupiterx-footer .dpf-hours li:last-child {
	border-bottom: 0;
}

.jupiterx-footer .dpf-hours li span:first-child {
	color: rgba(255, 255, 255, 0.72);
}

.jupiterx-footer .dpf-hours li span:last-child {
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

/* The one constraint a customer has to know before setting off. */
.jupiterx-footer .dpf-foot-note {
	display: inline-block;
	margin: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--dpf-yellow);
	color: var(--dpf-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

/* ----------------------------------------------------- copyright strip */

/*
 * Was sage green with black text, sitting under a dark green footer and
 * belonging to neither. It now matches the utility band at the very top of the
 * page, so the layout opens and closes on the same colour.
 */
/* Hooked on an author-added class, not the generated element id: every other
   Elementor hook point in this theme uses one (dpf-usp, dpf-notice, dpf-cart,
   dpf-main), and an id would silently revert if the template were rebuilt,
   duplicated or re-imported. */
.jupiterx-footer .dpf-foot-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.jupiterx-footer .dpf-foot-legal p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

/* --------------------------------------------------------------- social */

.jupiterx-footer .elementor-social-icon {
	transition: transform var(--dpf-speed) ease;
}

.jupiterx-footer .elementor-social-icon:hover {
	transform: translateY(-2px);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 1024px) {
	/* Thumbs, not cursors. */
	.jupiterx-footer .elementor-icon-list-item > a {
		min-height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jupiterx-footer .elementor-icon-list-item > a,
	.jupiterx-footer .elementor-social-icon,
	.jupiterx-footer .elementor-social-icon:hover {
		transition: none;
		transform: none;
	}
}