/*
 * Timeline page: TimelineJS (assets/vendor/timelinejs) in the AMAR look.
 * The page is one window tall on every screen: the floating header, the head with the role filter, then the timeline
 * filling the rest. No footer (user 2026-11-05).
 */

/* ---------- Page layout ---------- */
body.page-template-page_full_timeline {
	display: flex; flex-direction: column;
	min-height: 100vh; min-height: 100dvh;
}
.admin-bar.page-template-page_full_timeline { min-height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	.admin-bar.page-template-page_full_timeline { min-height: calc(100dvh - 46px); }
}
.site-main--timeline {
	flex: 1 0 auto; display: flex; flex-direction: column;
	padding-block: calc(var(--bar) + 10px + 8px) 0; /* header bar, its offset and a small gap */
}
.site-main--timeline > .panel--intro { width: min(var(--wide), 100% - 2 * var(--edge)); margin: 0 auto 8px; }
.site-main--timeline > .timeline { margin-block-start: 0; }
/* The wrapper takes the free height; TimelineJS measures #timeline, which fills it. */
.timeline { position: relative; flex: 1 1 auto; min-height: 440px; background: var(--paper); }
#timeline { position: absolute; inset: 0; width: auto; height: auto; }
.timeline__status { margin: 0; padding: 48px var(--edge); text-align: center; color: var(--muted); }
/* no footer on this page (user 2026-11-05): the timeline takes the whole window under the bar, and its footer radio
   player no longer doubles the one the slides play in */
body.page-template-page_full_timeline .site-footer { display: none !important; } /* beats the editorial footer's own display */

