/* Rent Wash Gear — custom styles (Tailwind CDN handles utilities) */
:root { --brand: #ea580c; --brand-dark: #c2410c; --ink: #0f172a; --accent: #f59e0b; }

.hero-gradient {
  background: linear-gradient(120deg, #0f172a 0%, #1e293b 45%, #7c2d12 100%);
}
.hero-banner-img {
  background-image: url('../images/hero-banner.svg');
  background-size: cover;
  background-position: center;
}

.btn-primary {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  transition: background 0.2s ease;
}
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  border: 2px solid #e2e8f0;
  transition: border-color 0.2s ease;
}
.btn-secondary:hover { border-color: var(--brand); color: var(--brand-dark); }

.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12); }

/* FAQ accordions */
details.faq {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
details.faq summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand);
  flex-shrink: 0;
}
details.faq[open] summary::after { content: '–'; }
details.faq .faq-body { padding: 0 1.25rem 1.25rem; color: #475569; }

/* Forms */
.form-label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--ink); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: #fff;
  color: var(--ink);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 2px solid var(--brand);
  border-color: var(--brand);
}
.form-error { color: #dc2626; font-size: 0.875rem; margin-top: 0.25rem; }
.form-success {
  background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46;
  border-radius: 0.5rem; padding: 1rem; margin-top: 1rem;
}

/* Article typography */
.article-body { color: #334155; line-height: 1.75; }
.article-body h2 { font-size: 1.5rem; font-weight: 800; color: var(--ink); margin: 2rem 0 0.75rem; }
.article-body h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 1.5rem 0 0.5rem; }
.article-body p { margin-bottom: 1rem; }
.article-body ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.article-body ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.article-body li { margin-bottom: 0.375rem; }
.article-body a { color: var(--brand-dark); text-decoration: underline; }
.article-body a:hover { color: var(--brand); }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid #e2e8f0; padding: 0.625rem 0.875rem; text-align: left; }
.article-body th { background: var(--ink); color: #fff; }
.article-body tbody tr:nth-child(even) { background: #f8fafc; }
.article-body blockquote {
  border-left: 4px solid var(--brand);
  background: #fff7ed;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
}
.toc { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 0.375rem; }
.toc a { color: var(--brand-dark); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Spec sheets on rental pages */
.spec-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; }
.spec-table th, .spec-table td { border: 1px solid #e2e8f0; padding: 0.625rem 0.875rem; text-align: left; }
.spec-table th { background: var(--ink); color: #fff; }
.spec-table tbody tr:nth-child(even) { background: #f8fafc; }

.checklist { list-style: none; padding: 0; }
.checklist li { padding-left: 1.75rem; position: relative; margin-bottom: 0.5rem; }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: #16a34a; font-weight: 800; }
.checklist.no li::before { content: '✕'; color: #dc2626; }

/* Testimonials */
.testimonial { display: none; }
.testimonial.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.testimonial-dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: #cbd5e1; cursor: pointer; }
.testimonial-dot.active { background: var(--brand); }

@media (max-width: 640px) {
  .article-body table, .spec-table { font-size: 0.85rem; }
  .article-body th, .article-body td, .spec-table th, .spec-table td { padding: 0.5rem; }
}

/* Nav dropdown hover bridge: the Rentals menu sits mt-2 (0.5rem) below its
   button, and that gap is outside the hover area, so the menu vanished while
   moving the cursor down to the links. This invisible bridge covers the gap
   so the menu stays open until a link is chosen. */
.group > div.absolute::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}