/**
 * Oversized wordmark footer treatment (design reference: homepage footer).
 *
 * Visual Polish 4: the real nav columns (site-footer.php builds most of
 * this list from registered menu locations — only a location an editor has
 * actually assigned a menu to renders at all, nothing here invents one)
 * previously stretched edge-to-edge via auto-fit/1fr, leaving short link
 * lists spread thin across the full container width with nothing to anchor
 * them. Capping each column's width and giving the group more internal
 * rhythm (title rule, link hover, wider gaps) reads as a deliberate cluster
 * instead of stretched filler — the wordmark below keeps its exact size
 * (per brief) and gets a bit more of its own air above it instead.
 *
 * Visual Polish 4.1: flex-start above left the (now width-capped) columns
 * bunched together against the left edge on wide desktop, with all the
 * freed-up width sitting unused on the right — space-between spreads
 * however many real columns exist (site-footer.php skips a location whose
 * assigned menu has zero real items, see that file) across the full row
 * instead, adapting on its own to however many columns exist with no
 * layout-specific rule needed per count.
 *
 * Homepage/Footer Content Migration: Contact and Membership joined the
 * mix as two more .k-footer__col instances (real content, not editor-menu
 * driven — see site-footer.php), and a new editor-managed "Legal" menu
 * location was added alongside Shop/Care/House. The auto-fit grid needed
 * no changes to absorb either.
 */

.k-footer {
	border-top: 1px solid var(--k-border-emphasis);
	padding: clamp(48px, 6vw, 84px) var(--k-gutter) 0;
}

.k-footer__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: clamp(40px, 6vw, 96px);
}

.k-footer__col {
	display: flex;
	flex-direction: column;
	flex: 1 1 140px;
	max-width: 180px;
	gap: 13px;
}

/* wp_nav_menu() is called with items_wrap => '%3$s' (site-footer.php) so
   each real item prints as a bare <li> with no <ul> parent — same root
   cause, same fix as the header's primary nav (see header.css's
   .k-header__nav li comment): base/reset.css's `ul[class] { list-style:
   none }` only ever matches an actual <ul>, so these bare <li>s fell back
   to the browser's own default disc marker. */
.k-footer__col li {
	list-style: none;
}

.k-footer__col-title {
	font-size: var(--k-text-label);
	letter-spacing: var(--k-tracking-label);
	text-transform: uppercase;
	color: var(--k-color-muted-3);
	margin-bottom: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--k-border-hairline);
}

.k-footer__col-links {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.k-footer__col a {
	font-size: var(--k-text-body-sm);
	color: var(--k-color-muted-1);
	transition: color var(--k-duration-base);
}

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

/* Homepage/Footer Content Migration: the Contact column's address line is
   real text, not a link — same size/color as the column's real links so it
   doesn't read as a demoted afterthought next to them. */
.k-footer__col-text {
	font-size: var(--k-text-body-sm);
	color: var(--k-color-muted-1);
}

/* font-size: the 16.5vw scale factor here was originally tuned for the
   design reference's plain "KARATAKI" wordmark. The real content is
   "KARA by KARATAKI" — roughly twice as long — so that same factor ran the
   (nowrap, overflow:hidden) text past the viewport edge at plenty of
   in-between widths: mobile, tablet, and some desktop sizes never wide
   enough to reach the 290px cap. Sizing off the section's own available
   inline width instead (min()'s second branch — a conservative per-
   character divisor for this exact fixed string) means the rendered width
   can never exceed the space it actually has, on any device. */
.k-footer__wordmark {
	font-family: var(--k-font-serif);
	font-size: min(290px, calc((100vw - 2 * var(--k-gutter)) / 11));
	line-height: 0.86;
	letter-spacing: 0.02em;
	margin-top: clamp(44px, 6vw, 88px);
	white-space: nowrap;
	color: var(--k-color-text);
	overflow: hidden;
}

.k-footer__wordmark-by {
	font-size: 0.32em;
	vertical-align: middle;
}

.k-footer__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid var(--k-border-hairline);
	margin-top: clamp(14px, 2vw, 26px);
	padding: 18px 0 22px;
	font-size: var(--k-text-label);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--k-color-muted-3);
}

.k-footer__meta-text {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.k-footer__meta a {
	color: var(--k-color-muted-3);
	transition: color var(--k-duration-base);
}

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

.k-footer__meta-payments {
	display: flex;
	align-items: center;
}

/*
 * The live site's payment-methods banner is a single-color white mark on a
 * transparent background (verified by decoding it: every visible pixel is
 * pure #fff, only alpha varies) — it was never meant to be recolored per
 * component, it's meant to be recolored per theme. A white-chip background
 * (the previous approach here) made it correctly visible, but always shows
 * the same white mark regardless of theme — including on the light
 * footer's own near-white surface, where the chip's edge was the only
 * thing separating "logo" from "background" (reported as looking blank).
 *
 * Fix: drop the chip, let the image sit directly on the footer, and flip
 * its color with the theme via filter: invert() — pure math on the same
 * real asset (no second upload, no recolored duplicate to keep in sync).
 * White-on-transparent inverts to black-on-transparent for light mode;
 * dark mode keeps the original white. This assumes the uploaded image
 * stays this kind of single-color mark — a future multi-color banner
 * would need a different treatment here.
 */
.k-footer__payment-image {
	display: block;
	height: 22px;
	width: auto;
	filter: invert(1);
}

html[data-theme="dark"] .k-footer__payment-image {
	filter: none;
}

@media (max-width: 599px) {
	.k-footer__meta {
		justify-content: flex-start;
	}
}

/* Clean single-column stack at phone widths — the same auto-fit grid could
   otherwise wrap 3 short columns unevenly (2 then a lone 3rd), which reads
   as an accident rather than a composition. */
@media (max-width: 599px) {
	.k-footer__grid {
		flex-direction: column;
		gap: 28px;
	}

	.k-footer__col {
		max-width: none;
	}
}

/* Homepage/Footer Content Migration: Quick Access (Shop) can hold 10 real
   category links — claim two grid tracks so its own two-up sub-columns
   have room, instead of stacking 10 items as one tall column next to
   3-5 item ones. */
.k-footer__col--wide {
	flex: 1 1 320px;
	max-width: 400px;
}

.k-footer__col--wide .k-footer__col-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 140px));
	column-gap: 20px;
	row-gap: 13px;
}

@media (max-width: 599px) {
	.k-footer__col--wide {
		max-width: none;
	}
}

@media (max-width: 380px) {
	.k-footer__col--wide .k-footer__col-links {
		grid-template-columns: 1fr;
	}
}