/**
 * D LUNAFAM — Footer
 * ------------------------------------------------------------------
 * Site-wide (every page renders this, not only the homepage) — see
 * inc/footer.php for why the default OceanWP widget footer was
 * replaced instead of restyled.
 */

/* font-weight: OceanWP's Customizer sets body { font-weight: 900 } at
   ≤480px, which every footer line inherited. */
.mmsc-footer {
	background-color: var(--mmsc-color-dark);
	color: var(--mmsc-color-border);
	font-weight: 400;
	padding: var(--mmsc-space-8) var(--mmsc-space-5) var(--mmsc-space-5);
}

.mmsc-footer .mmsc-footer__heading {
	font-weight: 600;
}

.mmsc-footer .mmsc-footer__tagline {
	font-weight: 500;
}

.mmsc-footer a {
	color: var(--mmsc-color-border);
	text-decoration: none;
}

.mmsc-footer a:hover,
.mmsc-footer a:focus-visible {
	color: var(--mmsc-color-accent);
}

.mmsc-footer__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--mmsc-space-7);
}

/* Brand: the official reversed (white) D LUNAFAM lockup, sized by height
   so the artwork keeps its own proportions. */
.mmsc-footer__logo {
	display: inline-block;
	margin: 0 0 var(--mmsc-space-4);
	line-height: 0;
}

.mmsc-footer__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 88px;
}

.mmsc-footer a.mmsc-footer__logo:hover,
.mmsc-footer a.mmsc-footer__logo:focus-visible {
	opacity: 0.85;
}

.mmsc-footer__tagline {
	margin: 0 0 var(--mmsc-space-1);
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-lg);
	color: var(--mmsc-color-surface);
	letter-spacing: 0.01em;
}

.mmsc-footer__byline {
	margin: 0;
	font-size: var(--mmsc-text-sm);
	color: var(--mmsc-color-border);
}

.mmsc-footer__columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mmsc-space-6) var(--mmsc-space-5);
}

/* Follow: full row on phones (four labelled links). */
.mmsc-footer__col--follow {
	grid-column: 1 / -1;
}

/* Help: the official phone and email (inc/brand.php). On the narrowest
   phones the email wraps after its "@" (a <wbr> in footer.php), never
   mid-word; break-word is only the last resort. The number never splits. */
.mmsc-footer a.mmsc-footer__email {
	overflow-wrap: break-word;
}

.mmsc-footer a.mmsc-footer__phone {
	white-space: nowrap;
}

.mmsc-footer__company-tagline {
	display: block;
	margin-top: var(--mmsc-space-1);
	color: rgba(222, 213, 204, 0.7);
}

/* ------------------------------------------------------------------
   Social links — shared component (inc/brand.php). Footer is the
   permanent home; About and Contact reuse it with the --light modifier.
   ------------------------------------------------------------------ */

.mmsc-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mmsc-space-2);
}

.mmsc-social li {
	margin: 0;
	padding: 0;
}

.mmsc-social__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	text-decoration: none;
}

.mmsc-social__icon {
	flex: 0 0 auto;
	display: block;
}

.mmsc-social--light .mmsc-social__link {
	color: var(--mmsc-color-text);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--mmsc-transition-fast);
}

.mmsc-social--light .mmsc-social__icon {
	color: var(--mmsc-color-primary);
}

.mmsc-social--light .mmsc-social__link:hover,
.mmsc-social--light .mmsc-social__link:focus-visible {
	color: var(--mmsc-color-primary);
}

@media (min-width: 480px) and (max-width: 767px) {
	.mmsc-footer__col--follow .mmsc-social {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: start;
		column-gap: var(--mmsc-space-6);
	}
}

.mmsc-footer__heading {
	font-size: var(--mmsc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mmsc-color-surface);
	margin: 0 0 var(--mmsc-space-3);
}

.mmsc-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mmsc-space-2);
}

.mmsc-footer__bottom {
	max-width: 1320px;
	margin: var(--mmsc-space-7) auto 0;
	padding-top: var(--mmsc-space-5);
	border-top: 1px solid rgba(222, 213, 204, 0.2);
	display: flex;
	flex-direction: column;
	gap: var(--mmsc-space-3);
	font-size: var(--mmsc-text-xs);
}

/* Explicit colour: the legacy Additional CSS `div { color: black
   !important }` reaches this <p> through its parent div. */
.mmsc-footer__bottom p {
	margin: 0;
	color: var(--mmsc-color-border);
}

/* Shop / Help / Company, then Follow (its own row until 1024px). */
@media (min-width: 768px) {
	.mmsc-footer__columns {
		grid-template-columns: repeat(3, 1fr);
	}

	.mmsc-footer__col--follow .mmsc-social {
		display: flex;
		flex-flow: row wrap;
		gap: var(--mmsc-space-2) var(--mmsc-space-6);
	}

	/* Legal links sit beside the copyright, not at the far right: the
	   floating chat button lives in that corner and covered them. */
	.mmsc-footer__bottom {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: var(--mmsc-space-7);
	}
}

/* Laptop+: Follow becomes the fourth column. */
@media (min-width: 1024px) {
	.mmsc-footer__columns {
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
	}

	.mmsc-footer__col--follow {
		grid-column: auto;
	}

	.mmsc-footer__col--follow .mmsc-social {
		flex-direction: column;
		gap: var(--mmsc-space-1);
	}

	.mmsc-footer__logo img {
		height: 104px;
	}
}

/* Checkout (page 253): the legacy Additional CSS rule
   `.page-id-253 p { color: black !important }` turned the footer's
   paragraph lines (tagline, column headings, byline, copyright) black on
   the espresso footer. Each is restored to its colour on every other page. */
body.page-id-253 .mmsc-footer .mmsc-footer__tagline,
body.page-id-253 .mmsc-footer .mmsc-footer__heading {
	color: var(--mmsc-color-surface) !important;
}

body.page-id-253 .mmsc-footer .mmsc-footer__byline,
body.page-id-253 .mmsc-footer .mmsc-footer__bottom p {
	color: var(--mmsc-color-border) !important;
}