/*
  Wheel Horse Website Stylesheet (Refined Light Theme)

  This stylesheet drives a refined, contemporary aesthetic reminiscent
  of high‑end tech and cycling brands. A pale, unobtrusive background
  allows photography to shine while clear typography guides the eye.
  Accents of ocean blue and soft green provide energy without being
  distracting. The overall feel is polished and trustworthy – more
  akin to browsing a premier retail site than a classified listing.
*/

/* Colour palette */
:root {
  /* Base colours */
  --bg-color: #f5f5f5;        /* soft light grey for the page background */
  --card-bg: #ffffff;         /* crisp white for cards and sections */
  --primary-color: #333333;   /* dark grey for primary text */
  --secondary-color: #ffffff; /* white for navigation and footers */
  --nav-text-color: #333333;  /* dark text for navigation */
  --accent-color: #0070f3;    /* ocean blue accent inspired by modern tech brands */
  --accent-alt: #10b981;      /* soft green accent for secondary actions */
  --border-color: #e5e7eb;    /* light grey for borders */
  --muted-color: #6b7280;     /* muted grey for secondary text */
  --button-bg: var(--accent-color);
  --button-text: #ffffff;
}

/* Base resets */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--primary-color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Navigation bar */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--secondary-color);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

nav .logo img {
  width: 40px;
  height: 40px;
}

nav .logo span {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--nav-text-color);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

nav ul li a {
  color: var(--nav-text-color);
  font-weight: 500;
}

nav ul li a:hover {
  color: var(--accent-color);
}

.btn {
  display: inline-block;
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: var(--accent-alt);
}

/* Section base styling */
section {
  margin: 2.5rem auto;
  padding: 2rem;
  max-width: 1200px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

section h2 {
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

section h3 {
  color: var(--muted-color);
  margin-bottom: 1rem;
  font-weight: 400;
}

/* Cards for posts, reviews, listings */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1.2rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.card h4 {
  color: var(--accent-color);
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.card small {
  color: var(--muted-color);
  display: block;
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

/* Grid layouts */
.grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: #ffffff;
  color: var(--primary-color);
  font-size: 0.95rem;
}

textarea {
  resize: vertical;
}

input[type="file"] {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  background-color: #ffffff;
  color: var(--primary-color);
  border: 1px solid var(--border-color);
}

button,
input[type="submit"] {
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
  background-color: var(--accent-alt);
}

/* Footer */
footer {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border-color);
}

footer a {
  color: var(--accent-color);
  margin: 0 0.5rem;
}

footer .disclaimer {
  font-size: 0.8rem;
  color: var(--muted-color);
  margin-top: 1rem;
  font-style: italic;
}

/* Modals or drop-downs (for categories) */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0.5rem 0;
  z-index: 10;
  min-width: 200px;
}

.dropdown-content a {
  color: var(--primary-color);
  padding: 0.5rem 1rem;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: var(--bg-color);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Toast notifications */
.notification {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 0.8rem 1.2rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  border-left: 4px solid var(--accent-color);
}

.notification.success {
  border-left-color: var(--accent-alt);
}

.notification.error {
  border-left-color: #dc2626;
}