/**
 * Footer templates — shared component CSS.
 *
 * WHY THIS EXISTS
 * The five footer templates are patterns built from core blocks, so almost all
 * of their appearance travels in block attributes and needs no CSS at all.
 * What block attributes cannot express is what lives here:
 *
 *   - responsive behaviour that differs by template (§22 of the spec: each
 *     template gets an intentional mobile layout, not stacked desktop columns)
 *   - the navigation accordion's desktop/mobile duality
 *   - hover and focus treatments
 *   - the media grid's column counts
 *
 * Everything is scoped under `.kwik-footer` and its `--{type}` modifiers, so a
 * footer that is never inserted costs a page nothing but this file's bytes.
 *
 * Authoring rules followed here:
 *   - logical properties (padding-inline, margin-block) where practical
 *   - no `!important` except where a classic theme's global link styles must be
 *     beaten, which is documented inline at the one place it happens
 *   - shallow selectors; no deep nesting
 *   - every transition is removed under prefers-reduced-motion
 */

/* -------------------------------------------------------------------------
 * Shared tokens
 *
 * Declared on the component rather than :root so two different footers could
 * coexist on one page (a pattern being edited above a live one, say) without
 * fighting. Each pattern overrides what it needs via inline style on the
 * wrapper, which is also what makes them editable in the inspector.
 * ---------------------------------------------------------------------- */

.kwik-footer {
	--kwik-footer-max-width: 1280px;
	--kwik-footer-gap: 40px;
	--kwik-footer-accent: currentColor;
	--kwik-footer-border: rgba(255, 255, 255, 0.12);
	--kwik-footer-radius: 14px;
	--kwik-footer-motion: 180ms;
}

/* -------------------------------------------------------------------------
 * Vertical rhythm between the footer's major sections
 *
 * WHY THIS IS NOT JUST blockGap
 * `blockGap` is what the patterns actually declare, and on a BLOCK theme core
 * turns it into `.wp-container-xxx > * + * { margin-block-start: … }`. But
 * core only emits that rule when `settings.spacing.blockGap` is non-null, and
 * a CLASSIC theme with no theme.json leaves it null — so core emits nothing,
 * every child keeps `margin-block-start: 0`, and the sections sit flush
 * against each other. On Neve the CTA panel collided with the masthead.
 *
 * The selectors below are wrapped in `:where()`, which contributes ZERO
 * specificity. So wherever core does emit its own gap rule (0,1,0) core wins
 * and the author's blockGap remains the single source of truth; this only
 * fills the silence on themes where core opted out.
 *
 * Both shapes are covered because a group renders its children directly on
 * some themes and inside `.wp-block-group__inner-container` on others.
 * ---------------------------------------------------------------------- */

.kwik-footer {
	--kwik-footer-stack: 48px;
}

.kwik-footer--directory,
.kwik-footer--cta {
	--kwik-footer-stack: 64px;
}

:where(.kwik-footer > * + *),
:where(.kwik-footer > .wp-block-group__inner-container > * + *) {
	margin-block-start: var(--kwik-footer-stack);
}

/* Classic themes (Neve among them) underline every link in content via a
 * selector like `.entry-content a`, which out-specifies anything the pattern
 * can say in a block attribute. A footer nav underlined on every item reads
 * as broken rather than as navigation, so the underline is moved to hover and
 * focus — where it also becomes a useful affordance. The doubled class is
 * what beats a theme's two-part selector without reaching for !important.
 *
 * Safe for accessibility here because these links are not inline in prose:
 * they are list-like navigation where position, not underline, identifies
 * them — and they still underline on keyboard focus. */
.kwik-footer.kwik-footer a {
	text-decoration: none;

	/* EDITOR/FRONT-END PARITY
	 * Each section sets its own text colour and the links are meant to take
	 * it. On the front end core's `has-link-color` already produced that, but
	 * inside the editor canvas a classic theme's editor stylesheet — which WP
	 * rewrites to `.editor-styles-wrapper a` — out-ran it, and every footer
	 * link rendered in the theme's blue. Inheriting is both the correct
	 * result and identical in the two contexts.
	 *
	 * Where a link is deliberately a different colour (the Social template's
	 * "Newsletter →"), the paragraph around it carries that colour, so
	 * inheriting still lands on the intended value. */
	color: inherit;
}

