/* 
  RETRO ROADTRIP EXPERIENCE DESIGN SYSTEM 
  Premium Driving School Template
*/

:root {
  /* Core Colors */
  --vintage-cream: #F4EBD9;
  --burnt-orange: #CC5A3A;
  --mustard-yellow: #E8A838;
  --faded-teal: #4A8E8B;
  --retro-red: #D64545;
  --dusty-brown: #6B4C3A;
  --sunset-peach: #EAA88C;

  /* Accent Colors */
  --vintage-blue: #5C7B89;
  --motel-pink: #D988A1;
  --signboard-green: #6C8E68;
  --ink-black: #2C2C2C;

  --font-display: 'Bebas Neue', cursive;
  --font-handwritten: 'Caveat', cursive;
  --font-body: 'Outfit', sans-serif;
  
  --transition-fast: 0.2s ease-in-out;
  --transition-smooth: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base Styles */
body {
  font-family: var(--font-body);
  background-color: var(--vintage-cream);
  color: var(--ink-black);
  overflow-x: hidden;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dusty-brown);
}

.handwritten {
  font-family: var(--font-handwritten);
  font-size: 2.5rem;
  color: var(--retro-red);
  transform: rotate(-5deg);
  display: inline-block;
  text-transform: none;
  letter-spacing: 0;
}

/* Typography Utilities */
.text-orange { color: var(--burnt-orange) !important; }
.text-yellow { color: var(--mustard-yellow) !important; }
.text-teal { color: var(--faded-teal) !important; }
.text-red { color: var(--retro-red) !important; }
.text-cream { color: var(--vintage-cream) !important; }
.text-dusty { color: var(--dusty-brown) !important; }
.text-dark { color: var(--ink-black) !important; }

.bg-cream { background-color: var(--vintage-cream) !important; }
.bg-teal { background-color: var(--faded-teal) !important; }
.bg-mustard { background-color: var(--mustard-yellow) !important; }
.bg-dusty { background-color: var(--dusty-brown) !important; }
.bg-orange { background-color: var(--burnt-orange) !important; }

/* Scrapbook Elements */
.scrapbook-card {
  background: #FFF;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
  position: relative;
  border: 1px solid #E0D5C1;
  transition: var(--transition-smooth);
}
.scrapbook-card::before {
  content: '';
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 25px;
  background: rgba(230, 220, 200, 0.8);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  z-index: 2;
  transform: translateX(-50%) rotate(-2deg);
}

.postcard {
  background: #FFF;
  padding: 15px;
  border: 10px solid #FFF;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  transform: rotate(2deg);
  transition: var(--transition-smooth);
}
.postcard:nth-child(even) { transform: rotate(-2deg); }
.postcard:hover { transform: rotate(0) scale(1.05); z-index: 10; }

.sticker {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--mustard-yellow);
  color: var(--ink-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-align: center;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
  border: 3px dashed #FFF;
  z-index: 5;
  transform: rotate(15deg);
  transition: var(--transition-fast);
}
.sticker:hover { transform: rotate(0deg) scale(1.1); }

/* Torn Paper Dividers */
.torn-paper-top {
  position: absolute; top: -10px; left: 0; width: 100%; height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 20" preserveAspectRatio="none"><path d="M0,20 L0,0 C100,20 200,0 300,20 C400,0 500,20 600,0 C700,20 800,0 900,20 C1000,0 1100,20 1200,0 L1200,20 Z" fill="%23F4EBD9"/></svg>') repeat-x;
  background-size: 100px 20px;
  z-index: 10;
}
.torn-paper-bottom {
  position: absolute; bottom: -10px; left: 0; width: 100%; height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 20" preserveAspectRatio="none"><path d="M0,0 L0,20 C100,0 200,20 300,0 C400,20 500,0 600,20 C700,0 800,20 900,0 C1000,20 1100,0 1200,20 L1200,0 Z" fill="%23F4EBD9"/></svg>') repeat-x;
  background-size: 100px 20px;
  z-index: 10;
}

/* Custom Buttons */
.btn-retro {
  background: var(--burnt-orange);
  color: #FFF;
  font-family: var(--font-display);
  font-size: 1.5rem;
  padding: 10px 30px;
  border: 3px solid var(--dusty-brown);
  border-radius: 8px;
  position: relative;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition-fast);
  box-shadow: 4px 4px 0px var(--dusty-brown);
}
.btn-retro:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--dusty-brown);
  color: #FFF;
}
.btn-retro:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--dusty-brown);
}

