/*
Theme Name: HPO Child Theme
Template: astra
Version: 1.0.0
*/

/* --- GLOBAL VARIABLES --- */
:root {
	--HPO-primary: #000;
	--HPO-accent: #C43238;
	--HPO-bg-page: #F8FAFC;
	--HPO-text: #000;
	--HPO-border: #E1251B;
	--ast-global-color-3: #000 !important;
}

body { 
	color: var(--ast-global-color-3);
	background-color: var(--HPO-bg-page); 
}

p {
	font-size: 16px;
}

a:hover, a:focus {
	color: var(--HPO-border);
}
a {
	color: var(--HPO-border) !important;
	text-decoration: none; /* Optional: removes underline */
	transition: 0.3s;
}
#astra-footer-menu .menu-item > a {
	color: #fff !important;
}
.site-below-footer-wrap {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

.main-header-bar {
	display: none !important;
}

.ast-footer-copyright p {
	margin-bottom: 0;
	color: #fff !important;
}
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
	display: grid;
	background: var(--HPO-border)!important;
	padding: 0px 0px !important;
}
.HPO-footer-main {
	margin-bottom: -4px!important;
}

button.HPO-search-submit {
	background: #E1251B;
}


body {
	background: rgba(225, 37, 27, 0.15) !important;
}


/* =========================================================
AMTRAK STATION GUIDE - RAIL HERO
Primary Color: #E1251B
========================================================= */
.rail-hero {
	--rail-primary: #E1251B;
	--rail-primary-dark: #B9150E;
	--rail-primary-light: #F04A42;

	--rail-ink: #252525;
	--rail-ink-soft: #62676D;

	--rail-bg: #FFF9F8;
	--rail-bg-light: #FFFCFC;
	--rail-white: #FFFFFF;

	--rail-line: rgba(225, 37, 27, 0.10);
	--rail-shadow:
		0 12px 35px -15px rgba(38, 22, 20, 0.18),
		0 3px 10px -3px rgba(38, 22, 20, 0.08);

	--rail-shadow-hover:
		0 22px 45px -18px rgba(38, 22, 20, 0.24),
		0 5px 14px -4px rgba(38, 22, 20, 0.10);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 65px 40px;
	font-family: "Clear Sans", Arial, Roboto, sans-serif;
	color: var(--rail-ink);
	background:
		radial-gradient(
			70% 80% at 92% 10%,
			rgba(225, 37, 27, 0.10) 0%,
			rgba(225, 37, 27, 0.045) 30%,
			transparent 62%
		),
		radial-gradient(
			50% 60% at 5% 90%,
			rgba(225, 37, 27, 0.045) 0%,
			transparent 65%
		),
		linear-gradient(
			180deg,
			#FFFDFD 0%,
			var(--rail-bg) 100%
		);
	box-sizing: border-box;
}

/* Decorative background glow */
.rail-hero__glow {
	position: absolute;
	z-index: -2;
	width: 420px;
	height: 420px;
	right: -170px;
	top: -190px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(225, 37, 27, 0.12) 0%,
			rgba(225, 37, 27, 0.045) 35%,
			transparent 70%
		);
	pointer-events: none;
}

/* Decorative railway-track line */
.rail-hero__track-glow {
	position: absolute;
	width: 680px;
	height: 680px;
	right: -390px;
	bottom: -420px;
	border: 1px solid rgba(225, 37, 27, 0.07);
	border-radius: 50%;
	transform: rotate(-16deg);
	pointer-events: none;
}

/* Main container */
.rail-hero__container {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
	align-items: center;
	gap: 35px;
}

/* =========================================================
CONTENT
========================================================= */
.rail-hero__content {
	position: relative;
	z-index: 5;
	max-width: 610px;
}
.rail-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
	color: var(--rail-primary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.8px;
	line-height: 1;
	text-transform: uppercase;
}
.rail-hero__eyebrow::before {
	content: "";
	width: 27px;
	height: 2px;
	border-radius: 999px;
	background: var(--rail-primary);
}
.rail-hero__heading {
	margin: 0;
	color: #202124;
	font-size: clamp(40px, 4.3vw, 60px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -2.2px;
}
.rail-hero__heading-highlight {
	position: relative;
	color: var(--rail-primary);
	white-space: nowrap;
}
.rail-hero__heading-highlight::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 3px;
	bottom: -5px;
	height: 6px;
	border-radius: 50%;
	background: rgba(225, 37, 27, 0.14);
	transform: rotate(-1.5deg);
}
.rail-hero__subtext {
	max-width: 575px;
	margin: 23px 0 29px;
	color: var(--rail-ink-soft);
	font-size: 17px;
	line-height: 1.7;
}

