/**
 * Name History article — page-scoped styles for
 * /why-are-the-seahawks-called-the-seachickens/
 *
 * Tokens map to theme.json / custom-properties.css. Do not introduce new hexes.
 */

/* ------------------------------------------------------------------ */
/* Title chrome                                                        */
/* ------------------------------------------------------------------ */

.article-why-title {
	margin-bottom: 32px;
}

.article-why-eyebrow {
	margin: 0 0 16px;
	font-family: var(--pr-heading-font-display, "Bebas Neue", sans-serif);
	font-size: 0.8rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.article-why-title .wp-block-post-title,
.article-why-h1 {
	margin: 0 0 20px;
	font-family: var(--pr-heading-font-display, "Bebas Neue", sans-serif);
	font-size: var(--wp--preset--font-size--xx-large, clamp(2rem, 6vw, 3.5rem));
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--wp--preset--color--base-contrast);
}

.article-why-meta {
	margin: 0 0 0;
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------ */
/* Intro spacing after hero                                            */
/* ------------------------------------------------------------------ */

.article-why-seachickens .wp-block-post-content > .wp-block-image:first-child {
	margin-top: 0;
	margin-bottom: 40px;
}

.article-why-seachickens .wp-block-post-content > .wp-block-image:first-child img {
	border-radius: var(--sc-radius-lg, 8px);
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Table of contents                                                   */
/* ------------------------------------------------------------------ */

.article-toc {
	background: var(--wp--preset--color--secondary-light);
	border-radius: var(--sc-radius-md, 6px);
	padding: 28px 32px;
	margin: 16px 0 8px;
}

.article-toc__label {
	margin: 0 0 18px;
	font-family: var(--pr-heading-font-display, "Bebas Neue", sans-serif);
	font-size: 0.8rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.article-toc__links {
	column-count: 2;
	column-gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-toc__links li {
	break-inside: avoid;
	margin: 0;
	padding: 0 0 12px;
}

.article-toc__links a {
	display: flex;
	gap: 10px;
	text-decoration: none;
	border-bottom: none;
	color: var(--wp--preset--color--base-contrast);
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
}

.article-toc__links a:hover {
	color: var(--wp--preset--color--gold);
	border-bottom: none;
}

.article-toc__num {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.article-toc__links {
		column-count: 1;
	}

	.article-toc {
		padding: 24px 20px;
	}
}

/* ------------------------------------------------------------------ */
/* Body headings                                                       */
/* ------------------------------------------------------------------ */

.article-why-seachickens .wp-block-post-content > .wp-block-heading {
	margin-top: 48px;
	margin-bottom: 20px;
	scroll-margin-top: 80px;
}

/* ------------------------------------------------------------------ */
/* Images + captions                                                   */
/* ------------------------------------------------------------------ */

.article-why-seachickens .wp-block-post-content .wp-block-image:not(:first-child) {
	margin: 24px 0 12px;
}

.article-why-seachickens .wp-block-post-content .wp-block-image:not(:first-child) img {
	border-radius: var(--sc-radius-lg, 8px);
	display: block;
}

.article-why-seachickens .wp-block-post-content .wp-element-caption {
	margin: 12px 0 32px;
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-style: italic;
	font-size: 0.9rem;
	color: var(--wp--preset--color--secondary);
	text-align: center;
}

.article-why-seachickens .wp-block-image.article-audubon {
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

.article-why-seachickens .wp-block-image.article-audubon .wp-element-caption {
	font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Timeline panel                                                      */
/* ------------------------------------------------------------------ */

.article-timeline-panel {
	background: var(--wp--preset--color--secondary-light);
	border-radius: var(--sc-radius-lg, 8px);
	padding: 48px 40px;
	margin: 48px 0 8px;
	/* Override Pronghorn timeline tokens for this panel surface. */
	--pr-timeline-rail-color: var(--sc-border);
	--pr-timeline-marker-color: var(--wp--preset--color--primary);
	--pr-timeline-marker-ring-background: var(--wp--preset--color--secondary-light);
	--pr-timeline-date-color: var(--wp--preset--color--secondary);
	--pr-timeline-gutter: 20px;
	--pr-timeline-entry-gap: 32px;
	--pr-timeline-marker-size: 12px;
	--pr-timeline-marker-offset: 0.85rem;
}

.article-timeline-panel > .wp-block-heading {
	margin: 0 0 40px;
}

.article-timeline-panel .wp-block-pronghorn-timeline {
	max-width: 640px;
}

/*
 * Date | spine | content grid. Spine stays in the middle column via
 * ::before/::after positioned against the padded marker gutter.
 */
.article-timeline-panel .wp-block-pronghorn-timeline-item {
	display: grid;
	grid-template-columns: 128px 20px 1fr;
	grid-template-rows: auto auto;
	column-gap: 20px;
	padding-inline-start: 0;
	align-items: start;
}

.article-timeline-panel .wp-block-pronghorn-timeline-item__date {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	padding-top: 2px;
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.25;
	color: var(--wp--preset--color--secondary-dark);
}

.article-timeline-panel .wp-block-pronghorn-timeline-item__title {
	grid-column: 3;
	grid-row: 1;
	margin: 0 0 6px;
	font-family: var(--pr-heading-font-display, "Bebas Neue", sans-serif);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	color: var(--wp--preset--color--base-contrast);
}

.article-timeline-panel .wp-block-pronghorn-timeline-item__content {
	grid-column: 3;
	grid-row: 2;
	margin-block-start: 0;
}

.article-timeline-panel .wp-block-pronghorn-timeline-item__content p {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary-dark);
	margin: 0;
}

/* Marker + rail sit in the 20px spine column (after 128px date + 20px gap). */
.article-timeline-panel .wp-block-pronghorn-timeline-item::before {
	inset-inline-start: calc(128px + 20px + (20px - 12px) / 2);
	border: 3px solid var(--wp--preset--color--secondary-light);
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	margin-block-start: -6px;
	inset-block-start: 10px;
}

.article-timeline-panel .wp-block-pronghorn-timeline-item::after {
	inset-inline-start: calc(128px + 20px + (20px - var(--pr-tl-rail-width)) / 2);
	inset-block-start: 10px;
}

.article-timeline-panel .wp-block-pronghorn-timeline-item.is-milestone::before {
	background-color: var(--wp--preset--color--gold);
}

/*
 * Mobile: spine on the left, date stacked above the title so the content
 * column gets nearly full width. Avoids the cramped right-aligned date column.
 */
@media (max-width: 700px) {
	.article-timeline-panel {
		padding: 32px 20px;
	}

	.article-timeline-panel .wp-block-pronghorn-timeline-item {
		grid-template-columns: 16px 1fr;
		grid-template-rows: auto auto auto;
		column-gap: 14px;
	}

	.article-timeline-panel .wp-block-pronghorn-timeline-item__date {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		padding-top: 0;
		font-size: 0.95rem;
		letter-spacing: 0.03em;
		color: var(--wp--preset--color--secondary-dark);
	}

	.article-timeline-panel .wp-block-pronghorn-timeline-item__title {
		grid-column: 2;
		grid-row: 2;
		margin-top: 2px;
	}

	.article-timeline-panel .wp-block-pronghorn-timeline-item__content {
		grid-column: 2;
		grid-row: 3;
	}

	.article-timeline-panel .wp-block-pronghorn-timeline-item::before {
		inset-inline-start: calc((16px - 12px) / 2);
		inset-block-start: 6px;
	}

	.article-timeline-panel .wp-block-pronghorn-timeline-item::after {
		inset-inline-start: calc((16px - var(--pr-tl-rail-width)) / 2);
		inset-block-start: 6px;
	}
}

/* ------------------------------------------------------------------ */
/* FAQ accordion                                                       */
/* ------------------------------------------------------------------ */

.article-why-seachickens .wp-block-details {
	border-top: 1px solid var(--sc-border);
	padding: 20px 0;
	margin: 0;
}

.article-why-seachickens .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--sc-border);
}

.article-why-seachickens .wp-block-details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--wp--preset--color--base-contrast);
}

.article-why-seachickens .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.article-why-seachickens .wp-block-details > summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--pr-heading-font-display, "Bebas Neue", sans-serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	transition: transform 0.15s ease;
	line-height: 1;
}

.article-why-seachickens .wp-block-details[open] > summary::after,
.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.article-why-seachickens .wp-block-details > :not(summary) {
	margin-top: 16px;
	color: var(--wp--preset--color--secondary-dark);
}

/* ------------------------------------------------------------------ */
/* Sources                                                             */
/* ------------------------------------------------------------------ */

.article-why-seachickens .article-sources-label {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.article-why-seachickens .article-sources-archive {
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 0.95rem;
	line-height: 1.55;
}

.article-why-seachickens .article-sources-archive strong {
	color: var(--wp--preset--color--base-contrast);
	font-weight: 700;
}