/*
 * Layer: components. Block style variations and the kit's components.
 * Sections are filled in M5–M7; the primary button is here now because theme.json
 * cannot express its shape, motion or press state.
 */
@layer components {

	/* Buttons: primary (kit .nd-btn--primary). D4: white on brand; hover and focus brand-deep.
	   Plugin buttons that cannot carry wp-element-button (PMPro, the WP login form, CF7) share it. */
	:where(.wp-element-button, .wp-block-button__link, .pmpro_btn:not(.pmpro_btn-plain), #loginform [type="submit"], .wpcf7-submit) {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		min-height: 52px;
		padding: 18px 30px;
		border: 1px solid transparent;
		border-radius: var(--wp--preset--border-radius--pill);
		background-color: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--paper);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--label);
		font-weight: 600;
		line-height: var(--wp--custom--line-height--tight);
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition:
			transform var(--wp--custom--duration--fast) var(--wp--custom--ease),
			background-color var(--wp--custom--duration--fast),
			color var(--wp--custom--duration--fast),
			border-color var(--wp--custom--duration--fast),
			box-shadow var(--wp--custom--duration--fast);
	}

	:where(.wp-element-button, .wp-block-button__link, .pmpro_btn:not(.pmpro_btn-plain), #loginform [type="submit"], .wpcf7-submit):hover {
		background-color: var(--wp--preset--color--brand-deep);
		color: var(--wp--preset--color--paper);
		box-shadow: var(--wp--preset--shadow--lift);
		transform: translateY(-2px);
	}

	:where(.wp-element-button, .wp-block-button__link, .pmpro_btn:not(.pmpro_btn-plain), #loginform [type="submit"], .wpcf7-submit):focus-visible {
		background-color: var(--wp--preset--color--brand-deep);
		color: var(--wp--preset--color--paper);
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	:where(.wp-element-button, .wp-block-button__link, .pmpro_btn:not(.pmpro_btn-plain), #loginform [type="submit"], .wpcf7-submit):active {
		transform: scale(0.97);
	}

	:where(.wp-element-button, .wp-block-button__link, .pmpro_btn:not(.pmpro_btn-plain), #loginform [type="submit"], .wpcf7-submit):is([disabled], [aria-disabled="true"]) {
		opacity: 0.45;
		pointer-events: none;
	}

	/* Logo (kit .nd-lockup): parts/logo.html, in the header, overlay menu and footer. */
	.nd-lockup {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
	}

	/* The part wrapper is a block box; as a line box it would add descender space under the logo. */
	:where(.wp-block-template-part):has(> .nd-lockup) {
		display: flex;
	}

	.nd-lockup:hover {
		color: var(--wp--preset--color--ink);
	}

	/*
	 * M14 (Mike): the boxed ring read harsh around the lockup, so focus is a brand glow on the mark
	 * alone (a wordmark underline was tried and rejected). The transparent outline is what
	 * forced-colours mode paints.
	 */
	.nd-lockup:focus-visible {
		border-radius: var(--wp--preset--border-radius--panel);
		outline: 2px solid transparent;
		outline-offset: 4px;
	}

	.nd-lockup:focus-visible .nd-lockup__mark {
		filter: drop-shadow(0 0 6px var(--wp--preset--color--brand));
	}

	.nd-lockup__mark {
		display: block;
		flex: none;
		width: 56px;
		height: 56px;
	}

	.nd-wordmark {
		color: inherit;
		font-family: var(--wp--preset--font-family--display);
		font-size: 22px;
		font-weight: 500;
		line-height: 0.95;
		letter-spacing: var(--wp--custom--tracking--wordmark);
		text-transform: uppercase;
	}

	/* Ornament (kit .nd-ornament): wave line drawing, shown drawn; motion.css draws it in. */
	.nd-ornament {
		display: block;
		width: 380px;
		max-width: 100%;
		height: 41px;
		margin: 0 auto;
		color: var(--wp--preset--color--brand-deep);
	}

	.nd-ornament :is(path, circle) {
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
	}

	/* Eyebrow (kit .nd-eyebrow): a paragraph class. */
	.nd-eyebrow {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--eyebrow);
		font-weight: 600;
		line-height: var(--wp--custom--line-height--tight);
		letter-spacing: var(--wp--custom--tracking--eyebrow);
		text-transform: uppercase;
	}

	.nd-eyebrow--light {
		color: var(--wp--preset--color--cobalt-light);
	}

	/* Kit .nd-dot--xs before the text. */
	.nd-eyebrow--dot::before {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--wp--preset--color--cinnabar);
	}

	/* The red full stop (kit .nd-dot--period) after a heading; motion.css lets --breathe breathe. */
	.nd-period::after {
		content: "";
		display: inline-block;
		width: 0.18em;
		height: 0.18em;
		margin-left: 0.08em;
		border-radius: 50%;
		background-color: var(--wp--preset--color--cinnabar);
		vertical-align: middle;
	}

	/* Tag (kit .nd-tag; the article's .tag is the same label): a small glass label. */
	.nd-tag,
	.wp-block-post-terms.is-style-tag a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		padding: 7px 12px;
		border: 1px solid var(--wp--custom--glass--tag-border);
		border-radius: var(--wp--preset--border-radius--pill);
		background-color: var(--wp--custom--glass--chip);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--tag);
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		text-shadow: none;
	}

	.wp-block-post-terms.is-style-tag a {
		text-decoration: none;
		transition: border-color var(--wp--custom--duration--fast);
	}

	.wp-block-post-terms.is-style-tag a:hover {
		border-color: var(--wp--preset--color--brand-deep);
		color: var(--wp--preset--color--ink);
	}

	.wp-block-post-terms.is-style-tag .wp-block-post-terms__separator {
		display: none;
	}

	/* A bound tag with no value (the access-tag binding returns '' for public items). */
	.nd-tag:empty {
		display: none;
	}

	/* Members lock (kit .nd-tag--lock). */
	.nd-tag--lock::before {
		content: "";
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: var(--wp--preset--color--cinnabar);
	}
}