/* =========================================================
ACTION AREA
========================================================= */
.rail-hero__actions {
	display: flex;
	align-items: stretch;
	gap: 13px;
	margin-bottom: 25px;
}
.rail-hero__search-wrap {
	flex: 1;
	min-width: 0;
}
.rail-search-form {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 58px;
	overflow: hidden;
	border: 1px solid rgba(225, 37, 27, 0.14);
	border-radius: 12px;
	background: var(--rail-white);
	box-shadow: 0 10px 25px -16px rgba(50, 25, 22, 0.25);
	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}
.rail-search-form:focus-within {
	border-color: rgba(225, 37, 27, 0.45);
	box-shadow: 0 12px 30px -14px rgba(225, 37, 27, 0.25);
}
.rail-search-form label {
	flex: 1;
	min-width: 0;
}
.rail-search-field {
	width: 100%;
	height: 58px;
	padding: 0 18px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #252525;
	font-family: inherit;
	font-size: 14px;
}
.rail-search-field::placeholder {
	color: #8A8F94;
}
.rail-search-submit {
	flex-shrink: 0;
	margin: 5px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--rail-primary);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 7px 16px -8px rgba(225, 37, 27, 0.65);
	transition:
		background .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}
input.rail-search-field {
	margin-top: 7px;
	border: none;
	box-shadow: none;
}
.rail-search-submit:hover {
	background: var(--rail-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -8px rgba(225, 37, 27, 0.7);
}

/* =========================================================
PHONE CTA
========================================================= */
.rail-hero__phone {
	flex-shrink: 0;
	min-width: 185px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 15px;
	border: 1px solid rgba(225, 37, 27, 0.12);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--rail-ink);
	text-decoration: none;
	box-shadow:
		0 10px 25px -17px rgba(50, 25, 22, 0.25);
	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}
