/*
 * Layer: components. Site footer (kit .footer): cobalt band with the brand column, three menus
 * and the PayPal support button, then the white legal strip with the designer credit.
 */
@layer components {

	.nd-footer {
		position: relative;
		overflow: hidden;
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 10%, transparent);
		background-color: var(--wp--preset--color--cobalt);
		color: var(--wp--preset--color--paper);
	}

	/* The part's groups are flow layouts; spacing here is the kit's, not the block gap. */
	.nd-footer :where(.is-layout-flow) > *,
	.nd-footer > * {
		margin-block: 0;
	}

	.nd-footer .nd-ornament {
		position: absolute;
		top: 28px;
		left: 50%;
		color: var(--wp--preset--color--cobalt-light);
		opacity: 0.35;
		transform: translateX(-50%);
	}

	.nd-footer__grid {
		position: relative;
		display: grid;
		grid-template-columns: 1.3fr repeat(3, 1fr);
		gap: 48px;
		padding: 120px var(--wp--style--root--padding-right) 40px var(--wp--style--root--padding-left);
	}

	.nd-footer .nd-lockup,
	.nd-footer .nd-lockup:hover {
		color: var(--wp--preset--color--paper);
	}

	.nd-footer .nd-footer__tagline {
		max-width: 320px;
		margin-top: 18px;
		color: var(--wp--preset--color--cobalt-light);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	/* Support this website (kit .nd-support): the PayPal form's submit, sparks on hover. */
	.nd-footer .nd-support-form {
		margin: 24px 0 0;
	}

	.nd-support {
		position: relative;
		display: inline-block;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--paper);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
		transform-origin: left center;
		transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease);
	}

	.nd-support:hover {
		transform: scale(1.06);
	}

	.nd-support:focus-visible {
		border-radius: var(--wp--preset--border-radius--input-glass);
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	.nd-support__spark {
		--s: 7px;
		--dx: 14px;
		--dy: -24px;
		position: absolute;
		top: -4px;
		right: -6px;
		width: var(--s);
		height: var(--s);
		background-color: var(--wp--preset--color--brand-tint);
		clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
		opacity: 0;
		pointer-events: none;
	}

	.nd-support__spark--2 {
		--s: 5px;
		--d: 0.35s;
		--dx: 24px;
		--dy: -16px;
		background-color: var(--wp--preset--color--paper);
	}

	.nd-support__spark--3 {
		--s: 4px;
		--d: 0.7s;
		--dx: 8px;
		--dy: -30px;
	}

	/* Menu columns. */
	/* Kit: 8px margin plus the nav's 10px gap, as the eyebrow sits inside the nav there. */
	.nd-footer .nd-footer__eyebrow {
		margin-bottom: 18px;
		color: var(--wp--preset--color--cobalt-light);
		font-size: var(--wp--preset--font-size--tag);
		font-weight: 600;
		line-height: 1;
		letter-spacing: var(--wp--custom--tracking--eyebrow);
		text-transform: uppercase;
	}

	.nd-footer__nav {
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 400;
		line-height: 1.4;
	}

	.nd-footer__nav .wp-block-navigation__container {
		align-items: flex-start;
		gap: 10px;
	}

	/* Links (kit .nd-link-grow): the underline grows left to right. */
	.nd-footer__nav .wp-block-navigation-item__content {
		padding-bottom: 2px;
		background-image: linear-gradient(currentColor, currentColor);
		background-position: left 100%;
		background-repeat: no-repeat;
		background-size: 0 1px;
		color: var(--wp--preset--color--paper);
		text-decoration: none;
		transition: background-size var(--wp--custom--duration--base) var(--wp--custom--ease);
	}

	.nd-footer__nav .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) {
		background-size: 100% 1px;
		color: var(--wp--preset--color--paper);
	}

	.nd-footer__nav .wp-block-navigation-item__content:focus-visible {
		border-radius: 2px;
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Legal strip. */
	.nd-footer__legal {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 20px var(--wp--style--root--padding-right) 20px var(--wp--style--root--padding-left);
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink-soft);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--eyebrow);
		line-height: 1;
	}

	.nd-footer__credit {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--wp--preset--color--ink);
		font-weight: 500;
		text-decoration: none;
	}

	.nd-footer__credit:hover {
		color: var(--wp--preset--color--brand-deep);
	}

	.nd-footer__credit:focus-visible {
		border-radius: 2px;
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	.nd-footer__credit-mark {
		display: block;
		width: 20px;
		height: 20px;
		background: url(../../img/adesigns.webp) center / contain no-repeat;
	}

	@media (max-width: 1100px) {

		.nd-footer__grid {
			grid-template-columns: 1fr 1fr;
			gap: 32px;
			padding-top: 96px;
		}

		/* Deviation: the kit leaves the logo's min-content width squeezing the menus; the brand stacks. */
		.nd-footer__brand {
			grid-column: 1 / -1;
		}

		.nd-footer__legal {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
		}
	}
}