.kwik-footer.kwik-footer a:hover,
.kwik-footer.kwik-footer a:focus-visible {
	text-decoration: underline;
}

/* EDITOR ONLY
 * Inside the block editor a classic theme's stylesheet is rewritten by
 * WordPress to `.editor-styles-wrapper …` and out-ran the rule above, so
 * every footer link rendered in the theme's blue while the front end was
 * correct — a straight editor/front-end parity break. Adding the canvas
 * wrapper raises this to three classes, which wins there without reaching
 * for `!important` and without touching the front-end cascade at all. */
.editor-styles-wrapper .kwik-footer.kwik-footer a {
	color: inherit;
}

/* The Minimal template draws its own animated underline, so it must not get
 * the plain one on hover as well. */
.kwik-footer--minimal.kwik-footer--minimal .kwik-footer__link:hover,
.kwik-footer--minimal.kwik-footer--minimal .kwik-footer__link:focus-visible {
	text-decoration: none;
}

/* Links inside a footer are styled by the pattern's own element attributes.
 * This only guarantees a visible focus ring, which several classic themes
 * remove wholesale — an accessibility regression we must not inherit. */
.kwik-footer :is(a, button, summary):focus-visible {
	outline: 2px solid var(--kwik-footer-accent, currentColor);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Navigation groups (Directory, CTA, Trust)
 *
 * Built on `core/details` so the accordion is keyboard operable and exposes
 * aria-expanded with no JavaScript and no custom block.
 *
 * The markup ships each group OPEN. That matters: if the enhancement script
 * never runs, every link stays visible and reachable. A footer must not be
 * able to hide a site's navigation because a script failed.
 * `kwik-footers.js` then collapses the groups below the mobile breakpoint.
 * ---------------------------------------------------------------------- */

.kwik-footer__group > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.kwik-footer__group > summary::-webkit-details-marker {
	display: none;
}

/* The +/− affordance. Drawn in CSS rather than shipped as an icon so it
 * inherits the heading's colour automatically in all five palettes. */
.kwik-footer__group > summary::after {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	flex: none;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	opacity: 0.65;
	transition: transform var(--kwik-footer-motion) ease;
}

.kwik-footer__group[open] > summary::after {
	/* Rotating a plus by 45° reads as a minus without a second glyph. */
	transform: rotate(45deg);
	background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

/* Mobile: the summary is the control, so it must be a real touch target.
 * Unstyled it measures ~17px tall — well under the ~44px the specification
 * asks for, and uncomfortable to hit. The padding also gives the collapsed
 * list its rhythm, and the hairline rule makes it read as a list of rows
 * rather than four labels floating in space. */
@media (max-width: 781px) {

	.kwik-footer__group > summary {
		min-block-size: 44px;
		padding-block: 12px;
		border-block-start: 1px solid var(--kwik-footer-border);
	}

	.kwik-footer__group:first-of-type > summary {
		border-block-start: 0;
	}
}

@media (min-width: 782px) {

	/* Desktop: the group is a heading with a list under it, not a control.
	 * The script forces `open`; this removes every affordance that would
	 * suggest otherwise. */
	.kwik-footer__group > summary {
		cursor: default;
		pointer-events: none;
	}

	.kwik-footer__group > summary::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Template 01 — Directory
 *
 * The brand/navigation split is a core/columns block and the navigation
 * groups sit in a core grid layout, so WordPress emits the grid itself and
 * there is nothing to declare here. Doing it by hand was actively wrong: a
 * core/group with a flow layout wraps its children in
 * `.wp-block-group__inner-container`, so a grid declared on the group has
 * exactly ONE child and every column collapses into the first track.
 * ---------------------------------------------------------------------- */

/* A small "operational" dot. Decorative: the adjacent text carries the
 * meaning, so the dot is hidden from assistive technology in the markup. */
.kwik-footer__status-dot {
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--kwik-footer-accent);
	margin-inline-end: 8px;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Template 02 — Minimal
 * The hover underline that grows from the left. Kept to a transform so it
 * composites, and removed entirely under reduced motion.
 * ---------------------------------------------------------------------- */

.kwik-footer--minimal .kwik-footer__link {
	position: relative;
	text-decoration: none;
}

.kwik-footer--minimal .kwik-footer__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -3px;
	block-size: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--kwik-footer-motion) ease;
}

.kwik-footer--minimal .kwik-footer__link:hover::after,
.kwik-footer--minimal .kwik-footer__link:focus-visible::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
 * Template 03 — CTA
 * ---------------------------------------------------------------------- */

.kwik-footer__cta {
	/* The panel is the loudest thing on the page by design; the radius and
	 * padding scale down rather than off at narrow widths. */
	border-radius: clamp(20px, 4vw, 36px);
}

.kwik-footer__cta .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 599px) {

	.kwik-footer__cta .wp-block-button {
		/* `inline-size` alone is not enough: these are flex items, and the
		 * default `flex: 0 1 auto` sizes them from their content regardless.
		 * The basis is what actually makes them fill the row. */
		flex: 1 1 100%;
		inline-size: 100%;
	}

	.kwik-footer__cta .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Template 04 — Trust
 * ---------------------------------------------------------------------- */

/* The block declares three equal columns, which is the authored design.
 * core's `minimumColumnWidth` was wrong here: it uses auto-FILL, so a 1280px
 * container makes six 210px tracks and the three cards fill only half the
 * width. Below the tablet breakpoint three columns is too narrow to read, so
 * they collapse to one. */
@media (min-width: 600px) and (max-width: 781px) {

	.kwik-footer .kwik-footer__trust-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {

	.kwik-footer .kwik-footer__trust-grid {
		grid-template-columns: 1fr;
	}
}

.kwik-footer__trust-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.045);
	border-radius: var(--kwik-footer-radius);
}