/* Role filter: one row of buttons on the white panel above the timeline; on phones the row scrolls sideways. */
.site-main--timeline > .timeline-filter { margin-block-start: 0; }
.timeline-filter { flex: none; background: var(--paper); border-bottom: 1px solid var(--line); }
.timeline-filter ul {
	display: flex; gap: 6px; margin: 0; padding: 8px var(--edge); list-style: none;
	overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.timeline-filter ul::-webkit-scrollbar { display: none; }
.timeline-filter li { flex: none; }
.timeline-filter a {
	display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
	border: 1px solid #c5c7da; border-radius: var(--radius); background: var(--paper);
	color: var(--navy); font-size: 13px; font-weight: bold; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.timeline-filter a:hover { border-color: var(--navy); color: var(--navy); }
.timeline-filter a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.timeline-filter a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.timeline-filter__count { font-weight: normal; }
/* After a filter change TimelineJS starts again; its "swipe to navigate" hint is shown only the first time. */
.timeline--again .tl-storyslider .tl-message-full { display: none !important; }

/* Previous / next buttons on phones (TimelineJS hides its own arrows there; swiping still works). They sit
   beside the portrait of the current slide and scroll away with it, so they never cover the text. */
.timeline__nav[hidden] { display: none; }
.timeline__nav { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.tl-slide > .timeline__nav { inset: 10px 0 auto; height: 44px; } /* a slide without a picture: top corners */
.tl-slide:has(> .timeline__nav:not([hidden])) .tl-slide-content { padding-top: 54px !important; } /* ...above the dates */
.timeline__step {
	position: absolute; inset-block-start: 50%; transform: translateY(-50%); pointer-events: auto;
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--navy);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: pointer;
}
.timeline__step--prev { left: 10px; } /* time runs left to right in both languages */
.timeline__step--next { right: 10px; }
.timeline__step:disabled { opacity: .35; cursor: default; }
.timeline__step:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.timeline__step svg { width: 22px; height: 22px; }

/* ---------- Type and colour ---------- */
.tl-timeline, .tl-timeline .tl-attribution { font-family: var(--font); }
.lang-ar .tl-timeline { font-family: var(--font-ar); }
.tl-timeline .tl-attribution { display: none; }
.tl-timeline { color: var(--ink); }
.tl-timeline .tl-text, .tl-timeline .tl-text p, .tl-timeline p { color: var(--ink); }
.tl-timeline .tl-text p { font-size: 16px; line-height: 1.65; }
.lang-ar .tl-timeline .tl-text p { font-size: 17px; line-height: 1.85; }
.tl-timeline h2.tl-headline { color: var(--navy); font-weight: bold; text-transform: none; letter-spacing: 0; }
.tl-timeline .tl-text h2.tl-headline { font-size: 30px; line-height: 1.2; }
.tl-timeline .tl-text h2.tl-headline-title { font-size: 40px; line-height: 1.15; }
.tl-timeline .tl-text .tl-headline-date, .tl-timeline .tl-text h3.tl-headline-date {
	font-family: inherit; font-size: 14px; line-height: 1.4; font-weight: bold; color: var(--orange-text-bg); margin-block-end: 6px;
}
.tl-timeline a, .tl-timeline p a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.tl-timeline a:hover, .tl-timeline p a:hover, .tl-timeline p a:focus { color: var(--navy); }
.tl-timeline .tl-caption { font-size: 13px; line-height: 1.4; color: var(--muted); }
/* TimelineJS makes caption and credit as wide as the picture; under a tiny one that is a letter per line. */
.tl-media .tl-caption, .tl-media .tl-credit { min-width: min(12em, 100%); }
.tl-timeline .tl-credit { font-size: 12px; line-height: 1.4; color: var(--muted); }
/* The media loading line names the media type in English only; the spinner says enough. */
.tl-media .tl-message .tl-message-content { display: none; }

/* Previous / next */
.tl-timeline .tl-slidenav-previous, .tl-timeline .tl-slidenav-next { font-size: 12px; line-height: 1.3; }
.tl-slidenav-previous .tl-slidenav-title, .tl-slidenav-next .tl-slidenav-title,
.tl-slidenav-previous .tl-slidenav-description, .tl-slidenav-next .tl-slidenav-description { color: var(--muted); opacity: 1; }
.tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-icon,
.tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-icon { color: var(--navy); }

/* Time bar */
.tl-timenav { background: var(--ground); border-top: 3px solid var(--navy); }
.tl-timenav .tl-timeaxis-background { background: var(--paper); border-top-color: var(--line); }
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-major .tl-timeaxis-tick { color: var(--ink); }
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick,
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick .tl-timeaxis-tick-text span { color: var(--muted); }
.tl-timemarker .tl-timemarker-content-container { background-color: #fff; border: 1px solid var(--line); }
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p { color: var(--ink); font-size: 12px; line-height: 1.25; }
.tl-timemarker .tl-timemarker-line-left, .tl-timemarker .tl-timemarker-line-right { border-color: #bbb; }
.tl-timemarker:hover .tl-timemarker-content-container, .tl-timemarker:focus .tl-timemarker-content-container { background-color: var(--navy); border-color: var(--navy); }
.tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
.tl-timemarker:focus .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline { color: #fff; }
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container { background-color: #fff; border: 2px solid var(--orange); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline { color: var(--ink); font-weight: bold; }
.tl-timemarker.tl-timemarker-active .tl-timemarker-line-left { border-color: var(--orange); }
.tl-timemarker:focus-visible { outline: none; }
.tl-timemarker:focus-visible .tl-timemarker-content-container { outline: 3px solid var(--orange); outline-offset: 1px; }

/* Zoom and back-to-start buttons */
.tl-menubar-button { color: var(--navy); background-color: rgba(255, 255, 255, .92); }
.tl-menubar-button:hover, .tl-menubar-button:focus-visible { color: #fff; background-color: var(--navy); }
.tl-menubar-button:disabled, .tl-menubar-button:hover:disabled { color: #aaa; background-color: rgba(255, 255, 255, .92); }
.tl-timeline:focus-visible, .tl-slide:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }

/* "Swipe to navigate" and loading messages */
.tl-message-full .tl-message-container .tl-message-content { font-family: inherit; color: var(--ink); }
.tl-message-full .tl-message-container .tl-message-content .tl-button { background: var(--navy); color: #fff; border: 0; }

/* ---------- Arabic ---------- */
/* TimelineJS keeps time running left to right; the slide text reads right to left. */
.tl-rtl .tl-text-content, .tl-rtl .tl-text { text-align: right; }

/* Narrow timelines (phones, small tablets): the portrait first, then the text. */
.tl-skinny .tl-slide .tl-slide-content-container .tl-slide-content .tl-media { order: -1; padding-top: 0; border-top: 0; }
.tl-mobile.tl-skinny .tl-media .tl-media-image { max-height: 32vh !important; width: auto; }
.tl-skinny .tl-media .tl-media-content-container .tl-caption,
.tl-skinny .tl-media .tl-media-content-container .tl-credit { font-size: 13px; line-height: 1.4; }
.tl-skinny .tl-slidenav-previous .tl-slidenav-icon, .tl-skinny .tl-slidenav-next .tl-slidenav-icon,
.tl-mobile .tl-slidenav-previous .tl-slidenav-icon, .tl-mobile .tl-slidenav-next .tl-slidenav-icon { opacity: 1 !important; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
	.site-main--timeline { padding-block-start: calc(var(--bar) + 10px + 6px); }
	.timeline { min-height: 360px; } /* a 320×568 phone still fits header, timeline and a three-line Arabic credit bar */
	.tl-timeline .tl-text h2.tl-headline { font-size: 24px; }
	.tl-timeline .tl-text h2.tl-headline-title { font-size: 30px; }
	.tl-timeline .tl-text p { font-size: 15px; }
	.lang-ar .tl-timeline .tl-text p { font-size: 16px; }
	.tl-menubar-button { padding: 9px 12px; } /* bigger touch targets */
	.timeline-filter ul { padding-block: 6px; }
	.timeline-filter a { min-height: 40px; } /* touch targets */
	.tl-timeline .tl-menubar { margin-top: 14px; } /* responsive QA 2026-11-05: the zoom buttons no longer rise over the slide text */
}
/* without the footer the timeline simply fills what the window leaves under the head (flex), on every screen;
   these floors only keep it usable on very small windows */
@media (max-width: 760px) { .timeline { min-height: 300px; } }
@media (orientation: landscape) and (max-height: 500px) { .timeline { min-height: 220px; } }

/* Wide screens (2026-10-06, user): the portrait stays while the text scrolls (TimelineJS scrolls the whole slide).
   The slide's two cells become a row: the picture is sticky at the top of the slide, the text column scrolls;
   a short slide stays centred (auto margins: a long one never rises above the top). Phones (tl-skinny) unchanged. */
.tl-layout-landscape:not(.tl-skinny) .tl-slide .tl-slide-scrollable-container { display: flex; flex-direction: column; min-height: 100%; }
.tl-layout-landscape:not(.tl-skinny) .tl-slide .tl-slide-content-container { display: flex; flex-direction: column; flex: 1 0 auto; }
.tl-layout-landscape:not(.tl-skinny) .tl-slide .tl-slide-content { display: flex !important; align-items: flex-start; margin-block: auto; }
.tl-layout-landscape:not(.tl-skinny) .tl-slide .tl-slide-content .tl-media { position: sticky; top: 0; flex: none; align-self: flex-start; height: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.tl-layout-landscape:not(.tl-skinny) .tl-slide .tl-slide-content .tl-text { flex: none; display: block; }

/* Phones (2026-10-06, user): the portrait stays too, as a small band above the text that scrolls under it */
.tl-skinny .tl-slide .tl-slide-content .tl-media { position: sticky; top: 0; z-index: 2; height: auto !important; margin-top: 0 !important; padding-bottom: 6px; background: #fff; box-shadow: 0 -40px 0 0 #fff, 0 8px 10px -8px rgba(0, 0, 0, .25); } /* the white also covers the slide's top padding */
.tl-mobile.tl-skinny .tl-slide .tl-media .tl-media-image, .tl-skinny .tl-slide .tl-media .tl-media-image { max-height: 14vh !important; width: auto; }
.tl-skinny .tl-slide .tl-media .tl-caption { margin-top: 4px; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-skinny .tl-slide .tl-media .tl-credit { display: none; }

/* The title slide (user request 2026-10-11): a big title and one line on the left, the introduction on the right. */
.tl-timeline .tl-slide-titleslide .tl-text-content-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 56px; align-items: start; max-width: 1180px; margin: 0 auto; padding-top: 32px; text-align: start; }
.tl-timeline .tl-slide-titleslide .tl-headline-date { display: none; }
.tl-timeline .tl-slide-titleslide .tl-text h2.tl-headline-title { grid-column: 1; margin: 0; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink, #22221f); text-align: start; }
.tl-timeline .tl-slide-titleslide .tl-intro__sub { display: block; margin-top: 20px; font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #3d3d39; }
.tl-timeline .tl-slide-titleslide .tl-text-content { grid-column: 2; }
.tl-timeline .tl-slide-titleslide .tl-intro__h { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a3720; }
html[dir="rtl"] .tl-timeline .tl-slide-titleslide .tl-intro__h { letter-spacing: 0; font-size: 15px; text-transform: none; }
.tl-timeline.tl-skinny .tl-slide-titleslide .tl-text-content-container { display: block; padding-top: 12px; }
.tl-timeline.tl-skinny .tl-slide-titleslide .tl-text h2.tl-headline-title { font-size: 30px; margin-bottom: 18px; }
.tl-timeline.tl-skinny .tl-slide-titleslide .tl-intro__sub { font-size: 16px; }

/* responsive QA 2026-11-05: the Arabic title slide reads from the right, like the English one from the left */
html[dir="rtl"] .tl-timeline .tl-slide-titleslide .tl-text-content-container { direction: rtl; }

/* responsive QA 2026-11-05, polish */
@media (max-width: 900px) { .tl-timeline:not(.tl-skinny) .tl-slide-titleslide.tl-slide-text-only .tl-slide-content .tl-text { width: 100%; max-width: 100%; } .tl-timeline:not(.tl-skinny) .tl-slide-titleslide .tl-text-content-container { display: block; padding-top: 16px; } .tl-timeline:not(.tl-skinny) .tl-slide-titleslide .tl-text h2.tl-headline-title { margin-block-end: 20px; } }