/**
 * Site footer
 *
 * Navy panel: brand column plus link columns, then a divided bottom bar.
 * Five columns collapse to two on tablet and one on phones.
 */

.medlife-footer {
	background: var(--ml-navy);
	color: #d7e3ef;
	font-family: var(--ml-font);
}

.medlife-footer__inner {
	max-width: var(--ml-container);
	margin: 0 auto;
	padding: 54px 24px 40px;
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1fr 1.35fr;
	gap: 40px 32px;
	align-items: start;
}

/* ---------- Brand column ---------- */

/*
 * vertical-align: top removes the ~8px descender strut an inline-block sits on,
 * so the logo -> blurb gap is exactly the margin: 22px (was 20 + 8.4 = 28.4).
 * Stays inline-block so the keyboard ring hugs the image, not the column.
 */
.medlife-footer__logo {
	display: inline-block;
	vertical-align: top;
	line-height: 0;
	margin-bottom: 22px;
}

.medlife-footer__logo img {
	height: 84px;
	width: auto;
	display: block;
}

.medlife-footer__blurb {
	margin: 0 0 22px;
	max-width: 34ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: #c2d2e2;
}

.medlife-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.medlife-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--ml-white);
	text-decoration: none;
	transition: background-color var(--ml-t-base) var(--ml-e-standard), border-color var(--ml-t-base) var(--ml-e-standard), color var(--ml-t-base) var(--ml-e-standard);
}

.medlife-footer__social a:hover,
.medlife-footer__social a:focus-visible {
	background: var(--ml-cyan);
	border-color: var(--ml-cyan);
	color: var(--ml-white);
	outline: none;
}

.medlife-footer__social a:focus-visible {
	outline: 2px solid var(--ml-white);
	outline-offset: 2px;
}

/* ---------- Headings ---------- */

/*
 * (0,2,0) - fixed 2026-09-15. At (0,1,0) this margin lost to Astra's
 * `.woocommerce-js h2 { margin-bottom: .7em }` (0,1,1): 14px x .7 = 9.8px under
 * every footer column heading on every page. 22px is heading -> content on
 * the homepage spacing scale (CLAUDE.md, 2026-09-15).
 */
.medlife-footer .medlife-footer__heading {
	margin: 0 0 22px;
	padding-bottom: 12px;
	position: relative;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ml-white);
	line-height: 1.3;
}

.medlife-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: var(--ml-cyan);
}

/* ---------- Link columns ---------- */

.medlife-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.medlife-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #cfdcea;
	font-size: 14.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

.medlife-footer__links svg {
	flex: 0 0 auto;
	color: var(--ml-cyan);
	transition: transform var(--ml-t-base) var(--ml-e-standard);
}

.medlife-footer__links a:hover,
.medlife-footer__links a:focus-visible {
	color: var(--ml-white);
	outline: none;
}

.medlife-footer__links a:hover svg {
	transform: translateX(3px);
}

.medlife-footer__links a:focus-visible {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---------- Contact column ---------- */

.medlife-footer__newsletter {
	margin-bottom: 22px;
}

.medlife-footer__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.medlife-footer__contacts li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.medlife-footer__contact-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--ml-cyan);
}

.medlife-footer__contacts a {
	color: var(--ml-white);
	font-size: 14.5px;
	text-decoration: none;
	word-break: break-word;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

.medlife-footer__contacts a:hover,
.medlife-footer__contacts a:focus-visible {
	color: var(--ml-cyan);
}

.medlife-footer__contacts a:focus-visible {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---------- Bottom bar ---------- */

.medlife-footer__bar {
	padding: 0 24px;
}

.medlife-footer__bar-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
	padding: 22px 0 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.medlife-footer__copy {
	margin: 0;
	font-size: 13.5px;
	color: #a9bbcd;
}

.medlife-footer__payments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.medlife-footer__payments li {
	padding: 8px 14px;
	border-radius: 6px;
	background: var(--ml-white);
	color: var(--ml-navy);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.medlife-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		gap: 36px 26px;
	}

	/* Brand spans the full first row when columns drop to four. */
	.medlife-footer__brand {
		grid-column: 1 / -1;
	}

	.medlife-footer__blurb {
		max-width: 52ch;
	}
}

@media (max-width: 860px) {
	.medlife-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 44px 20px 32px;
		gap: 32px 24px;
	}

	.medlife-footer__bar {
		padding: 0 20px;
	}

	.medlife-footer__logo img {
		height: 72px;
	}
}

@media (max-width: 560px) {
	.medlife-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 36px 16px 26px;
		gap: 28px;
	}

	.medlife-footer__bar {
		padding: 0 16px;
	}

	.medlife-footer__bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 18px 0 26px;
	}

	.medlife-footer__logo img {
		height: 64px;
	}

	.medlife-footer__blurb {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.medlife-footer__social a,
	.medlife-footer__links a,
	.medlife-footer__links svg,
	.medlife-footer__contacts a {
		transition: none;
	}

	.medlife-footer__links a:hover svg {
		transform: none;
	}
}

/*
 * POINTER FOCUS - ASTRA a:focus { outline: thin dotted } (main.min.css L3).
 * A mouse click leaves :focus set, so every anchor that names no outline of its
 * own kept a thin dotted ring until focus moved. Measured 2026-09-13 by the
 * sitewide anchor sweep (CLAUDE.md, "Anchor pointer-focus sweep").
 *
 * :not(:focus-visible) IS LOAD-BEARING: this only ever applies to pointer focus,
 * so the keyboard ring each family already has is untouched. Outline only -
 * nothing moves, so there is no reduced-motion twin.
 */
