/*
 * GEF Timeline — bundled styling (front-end + editor). Namespaced gef-timeline__*
 * so nothing leaks into the rest of the site. The front end is a HORIZONTAL timeline
 * (scroll left→right) pinned to a fixed viewport-height band; event content is built
 * from normal core blocks (heading/image/paragraph) nested inside each event card.
 * Each event's category color/contrast come in as --gef-c / --gef-fg.
 */

/* ===== Horizontal track (front end) — fixed-height band ===== */
.gef-timeline--horizontal .gef-timeline__scroll {
	position: relative;
	height: calc(100vh - 120px);     /* fill the viewport below the header; reserve the year bar */
	min-height: 340px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: .25rem 0;
	cursor: grab;
	overscroll-behavior-x: contain;
}
.gef-timeline--horizontal .gef-timeline__scroll.is-grabbing {
	cursor: grabbing;
	user-select: none;
}
.gef-timeline--horizontal .gef-timeline__scroll::-webkit-scrollbar { height: 10px; }
.gef-timeline--horizontal .gef-timeline__scroll::-webkit-scrollbar-thumb {
	background: #d8c9b6;
	border-radius: 5px;
}

.gef-timeline--horizontal .gef-timeline__track {
	display: flex;
	align-items: stretch;            /* cards fill the band height */
	width: max-content;
	height: 100%;
	box-sizing: border-box;
	position: relative;
	padding-top: 46px;               /* room for the axis + dots above the cards */
}
.gef-timeline--horizontal .gef-timeline__track::before {   /* the time axis line */
	content: "";
	position: absolute;
	top: 22px;
	left: 0;
	right: 0;
	height: 3px;
	background: #e3dacf;
}

/* year divider (a labelled tick on the axis) */
.gef-timeline--horizontal .gef-timeline__year {
	flex: 0 0 auto;
	position: relative;
	margin: 0;
	padding: 0 1.1rem 0 1.4rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #ce8206;
	scroll-margin-left: 1rem;
}
.gef-timeline--horizontal .gef-timeline__year::before {
	content: "";
	position: absolute;
	left: .55rem;
	top: 6px;
	bottom: 0;
	border-left: 2px dashed #ce8206;
}