.btn-signboard {
  background: var(--mustard-yellow);
  color: var(--ink-black);
  border: 3px solid var(--ink-black);
  border-radius: 0;
  box-shadow: 5px 5px 0px var(--ink-black);
}
.btn-signboard:hover {
  background: var(--vintage-cream);
  color: var(--ink-black);
}

/* Navigation */
.navbar-retro {
  background: var(--vintage-cream);
  border-bottom: 4px solid var(--dusty-brown);
  padding: 15px 0;
  transition: var(--transition-smooth);
  z-index: 1050;
}
.nav-link {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--dusty-brown) !important;
  margin: 0 10px;
  position: relative;
}
.nav-link:hover, .nav-link.active {
  color: var(--burnt-orange) !important;
}
.nav-link::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 100%; height: 3px;
  background: var(--burnt-orange);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s ease;
}
.nav-link:hover::before { transform: scaleX(1); transform-origin: left; }

.dropdown-menu {
  background: var(--vintage-cream);
  border: 3px solid var(--dusty-brown);
  border-radius: 0;
  box-shadow: 4px 4px 0px var(--dusty-brown);
  padding: 10px;
  margin-top: 10px;
}
.dropdown-item {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--dusty-brown);
  transition: var(--transition-fast);
  padding: 8px 15px;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--mustard-yellow);
  color: var(--ink-black);
}

/* Hero Section */
.hero-retro {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px;
  background: linear-gradient(180deg, var(--sunset-peach) 0%, var(--vintage-cream) 100%);
}
.hero-image-container {
  position: relative;
  z-index: 1;
}
.hero-img {
  width: 100%;
  border: 15px solid #FFF;
  box-shadow: 10px 15px 30px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}
.hero-title {
  font-size: 6rem;
  line-height: 0.9;
  color: var(--retro-red);
  text-shadow: 3px 3px 0px var(--vintage-cream), 6px 6px 0px var(--dusty-brown);
  margin-bottom: 20px;
}
.hero-subtitle {
  font-size: 1.5rem;
  color: var(--dusty-brown);
  max-width: 500px;
  margin-bottom: 30px;
  font-weight: 500;
}

/* Route Badge */
.route-badge {
  background: var(--vintage-cream);
  border: 3px solid var(--ink-black);
  border-radius: 50% 50% 10% 10%;
  width: 100px; height: 110px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0px var(--ink-black);
  font-family: var(--font-display);
  position: absolute;
}
.route-badge span { font-size: 0.8rem; letter-spacing: 1px; }
.route-badge strong { font-size: 2.5rem; line-height: 1; }

/* Sections */
.section-padding { padding: 100px 0; position: relative; }
.section-title {
  font-size: 4rem;
  color: var(--dusty-brown);
  position: relative;
  display: inline-block;
  margin-bottom: 40px;
}
.section-title::after {
  content: ''; position: absolute;
  bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 60%; height: 4px;
  background: var(--burnt-orange);
  border-radius: 2px;
}

/* Footer */
.footer-retro {
  background: var(--dusty-brown);
  color: var(--vintage-cream);
  padding: 80px 0 30px;
  position: relative;
}
.footer-retro .torn-paper-top { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 20" preserveAspectRatio="none"><path d="M0,20 L0,0 C100,20 200,0 300,20 C400,0 500,20 600,0 C700,20 800,0 900,20 C1000,0 1100,20 1200,0 L1200,20 Z" fill="%236B4C3A"/></svg>'); }
.footer-title { color: var(--mustard-yellow); font-size: 2rem; margin-bottom: 20px; }
.footer-link { color: var(--vintage-cream); font-size: 1.1rem; text-decoration: none; display: block; margin-bottom: 10px; transition: var(--transition-fast); }
.footer-link:hover { color: var(--sunset-peach); padding-left: 5px; }
.footer-bottom { border-top: 1px dashed rgba(255,255,255,0.2); padding-top: 20px; margin-top: 40px; text-align: center; }

@media (max-width: 991px) {
  .hero-title { font-size: 4rem; }
}


/* Lenis required CSS */
html.lenis, html.lenis body { height: auto; width: 100vw; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }