/*
Theme Name: Electric Off-Road Rentals Mega Theme 1 (Dark)
Theme URI: https://electricoffroadrentals.com
Author: Electric Off-Road Rentals
Author URI: https://electricoffroadrentals.com
Description: Full single-page theme for Electric Off-Road Rentals (customer-facing).
Version: 4.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: electric-off-road-rentals
*/


:root {
  --bg: #020303;
  --bg-soft: #050807;
  --bg-elevated: #101310;
  --primary: #00ff5a;
  --primary-soft: rgba(0, 255, 90, 0.15);
  --text: #f5f5f5;
  --muted: #b0b7b0;
  --border: #222823;
}


/* Global */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  font-family: "Poppins", system-ui, sans-serif;
  background: radial-gradient(circle at top, var(--bg-soft) 0, var(--bg) 40%, #000 100%);
  color: var(--text);
  scroll-behavior: smooth;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.page { min-height:100vh; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* Header */
header {
  position:fixed; top:0; left:0; width:100%; z-index:50;
  background:linear-gradient(to bottom, rgba(0,0,0,0.96), rgba(0,0,0,0.85), transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.nav { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0; }
.nav-left { display:flex; align-items:center; gap:0.8rem; }
.brand-logo {
  width:52px; height:52px; border-radius:999px; overflow:hidden;
  border:2px solid var(--primary); background:#020302;
}
.brand-logo img { width:100%; height:100%; object-fit:cover; }
.brand-text { display:flex; flex-direction:column; gap:1px; }
.brand-text span:first-child {
  font-size:0.98rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
}
.brand-text span:last-child { font-size:0.78rem; color:var(--muted); }
.nav-links {
  display:flex; align-items:center; gap:1.2rem;
  font-size:0.8rem; text-transform:uppercase; letter-spacing:0.12em;
}
.nav-links a { color:var(--muted); position:relative; padding-bottom:0.15rem; }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--primary); transition:width 0.2s ease;
}
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }
.nav-toggle { display:none; border:none; background:transparent; color:#fff; font-size:1.5rem; cursor:pointer; }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.6rem 1.4rem; border-radius:999px;
  border:1px solid var(--primary);
  background:radial-gradient(circle at top left, #00ff8d, #00b94b);
  color:#020302; font-size:0.82rem; font-weight:600; cursor:pointer;
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.55rem 1.3rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(3,6,4,0.92);
  color:var(--muted); font-size:0.8rem; cursor:pointer;
}

/* Hero */
main { padding-top:4.5rem; }
.hero {
  position:relative; min-height:92vh; display:flex; align-items:center;
  padding:3.5rem 0 3rem; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url("https://electricoffroadrentals.com/wp-content/uploads/2025/11/Buffalo-Bayou-trails.jpg");
  background-size:cover; background-position:center;
  opacity:0.5; z-index:-2;
}
.hero-overlay {
  position:absolute; inset:0;
  background:radial-gradient(circle at top, rgba(0,255,90,0.4), rgba(0,0,0,0.9));
  z-index:-1;
}
.hero .container { position:relative; z-index:1; }
.hero-grid {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:2.5rem; align-items:center;
}
.eyebrow {
  font-size:0.78rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--primary); margin-bottom:0.9rem;
}
.hero-title { font-size:clamp(2.4rem,3.6vw,3.4rem); line-height:1.05; margin-bottom:0.9rem; }
.hero-title .accent { color:var(--primary); }
.hero-subtitle { font-size:0.95rem; max-width:540px; color:var(--muted); margin-bottom:1.5rem; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:0.8rem; margin-bottom:1.7rem; }
.hero-meta { display:flex; flex-wrap:wrap; gap:1.5rem; font-size:0.8rem; color:var(--muted); }
.hero-meta strong { color:var(--primary); }
.hero-card {
  background:rgba(0,0,0,0.75); border-radius:16px;
  border:1px solid rgba(255,255,255,0.08); padding:1.4rem 1.5rem;
}
.hero-fleet-row {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.8rem;
}
.hero-fleet-card { font-size:0.78rem; color:var(--muted); }

/* Sections */
section { padding:3.5rem 0; }
section.alt {
  background:radial-gradient(circle at top, rgba(0,255,120,0.08), #020302 50%, #000 100%);
}
.section-header { margin-bottom:2rem; }
.section-kicker {
  font-size:0.75rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--primary); margin-bottom:0.4rem;
}
.section-title { font-size:1.6rem; margin-bottom:0.4rem; }
.section-subtitle { font-size:0.9rem; color:var(--muted); max-width:640px; }

/* Fleet */
.fleet-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.4rem;
}
.vehicle-card {
  background:var(--bg-elevated); border-radius:16px;
  border:1px solid var(--border); padding:1.2rem 1.3rem 1.3rem;
}
.vehicle-image { border-radius:14px; overflow:hidden; margin-bottom:0.6rem; }
.vehicle-name { font-size:1rem; font-weight:600; margin-bottom:0.25rem; }
.vehicle-desc { font-size:0.85rem; color:var(--muted); margin-bottom:0.5rem; }
.vehicle-price { font-size:0.9rem; font-weight:600; }
.vehicle-price span { display:block; font-size:0.8rem; font-weight:400; color:var(--muted); }

/* Grids & cards */
.gallery-grid, .pricing-grid, .locations-grid, .containers-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.4rem;
}
.gallery-item {
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08); background:#050706;
}
.gallery-item img { width:100%; height:220px; object-fit:cover; }
.gallery-caption { padding:0.8rem 1rem 1rem; font-size:0.82rem; color:var(--muted); }
.card-simple {
  background:var(--bg-elevated); border-radius:16px;
  border:1px solid var(--border); padding:1.3rem 1.4rem 1.4rem;
  font-size:0.9rem; color:var(--muted);
}

/* Layouts & forms */
.booking-layout, .two-col, .contact-layout {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:2rem; align-items:flex-start;
}
.booking-form { display:grid; gap:0.9rem; font-size:0.85rem; }
.field { display:flex; flex-direction:column; gap:0.18rem; }
.field label { font-size:0.8rem; }
.field input, .field select, .field textarea {
  background:#050706; border-radius:10px; border:1px solid var(--border);
  color:var(--text); padding:0.55rem 0.6rem; font-size:0.85rem;
}
.field textarea { min-height:90px; resize:vertical; }
.booking-note { font-size:0.75rem; color:var(--muted); margin-top:0.6rem; }

.list-check { list-style:none; font-size:0.85rem; color:var(--muted); }
.list-check li { display:flex; gap:0.4rem; margin-bottom:0.35rem; }
.list-check .icon { color:var(--primary); margin-top:2px; }

.contact-detail p { font-size:0.85rem; color:var(--muted); margin-bottom:0.35rem; }

/* Footer */
footer {
  border-top:1px solid rgba(255,255,255,0.08);
  padding:1.5rem 0 2.2rem;
  font-size:0.78rem; color:var(--muted);
}
.footer-row {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:0.8rem;
}
footer a { color:var(--muted); }
footer a:hover { color:var(--primary); }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); }
  .booking-layout, .two-col, .contact-layout {
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:768px) {
  .nav-links {
    display:none; position:absolute; top:58px; right:1.5rem;
    flex-direction:column; align-items:flex-start;
    background:#050706; border-radius:14px;
    padding:0.75rem 0.9rem; border:1px solid var(--border);
  }
  .nav-links.show { display:flex; }
  .nav-toggle { display:block; }
}