/* ===== RIVIERA BIKE SHARED STYLES ===== */
/* This file provides consistent styling across all pages */

:root {
  --bg: #0e0f11;         /* site background */
  --fg: #eae9e6;         /* main text */
  --muted: #bdb9b3;      /* secondary text */
  --brand: #ffb703;      /* accent */
  --card: #17181b;       /* card background */
  --border: #2a2c31;     /* subtle borders */
}

* { box-sizing: border-box; }
html, body { 
  margin:0; 
  padding:0; 
  background: var(--bg); 
  color: var(--fg); 
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; 
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.container { width: min(1120px, 92vw); margin: 0 auto; }

/* ===== HEADER & NAVIGATION ===== */
header {
  position: sticky; 
  top: 0; 
  z-index: 50; 
  backdrop-filter: saturate(180%) blur(10px);
  background: linear-gradient(to bottom, rgba(14,15,17,.9), rgba(14,15,17,.6));
  border-bottom: 1px solid var(--border);
}
.nav { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding: .8rem 0; 
}
.logo { 
  font-weight:800; 
  letter-spacing:.5px; 
  font-size: 1.2rem;
}
.logo span { color: var(--brand); }

/* Navigation Menu Styles */
.menu { list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }

.menu a, .submenu-toggle, .mobile-toggle {
  font: inherit; 
  color: inherit; 
  background: none; 
  border: 0; 
  padding: .6rem .8rem;
  text-decoration: none; 
  cursor: pointer; 
  border-radius: .5rem;
  transition: background-color 0.2s ease;
}
.menu a:hover, .submenu-toggle:hover, .mobile-toggle:hover { 
  background: #1e2025; 
}
.menu a:focus-visible, .submenu-toggle:focus-visible, .mobile-toggle:focus-visible {
  outline: 2px solid var(--brand); 
  outline-offset: 2px;
}

.has-submenu > .submenu-toggle { 
  display:inline-flex; 
  align-items:center; 
  gap:.35rem; 
  color: var(--muted); 
}
.has-submenu > .submenu-toggle[aria-expanded="true"] { color: var(--fg); }

.submenu { 
  list-style:none; 
  margin:0; 
  padding:.35rem; 
  background: var(--card); 
  border:1px solid var(--border); 
  border-radius:.75rem; 
}
.submenu a { 
  display:block; 
  padding:.5rem .75rem; 
  border-radius:.5rem; 
  white-space:nowrap; 
}
.submenu a:hover { background:#1e2025; }

/* Desktop layout */
@media (min-width: 900px) {
  .mobile-toggle { display:none; }
  .nav-links .menu { display:flex; align-items:center; gap:.25rem; }
  .has-submenu > .submenu { 
    position:absolute; 
    top:100%; 
    left:0; 
    min-width:200px; 
    box-shadow: 0 10px 24px rgba(0,0,0,.25); 
    margin-top:.25rem; 
  }
}

/* Hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .has-submenu > .submenu[hidden] { 
    display:block !important; 
    visibility:hidden; 
    opacity:0; 
    transform: translateY(6px); 
  }
  .has-submenu:hover > .submenu { 
    visibility:visible; 
    opacity:1; 
    transform:none; 
    transition: opacity .16s ease, transform .16s ease; 
  }
}

/* Mobile drawer behavior */
#mobile-drawer[hidden] { display:none; }  /* ⬅️ added */
.mobile-drawer { 
  background: var(--bg); 
  border-bottom: 1px solid var(--border); 
}
.mobile-menu .has-submenu > .submenu { 
  position: static; 
  margin:.25rem 0 0; 
  padding:.25rem; 
}

/* Mobile toggle button */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

@media (max-width: 899px) {
  .mobile-toggle { display: block; }
  .nav-links { display: none; }
  /* drawer visibility controlled by [hidden] attribute now */
}

/* ===== COMMON LAYOUT STYLES ===== */
.section {
  padding: 4rem 0;
}
.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 2rem;
  text-align: center;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
}
.card h2 {
  color: var(--brand);
  margin-bottom: 1rem;
}

/* ===== FOOTER ===== */
footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  text-align: center;
  color: var(--muted);
}