.rail-hero__phone:hover {
	transform: translateY(-2px);
	border-color: rgba(225, 37, 27, 0.25);
	box-shadow: var(--rail-shadow);
}
.rail-hero__phone-icon-wrap {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(225, 37, 27, 0.10);
	color: var(--rail-primary);
}
.rail-hero__phone-icon {
	width: 20px;
	height: 20px;
}
.rail-hero__phone-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.rail-hero__phone-label {
	color: #7A7F84;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.rail-hero__phone-number {
	color: #252525;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

/* =========================================================
TRUST ROW
========================================================= */
.rail-hero__trust {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
	color: #687078;
	font-size: 12px;
	font-weight: 600;
}
.rail-hero__trust span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.rail-hero__trust svg {
	width: 17px;
	height: 17px;
	color: var(--rail-primary);
}

/* =========================================================
VISUAL / RAILWAY MAP
========================================================= */
.rail-hero__visual {
	position: relative;
	min-width: 0;
	min-height: 485px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rail-hero__station-map {
	position: relative;
	width: 100%;
	max-width: 720px;
	aspect-ratio: 760 / 500;
}
.rail-hero__rail-map {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Railway routes */
.rail-hero__route {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: url(#railRouteGradient);
	transition: opacity .3s ease;
}
.rail-hero__route--main {
	stroke-width: 4;
	opacity: .78;
	filter:
		drop-shadow(0 3px 5px rgba(225, 37, 27, 0.12));
}
.rail-hero__route--secondary {
	stroke-width: 2.5;
	stroke-dasharray: 7 8;
	opacity: .32;
}
.rail-hero__route--branch {
	stroke-width: 2.5;
	stroke-dasharray: 5 9;
	opacity: .25;
}

/* Railway sleepers */
.rail-hero__sleepers path {
	fill: none;
	stroke: #C62820;
	stroke-width: 3;
	stroke-linecap: round;
	opacity: .24;
}

/* Station markers */
.rail-hero__station-ring {
	fill: rgba(255, 255, 255, .95);
	stroke: rgba(225, 37, 27, .20);
	stroke-width: 2;
}
.rail-hero__station-core {
	fill: var(--rail-primary);
}
.rail-hero__station-mark {
	fill: none;
	stroke: #FFFFFF;
	opacity: .95;
}
.rail-hero__station--active .rail-hero__station-ring {
	fill: #FFFFFF;
	stroke: rgba(225, 37, 27, .30);
	stroke-width: 3;
}
.rail-hero__station--active .rail-hero__station-core {
	fill: var(--rail-primary);
}

/* =========================================================
MOVING TRAIN
========================================================= */
.rail-hero__train {
	filter:
		drop-shadow(0 5px 7px rgba(225, 37, 27, .25));
}

/* =========================================================
FLOATING INFORMATION CARDS
========================================================= */
.rail-hero__float-card {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 15px;
	border: 1px solid rgba(225, 37, 27, 0.10);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.93);
	box-shadow: var(--rail-shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition:
		transform .25s ease,
		box-shadow .25s ease;
}
.rail-hero__float-card:hover {
	box-shadow: var(--rail-shadow-hover);
}
.rail-hero__float-icon {
	width: 37px;
	height: 37px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(225, 37, 27, 0.09);
	color: var(--rail-primary);
}
.rail-hero__float-icon svg {
	width: 19px;
	height: 19px;
}
.rail-hero__float-title {
	margin: 0 0 3px;
	color: #292B2E;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
}
.rail-hero__float-sub {
	margin: 0;
	color: #7B8085;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.3;
}

/* Card positions */
.rail-hero__float-card--station {
	top: 7%;
	left: 5%;

	animation: railFloatOne 5s ease-in-out infinite;
}
.rail-hero__float-card--info {
	top: 42%;
	right: 1%;

	animation: railFloatTwo 5.5s ease-in-out infinite;
}
.rail-hero__float-card--train {
	left: 23%;
	bottom: 4%;
	animation: railFloatThree 6s ease-in-out infinite;
}

/* Floating animations */
@keyframes railFloatOne {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes railFloatTwo {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(7px);
	}
}

@keyframes railFloatThree {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

/* =========================================================
RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1050px) {
	.rail-hero {
		padding: 55px 30px;
	}
	.rail-hero__container {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.rail-hero__content {
		max-width: 760px;
		margin: 0 auto;
		text-align: center;
	}
	.rail-hero__eyebrow {
		justify-content: center;
	}
	.rail-hero__subtext {
		margin-left: auto;
		margin-right: auto;
	}
	.rail-hero__actions {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	.rail-hero__trust {
		justify-content: center;
	}
	.rail-hero__visual {
		width: 100%;
		max-width: 780px;
		margin: 0 auto;
		min-height: 430px;
	}
}

/* =========================================================
RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 700px) {
	.rail-hero {
		padding: 48px 18px 38px;
	}
	.rail-hero__container {
		display: block;
	}
	.rail-hero__heading {
		font-size: clamp(36px, 10vw, 48px);
		letter-spacing: -1.5px;
	}
	.rail-hero__heading-highlight {
		white-space: normal;
	}
	.rail-hero__subtext {
		margin-top: 19px;
		font-size: 15px;
		line-height: 1.65;
	}
	.rail-hero__actions {
		display: flex;
		flex-direction: column;
		gap: 11px;
	}
	.rail-search-form {
		min-height: 55px;
	}
	.rail-search-field {
		height: 55px;
		padding-left: 15px;
	}
	.rail-search-submit {
		padding: 0 15px;
		font-size: 12px;
	}
	.rail-hero__phone {
		width: 100%;
		min-height: 58px;
		justify-content: center;
		box-sizing: border-box;
	}
	.rail-hero__visual {
		min-height: 330px;
		margin-top: 15px;
	}
	.rail-hero__float-card {
		padding: 9px 11px;
	}
	.rail-hero__float-icon {
		width: 31px;
		height: 31px;
	}
	.rail-hero__float-title {
		font-size: 10px;
	}
	.rail-hero__float-sub {
		font-size: 8px;
	}
	.rail-hero__float-card--station {
		top: 4%;
		left: 0;
	}
	.rail-hero__float-card--info {
		top: 42%;
		right: 0;
	}
	.rail-hero__float-card--train {
		left: 8%;
		bottom: 2%;
	}
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
	.rail-hero {
		padding-left: 14px;
		padding-right: 14px;
	}
	.rail-hero__eyebrow {
		font-size: 10px;
		letter-spacing: 1.4px;
	}
	.rail-hero__heading {
		font-size: 36px;
	}
	.rail-hero__subtext {
		font-size: 14px;
	}
	.rail-hero__trust {
		gap: 12px;
		font-size: 10px;
	}
	.rail-hero__visual {
		min-height: 280px;
	}
	.rail-hero__float-card {
		transform: scale(.86);
	}
	.rail-hero__float-card--station {
		left: -12px;
	}
	.rail-hero__float-card--info {
		right: -15px;
	}
	.rail-hero__float-card--train {
		left: -5px;
	}
}

/* =========================================================
ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.rail-hero__float-card,
	.rail-hero__train {
		animation: none !important;
	}
	.rail-search-submit,
	.rail-hero__phone,
	.rail-hero__float-card {
		transition: none !important;
	}
}