/* Payment marks are set as text so they inherit the palette and add no
 * image weight. They wrap rather than scroll at narrow widths. */
.kwik-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kwik-footer__payment {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * Template 05 — Social & Content
 * 5 columns desktop, 3 tablet, 2 mobile (§22).
 * ---------------------------------------------------------------------- */

.kwik-footer .kwik-footer__media-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 600px) {

	.kwik-footer .kwik-footer__media-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (min-width: 782px) {

	/* Five columns is the authored design and is what the block itself
	 * declares; repeating it keeps this file readable next to the two
	 * narrower cases above. */
	.kwik-footer .kwik-footer__media-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 12px;
	}
}

/* The grid children are core/image blocks, which bring their own figure
 * wrapper; squaring the image is the only thing the pattern cannot say. */
.kwik-footer__media-grid figure,
.kwik-footer__media-grid img {
	margin: 0;
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.kwik-footer__media-grid figure {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
}

.kwik-footer__media-grid img {
	object-fit: cover;
	transition: transform var(--kwik-footer-motion) ease;
}

.kwik-footer__media-grid figure:hover img {
	transform: scale(1.03);
}

/* -------------------------------------------------------------------------
 * Utility bar — shared by every template
 * ---------------------------------------------------------------------- */

.kwik-footer__utility {
	border-block-start: 1px solid var(--kwik-footer-border);
}

/* -------------------------------------------------------------------------
 * Motion
 *
 * One blanket removal rather than per-rule guards: every transition in this
 * file is decorative, so none of them should survive the preference.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.kwik-footer *,
	.kwik-footer *::before,
	.kwik-footer *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.kwik-footer--minimal .kwik-footer__link::after {
		/* Without motion the underline should simply be present on hover
		 * rather than animating in from nothing. */
		transition: none;
	}

	.kwik-footer__media-grid figure:hover img {
		transform: none;
	}
}