/* Ontario Bike Paths - Custom overrides for Hyperspace */
/* Hyperspace defaults to dark purple (#312450) body with white text. */
/* We flip it to light background with dark text, keeping only header/footer/intro dark. */

:root {
  --forest: #2E7D32;
  --forest-dark: #1B5E20;
  --trail-orange: #FF6F00;
  --trail-orange-dark: #E65100;
  --near-white: #FAFAFA;
  --green-tint: #E8F5E9;
  --text: #212121;
  --text-light: #555;
}

/* === GLOBAL: flip Hyperspace dark theme to light === */
body {
  background-color: var(--near-white) !important;
  color: var(--text) !important;
}

body, input, select, textarea {
  font-family: 'Libre Franklin', 'Helvetica Neue', sans-serif;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', 'Helvetica Neue', sans-serif;
  color: var(--text) !important;
}

a {
  color: var(--forest);
  border-bottom-color: rgba(46,125,50,0.3);
}

a:hover {
  color: var(--trail-orange);
  border-bottom-color: var(--trail-orange);
}

p, li, td, th, blockquote, label, span {
  color: var(--text);
}

/* === DARK SECTIONS: header, sidebar, footer, intro keep white text === */

/* Sidebar (homepage only) */
#sidebar {
  background: var(--forest-dark) !important;
}

#sidebar nav a {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Archivo', sans-serif;
}

#sidebar nav a:hover,
#sidebar nav a.active {
  color: #fff !important;
}

/* Header bar (inner pages) */
#header {
  background: var(--forest) !important;
}

#header .title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  color: #fff !important;
}

#header nav ul li a {
  color: rgba(255,255,255,0.7) !important;
  font-family: 'Libre Franklin', sans-serif;
}

#header nav ul li a:hover,
#header nav ul li a.active {
  color: #fff !important;
}

/* Homepage intro - bike path hero image */
#intro {
  background-image: none !important;
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.5)), url('/images/hero-bike-path.jpg') center center / cover no-repeat !important;
  background-attachment: fixed !important;
}

#intro h1, #intro h2, #intro h3 {
  color: #fff !important;
  font-family: 'Archivo', sans-serif;
}

#intro p {
  color: rgba(255,255,255,0.85) !important;
}

#intro a {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.4) !important;
}

#intro .button {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
}

#intro .button:hover {
  background-color: var(--trail-orange) !important;
  border-color: var(--trail-orange) !important;
}

/* Footer */
#footer {
  background-color: var(--forest-dark) !important;
}

#footer .menu li,
#footer .menu li a,
#footer p, #footer span {
  color: rgba(255,255,255,0.5) !important;
}

#footer .menu li a {
  color: rgba(255,255,255,0.65) !important;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.9em;
}

#footer .menu li a:hover {
  color: var(--trail-orange) !important;
}

/* === LIGHT SECTIONS: all wrapper content areas === */

/* Style1 wrappers (non-intro) */
.wrapper.style1:not(.fullscreen),
.wrapper.style1-alt {
  background-color: var(--near-white) !important;
  color: var(--text) !important;
}

.wrapper.style1:not(.fullscreen) h1,
.wrapper.style1:not(.fullscreen) h2,
.wrapper.style1:not(.fullscreen) h3,
.wrapper.style1:not(.fullscreen) p,
.wrapper.style1:not(.fullscreen) li {
  color: var(--text) !important;
}

/* Style2 - spotlights section (keep dark for contrast) */
.wrapper.style2 {
  background-color: var(--forest) !important;
}

.wrapper.style2 .spotlights section .content {
  background-color: var(--near-white) !important;
}

.wrapper.style2 .spotlights section .content .inner h2,
.wrapper.style2 .spotlights section .content .inner p {
  color: var(--text) !important;
}

.wrapper.style2 .spotlights section .content .inner a {
  color: var(--forest) !important;
}

/* Style3 - features grid */
.wrapper.style3 {
  background-color: var(--green-tint) !important;
  color: var(--text) !important;
}

.wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 p,
.wrapper.style3 .features section h3,
.wrapper.style3 .features section p {
  color: var(--text) !important;
}

.wrapper.style3 .features section span.icon {
  color: var(--forest) !important;
}

/* === MAIN CONTENT AREA (generic/article pages) === */
#main.wrapper {
  background-color: var(--near-white) !important;
  color: var(--text) !important;
}

#main .inner h1.major {
  color: var(--text) !important;
  border-bottom-color: var(--forest) !important;
}

#main .inner h2 {
  color: var(--text) !important;
  font-size: 1.4em;
  margin-top: 1.5em;
}

#main .inner h3 {
  color: var(--text) !important;
  font-size: 1.15em;
  margin-top: 1.25em;
}

#main .inner p {
  color: var(--text) !important;
  line-height: 1.8;
}

#main .inner li {
  color: var(--text) !important;
}

#main .inner a {
  color: var(--forest) !important;
  border-bottom-color: rgba(46,125,50,0.3) !important;
}

#main .inner a:hover {
  color: var(--trail-orange) !important;
  border-bottom-color: var(--trail-orange) !important;
}

#main .inner img {
  border-radius: 6px;
}

#main .inner strong {
  color: var(--text) !important;
}

/* === BUTTONS === */
.button {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
}

.button.primary,
input[type="submit"].primary {
  background-color: var(--trail-orange) !important;
  border-color: var(--trail-orange) !important;
  color: #fff !important;
}

.button.primary:hover {
  background-color: var(--trail-orange-dark) !important;
  border-color: var(--trail-orange-dark) !important;
}

.button:not(.primary) {
  color: var(--forest) !important;
  border-color: var(--forest) !important;
}

.button:not(.primary):hover {
  background-color: rgba(46,125,50,0.08) !important;
}

/* === FEATURES GRID === */
.features section span.icon {
  color: var(--forest) !important;
}

.features section h3 {
  font-family: 'Archivo', sans-serif;
}

/* === FORMS (if any) === */
input[type="text"], input[type="email"], textarea, select {
  background-color: #fff !important;
  color: var(--text) !important;
  border-color: #ccc !important;
}

label {
  color: var(--text) !important;
}

/* === ROUTE INFO CARD === */
.route-info {
  background: var(--green-tint);
  border-left: 4px solid var(--forest);
  padding: 1.25em 1.75em;
  margin: 1.5em 0;
  border-radius: 0 6px 6px 0;
}

.route-info h3 {
  margin-top: 0;
  font-size: 1em;
  color: var(--forest-dark) !important;
}

.route-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.route-info li {
  padding: 0.25em 0;
  font-size: 0.95em;
  color: var(--text) !important;
}

.route-info li strong {
  color: var(--text) !important;
}

/* === TOWN CARD === */
.town-card {
  background: var(--green-tint);
  border-left: 4px solid var(--trail-orange);
  padding: 1.25em 1.75em;
  margin: 2em 0;
  border-radius: 0 6px 6px 0;
}

.town-card h3 {
  margin-top: 0;
  font-size: 1.05em;
  color: var(--forest-dark) !important;
}

.town-card p {
  color: var(--text) !important;
}

.town-card a {
  color: var(--forest) !important;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
}

/* === RESPONSIVE === */
@media screen and (max-width: 736px) {
  #main .inner h1.major {
    font-size: 1.75em;
  }
}