.medlife-footer__links a:focus:not(:focus-visible),
.medlife-footer__social a:focus:not(:focus-visible),
.medlife-footer__contacts a:focus:not(:focus-visible),
a.medlife-footer__logo:focus:not(:focus-visible) {
	outline: none;
}

/*
 * KEYBOARD RINGS - 2026-09-14. These families had NO focus ring of their own:
 * keyboard focus showed only Astra's a:focus-visible 1px dotted in the text
 * colour, or nothing at all where a theme rule said outline: none. Measured by
 * the sitewide anchor sweep (CLAUDE.md, "Keyboard ring pass").
 *
 * Light surface: 3px --ml-cyan offset 3px. Navy surface: 2px. border-radius is
 * RESTATED on every ring - a rule wins only the properties it names, and a
 * shared focus rule has squared a round control on this site before. Text links
 * take 4px corners; boxed controls keep their own radius.
 *
 * The pointer pin (:focus:not(:focus-visible)) above is untouched - the two
 * selectors can never match the same state. Contrast: cyan on white 2.50:1 is
 * the owner's recorded decision (CLAUDE.md, "THE FOCUS-RING RULE").
 */
a.medlife-footer__logo:focus-visible {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * RING FADE - ASTRA'S INLINE `a { transition: all .2s linear }`. "all" includes
 * outline, so these families' keyboard rings slid and faded in over 200ms
 * instead of appearing at once. Each family now names exactly what its hover /
 * focus-visible state really changes, measured 2026-09-14 (CLAUDE.md, "Ring fade
 * pass"): colour where Astra's a:hover repaints the ink, nothing at all where
 * only the (discrete) underline changes or nothing visible changes.
 * Outline is never in the list. Colour-only fades need no reduced-motion twin.
 */
a.medlife-footer__logo {
	transition: none;
}

/* =========================================================================
 * FOOTER — <= 768px: collapsible columns + 44px tap targets (2026-09-21)
 *
 * Measured: the footer is 1,378px tall at 375px, which is 32% of the homepage
 * and 36% of the contact page. Three of its four columns are plain link
 * lists, so they collapse; the contact column has no <details> and stays as
 * it is, because a phone number and an email are the reason people scroll
 * here.
 * ====================================================================== */

/*
 * DESKTOP IS UNCHANGED BY MAKING THE SUMMARY INERT, not by hiding it.
 * The heading still paints exactly where it did - it is the same <h2> with
 * the same rules - and `pointer-events: none` means a click on it cannot
 * toggle the disclosure. `list-style: none` plus the WebKit pseudo removes
 * the marker triangle; miss either and Chrome or Safari shows one.
 */
.medlife-footer__summary {
	list-style: none;
	display: block;
	pointer-events: none;
}

.medlife-footer__summary::-webkit-details-marker { display: none; }
.medlife-footer__summary::marker { content: ""; }

/* The chevron only means anything while the summary is interactive. */
.medlife-footer__chev { display: none; }

@media (max-width: 768px) {
	.medlife-footer__summary {
		pointer-events: auto;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		/* WCAG 2.5.8 is 24x24; 44 is the comfortable figure this theme uses
		   for its own controls, and the row has the height to spare. */
		min-height: 44px;
	}

	.medlife-footer__chev {
		display: block;
		flex: 0 0 auto;
		color: var(--ml-cyan);
		transition: transform var(--ml-t-panel) var(--ml-e-standard);
	}

	.medlife-footer__acc[open] .medlife-footer__chev {
		transform: rotate(180deg);
	}

	/*
	 * The heading's own bottom margin belongs to the OPEN state. Left on the
	 * summary it reserves 22px under every collapsed row and the column stops
	 * reading as closed.
	 */
	.medlife-footer .medlife-footer__summary .medlife-footer__heading {
		margin-bottom: 0;
	}

	.medlife-footer__acc[open] .medlife-footer__links {
		margin-top: 16px;
	}

	/*
	 * Tap targets. Measured 20.3px tall - a standalone list link, so the
	 * inline-link exemption in 2.5.8 does not apply to it.
	 */
	.medlife-footer__links a {
		min-height: 44px;
	}

	.medlife-footer__social a {
		width: 44px;
		height: 44px;
	}

	/* The keyboard ring has to follow the summary's own box, not the h2's. */
	.medlife-footer__summary:focus-visible {
		outline: 2px solid var(--ml-cyan);
		outline-offset: 3px;
		border-radius: 6px;
	}

	.medlife-footer__summary:focus:not(:focus-visible) {
		outline: none;
	}
}

/*
 * Reduced motion: the chevron is the only thing that moves here. The panel
 * itself does not animate - <details> shows and hides, it does not slide -
 * so there is nothing else in this block to suppress.
 */
@media (prefers-reduced-motion: reduce) {
	.medlife-footer__chev {
		transition: none;
	}
}

/* The contact column's links were not in the first pass - measured 113 x 23.9
   and 173.8 x 23.9, standalone links in their own list exactly like the three
   collapsible columns' links. */
@media (max-width: 768px) {
	.medlife-footer__contacts a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}