/* ── Cards For Cowboys — style.css (rules + nav shared) ── */
/* Imports theme tokens and base components */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: #1e1610;
  background-color: #e9e0c6;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Nav ── */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.5rem;
  background: #1e1610;
  border-bottom: 2.5px solid #1e1610;
}

nav .logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e9e0c6;
  text-decoration: none;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

nav a {
  color: rgba(233,224,198,0.65);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s;
}

nav a:hover, nav a.active { color: #e9e0c6; }

/* ── Hero ── */
.hero {
  text-align: center;
  padding: 5rem 2rem;
  background: #3a2a1a;
  color: #e9e0c6;
  border-bottom: 2.5px solid #1e1610;
}

.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

.hero .tagline {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  font-style: italic;
  color: #d49848;
}

/* Card slideshow */
.card-slideshow {
  overflow: hidden;
  margin-bottom: 2rem;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.card-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: scroll-cards 40s linear infinite;
}

.card-track img {
  width: 120px;
  border: 2px solid #1e1610;
  box-shadow: 3px 3px 0 #1e1610;
  flex-shrink: 0;
}

@keyframes scroll-cards {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  padding: 0.55rem 1.6rem;
  background: #b87838;
  color: #1e1610;
  font-weight: bold;
  border: 2.5px solid #1e1610;
  box-shadow: 4px 4px 0 #1e1610;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.07s, box-shadow 0.07s;
}

.btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #1e1610;
}

.btn-secondary {
  background: #e9e0c6;
  color: #1e1610;
  font-weight: normal;
  box-shadow: 2px 2px 0 #1e1610;
}

.btn-secondary:hover {
  box-shadow: none;
}

/* ── About section ── */
.about {
  padding: 4rem 2rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.about h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 2rem;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.about > p {
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.about-img {
  display: block;
  max-width: 320px;
  margin: 0 auto 2rem;
  border: 2.5px solid #1e1610;
  box-shadow: 4px 4px 0 #1e1610;
}

.features {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.feature {
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  padding: 1.25rem;
  background: #e9e0c6;
  border: 2.5px solid #1e1610;
  box-shadow: 3px 3px 0 #1e1610;
  text-align: left;
}

.feature h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #1e1610;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.about-cta { margin-top: 2rem; }

/* ── Footer ── */
footer {
  text-align: center;
  padding: 1.25rem;
  background: #1e1610;
  color: rgba(233,224,198,0.5);
  font-size: 0.85rem;
  border-top: 2.5px solid #1e1610;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  nav { flex-direction: column; gap: 0.6rem; }
  nav ul { gap: 1rem; }
  .hero { padding: 3.5rem 1.5rem; }
  .hero h1 { font-size: 2rem; }
  .hero .tagline { font-size: 1rem; }
  .card-track img { width: 90px; }
  .card-track { animation-duration: 30s; }
  .about-img { max-width: 80%; }
  .about h2 { font-size: 1.5rem; }
  .feature { max-width: 100%; }
}