/*
Theme Name: Hoosier Caboose
Theme URI: https://hoosiercaboose.com
Author: James & Amy Northard
Description: Block theme for The Hoosier Caboose, a restored 1950s L&N caboose stay in Brown County, Indiana. Uses the official brand kit: caboose red #8C1D1D, cream #F3ECDD and black #1A1A1A, with the brand logo, badge and favicon, with the build told as stops along a stretch of track.
Version: 2.5.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoosier-caboose
*/

/*
 * Most styling lives in theme.json. This file holds what theme.json can't express:
 *  - the "line so far" timeline (track drawn in CSS, laid in as you scroll)
 *  - waitlist form, waybill-style table, post lists
 *  - small motion details (button press), all switched off for people who ask for reduced motion
 */

:root {
	--hc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* quick start, gentle stop */
	--hc-steel: var(--wp--preset--color--ink);
	--hc-tie: var(--wp--preset--color--ink);
}

/* Sections butt up against each other (no strip of background between bands). */
.wp-site-blocks > * { margin-block-start: 0; }

/* ---------- Brand logo and badge (official artwork in assets/brand) ---------- */
.hc-logo { display: inline-block; line-height: 0; }
.hc-logo img { display: block; height: 58px; width: auto; max-width: 100%; }
.hc-logo--footer img { height: 64px; }
.hc-badge { display: block; width: 132px; height: auto; margin: 0 auto var(--wp--preset--spacing--30) !important; }
@media (max-width: 600px) { .hc-logo img { height: 44px; } }

/* ---------- Header ---------- */
.hc-header { border-bottom: 4px solid var(--wp--preset--color--caboose); }
.hc-header .wp-block-site-title a { text-decoration: none; }
.hc-header p { margin: 0; }
.hc-header .wp-block-navigation a { text-underline-offset: 0.3em; }

/* ---------- Buttons: a small press response (user-triggered motion only) ---------- */
.wp-element-button,
.hc-waitlist-form button {
	transition: transform 140ms var(--hc-ease-out), background-color 180ms ease-out, color 180ms ease-out;
}
.wp-element-button:active,
.hc-waitlist-form button:active { transform: scale(0.97); }

/* Visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--caboose);
	outline-offset: 3px;
}

/* ---------- Hero ---------- */
.hc-hero .wp-block-cover__inner-container { max-width: 1100px; }
.hc-hero .hc-hero__note { color: var(--wp--preset--color--cream); opacity: 0.85; margin-top: var(--wp--preset--spacing--40); }
.hc-hero .hc-hero__note a { color: inherit; }
.hc-hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); max-width: 15ch; text-wrap: balance; }

/* ---------- Page title band ---------- */
.hc-page-band { border-bottom: 1px solid var(--wp--preset--color--rule); }

/* ---------- The line so far (home page timeline) ---------- */
.hc-route__intro p { max-width: 46ch; margin: 0; color: var(--wp--preset--color--smoke); }

.hc-route__line {
	--track-w: 64px;
	--track-gap: 40px;
	position: relative;
	box-sizing: border-box;
	margin-top: var(--wp--preset--spacing--50);
	padding-left: calc(var(--track-w) + var(--track-gap));
}

/* The track: two steel rails over wooden ties, seen from above. */
.hc-route__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--track-w);
	background:
		linear-gradient(to right,
			transparent 18%, var(--hc-steel) 18% 26%, transparent 26% 74%,
			var(--hc-steel) 74% 82%, transparent 82%),
		repeating-linear-gradient(to bottom, var(--hc-tie) 0 7px, transparent 7px 24px);
	border-radius: 2px;
}

.hc-route__stops {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hc-route__stop {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding-bottom: var(--wp--preset--spacing--50);
}
.hc-route__stop:last-child { padding-bottom: 0; }

/* Each stop gets a station marker sitting on the track. */
.hc-route__stop::before {
	content: "";
	position: absolute;
	top: 0.35rem;
	left: calc(-1 * (var(--track-gap) + var(--track-w) / 2) - 11px);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--fog);
	border: 5px solid var(--wp--preset--color--caboose);
	box-sizing: border-box;
}
.hc-route__stop--next::before {
	background: var(--wp--preset--color--caboose);
	box-shadow: 0 0 0 6px rgba(142, 42, 36, 0.18);
}

.hc-route__photo { margin: 0; }
.hc-route__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 3px;
}
.hc-route__text > * { margin: 0; }
.hc-route__text > * + * { margin-top: 0.5rem; }
.hc-route__when {
	font-weight: 600;
	color: var(--wp--preset--color--caboose);
	font-size: var(--wp--preset--font-size--small);
}
.hc-route__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}
.hc-route__text p:not(.hc-route__when) { max-width: 52ch; }
.hc-route__note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--smoke); }