/* ===== Event card (category-colored, fills the band height) ===== */
.gef-timeline--horizontal .gef-timeline__event {
	flex: 0 0 270px;
	width: 270px;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0 14px 0 0;
	padding: .75rem .85rem;
	border: 0;
	border-radius: 8px;
	background: var(--gef-c, #eee);
	color: var(--gef-fg, #222);
}
.gef-timeline--horizontal .gef-timeline__event::before {   /* dot on the axis */
	content: "";
	position: absolute;
	top: -24px;
	left: .85rem;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--gef-c, #d8d8d8);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--gef-c, #d8d8d8);
}
.gef-timeline--horizontal .gef-timeline__event::after {    /* stem connecting the dot to the card */
	content: "";
	position: absolute;
	top: -11px;
	left: calc(.85rem + 5px);
	width: 4px;
	height: 11px;
	background: var(--gef-c, #d8d8d8);
}
.gef-timeline__event > *:first-child { margin-top: 0; }
.gef-timeline__date {
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 .2em;
	opacity: .85;
}

/* the inner-blocks body fills the remaining height; if its content is taller than
   the fixed card, that single event scrolls on its own (the timeline stays fixed). */
.gef-timeline--horizontal .gef-timeline__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba( 120, 120, 120, .7 ) transparent;
}
.gef-timeline--horizontal .gef-timeline__body::-webkit-scrollbar { width: 8px; }
.gef-timeline--horizontal .gef-timeline__body::-webkit-scrollbar-thumb {
	background: rgba( 120, 120, 120, .7 );
	border-radius: 4px;
}
.gef-timeline--horizontal .gef-timeline__body::-webkit-scrollbar-track { background: transparent; }
.gef-timeline--horizontal .gef-timeline__body > *:first-child { margin-top: 0; }

/* core blocks inside an event inherit the card's readable foreground color */
.gef-timeline--horizontal .gef-timeline__event .wp-block-heading {
	color: inherit;
	font-size: 1.08rem;
	line-height: 1.25;
	margin: .1em 0 .35em;
}
.gef-timeline--horizontal .gef-timeline__event p { color: inherit; font-size: .92rem; margin: .35em 0; }
.gef-timeline--horizontal .gef-timeline__event a { color: inherit; text-decoration: underline; }
.gef-timeline--horizontal .gef-timeline__event .wp-block-image { margin: .4em 0; }
.gef-timeline--horizontal .gef-timeline__event .wp-block-image img {
	width: 100%;
	max-height: 190px;
	object-fit: cover;
	border-radius: 4px;
}
.gef-timeline--horizontal .gef-timeline__event figcaption { color: inherit; opacity: .8; font-size: .78rem; }

/* ===== Vertical layout (oldest at top → newest; events alternate left / right) ===== */
.gef-timeline--vertical .gef-timeline__scroll {
	overflow: visible;
	height: auto;
	min-height: 0;
	padding: 0;
	cursor: auto;
}
.gef-timeline--vertical .gef-timeline__track {
	display: block;
	width: auto;
	max-width: 960px;
	margin: 0 auto;
	height: auto;
	padding: 0;
	position: relative;
}
.gef-timeline--vertical .gef-timeline__track::before {   /* centered spine */
	content: "";
	position: absolute;
	left: 50%;
	margin-left: -1.5px;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: #e3dacf;
	border-radius: 2px;
}

/* year marker — a centered pill sitting on the spine */
.gef-timeline--vertical .gef-timeline__year {
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
	margin: 1.3rem auto .8rem;
	padding: .12em .9em;
	font-size: 1.35rem;
	font-weight: 700;
	color: #ce8206;
	background: #fff;
	border: 2px solid #ce8206;
	border-radius: 20px;
	text-align: center;
	scroll-margin-top: 1rem;
}

/* event card — half width, alternating sides, tighter spacing */
.gef-timeline--vertical .gef-timeline__event {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: calc(50% - 26px);
	margin: 0 0 .4rem;
	padding: .6rem .85rem .45rem;
	border: 0;
	border-radius: 8px;
	background: var(--gef-c, #eee);
	color: var(--gef-fg, #222);
}
.gef-timeline--vertical .gef-timeline__event:nth-of-type(odd)  { margin-right: calc(50% + 26px); }
.gef-timeline--vertical .gef-timeline__event:nth-of-type(even) { margin-left: calc(50% + 26px); }

/* connector + dot to the centered spine */
.gef-timeline--vertical .gef-timeline__event::before {   /* connector line */
	content: "";
	position: absolute;
	top: 1rem;
	width: 26px;
	height: 2px;
	background: var(--gef-c, #d8d8d8);
}
.gef-timeline--vertical .gef-timeline__event::after {    /* dot on the spine */
	content: "";
	position: absolute;
	top: calc(1rem - 6px);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--gef-c, #d8d8d8);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--gef-c, #d8d8d8);
}
.gef-timeline--vertical .gef-timeline__event:nth-of-type(odd)::before  { right: -26px; }
.gef-timeline--vertical .gef-timeline__event:nth-of-type(odd)::after   { right: -33px; }
.gef-timeline--vertical .gef-timeline__event:nth-of-type(even)::before { left: -26px; }
.gef-timeline--vertical .gef-timeline__event:nth-of-type(even)::after  { left: -33px; }

/* card content */
.gef-timeline--vertical .gef-timeline__event > *:first-child { margin-top: 0; }
.gef-timeline--vertical .gef-timeline__date {
	font-weight: 700;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 .2em;
	opacity: .85;
}
.gef-timeline--vertical .gef-timeline__event .wp-block-heading { color: inherit; font-size: 1.02rem; margin: .1em 0 .3em; }
.gef-timeline--vertical .gef-timeline__event p { color: inherit; margin: .3em 0; }
.gef-timeline--vertical .gef-timeline__event a { color: inherit; }
.gef-timeline--vertical .gef-timeline__event figcaption { color: inherit; opacity: .8; font-size: .78rem; }
.gef-timeline--vertical .gef-timeline__event .wp-block-image { margin: .4em 0; }
.gef-timeline--vertical .gef-timeline__event .wp-block-image img { border-radius: 4px; }

/* narrow screens — single column on a left spine */
@media ( max-width: 680px ) {
	.gef-timeline--vertical .gef-timeline__track { padding-left: 32px; }
	.gef-timeline--vertical .gef-timeline__track::before { left: 10px; margin-left: 0; }
	.gef-timeline--vertical .gef-timeline__event,
	.gef-timeline--vertical .gef-timeline__event:nth-of-type(odd),
	.gef-timeline--vertical .gef-timeline__event:nth-of-type(even) {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.gef-timeline--vertical .gef-timeline__event::before { left: -22px; right: auto; width: 22px; }
	.gef-timeline--vertical .gef-timeline__event::after  { left: -29px; right: auto; }
}

/* ===== Fixed bottom year-navigation bar (the "scrubber") ===== */
.gef-timeline__yearnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: #ffffff;
	border-top: 2px solid #ce8206;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
}
.gef-timeline__yearnav-track {
	display: flex;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: .4rem .6rem;
	overflow-x: auto;
	justify-content: center;
	-webkit-overflow-scrolling: touch;
}
.gef-timeline__yearnav li { margin: 0; flex: 0 0 auto; }
.gef-timeline__yearnav a {
	display: block;
	padding: .25rem .65rem;
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
	color: #555;
	border-radius: 4px;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.gef-timeline__yearnav a:hover { background: #f0e2c9; color: #8a5600; }
.gef-timeline__yearnav a.is-active { background: #ce8206; color: #fff; }

.gef-timeline { margin-bottom: 1rem; }
/* this stylesheet only loads on timeline pages, so it's safe to lift the theme's
   site-wide back-to-top button above the year bar here. */
body .gef-back-to-top { bottom: 3.8rem; }

@media ( max-width: 600px ) {
	.gef-timeline__yearnav-track { justify-content: flex-start; }
}

/* ===== Editor (vertical stack of cards; content edited as normal blocks) ===== */
.gef-timeline--editor .gef-timeline__editor-note {
	font-style: italic;
	color: #666;
	margin: 0 0 1em;
}
.gef-timeline__event--edit {
	background: #fafafa;
	border-left: 4px solid var(--gef-c, #d8d8d8);
	padding: .6em .9em;
	border-radius: 4px;
	margin-bottom: .6em;
}
.gef-timeline__edit-meta {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 700;
	color: #777;
	margin: 0 0 .3em;
}