/*
 * Retro theme (HORTA-230): the late-90s look of Fernando's first sites, over the normal pages. Optional: on only while
 * <html> has class "retro" (the footer toggle; a cookie remembers it, PHP writes the class so there's no flash).
 * Every rule is scoped under html.retro, so this file does nothing to the normal theme.
 * Proof scope: the home page and the default article template (Component::$retro).
 * Colours from his old pages: lime text, yellow headings, white links, starry black; Win95 grey for buttons + menu.
 */

/* ---- things retro.js adds: only shown in retro ---- */
.retro-only { display: none !important; }
html.retro .retro-only { display: revert !important; }
html.retro .retro-only.retro-block { display: block !important; }
html.retro .retro-off { display: none !important; }   /* normal-theme text a retro version replaces */

/* ---- the page ---- */
html.retro body {
	background: #000 url("../../images/retro/stars.gif") repeat;
	color: #00ff00;
}

html.retro body,
html.retro input, html.retro select, html.retro textarea,
html.retro h1, html.retro h2, html.retro h3, html.retro h4, html.retro h5, html.retro h6,
html.retro p, html.retro li, html.retro .button, html.retro #wrapper > header p,
html.retro #banner p, html.retro #header h1, html.retro #menu .links li a, html.retro a.special,
html.retro #footer .copyright, html.retro #footer .copyright li {
	font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
	letter-spacing: normal;
	text-transform: none;
}

html.retro p, html.retro li, html.retro td { color: #00ff00; font-weight: normal; }

html.retro h1, html.retro h2, html.retro h3, html.retro h4, html.retro h5, html.retro h6,
html.retro strong, html.retro b { color: #ffff00; }

html.retro a {
	color: #fff;
	text-decoration: underline;
	border-bottom: none;
}
html.retro a:hover { color: #ffff00; }
html.retro a:visited { color: #ff80ff; }

/* the template's angled section edges, tints and photo background: gone, stars all the way down */
html.retro #page-wrapper,
html.retro .wrapper,
html.retro .wrapper.style1, html.retro .wrapper.style2, html.retro .wrapper.style3,
html.retro .wrapper.style4, html.retro .wrapper.style5, html.retro .wrapper.style6,
html.retro #wrapper > header,
html.retro #banner,
html.retro #footer {
	background: transparent none !important;
}
html.retro .wrapper:before, html.retro .wrapper:after { display: none !important; }
html.retro .wrapper { margin: 1.5em 0; }

/* headings: no uppercase underlines; a groove line like an old <hr> */
html.retro h2.major, html.retro h3.major, html.retro #wrapper > header h2 {
	border-bottom: 3px groove #c0c0c0;
}
html.retro hr {
	border: 0;
	border-top: 3px groove #c0c0c0;
	height: 0;
}

/* ---- the top "frame" (old index.php was a frameset: a header frame over the content) ---- */
html.retro #header,
html.retro #header.alt {
	background: #000 url("../../images/retro/stars.gif") repeat;
	border-bottom: 6px ridge #c0c0c0;
	box-shadow: none;
}
html.retro #header h1, html.retro #header h1 a { color: #ffff00; }
html.retro #header nav a[href="#menu"] {
	background: #c0c0c0;
	border: 3px outset #fff;
	border-radius: 0;
	box-shadow: none;
	color: #000 !important;
	text-decoration: none;
	font-weight: bold;
}
html.retro #header nav a[href="#menu"]:active { border-style: inset; }
html.retro #header nav a[href="#menu"]:before { color: #000; }

/* ---- the menu: a Windows 95 window ---- */
html.retro #menu .inner {
	background: #c0c0c0;
	border: 3px outset #fff;
	border-radius: 0;
	box-shadow: 4px 4px 0 #000;
	padding: 0 0 1.5em 0;
}
html.retro #menu h2 {
	background: linear-gradient(to right, #000080, #1084d0);
	color: #fff;
	font-size: 1em;
	margin: 0 0 1em 0;
	padding: 0.3em 0.6em;
	text-align: left;
}
html.retro #menu .links { padding: 0 1.5em; }
html.retro #menu .links li a,
html.retro #menu .icons a,
html.retro #menu .icons .icon:before { color: #0000ee !important; border-bottom: 0; }
html.retro #menu .links li { border-top: 1px dotted #808080; }
html.retro #menu .close {
	background-color: #c0c0c0;
	border: 2px outset #fff;
	filter: invert(1);
	top: 0.15em;
	right: 0.3em;
	width: 2em;
	height: 1.6em;
}

