/* Raily 5 product pages.
 *
 * The colours are the app's own, copied from css/basic.css so the site and the thing it sells look
 * like one product -- including the dark mode the app has and the old site never did. Copied rather
 * than imported: basic.css is 1900 lines of dialog, tool-window and spinner styling that a web page
 * has no use for, and only the variable block is shared vocabulary.
 *
 * The layout is not the app's. A tool packs everything into one screen; a page that has to make
 * someone curious needs room, one column of text at a readable measure, and pictures big enough to
 * show what the product does.
 */

:root {
	--default-background-color: light-dark(#fff, #3c3f41);
	--default-foreground-color: light-dark(#000, #bbb);
	--panel-background-color: light-dark(#f5f5f5, #2a2a2a);
	--primary-button-background-color: #077ffe;
	--primary-button-foreground-color: #fff;
	--primary-button-hover-background-color: #489ffa;
	--secondary-button-background-color: #869095;
	--secondary-button-foreground-color: #fff;
	--secondary-button-hover-background-color: #b4c6c9;
	--main-menu-bar-background-color: light-dark(#adb5bf, #191c23);
	--link-color: light-dark(darkblue, #7fb0ff);
	--link-hover-color: light-dark(blue, #a8caff);
	--shadow-color: rgba(0, 0, 0, 0.4);
	--separator-color: light-dark(#ccc, #555);
	--inactive-color: light-dark(#666, #999);
	--safegreen: #00bf80;

	/* Raily's own colours, off its icon: red sleepers under two black rails. The app uses blue for
	   its primary button, so blue stays the "do it" colour and red is the identity. */
	--raily-red: #d20000;
	--rail-black: light-dark(#111, #000);
	/* The cream the Enigon pages have had since the nineties. Keeping it is why this reads as
	   Raily's site and not as a template. */
	--paper: light-dark(#f8f8e0, #34372f);

	--page-measure: 720px;
	--page-wide: 1100px;
	/* The sticky menu bar with its sub-menu row. Whatever else sticks, or is scrolled to, has to
	   clear it; measured, since the bar takes its height from its contents. */
	--menu-bar-height: 101px;
}

/* Light or dark follows the system until the reader picks one with the toggle in the menu bar, which
   sets data-theme. Every colour that differs between the two is a light-dark() pair above, so the
   choice is this one property and not a second copy of the palette. */
:root {
	color-scheme: light dark;
}

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

body.raily5 {
	margin: 0;
	background: var(--default-background-color);
	color: var(--default-foreground-color);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

body.raily5 a {
	color: var(--link-color);
}

body.raily5 a:hover {
	color: var(--link-hover-color);
}

body.raily5 main {
	display: block;
}

/* Every band is full width; its contents stop at a readable measure. */
.band {
	padding: 48px 24px;
}

.band > * {
	max-width: var(--page-measure);
	margin-left: auto;
	margin-right: auto;
}

.band.wide > * {
	max-width: var(--page-wide);
}

.band.tinted {
	background: var(--paper);
}

.band h2 {
	font-size: 28px;
	line-height: 1.25;
	margin-top: 0;
}


/* --- A length of track ------------------------------------------------------------------------
   The logo is red sleepers under two black rails. Repeating that as the divider between bands is
   the cheapest way to make the page unmistakably Raily's, and it is pure CSS, so it costs nothing
   to load and stays sharp at any zoom. */

.band + .band::before,
.band + .hero::before {
	content: "";
	display: block;
	height: 18px;
	margin: -48px auto 40px;
	max-width: var(--page-wide);
	background:
		linear-gradient(var(--rail-black), var(--rail-black)) 0 5px / 100% 2px repeat-x,
		linear-gradient(var(--rail-black), var(--rail-black)) 0 11px / 100% 2px repeat-x,
		repeating-linear-gradient(90deg,
			var(--raily-red) 0 12px, transparent 12px 26px);
	opacity: 0.85;
}

/* A short rail under each heading. Drawn as a pseudo-element, not a border: the heading has to stay
   a block for the band's auto margins to centre its column. */
.band h2 {
	position: relative;
	padding-bottom: 12px;
}

.band h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5em;
	height: 3px;
	background: var(--raily-red);
}

/* --- Hero ------------------------------------------------------------------------------------ */

.hero {
	padding: 56px 24px 44px;
	text-align: center;
	background: var(--paper);
}

.hero h1 {
	max-width: var(--page-measure);
	margin: 0 auto 8px;
	font-size: 44px;
	line-height: 1.1;
}

.hero .tagline {
	max-width: var(--page-measure);
	margin: 0 auto 28px;
	font-size: 21px;
	color: var(--inactive-color);
}

.hero img {
	display: block;
	max-width: var(--page-wide);
	width: 100%;
	margin: 32px auto 0;
	border: 1px solid var(--separator-color);
	border-radius: 6px;
	box-shadow: 0 6px 24px var(--shadow-color);
}

/* A screenshot taken in each theme, of which only the one matching the page shows. Both are
   loading="lazy": a hidden lazy image is never fetched, so the reader downloads one of them. */
body.raily5 .theme-dark {
	display: none;
}

:root[data-theme="dark"] body.raily5 .theme-light {
	display: none;
}

:root[data-theme="dark"] body.raily5 .theme-dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body.raily5 .theme-light {
		display: none;
	}

	:root:not([data-theme="light"]) body.raily5 .theme-dark {
		display: block;
	}
}

/* --- Buttons --------------------------------------------------------------------------------- */

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

a.cta,
a.cta-secondary {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
}

a.cta {
	background: var(--primary-button-background-color);
	color: var(--primary-button-foreground-color);
}

a.cta:hover {
	background: var(--primary-button-hover-background-color);
	color: var(--primary-button-foreground-color);
}

/* Outlined rather than the app's filled grey: on the dark theme a grey fill under white text has
   almost no contrast, and next to the blue primary it reads as a disabled button. */
a.cta-secondary {
	background: transparent;
	color: var(--default-foreground-color);
	box-shadow: inset 0 0 0 2px var(--primary-button-background-color);
}

a.cta-secondary:hover {
	background: var(--primary-button-background-color);
	color: var(--primary-button-foreground-color);
}

.note {
	margin-top: 14px;
	font-size: 15px;
	color: var(--inactive-color);
}

/* --- Cards: features, the two ways to run it, the plan gallery -------------------------------- */

.cards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
	padding: 20px 22px;
	background: var(--default-background-color);
	border: 1px solid var(--separator-color);
	border-radius: 6px;
}

.card h3 {
	margin-top: 0;
	font-size: 19px;
}

/* A feature card is a short list, not prose: tighter than a paragraph, and no bottom gap. */
.cards.features .card ul {
	margin: 0;
	padding-left: 1.1em;
	font-size: 15px;
	line-height: 1.5;
}

.cards.features .card li + li {
	margin-top: 6px;
}

.card p:last-child {
	margin-bottom: 0;
}

.card .price {
	font-size: 24px;
	font-weight: 600;
}

.card .price small {
	font-size: 15px;
	font-weight: normal;
	color: var(--inactive-color);
}

.gallery-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gallery-grid img {
	width: 100%;
	height: auto;
	border: 1px solid var(--separator-color);
	border-radius: 6px;
	background: var(--panel-background-color);
}

/* --- Carousel ------------------------------------------------------------------------------------
   One slide at a time, scroll-snapped; resources/carousel.js adds the buttons and dots. Without the
   script it is still a strip that scrolls sideways. */

.carousel-frame {
	position: relative;
}

.carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 6px;
	box-shadow: 0 6px 24px var(--shadow-color);
}

.carousel::-webkit-scrollbar {
	display: none;
}

.carousel:focus-visible {
	outline: 2px solid var(--primary-button-background-color);
	outline-offset: 3px;
}

.carousel > figure {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: center;
	position: relative;
	background: var(--panel-background-color);
}

.carousel img {
	display: block;
	width: 100%;
	aspect-ratio: 7 / 5;
	object-fit: cover;
}

.carousel figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 20px 12px;
	color: #fff;
	font-size: 16px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

@media (max-width: 600px) {
	.carousel figcaption {
		padding: 18px 12px 8px;
		font-size: 14px;
	}
}

.carousel-prev,
.carousel-next {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

.carousel-prev {
	left: 12px;
}

.carousel-next {
	right: 12px;
}

/* A chevron drawn from two borders, so it needs no icon and takes the colour of the button. */
.carousel-prev::before,
.carousel-next::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin: auto;
	border: solid #fff;
	border-width: 3px 3px 0 0;
}

.carousel-prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.carousel-next::before {
	transform: translateX(-2px) rotate(45deg);
}

.carousel-prev:hover,
.carousel-next:hover {
	background: rgba(0, 0, 0, 0.7);
}

.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.carousel-dots button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--separator-color);
	cursor: pointer;
}

.carousel-dots button[aria-current="true"] {
	background: var(--raily-red);
}

/* A screenshot inside a band, captioned. */
figure.shot {
	margin: 0 auto;
}

figure.shot img {
	width: 100%;
	height: auto;
	border: 1px solid var(--separator-color);
	border-radius: 6px;
	box-shadow: 0 4px 16px var(--shadow-color);
}

figure.shot figcaption {
	margin-top: 10px;
	font-size: 15px;
	color: var(--inactive-color);
	text-align: center;
}

/* --- Feature list ---------------------------------------------------------------------------- */

ul.features {
	padding-left: 1.2em;
}

ul.features li {
	margin-bottom: 8px;
}

@media (max-width: 700px) {
	body.raily5 {
		font-size: 16px;
	}

	.hero {
		padding: 32px 16px 28px;
	}

	.hero h1 {
		font-size: 32px;
	}

	.hero .tagline {
		font-size: 18px;
	}

	.band {
		padding: 32px 16px;
	}

	.band h2 {
		font-size: 24px;
	}
}

/* --- Navigation ------------------------------------------------------------------------------
   The product pages do not load the old stylesheet: its menu bar is a 64px strip of gradient tiles
   from 2010, and replacing it is most of what "modernise" means here. Same markup, so the generator
   does not need to know which look a page wears. */

body.raily5 nav {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--main-menu-bar-background-color);
	border-bottom: 1px solid var(--separator-color);
}

/* The bar carries a shadow only once it is over content, so it does not float above the hero on a
   page that has not been scrolled. */
body.raily5 nav {
	box-shadow: 0 2px 8px transparent;
	transition: box-shadow 0.2s;
}

@supports (animation-timeline: scroll()) {
	body.raily5 nav {
		animation: nav-lift linear both;
		animation-timeline: scroll();
		animation-range: 0 60px;
	}

	@keyframes nav-lift {
		to {
			box-shadow: 0 2px 8px var(--shadow-color);
		}
	}
}

body.raily5 nav div.menu {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: var(--page-wide);
	margin: 0 auto;
	padding: 0 16px;
}

/* The icon the app carries in its own menu bar, so the two look like one product. */
body.raily5 nav div.menu::before {
	content: "";
	width: 26px;
	height: 26px;
	margin-right: 10px;
	flex: 0 0 auto;
	background: url(../raily/resources/raily-logo.svg) center / contain no-repeat;
}

body.raily5 nav div.menu ul,
body.raily5 nav div.submenu ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.raily5 nav div.menu ul li a {
	display: block;
	padding: 14px 14px;
	color: var(--default-foreground-color);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

body.raily5 nav div.menu ul li.current a {
	box-shadow: inset 0 -3px 0 var(--primary-button-background-color);
}

body.raily5 nav div.menu ul li a:hover {
	color: var(--link-hover-color);
}

body.raily5 nav div.submenu {
	background: var(--panel-background-color);
	border-top: 1px solid var(--separator-color);
}

body.raily5 nav div.submenu ul {
	max-width: var(--page-wide);
	margin: 0 auto;
	padding: 0 16px;
	overflow-x: auto;
}

body.raily5 nav div.submenu ul li a {
	display: block;
	padding: 10px 12px;
	color: var(--default-foreground-color);
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

body.raily5 nav div.submenu ul li.current a {
	color: var(--link-color);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--primary-button-background-color);
}

body.raily5 nav div.submenu ul li a:hover {
	color: var(--link-hover-color);
}

/* The language menu, in this page's colours rather than the app bar's. */
/* The button shows where a click takes you: the moon while the page is light, the sun while dark.
   Which theme is showing is the system's call unless data-theme overrides it, hence both rules. */
body.raily5 .themetoggle {
	margin-left: auto;
	display: flex;
	padding: 7px 9px;
	border: 1px solid var(--separator-color);
	border-radius: 4px;
	background: none;
	color: var(--default-foreground-color);
	cursor: pointer;
}

body.raily5 .themetoggle:hover {
	color: var(--link-hover-color);
}

body.raily5 .themetoggle .sun,
:root[data-theme="dark"] body.raily5 .themetoggle .moon {
	display: none;
}

:root[data-theme="dark"] body.raily5 .themetoggle .sun {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body.raily5 .themetoggle .moon {
		display: none;
	}

	:root:not([data-theme="light"]) body.raily5 .themetoggle .sun {
		display: block;
	}
}

body.raily5 details.languageselector {
	margin-left: auto;
	position: relative;
	font-size: 15px;
}

body.raily5 .themetoggle + details.languageselector {
	margin-left: 0;
}

body.raily5 details.languageselector > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--separator-color);
	border-radius: 4px;
	color: var(--default-foreground-color);
	cursor: pointer;
	list-style: none;
	text-transform: uppercase;
}

body.raily5 details.languageselector > summary::-webkit-details-marker {
	display: none;
}

body.raily5 details.languageselector > summary svg {
	width: 16px;
	height: 16px;
}

body.raily5 details.languageselector:not([open]) > ul {
	display: none;
}

body.raily5 details.languageselector > ul {
	position: absolute;
	right: 0;
	z-index: 3;
	margin: 6px 0 0;
	padding: 4px 0;
	min-width: 9em;
	list-style: none;
	background: var(--default-background-color);
	border: 1px solid var(--separator-color);
	border-radius: 4px;
	box-shadow: 0 4px 16px var(--shadow-color);
}

body.raily5 details.languageselector > ul li a {
	display: block;
	padding: 7px 14px;
	color: var(--default-foreground-color);
	text-decoration: none;
	white-space: nowrap;
}

body.raily5 details.languageselector > ul li a[href]:hover {
	background: var(--primary-button-background-color);
	color: var(--primary-button-foreground-color);
}

body.raily5 details.languageselector > ul li.current a {
	font-weight: 600;
}

body.raily5 details.languageselector > ul li a.untranslated {
	color: var(--inactive-color);
}

/* The footer the whole site shares, in this page's colours. */
body.raily5 .agb-footer {
	position: static;
	box-shadow: none;
	border-top: 1px solid var(--separator-color);
	background: var(--panel-background-color);
	color: var(--inactive-color);
	padding: 16px;
}

body.raily5 .agb-footer a {
	color: var(--link-color);
}

/* --- Museum -----------------------------------------------------------------------------------
   The museum is a timeline: DOS in 1991 through Raily 4 in 2025. Its pages are product sheets, so
   they are tables of fact rather than prose, and they read best as a label column against a value
   column -- until the screen is too narrow for two columns to be worth having. */

table.museuminfo {
	width: 100%;
	border-collapse: collapse;
	/* auto, not 0: the band centres its children with auto margins, and a fixed 0 here would pin
	   the table to the left of the text above it. */
	margin: 24px auto;
}

table.museuminfo th,
table.museuminfo td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--separator-color);
}

table.museuminfo th {
	width: 12em;
	font-weight: 600;
	color: var(--inactive-color);
}

table.museuminfo ul {
	margin: 0;
	padding-left: 1.2em;
}

table.museuminfo img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--separator-color);
	border-radius: 4px;
}

