/*
 * digiloom: interior page masthead.
 * Source: the shared `<header>` at the top of Values.tsx, History.tsx,
 * Contact.tsx, StyleGuide.tsx and Concepts.tsx.
 */

.digiloom-masthead {
	margin-inline: auto;
	max-width: 768px;
	padding-block: 40px 0;
	position: relative;
	z-index: 1;
}

/* Pill eyebrow ------------------------------------------------------- */

.digiloom-masthead__eyebrow {
	background-color: var(--wp--preset--color--indigo-line);
	border-radius: var(--wp--custom--radius--full);
	color: #4338ca;
	display: table;
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: 0.08em;
	margin: 0 auto 16px;
	padding: 6px 14px;
	text-transform: uppercase;
}

/* Values uses the pink eyebrow. */
.digiloom-masthead--pink .digiloom-masthead__eyebrow {
	background-color: #fce7f3;
	color: #be185d;
}

.digiloom-masthead__title {
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0 0 24px;
}

.digiloom-masthead__lead {
	color: var(--wp--preset--color--slate);
	font-size: clamp(18px, 2vw, 20px);
	line-height: var(--wp--custom--line-height--body);
	margin: 0;
}

/*
 * Left-aligned variant, used by the Style Guide and Concepts pages, which open
 * with a wider measure rather than a centred column.
 */
.digiloom-masthead--left {
	margin-inline: 0;
	max-width: 100%;
	text-align: left;
}

.digiloom-masthead--left .digiloom-masthead__eyebrow,
.digiloom-masthead--left .digiloom-masthead__title,
.digiloom-masthead--left .digiloom-masthead__lead {
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left;
}

.digiloom-masthead--left .digiloom-masthead__lead {
	max-width: 48rem;
}

/* The live dot the Style Guide and Concepts eyebrows carry. */
.digiloom-masthead--left .digiloom-masthead__eyebrow {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	letter-spacing: 0.02em;
	text-transform: none;
}

.digiloom-masthead--left .digiloom-masthead__eyebrow::before {
	background-color: var(--wp--preset--color--indigo);
	border-radius: var(--wp--custom--radius--full);
	content: "";
	flex: 0 0 auto;
	height: 8px;
	width: 8px;
}

@media (prefers-reduced-motion: no-preference) {

	.digiloom-masthead--left .digiloom-masthead__eyebrow::before {
		animation: digiloom-live-dot 2s ease-in-out infinite;
	}
}

@keyframes digiloom-live-dot {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.6);
	}

	70% {
		box-shadow: 0 0 0 6px rgba(79, 70, 229, 0);
	}
}

/*
 * Long-form prose pages (Privacy Policy and similar).
 * page.html renders post-content with no post-title, so these pages carry their
 * own H1 in content. The narrow measure is deliberate: legal copy at the full
 * 1152px content width runs well past a comfortable line length.
 */
.digiloom-prose {
	padding-block: 40px 0;
	position: relative;
	z-index: 1;
}

.digiloom-prose h1 {
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin-bottom: 32px;
}

.digiloom-prose h2 {
	margin-top: 48px;
}

.digiloom-prose h3 {
	margin-top: 32px;
}

.digiloom-prose p,
.digiloom-prose li {
	color: var(--wp--preset--color--slate);
	line-height: var(--wp--custom--line-height--body);
}

.digiloom-prose strong {
	color: var(--wp--preset--color--ink);
}