/* ---- buttons: grey, bevelled, pressed in when clicked ---- */
html.retro .button, html.retro button,
html.retro input[type="submit"], html.retro input[type="button"], html.retro input[type="reset"] {
	background: #c0c0c0 !important;
	border: 3px outset #fff !important;
	border-radius: 0;
	box-shadow: none !important;
	color: #000 !important;
	font-weight: bold;
	text-decoration: none;
}
html.retro .button:active, html.retro button:active, html.retro input[type="submit"]:active { border-style: inset !important; }
html.retro a.special { color: #fff; text-transform: none; letter-spacing: normal; font-size: 1em; }
html.retro #footer .copyright li { color: #00ff00; }
html.retro a.special:before { display: none; }
html.retro a.special:after { content: " >>"; }

/* ---- home ---- */
html.retro #banner { text-align: center; padding-top: 6em; }
html.retro #banner h2 {
	color: #ffff00;
	font-size: 2.6em;
	text-shadow: 3px 3px 0 #ff0000, 6px 6px 0 #0000ff;
}
/* the long intro as a <marquee> would have done it (CSS: no deprecated tags) */
html.retro #banner p.retro-marquee {
	overflow: hidden;
	white-space: nowrap;
	border: 2px inset #808080;
	background: #000;
	color: #00ff00;
	padding: 0.3em 0;
}
html.retro #banner p.retro-marquee > span {
	display: inline-block;
	padding-left: 100%;
	animation: retro-marquee 40s linear infinite;
}
@keyframes retro-marquee { to { transform: translateX(-100%); } }

html.retro .wrapper.spotlight .inner { border: 4px ridge #c0c0c0; background: rgba(0, 0, 0, 0.6); }
html.retro .wrapper.spotlight .image img,
html.retro .features article .image img { border: 2px solid #0000ee; }
html.retro .features article {
	background: rgba(0, 0, 0, 0.6);
	border: 4px ridge #c0c0c0;
	border-radius: 0;
}

/* ---- article page ---- */
html.retro #wrapper > header { padding-top: 7em; text-align: center; }
html.retro #wrapper > header h3.small { color: #00ffff; font-size: 0.9em; }
html.retro #main-content .inner {
	background: rgba(0, 0, 0, 0.7);
	border: 4px ridge #c0c0c0;
	padding: 2em;
}
html.retro #main-content img { border: 2px solid #0000ee; }
html.retro table, html.retro table td, html.retro table th { border: 2px inset #808080; }
html.retro table th { background: #000080; color: #ffff00; }
html.retro table tbody tr:nth-child(2n + 1) { background: rgba(0, 0, 128, 0.35); }
html.retro code, html.retro pre { background: #000; color: #00ffff; border: 1px solid #00ff00; }
html.retro blockquote { border-left: 4px ridge #c0c0c0; color: #00ffff; font-style: italic; }

/* ---- the GIFs retro.js puts in ---- */
html.retro .retro-gif { display: inline-block; vertical-align: middle; image-rendering: pixelated; }
html.retro .retro-new { margin-right: 0.4em; }
html.retro .retro-hot { margin-left: 0.4em; width: 50px; }
html.retro .retro-badges { text-align: center; margin: 1em 0; }
html.retro .retro-badges img { margin: 0.3em; }
html.retro .retro-car { display: block; margin: 0 auto 1em auto; }
html.retro .retro-undercon { display: block; margin: 2em auto 0 auto; max-width: 100%; }
html.retro .retro-small { font-size: 0.8em; color: #00ffff; text-align: center; }

/* the footer toggle (always shown: it's how you get in) */
.retro-toggle { cursor: pointer; }
html.retro .retro-toggle { color: #ffff00 !important; font-weight: bold; }

/* ---- reduced motion: still stars, no marquee, no animated GIFs ---- */
@media (prefers-reduced-motion: reduce) {
	html.retro body, html.retro #header, html.retro #header.alt { background-image: url("../../images/retro/stars.png"); }
	html.retro #banner p.retro-marquee { white-space: normal; }
	html.retro #banner p.retro-marquee > span { animation: none; padding-left: 0; }
	html.retro .retro-anim { display: none !important; }
}

/* ---- phones ---- */
@media screen and (max-width: 736px) {
	html.retro #banner h2 { font-size: 1.8em; }
	html.retro #main-content .inner { padding: 1em; }
	html.retro .retro-badges img { max-width: 40%; }
}