/* ------------------------------------------------------------------ *
 * Pre-footer subscribe band. Rendered by mu-plugin
 * mcs-prefooter-subscribe.php on the `kadence_before_footer` hook.
 * Full-bleed cream band lifts it off the white page area; inner wrap
 * caps width so it aligns with .site-container above.
 * ------------------------------------------------------------------ */
.mcs-prefooter-subscribe {
	background: var(--global-palette7);
	padding: 3rem 1.5rem;
}

.mcs-prefooter-subscribe__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.mcs-prefooter-subscribe__heading {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.2;
	color: var(--global-palette3);
	margin: 0 0 0.6rem;
}

.mcs-prefooter-subscribe__lede {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--global-palette4);
	margin: 0;
	max-width: 32em;
}

/* Reserve vertical space so the layout doesn't pop when Flodesk
   hydrates and replaces the empty container with the form. */
.mcs-prefooter-subscribe__form {
	min-height: 64px;
}

@media (max-width: 768px) {
	.mcs-prefooter-subscribe {
		padding: 2.25rem 1.25rem;
	}
	.mcs-prefooter-subscribe__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: center;
	}
	.mcs-prefooter-subscribe__lede {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Footer link consistency. Kadence's default footer widget styling
 * lets list items inherit body text color, so menu items and "Etsy |
 * Ravelry | Lovecrafts" read like plain text — indistinguishable
 * from headings and welcome paragraphs. Force every interactive
 * element in the footer to the site accent (palette1, teal) so the
 * link-vs-text contract from the rest of the site holds here too.
 * ------------------------------------------------------------------ */
.site-footer a:not(.wp-block-social-link-anchor):not(.mcs-footer-shop),
.primary-sidebar.widget-area a {
	color: var(--global-palette1);
	text-decoration: none;
	transition: color 0.15s ease;
}
.site-footer a:not(.wp-block-social-link-anchor):not(.mcs-footer-shop):hover,
.primary-sidebar.widget-area a:hover {
	color: var(--global-palette2);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Visual lift. A hairline divider lifts the footer off the white page
 * area, and the middle row gets generous padding so columns breathe.
 * Background stays on palette9 (white) per the customizer; the divider
 * is the only structural change.
 * ------------------------------------------------------------------ */
.site-middle-footer-wrap {
	border-top: 1px solid var(--global-palette7);
	padding-top: 1.5rem;
	padding-bottom: 1rem;
}

/* Welcome paragraph (Kadence Advanced Heading in footer-widget1) — give
   it editorial weight with Fraunces italic so it reads as a personal
   note rather than another block of body copy. */
.site-footer .footer-widget1 .wp-block-kadence-advancedheading {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--global-palette4);
	margin: 1.25rem 0 1.5rem;
	max-width: 20em;
}

/* Logo image: cap width so it doesn't dominate the column on widescreens
   when palette9 page bg shows behind it. */
.site-footer .footer-widget1 .wp-block-image img {
	max-width: 220px;
	height: auto;
}

/* Widget titles ("Beginners", "Categories", "Popular Posts"). Kadence
   renders these as <h2 class="widget-title">. Tone them down — the
   middle-row content is the focus, not the labels. */
.site-footer .widget-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--global-palette6);
	margin: 0 0 0.85rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--global-palette7);
}

/* Footer menu items: a touch more space, no bullets, slightly muted. */
.site-footer .menu,
.site-footer .wp-block-page-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .menu li,
.site-footer .wp-block-page-list li {
	margin: 0;
	padding: 0.25rem 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

/* In-column section heading. A menu item carrying the .mcs-menu-section
   class (custom-link with href="#") is rendered as a small uppercase
   label with a hairline rule above — used to split a column into two
   themed groups without needing a second widget. */
.site-footer .menu li.mcs-menu-section {
	margin: 1.5rem 0 0.85rem;
	padding: 0 0 0.65rem;
	border-bottom: 1px solid var(--global-palette7);
}

.site-footer .menu li.mcs-menu-section > a {
	color: var(--global-palette6);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

/* Social icons: circle backgrounds in cream, accent-tinted glyphs.
   Kadence's default footer social SVGs inherit the wrap color (palette3
   on this site) and sit on transparent — they read as flat marks. Wrap
   them in a soft circle and recolor for warmth. */
.site-footer .wp-block-social-links {
	gap: 0.5rem;
	margin: 0.25rem 0 1.5rem;
}

.site-footer .wp-block-social-link {
	background: var(--global-palette7);
	border-radius: 999px;
	transition: background 0.18s ease, transform 0.18s ease;
}

.site-footer .wp-block-social-link:hover {
	background: var(--global-palette1);
	transform: translateY(-1px);
}

.site-footer .wp-block-social-link-anchor {
	color: var(--global-palette3);
	transition: color 0.18s ease;
}

.site-footer .wp-block-social-link:hover .wp-block-social-link-anchor {
	color: #fff;
}

/* "Etsy | Ravelry | Lovecrafts" — restyled as pill buttons. The widget
   markup is rewritten (DB-side) to .mcs-footer-shops > .mcs-footer-shop
   so the old pipe separators are gone; remaining styling is here. */
.mcs-footer-shops {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.mcs-footer-shop {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--global-palette1);
	border-radius: 999px;
	color: var(--global-palette1);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.mcs-footer-shop:hover,
.mcs-footer-shop:focus {
	background: var(--global-palette1);
	color: #fff;
	text-decoration: none;
}

/* Bottom row — copyright + utility links. Hairline above, smaller text,
   centered on phones. Kadence wraps everything in <div class="footer-html
   inner-link-style-normal"> > <div class="footer-html-inner"> > <p>…</p>. */
.site-bottom-footer-wrap {
	border-top: 1px solid var(--global-palette7);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.footer-html-inner p {
	font-size: 0.85rem;
	color: var(--global-palette6);
	margin: 0;
	line-height: 1.6;
}

.footer-html-inner a {
	color: var(--global-palette4);
	text-decoration: none;
}

.footer-html-inner a:hover {
	color: var(--global-palette1);
	text-decoration: underline;
}