/* 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: #fff;
	--default-foreground-color: #000;
	--panel-background-color: #f5f5f5;
	--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: #adb5bf;
	--link-color: darkblue;
	--link-hover-color: blue;
	--shadow-color: rgba(0, 0, 0, 0.4);
	--separator-color: #ccc;
	--inactive-color: #666;
	--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: #111;
	/* 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: #f8f8e0;

	--page-measure: 720px;
	--page-wide: 1100px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--default-background-color: #3c3f41;
		--default-foreground-color: #bbb;
		--panel-background-color: #2a2a2a;
		--main-menu-bar-background-color: #191c23;
		--link-color: #7fb0ff;
		--link-hover-color: #a8caff;
		--separator-color: #555;
		--inactive-color: #999;
		--rail-black: #000;
		--paper: #34372f;
	}
}

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);
}

/* --- 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;
}

.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);
}

/* 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. */
body.raily5 details.languageselector {
	margin-left: auto;
	position: relative;
	font-size: 15px;
}

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;
	}
}