/*
 * UI primitives used on every page (BEM, tokens only):
 * eyebrow, text, highlight, button, button-group, icon-button, icon, cut, link, contact-line.
 * Larger shared blocks (section heading, feature list, icon boxes, pattern, band) are in blocks.css.
 */

.sw-eyebrow {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	line-height: var(--leading-small);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	color: var(--color-primary);
}

.sw-text--lead { font-size: var(--text-lead); line-height: var(--leading-lead); }
.sw-highlight { color: var(--color-primary); }

/*
 * Button: primary = orange; secondary = navy.
 * Corners: a lone primary button has a cut top-left and bottom-right corner; in a pair
 * (.sw-button--grouped) only top-left; secondary only bottom-right.
 * On hover the colour changes and the cut corners slide away so the button becomes a rectangle.
 * Every state uses the same 6-point polygon, so the browser can animate between them.
 */
.sw-button {
	--button-bg: var(--color-primary);
	--button-fg: var(--color-on-primary);
	--button-bg-hover: var(--color-heading);
	--button-fg-hover: var(--color-on-primary);
	--button-cut-tl: var(--cut-s);
	--button-cut-br: var(--cut-s);
	--button-ease: cubic-bezier(0.65, 0, 0.35, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	min-block-size: var(--space-40);
	padding-block: var(--space-8);
	padding-inline: var(--space-24);
	border: 0;
	background: var(--button-bg);
	color: var(--button-fg);
	font-family: var(--font-heading);
	font-size: var(--text-small);
	line-height: var(--leading-body);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	clip-path: polygon(
		var(--button-cut-tl) 0, 100% 0,
		100% calc(100% - var(--button-cut-br)), calc(100% - var(--button-cut-br)) 100%,
		0 100%, 0 var(--button-cut-tl)
	);
	transition:
		clip-path 400ms var(--button-ease),
		background-color 250ms var(--button-ease),
		color 250ms var(--button-ease);
}

.sw-button--grouped { --button-cut-br: 0px; }

.sw-button--secondary {
	--button-bg: var(--color-secondary);
	--button-fg: var(--color-heading);
	--button-bg-hover: var(--color-heading);
	--button-fg-hover: var(--color-secondary);
	--button-cut-tl: 0px;
	--button-cut-br: var(--cut-s);
}

.sw-button:hover,
.sw-button:focus-visible {
	--button-cut-tl: 0px;
	--button-cut-br: 0px;
	background: var(--button-bg-hover);
	color: var(--button-fg-hover);
}

.sw-button:focus-visible { outline-offset: -4px; outline-color: var(--button-fg-hover); }
.sw-button .sw-icon { inline-size: var(--space-16); block-size: var(--space-16); }

.sw-button-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* Icon button: 48px square (card arrow, popup controls, social links) */
.sw-icon-button {
	display: inline-grid;
	place-items: center;
	inline-size: var(--space-48);
	block-size: var(--space-48);
	padding: 0;
	border: 0;
	background: var(--color-bg-alt);
	color: var(--color-heading);
	transition: background var(--transition), color var(--transition);
}
.sw-icon-button:hover { background: var(--color-primary); color: var(--color-on-primary); }

.sw-icon { flex: none; inline-size: var(--space-24); block-size: var(--space-24); }

/* Cut: chamfered corners. Combine --tl and --br; size via --cut (or --s). */
.sw-cut { --cut-tl: 0px; --cut-br: 0px; clip-path: polygon(var(--cut-tl) 0, 100% 0, 100% calc(100% - var(--cut-br)), calc(100% - var(--cut-br)) 100%, 0 100%, 0 var(--cut-tl)); }
.sw-cut--tl { --cut-tl: var(--cut); }
.sw-cut--br { --cut-br: var(--cut); }
.sw-cut--s { --cut: var(--cut-sm); }

/* Link: underlined orange (phone, e-mail) */
.sw-link {
	color: var(--color-primary);
	font-size: var(--text-small);
	line-height: var(--leading-small);
	text-decoration: underline;
}
.sw-link:hover { color: var(--color-heading); }

/* Contact line: orange icon + underlined white text (e-mail, phone) */
.sw-contact-list {
	display: grid;
	justify-items: start;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-contact-line {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--color-heading);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.sw-contact-line:hover { color: var(--color-primary); }
.sw-contact-line__icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--color-primary); }