@media (max-width: 700px) {
	table.museuminfo th,
	table.museuminfo td {
		display: block;
		width: auto;
		border-bottom: none;
		padding: 2px 0;
	}

	table.museuminfo th {
		padding-top: 14px;
	}

	table.museuminfo tr {
		display: block;
		border-bottom: 1px solid var(--separator-color);
		padding-bottom: 10px;
	}
}


/* --- Questions and answers --------------------------------------------------------------------
   Native <details>, so a question opens without script and a find-in-page search opens it too. */

details.faq {
	border-bottom: 1px solid var(--separator-color);
	scroll-margin-top: calc(var(--menu-bar-height) + 12px);
}

details.faq > summary {
	cursor: pointer;
	padding: 14px 0;
	font-weight: 600;
}

details.faq > summary:hover {
	color: var(--link-hover-color);
}

details.faq > summary::marker {
	color: var(--raily-red);
}

details.faq > :last-child {
	margin-bottom: 20px;
}

details.faq img {
	max-width: 100%;
	height: auto;
}

form.request {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 10px 14px;
	align-items: center;
	margin: 16px 0;
}

form.request input,
form.request select {
	font: inherit;
	padding: 6px 10px;
	color: inherit;
	background: var(--default-background-color);
	border: 1px solid var(--separator-color);
	border-radius: 4px;
}

form.request button {
	grid-column: 2;
	justify-self: start;
	padding: 10px 22px;
	border: 0;
	border-radius: 4px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	background: var(--primary-button-background-color);
	color: var(--primary-button-foreground-color);
}

form.request button:hover {
	background: var(--primary-button-hover-background-color);
}

@media (max-width: 600px) {
	form.request {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	form.request button {
		grid-column: 1;
		margin-top: 10px;
	}
}


/* --- A page from raily.ch, framed ------------------------------------------------------------ */

iframe.plangallery {
	display: block;
	width: 100%;
	/* The gallery scrolls inside its frame; this is how much of it shows at once. */
	height: 80vh;
	min-height: 560px;
	margin-top: 24px;
	border: 1px solid var(--separator-color);
	border-radius: 6px;
}