/* The one orchestrated motion on the site: the track lays itself down to the middle
   of the screen as you scroll. Browsers without scroll-driven animation show it whole. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.hc-route__track {
			animation: hc-lay-track linear both;
			animation-timeline: view();
			animation-range: cover 50vh cover calc(100% - 50vh);
		}
		@keyframes hc-lay-track {
			from { clip-path: inset(0 0 100% 0); }
			to { clip-path: inset(0 0 0 0); }
		}
	}
}

@media (max-width: 700px) {
	.hc-route__line { --track-w: 36px; --track-gap: 22px; }
	.hc-route__track { background-size: auto, auto; }
	.hc-route__stop { grid-template-columns: 1fr; gap: 0.9rem; }
	.hc-route__stop::before { width: 18px; height: 18px; border-width: 4px; left: calc(-1 * (var(--track-gap) + var(--track-w) / 2) - 9px); }
}

/* ---------- Page content ---------- */
.entry-content .wp-block-gallery img,
.entry-content .wp-block-image img { border-radius: 3px; }

/* Gold rule with a centered rivet, used at the end of a dispatch. */
.hc-rivet-rule {
	position: relative;
	border: 0;
	height: 2px;
	background: var(--wp--preset--color--brass);
	max-width: 220px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: visible;
}
.hc-rivet-rule::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--brass);
	transform: translate(-50%, -50%);
}

/* The striped "Manifest" table on The Stay reads like a waybill. */
.entry-content .wp-block-table.is-style-stripes { border-bottom: 0; }
.entry-content .wp-block-table.is-style-stripes td { padding: 0.7rem 0.9rem; }
.entry-content .wp-block-table.is-style-stripes td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--caboose);
	width: 30%;
	white-space: nowrap;
}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--parchment);
}

/* ---------- Dispatch lists: photo and words, no boxes ---------- */
.hc-card {
	background: none;
	border: 0;
	border-radius: 0;
	height: 100%;
}
.hc-card .wp-block-post-featured-image { margin: 0; }
.hc-card .wp-block-post-featured-image img { border-radius: 3px; }
.hc-card > .wp-block-group {
	padding: 0.9rem 0 0 !important;
}
.hc-card .wp-block-post-title a { text-decoration: none; }
.hc-card .wp-block-post-title a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
footer .hc-footer-label { color: #A39B8C !important; font-size: 0.95rem; }
footer .wp-block-list a { text-decoration: none; }
footer .wp-block-list a:hover { text-decoration: underline; }

/* ---------- Waitlist form (theme's own; replaced by Fluent Forms when that plugin is active) ---------- */
/* Sits in a light panel the full width of the text column; every control is the same height and type size. */
.hc-waitlist-form {
	display: grid;
	gap: 1.25rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 4px solid var(--wp--preset--color--caboose);
	border-radius: 3px;
}
.entry-content .hc-waitlist-form,
.entry-content .hc-notice { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.hc-waitlist-form p { margin: 0; }
.hc-waitlist-form .hc-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.hc-waitlist-form label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
	margin-bottom: 0.4rem;
}
.hc-waitlist-form label span { font-weight: 400; color: var(--wp--preset--color--smoke); }
.hc-waitlist-form input[type="text"],
.hc-waitlist-form input[type="email"],
.hc-waitlist-form select,
.hc-waitlist-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--fog);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 3px;
	transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.hc-waitlist-form input[type="text"],
.hc-waitlist-form input[type="email"],
.hc-waitlist-form select { height: 48px; }
.hc-waitlist-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
}
.hc-waitlist-form textarea { padding: 0.75rem 0.85rem; min-height: 6.5rem; resize: vertical; }
.hc-waitlist-form ::placeholder { color: var(--wp--preset--color--smoke); opacity: 0.8; }
.hc-waitlist-form input:hover,
.hc-waitlist-form select:hover,
.hc-waitlist-form textarea:hover { border-color: var(--wp--preset--color--smoke); }
.hc-waitlist-form input:focus,
.hc-waitlist-form select:focus,
.hc-waitlist-form textarea:focus {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--caboose);
	outline: 2px solid var(--wp--preset--color--caboose);
	outline-offset: 0;
}
.hc-waitlist-form button {
	justify-self: start;
	cursor: pointer;
	border: 0;
	border-radius: 3px;
	height: 48px;
	padding: 0 1.6rem;
	font: 600 1.05rem/1 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--cream);
	background: var(--wp--preset--color--caboose);
}
.hc-waitlist-form button:hover { background: var(--wp--preset--color--ink); }
.hc-hp { position: absolute !important; left: -9999px !important; }
.hc-notice {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--parchment);
}
.hc-notice.is-error { border-left-color: var(--wp--preset--color--caboose); }

@media (max-width: 640px) {
	.hc-waitlist-form .hc-row { grid-template-columns: 1fr; }
	.hc-waitlist-form { padding: var(--wp--preset--spacing--30); }
	.hc-waitlist-form button { justify-self: stretch; }
	.entry-content .wp-block-table.is-style-stripes td:first-child { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.hc-waitlist-form button { transition: none; }
	.wp-element-button:active,
	.hc-waitlist-form button:active { transform: none; }
}