/* Shared components (D-071): layout container, labels, emphasis, links, buttons, icons. */

.lp-container {
	width: 100%;
	max-width: calc(var(--lp-max) + 2 * var(--lp-gutter));
	margin-inline: auto;
	padding-inline: var(--lp-gutter);
}

.lp-section { padding-block: var(--lp-section-y); }

/* ---- Labels and eyebrows: one style ---- */
.lp-label,
.lp-eyebrow {
	display: block;
	margin: 0 0 var(--lp-s-3);
	color: var(--lp-primary-text);
	font-size: var(--lp-fs-1);
	font-weight: var(--lp-weight-bold);
	letter-spacing: var(--lp-track-label);
	line-height: var(--lp-lh-snug);
	text-transform: uppercase;
}

/* The design's "| Label |" pipes are kept in the markup for screen readers' sake (aria-hidden) but not shown. */
.lp-label > [aria-hidden="true"] { display: none; }

.lp-label--on-dark { color: var(--lp-on-dark-muted); }

/* ---- Serif emphasis: only in H1s and the footer CTA heading ---- */
.lp-serif {
	color: inherit;
	font: inherit;
	font-style: normal;
	letter-spacing: inherit;
}

h1 .lp-serif,
.lp-cta__title .lp-serif {
	color: var(--lp-primary-text);
	font-family: var(--lp-font-serif);
	font-style: italic;
	font-weight: var(--lp-weight-regular);
	letter-spacing: 0;
}

.lp-cta__title .lp-serif { color: var(--lp-accent); }

/* ---- Text ---- */
.lp-lead {
	max-width: var(--lp-measure);
	color: var(--lp-text);
	font-size: var(--lp-fs-3);
	line-height: var(--lp-lh-body);
}

/* Inline text link with a 44px tap area. */
.lp-textlink,
.lp-link {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-s-2);
	min-height: var(--lp-tap);
	color: var(--lp-primary-text);
	font-size: var(--lp-fs-2);
	font-weight: var(--lp-weight-bold);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 4px;
}

.lp-textlink:hover,
.lp-link:hover {
	color: var(--lp-text);
	text-decoration-color: currentColor;
}

/* ---- Buttons ----
 * primary   = "Get a quote" and other main actions (one per view)
 * secondary = outline, for the second action
 * on-dark variants follow the surface they sit on.
 */
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-s-2);
	min-height: var(--lp-tap);
	padding: var(--lp-s-3) var(--lp-s-5);
	border: 1px solid transparent;
	border-radius: var(--lp-radius-pill);
	font-size: var(--lp-fs-2);
	font-weight: var(--lp-weight-bold);
	line-height: var(--lp-lh-snug);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--lp-ease), border-color var(--lp-ease), color var(--lp-ease), transform var(--lp-ease);
}

.lp-btn:active { transform: translateY(1px); }

.lp-btn:disabled,
.lp-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Loading: label stays for screen readers, a spinner replaces the arrow. */
.lp-btn.is-loading { cursor: progress; }
.lp-btn.is-loading .lp-btn__arrow { display: none; }
.lp-btn.is-loading::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: lp-spin 0.7s linear infinite;
}

@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-btn--primary,
.lp-btn--light {
	background: var(--lp-primary);
	color: var(--lp-on-primary);
}

.lp-btn--primary:hover,
.lp-btn--light:hover {
	background: var(--lp-primary-hover);
	color: var(--lp-on-primary);
}

.lp-btn--secondary,
.lp-btn--outline,
.lp-btn--dark {
	border-color: var(--lp-border-strong);
	background: transparent;
	color: var(--lp-text);
}

.lp-btn--secondary:hover,
.lp-btn--outline:hover,
.lp-btn--dark:hover {
	border-color: var(--lp-text);
	background: var(--lp-card);
	color: var(--lp-text);
}

/* On the dark surface. */
.lp-btn--outline-light {
	border-color: var(--lp-on-dark-line);
	background: transparent;
	color: var(--lp-on-dark);
}

.lp-btn--outline-light:hover {
	border-color: var(--lp-on-dark);
	color: var(--lp-on-dark);
}

.lp-btn__arrow { transition: transform var(--lp-ease); }
.lp-btn:hover .lp-btn__arrow { transform: translateX(3px); }

/* Focus on dark surfaces. */
.lp-band--dark :focus-visible,
.lp-cta :focus-visible,
.lp-footer :focus-visible,
.lp-way--dark :focus-visible { outline-color: var(--lp-on-dark); }

/* ---- Icons (inc/icons.php): ink parts inherit; accent parts follow Branding ---- */
.lp-icon .lp-i-acc { color: var(--lp-primary-text); }
.lp-icon .lp-i-fill { fill: var(--lp-accent); }

/* ---- what3words link ---- */
.lp-w3w {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	min-height: var(--lp-tap);
	font-weight: var(--lp-weight-bold);
}

.lp-w3w__slashes {
	color: #E11F26; /* what3words brand red for their /// mark (third-party mark, not a theme colour) */
}

/* ---- Prose for plain page content ---- */
.lp-prose {
	max-width: var(--lp-measure);
	margin-inline: auto;
	color: var(--lp-text);
}

.lp-prose h2,
.lp-prose h3 { margin: var(--lp-s-6) 0 var(--lp-s-3); }

.lp-prose a {
	color: var(--lp-primary-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Long unbroken strings (email addresses) wrap at sensible points instead of mid-word. */
.lp-nowrap-email { overflow-wrap: normal; word-break: keep-all; }