/* ==========================================================================
   Site footer (native replacement for the Elementor footer block)
   Loaded site-wide -- see mm_enqueue_footer_styles().
   ========================================================================== */
.mm-footer {
	--mm-footer-space-xs: 8px;
	--mm-footer-space-sm: 12px;
	--mm-footer-space-md: 24px;
	--mm-footer-space-lg: 40px;

	--mm-footer-rule: color-mix(in srgb, currentColor 20%, transparent);

	padding-block: var(--mm-footer-space-lg);
	font-family: var(--font-primary);

	/*
	 * Inherit the footer colour scheme rather than pinning brand colours.
	 *
	 * --wd-title-color is the navy used for headings on white page backgrounds.
	 * Applying it here put navy text on the dark footer, which failed contrast
	 * badly. Everything below therefore uses currentColor / inherit so the
	 * footer stays legible whichever scheme Theme Settings applies.
	 */
	color: inherit;
}

.mm-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-footer-space-lg);
	align-items: flex-start;
}

.mm-footer__brand {
	flex: 1 1 260px;
	min-width: 0;
	max-width: 340px;
}

.mm-footer__logo img,
.mm-footer__logo svg {
	max-width: 200px;
	height: auto;
}

.mm-footer__sitename {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--font-size-h4);
}

.mm-footer__sitename a,
.mm-footer__phone a {
	color: inherit;
	text-decoration: none;
}

.mm-footer__sitename a:hover,
.mm-footer__phone a:hover,
.mm-footer__sitename a:focus-visible,
.mm-footer__phone a:focus-visible {
	text-decoration: underline;
}

.mm-footer__tagline {
	margin-block: var(--mm-footer-space-sm) 0;
	font-size: var(--font-size-small);
	line-height: 1.6;
	opacity: 0.85;
}

.mm-footer__phone {
	margin-block-start: var(--mm-footer-space-sm);
	font-size: var(--font-size-small);
}

.mm-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-footer-space-xs);
	margin-block: var(--mm-footer-space-md) 0;
	padding: 0;
	list-style: none;
}

.mm-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: var(--mm-footer-space-xs);
	border: 1px solid var(--mm-footer-rule);
	border-radius: 50%;
	font-size: var(--font-size-xs);
	text-decoration: none;
	color: inherit;
}

.mm-footer__social a:hover,
.mm-footer__social a:focus-visible {
	border-color: currentColor;
}

