/* ==========================================================================
   Gray Beard Diesel & Auto — custom styles
   Built on Bootstrap 5.3; all colors defined as CSS custom properties.
   ========================================================================== */

:root {
  --gb-dark:        #111827;
  --gb-darker:      #0b1120;
  --gb-mid:         #1f2937;
  --gb-orange:      #f97316;
  --gb-orange-dark: #ea580c;
  --gb-orange-glow: rgba(249, 115, 22, 0.15);
  --gb-text-muted:  #9ca3af;
  --gb-light-bg:    #f9fafb;
}

/* --------------------------------------------------------------------------
   Base
-------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--gb-dark);
  color: #e5e7eb;
}

.text-orange { color: var(--gb-orange) !important; }

/* --------------------------------------------------------------------------
   Utilities
-------------------------------------------------------------------------- */

.letter-spacing-wide { letter-spacing: 0.12em; }

.py-section { padding-top: 5rem; padding-bottom: 5rem; }

.section-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-subtitle {
  max-width: 600px;
  color: var(--gb-text-muted);
}

/* --------------------------------------------------------------------------
   Navbar
-------------------------------------------------------------------------- */

.gb-navbar {
  background-color: rgba(11, 17, 32, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(249, 115, 22, 0.15);
  transition: background-color 0.3s ease;
}

.brand-gray  { color: #e5e7eb; font-weight: 700; font-size: 1.1rem; }
.brand-orange { color: var(--gb-orange); font-weight: 700; font-size: 1.1rem; }

.gb-navbar .nav-link {
  color: #d1d5db;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  transition: color 0.2s;
}

.gb-navbar .nav-link:hover,
.gb-navbar .nav-link.active { color: var(--gb-orange); }

/* --------------------------------------------------------------------------
   Buttons
-------------------------------------------------------------------------- */

.gb-btn-orange {
  background-color: var(--gb-orange);
  color: #fff;
  border: 2px solid var(--gb-orange);
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}

.gb-btn-orange:hover {
  background-color: var(--gb-orange-dark);
  border-color: var(--gb-orange-dark);
  color: #fff;
  transform: translateY(-1px);
}

.gb-btn-outline-orange {
  background-color: transparent;
  color: var(--gb-orange);
  border: 2px solid var(--gb-orange);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.gb-btn-outline-orange:hover {
  background-color: var(--gb-orange);
  color: #fff;
}

.gb-btn-outline-white {
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s;
}

.gb-btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Hero
-------------------------------------------------------------------------- */

.gb-hero {
  min-height: 100vh;
  background:
    linear-gradient(160deg, rgba(11, 17, 32, 0.92) 0%, rgba(17, 24, 39, 0.85) 100%),
    /* Placeholder: replace this URL with a real shop/truck photo */
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1600&q=80') center / cover no-repeat;
  padding-top: 80px; /* navbar offset */
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gb-orange);
  letter-spacing: 0.15em;
}

/* --------------------------------------------------------------------------
   Sections
-------------------------------------------------------------------------- */

.gb-section-dark  { background-color: var(--gb-darker); }
.gb-section-light { background-color: var(--gb-light-bg); color: #111827; }
.gb-section-light .section-title { color: #111827; }

/* --------------------------------------------------------------------------
   Service cards
-------------------------------------------------------------------------- */

.gb-service-card {
  background-color: var(--gb-mid);
  border: 1px solid rgba(249, 115, 22, 0.12);
  border-radius: 0.75rem;
  padding: 2rem 1.75rem;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.gb-service-card:hover {
  border-color: var(--gb-orange);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px var(--gb-orange-glow);
}

.gb-service-icon {
  width: 3.25rem;
  height: 3.25rem;
  background-color: var(--gb-orange-glow);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
  color: var(--gb-orange);
}

.gb-service-card h5 {
  color: #f3f4f6;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.gb-service-card p {
  color: var(--gb-text-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   About
-------------------------------------------------------------------------- */

.gb-about-img-placeholder {
  min-height: 360px;
  background-color: #e5e7eb;
  border: 2px dashed #d1d5db;
}

/* Lift Bootstrap's text-muted to our lighter gray in dark sections.
   Bootstrap sets text-muted with !important so we must match it. */
.gb-section-dark .text-muted,
.gb-footer .text-muted {
  color: var(--gb-text-muted) !important;
}

/* --------------------------------------------------------------------------
   Contact info list
-------------------------------------------------------------------------- */

.gb-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.gb-contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.gb-contact-info li i {
  font-size: 1.2rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Form
-------------------------------------------------------------------------- */

.gb-input {
  background-color: var(--gb-mid);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f3f4f6;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gb-input::placeholder { color: #6b7280; }

.gb-input:focus {
  background-color: var(--gb-mid);
  border-color: var(--gb-orange);
  color: #f3f4f6;
  box-shadow: 0 0 0 3px var(--gb-orange-glow);
  outline: none;
}

.gb-input.is-invalid {
  border-color: #ef4444;
}

/* --------------------------------------------------------------------------
   Footer
-------------------------------------------------------------------------- */

.gb-footer {
  background-color: var(--gb-darker);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gb-footer a:hover { color: var(--gb-orange) !important; }

/* --------------------------------------------------------------------------
   Scrollbar (Chromium)
-------------------------------------------------------------------------- */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gb-darker); }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gb-orange); }