/* =========================================
   SOUKPRO ABOUT / DOCUMENT PAGES
   Page hero, readable prose column, contact band
   ========================================= */

/* --- Page Hero --- */
.sp-page-hero {
	padding-block-start: var(--sp-space-2xl);
	padding-block-end: var(--sp-space-lg);
	text-align: start;
}

.sp-page-hero .sp-page-title {
	font-size: var(--sp-text-2xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-text);
	margin: 0 0 var(--sp-space-md);
}

.sp-page-hero__excerpt {
	font-size: var(--sp-text-lg);
	line-height: var(--sp-line-height);
	color: var(--sp-color-text-light);
	margin: 0;
}

.sp-page-hero__meta {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-light);
	margin: var(--sp-space-sm) 0 0;
}

/* --- Readable prose column --- */
.sp-doc__prose {
	max-width: 72ch;
	font-size: var(--sp-text-base);
	line-height: var(--sp-line-height);
	color: var(--sp-color-text);
}

.sp-doc__prose p {
	margin: 0 0 var(--sp-space-md);
}

.sp-doc__prose h2,
.sp-doc__h2 {
	font-size: var(--sp-text-xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-primary-dark);
	border-bottom: 1px solid var(--sp-color-border-light);
	padding-bottom: var(--sp-space-sm);
	margin: var(--sp-space-2xl) 0 var(--sp-space-md);
}

.sp-doc__prose h3 {
	font-size: var(--sp-text-lg);
	color: var(--sp-color-text);
	margin: var(--sp-space-xl) 0 var(--sp-space-md);
}

.sp-doc__prose ul,
.sp-doc__prose ol {
	margin-block-end: var(--sp-space-md);
}

.sp-doc__prose li {
	margin-block-end: var(--sp-space-sm);
}

/* --- Contact band (About) --- */
.sp-page-about__contact {
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-md);
	background: var(--sp-color-bg-alt);
	padding: var(--sp-space-lg);
	margin-top: var(--sp-space-2xl);
}

.sp-page-about__contact .sp-doc__h2 {
	margin-top: 0;
}

/* --- Contact list --- */
.sp-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-space-sm);
}

.sp-contact-list__item {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	padding: var(--sp-space-sm) 0;
	overflow-wrap: anywhere;
}

.sp-contact-list__item .dashicons {
	color: var(--sp-color-primary);
	font-size: var(--sp-space-lg);
	width: var(--sp-space-lg);
	height: var(--sp-space-lg);
	flex-shrink: 0;
}

.sp-contact-list__item a {
	color: var(--sp-color-text-light);
	text-decoration: none;
	transition: color var(--sp-transition-fast);
}

.sp-contact-list__item a:hover {
	color: var(--sp-color-primary-dark);
	text-decoration: underline;
}

.sp-contact-list__item a:focus-visible {
	outline: none;
	box-shadow: var(--sp-focus-ring);
	color: var(--sp-color-primary-dark);
	text-decoration: underline;
}

/* --- Responsive --- */
@media (min-width: 768px) {
	.sp-contact-list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-space-md);
	}
}

@media (max-width: 768px) {
	.sp-page-hero {
		padding-block-start: var(--sp-space-xl);
	}

	.sp-page-hero .sp-page-title {
		font-size: var(--sp-text-xl);
	}

	.sp-contact-list {
		grid-template-columns: 1fr;
		gap: var(--sp-space-sm);
	}
}

/* --- Breadcrumbs (informational pages) --- */
.sp-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-space-xs);
    padding-block: var(--sp-space-md) 0;
    font-size: var(--sp-text-sm);
    color: var(--sp-color-text-light);
}

.sp-breadcrumbs a {
    color: var(--sp-color-primary);
    text-decoration: none;
}

.sp-breadcrumbs a:hover {
    text-decoration: underline;
}