/* Columns: as many as fit, collapsing gracefully rather than at fixed steps. */
.mm-footer__columns {
	flex: 999 1 480px;
	display: grid;
	/*
	 * A 150px floor left too little room for six columns beside the brand block,
	 * so the last one ("Country") wrapped onto a second row on its own. 120px
	 * lets all six share the row on desktop, and auto-fit still collapses them
	 * to fewer columns as the viewport narrows.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
	gap: var(--mm-footer-space-md) var(--mm-footer-space-sm);
	min-width: 0;
}

.mm-footer__heading {
	margin-block: 0 var(--mm-footer-space-xs);
	font-family: var(--font-primary);
	font-size: var(--font-size-md);
	color: inherit;
	opacity: 0.95;
}

.mm-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-footer__menu li + li {
	margin-block-start: var(--mm-footer-space-xs);
}

.mm-footer__menu a {
	display: inline-block;
	/* 44px minimum touch target on small screens without bloating desktop. */
	padding-block: 6px;
	font-size: var(--font-size-small);
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.mm-footer__menu a:hover,
.mm-footer__menu a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Medical disclaimer
   A safety statement, so it is given a real heading and readable measure
   rather than being reduced to fine print.
   -------------------------------------------------------------------------- */
.mm-footer__disclaimer {
	margin-block-start: var(--mm-footer-space-lg);
	padding-block-start: var(--mm-footer-space-md);
	border-block-start: 1px solid var(--mm-footer-rule);
}

.mm-footer__disclaimer-heading {
	margin-block: 0 var(--mm-footer-space-xs);
	font-family: var(--font-primary);
	font-size: var(--font-size-small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: inherit;
	opacity: 0.95;
}

.mm-footer__disclaimer-body {
	/*
	 * Spans the footer's full width rather than being capped to a reading
	 * measure. Capped, it filled about half the row and left a conspicuous
	 * empty block to its right. As fine print set in two columns on wide
	 * screens, the line length stays comfortable without the dead space.
	 */
	font-size: var(--font-size-xs);
	line-height: 1.65;
	opacity: 0.8;
	columns: 2;
	column-gap: var(--mm-footer-space-lg);
}

.mm-footer__disclaimer-body p {
	margin-block-start: 0;
}

@media (max-width: 900px) {
	.mm-footer__disclaimer-body {
		columns: 1;
	}
}

.mm-footer__disclaimer-body p:last-child {
	margin-block-end: 0;
}

.mm-footer__bottom {
	margin-block-start: var(--mm-footer-space-md);
	padding-block-start: var(--mm-footer-space-sm);
	border-block-start: 1px solid var(--mm-footer-rule);
	font-size: var(--font-size-xs);
	opacity: 0.75;
}

.mm-footer__copyright {
	margin: 0;
}

@media (max-width: 768px) {
	.mm-footer {
		padding-block: var(--mm-footer-space-md);
	}

	.mm-footer__brand {
		max-width: 100%;
	}

	.mm-footer__menu a {
		padding-block: 10px;
	}
}

/* --------------------------------------------------------------------------
   Footer headings
   --------------------------------------------------------------------------
   The site forces all headings to the brand navy with an !important rule.
   Against the footer's near-black background that measures 1.37:1 -- far below
   the 4.5:1 WCAG AA minimum -- so the headings were effectively invisible. The
   brand red only reaches 3.6:1, still short at this text size.

   The colour therefore stays derived from the brand rather than replaced by a
   generic white: the theme's own brand custom property is mixed toward white
   until it clears AA, so the footer keeps its brand character and the palette
   still flows from Theme Settings. --mm-footer-heading / --mm-footer-accent
   override this when set under Customizer > Footer Colours.

   !important is required only to beat the existing !important heading rule.
   -------------------------------------------------------------------------- */
/*
 * Headings are sized here as well as coloured: the theme's h2 rules otherwise
 * render them large enough that "Most Searched Molecules" wraps to three lines
 * while its neighbours take one, so the link lists all started at different
 * heights. A fixed two-line box keeps the columns aligned regardless of label
 * length.
 */
.mm-footer .mm-footer__heading,
.footer-container .mm-footer .mm-footer__heading {
	font-size: var(--font-size-h5) !important;
	line-height: 1.3 !important;
	min-height: 2.6em;
	margin-block-end: var(--mm-footer-space-sm) !important;
	color: var(
		--mm-footer-heading,
		color-mix(in srgb, var(--wd-primary-color) 18%, #fff)
	) !important;
	opacity: 1;
}

.mm-footer .mm-footer__disclaimer-heading,
.footer-container .mm-footer .mm-footer__disclaimer-heading {
	color: var(
		--mm-footer-accent,
		color-mix(in srgb, var(--wd-alternative-color) 40%, #fff)
	) !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Footer surface
   --------------------------------------------------------------------------
   The footer previously sat on the theme's generic near-black (#0f0f0f), which
   is not a brand colour and made the whole block read as a default rather than
   as MedsMonk. It now uses the brand primary from the theme's own custom
   property, so the palette flows from Theme Settings and the footer belongs to
   the brand. Customizer > Footer Colours still overrides it.

   The full-bleed background is applied to the wrapper as well, otherwise the
   theme's own dark strip shows through beside the boxed container.
   -------------------------------------------------------------------------- */
.mm-footer,
.footer-container:has(.mm-footer) {
	background-color: var(--mm-footer-bg, var(--wd-primary-color)) !important;
}

.mm-footer,
.mm-footer .mm-footer__menu a,
.mm-footer .mm-footer__disclaimer-body {
	color: var(--mm-footer-text, inherit);
}

/* --------------------------------------------------------------------------
   Footer container
   --------------------------------------------------------------------------
   The theme's .container resolves to zero horizontal padding inside the footer,
   which left the logo and blurb flush against the viewport edge. Padding is
   restored here and the content capped to the theme's own container width, so
   the footer lines up with the rest of the page.

   clamp() scales the gutter with the viewport instead of stepping at
   breakpoints, matching the approach used elsewhere in these templates.
   -------------------------------------------------------------------------- */
/*
 * The gutter is applied to .mm-footer rather than the theme's .container: a
 * Woodmart rule zeroes .container padding inside the footer and wins on
 * specificity, so setting it there needed !important. Padding our own wrapper
 * sidesteps the conflict entirely.
 */
.mm-footer {
	padding-inline: clamp(20px, 4vw, 75px);
}

.mm-footer > .container {
	max-width: var(--wd-container-w, 1440px);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Bottom bar: copyright and social
   -------------------------------------------------------------------------- */
.mm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mm-footer-space-sm) var(--mm-footer-space-md);
}

.mm-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-footer-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Circular icon buttons. 36px on desktop, 44px once this is a thumb interface. */
.mm-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--mm-footer-rule);
	border-radius: 50%;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mm-footer__social .mm-social-icon {
	display: block;
	flex: 0 0 auto;
}

.mm-footer__social a:hover,
.mm-footer__social a:focus-visible {
	/* Fill with the brand accent on hover; the icon flips to the footer surface. */
	background-color: var(--wd-alternative-color);
	border-color: var(--wd-alternative-color);
	color: #fff;
}

.mm-footer__social a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mm-footer__social a {
		transition: none;
	}
}

.mm-footer__social a:hover,
.mm-footer__social a:focus-visible {
	border-color: currentColor;
	text-decoration: none;
}

@media (max-width: 768px) {
	.mm-footer__bottom {
		justify-content: flex-start;
	}

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