/*
 * Site Footer
 *
 * Background exactly matches --qehs-primary and social-icon circles
 * exactly match --qehs-accent-slate-blue — both confirmed via pixel
 * sampling against the Figma reference, not guessed. Uses
 * .qehs-container (base/typography.css), not a separate container
 * system.
 */

.qehs-site-footer {
	background-color: var(--qehs-primary);
	padding-block: var(--qehs-space-2xl) var(--qehs-space-xl);
}

.qehs-site-footer__grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
	gap: var(--qehs-space-xl);
	margin-bottom: var(--qehs-space-xl);
}

/* --- Branding column --- */

.qehs-site-footer__logo {
	margin-bottom: var(--qehs-space-md);
}

/* Matches the same pattern already used in the Header
   (assets/css/layout/header.css .qehs-site-header__logo img) — sizes
   whatever <img> the shared qehs_theme_the_logo() function outputs
   (WordPress's native custom-logo markup, or the site-title fallback
   link, which this rule simply won't match), rather than depending on
   a specific class on the img itself. max-height + width:auto +
   max-width:100% preserves the logo's native aspect ratio at any size
   — never stretches, never crops. */
.qehs-site-footer__logo img {
	display: block;
	height: auto;
	max-height: 40px;
	width: auto;
	max-width: 100%;
}

.qehs-site-footer__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #ffffff;
}

.qehs-site-footer__tagline {
	margin: 0 0 var(--qehs-space-lg);
	max-width: 320px;
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
}

.qehs-site-footer__social {
	display: flex;
	gap: var(--qehs-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.qehs-site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background-color: var(--qehs-accent-slate-blue);
	color: #ffffff;
	transition: filter 0.2s ease;
}

.qehs-site-footer__social-link:hover {
	filter: brightness(1.15);
}

.qehs-site-footer__social-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

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

.qehs-footer-col__heading {
	margin: 0 0 var(--qehs-space-md);
	font-size: 1.1rem;
	font-weight: 700;
	color: #ffffff;
}

.qehs-footer-col__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--qehs-space-sm);
}

.qehs-footer-col__list a {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.75);
}

.qehs-footer-col__list a:hover,
.qehs-footer-col__list a:focus-visible {
	color: #ffffff;
}

.qehs-footer-col__list a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* --- We Accept column --- */

.qehs-site-footer__payments {
	display: flex;
	align-items: center;
	gap: var(--qehs-space-md);
	margin-bottom: var(--qehs-space-md);
	color: #ffffff;
}

.qehs-payment-badge--text {
	font-weight: 700;
	font-style: italic;
	font-size: 0.95rem;
	color: #ffffff;
	white-space: nowrap;
}

.qehs-payment-badge--icon {
	color: #ffffff;
	object-fit: contain;
}

/* Simple two-overlapping-circles representation, not a precise
   reproduction of the Mastercard wordmark/logo. */
.qehs-payment-badge--mastercard {
	position: relative;
	display: inline-flex;
	width: 34px;
	height: 20px;
}

.qehs-payment-badge--mastercard span {
	position: absolute;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 999px;
}

.qehs-payment-badge--mastercard span:first-child {
	left: 0;
	background-color: #eb5b2f;
}

.qehs-payment-badge--mastercard span:last-child {
	right: 0;
	background-color: #f2ab27;
	mix-blend-mode: screen;
}

.qehs-site-footer__trust {
	display: flex;
	align-items: center;
	gap: var(--qehs-space-sm);
	margin: 0 0 var(--qehs-space-xs);
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.8);
}

.qehs-site-footer__trust svg {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.8);
}

/* --- Divider + bottom bar --- */

.qehs-site-footer__divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0 0 var(--qehs-space-lg);
}

.qehs-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--qehs-space-lg);
	flex-wrap: wrap;
}

.qehs-site-footer__copyright,
.qehs-site-footer__credit {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.75);
}

.qehs-site-footer__bottom-divider {
	width: 1px;
	height: 16px;
	background-color: rgba(255, 255, 255, 0.25);
}

/* --- Tablet: reduce to a 2-column-ish flow, matching the site's
   existing 1024px breakpoint. --- */
@media (max-width: 1024px) {
	.qehs-site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.qehs-site-footer__branding {
		grid-column: 1 / -1;
	}
}

/* --- Mobile: stack everything in the specified order (logo/tagline,
   social, then link columns, payments last). --- */
@media (max-width: 768px) {
	.qehs-site-footer__grid {
		grid-template-columns: 1fr;
	}

	.qehs-site-footer__branding {
		grid-column: auto;
	}

	.qehs-site-footer__bottom {
		flex-direction: column;
		gap: var(--qehs-space-sm);
		text-align: center;
	}

	.qehs-site-footer__bottom-divider {
		display: none;
	}
}

@media (max-width: 480px) {
	.qehs-site-footer {
		padding-block: var(--qehs-space-xl) var(--qehs-space-lg);
	}

	.qehs-site-footer__grid {
		gap: var(--qehs-space-lg);
	}
}