/*
  Global stylesheet for Shelbyville Supply Company.
  The design channels a dbrand-inspired aesthetic with dark backgrounds,
  minimal embellishments and clean typography. Colour variables live in the
  root for easy updates. All sections are fully responsive using CSS grid
  and flexbox where appropriate. Images in the heritage section maintain
  consistent aspect ratios and gain a gentle zoom effect on hover.
*/

:root {
  /* Colour palette */
  --color-bg: #0d0d0d;
  --color-bg-light: #1a1a1a;
  --color-fg: #f5f5f5;
  --color-muted: #c7c7c7;
  --color-accent: #e5c609;      /* golden yellow accent reminiscent of dbrand */
  --color-accent-light: #f4d94b; /* lighter variant for hover states */
  /* Typography */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header and navigation */
.header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-bg-light);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-fg);
}

.nav {
  position: relative;
}

.nav__toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  position: relative;
  display: none;
  z-index: 2;
}
.nav__icon,
.nav__icon::before,
.nav__icon::after {
  display: block;
  background-color: var(--color-fg);
  height: 2px;
  width: 100%;
  position: absolute;
  content: '';
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav__icon {
  top: 50%;
  transform: translateY(-50%);
}
.nav__icon::before {
  top: -0.5rem;
}
.nav__icon::after {
  top: 0.5rem;
}

.nav__menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
}

.nav__item a {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.875rem;
  transition: color 0.3s ease;
  color: var(--color-muted);
}
.nav__item a:hover {
  color: var(--color-accent);
}

/* Mobile navigation behaviour */
@media (max-width: 768px) {
  .nav__toggle {
    display: block;
  }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    flex-direction: column;
    align-items: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-bottom: 1px solid var(--color-bg-light);
  }
  .nav__menu.nav__menu--open {
    max-height: 20rem;
  }
  .nav__item {
    width: 100%;
    text-align: center;
  }
  .nav__item a {
    padding: 0.75rem 0;
  }
}

/* Hamburger to close icon animation */
.nav__toggle[aria-expanded="true"] .nav__icon {
  background-color: transparent;
}
.nav__toggle[aria-expanded="true"] .nav__icon::before {
  transform: translateY(0.5rem) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__icon::after {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/* Hero section */
.hero {
  background-image: url('Screenshot 2025-07-23 at 3.06.05 PM.png');
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 8rem 0;
  text-align: center;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: -1;
}
.hero__text h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--color-fg);
}
.hero__text p {
  margin-bottom: 2rem;
  font-size: 1.125rem;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-muted);
}
.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 0.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.btn--primary:hover {
  background-color: var(--color-accent-light);
}
.btn--secondary {
  background-color: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}
.btn--secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Sections */
.products {
  padding: 6rem 0;
  background-color: var(--color-bg-light);
  text-align: center;
}
.features {
  padding: 6rem 0;
  background-color: var(--color-bg);
  text-align: center;
}
.heritage {
  padding: 6rem 0;
  background-color: var(--color-bg-light);
  text-align: center;
}
.cta {
  padding: 4rem 0;
  background-color: var(--color-bg);
  text-align: center;
}
.section__title {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-fg);
}
.section__subtitle {
  font-size: 1rem;
  color: var(--color-muted);
  margin-bottom: 2rem;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* Product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.product-card {
  background-color: #222;
  padding: 2rem;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.product-card i {
  margin-bottom: 1rem;
  color: var(--color-accent);
}
.product-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-fg);
}
.product-card p {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.feature {
  text-align: center;
  padding: 2rem;
  background-color: #222;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.feature i {
  margin-bottom: 1rem;
  color: var(--color-accent);
}
.feature h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-fg);
}
.feature p {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Heritage grid */
.heritage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.heritage-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #222;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.heritage-item img {
  width: 100%;
  height: 100%;
  /* Use contain to ensure entire logos remain visible regardless of aspect ratio */
  object-fit: contain;
  display: block;
  padding: 1.5rem;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.heritage-item:hover img {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Call-to-action */
.cta__container h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-fg);
}
.cta__container p {
  font-size: 0.875rem;
  margin-bottom: 2rem;
  color: var(--color-muted);
}
.cta__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.cta__form input[type="email"] {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  border: none;
  flex: 1 1 250px;
  max-width: 300px;
  background-color: #222;
  color: var(--color-fg);
}
.cta__form input[type="email"]::placeholder {
  color: #777;
}

/* Footer */
.footer {
  padding: 2rem 0;
  background-color: var(--color-bg-light);
  font-size: 0.75rem;
  color: var(--color-muted);
}
.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer__menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.footer__item a {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #888;
  transition: color 0.3s ease;
}
.footer__item a:hover {
  color: var(--color-accent);
}