/* ============================================================
   Republic Roofing Co. — Custom Stylesheet
   Extends Tailwind CSS CDN with brand-specific components.
   Last updated: 2026-02-19
   ============================================================ */

/* ── Global ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Mobile navigation ───────────────────────────────────── */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ── Section label ───────────────────────────────────────── */
.section-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #C09A5B;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-gold {
  background: #C09A5B;
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 6px;
  display: inline-block;
  transition: background .2s;
}
.btn-gold:hover { background: #A8834A; }

.btn-outline-gold {
  border: 2px solid #C09A5B;
  color: #C09A5B;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 6px;
  display: inline-block;
  transition: all .2s;
}
.btn-outline-gold:hover { background: #C09A5B; color: #fff; }

/* ── Hero carousel ───────────────────────────────────────── */
.hero-carousel { position: relative; overflow: hidden; }
.carousel-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.carousel-slide.active { opacity: 1; }

/* ── Category carousels (residential page) ──────────────── */
.cat-slide { display: none; }
.cat-slide.active { display: flex; align-items: center; justify-content: center; }

/* ── Accordion (services page) ──────────────────────────── */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-panel.open { max-height: 600px; }

.accordion-btn .chevron { transition: transform 0.3s ease; }
.accordion-btn.open .chevron { transform: rotate(180deg); }
.accordion-btn.open { color: #C09A5B; }

/* ── Homepage hero diagonal divider ─────────────────────── */
.hero-diagonal-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  line-height: 0;
}

/* === MOBILE OPTIMIZATION (iPhone 12–17 primary targets) === */

/* Responsive hero heights — 60vh on mobile (~506px on iPhone 12) */
.hero-carousel { min-height: 60vh; }
@media (min-width: 768px) { .hero-carousel { min-height: 90vh; } }

/* Page hero — interior pages */
.page-hero { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 640px) { .page-hero { padding-top: 4rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) { .page-hero { padding-top: 6rem; padding-bottom: 6rem; } }

/* Full-width CTA on mobile (applies to 390–430px iPhone range) */
@media (max-width: 639px) {
  .btn-gold-full { display: block; text-align: center; width: 100%; }
}

/* Accordion — increase max-height cap to prevent content clipping */
.accordion-panel.open { max-height: 900px; }

/* Category carousel frame — replaces hardcoded min-height:280px inline styles */
.cat-carousel-frame { min-height: 220px; }
@media (min-width: 640px) { .cat-carousel-frame { min-height: 280px; } }

/* Repair photo carousel main image — replaces height:460px inline style */
.repair-carousel-main { height: 240px; }
@media (min-width: 640px) { .repair-carousel-main { height: 340px; } }
@media (min-width: 1024px) { .repair-carousel-main { height: 460px; } }

/* History carousel — replaces height:340px inline style */
.history-carousel-box { height: 240px; }
@media (min-width: 640px) { .history-carousel-box { height: 300px; } }
@media (min-width: 1024px) { .history-carousel-box { height: 340px; } }

/* Glossary alphabet nav — horizontal scroll on mobile, no wrap */
.alpha-nav { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.alpha-nav::-webkit-scrollbar { display: none; }

/* Map iframe responsive height */
.map-iframe { height: 260px; }
@media (min-width: 640px) { .map-iframe { height: 384px; } }
@media (min-width: 1024px) { .map-iframe { height: 450px; } }

/* Safe area padding — iPhone home indicator (models with no home button) */
/* Applies to footer and mobile nav to avoid content hiding behind home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  #mobile-menu { padding-bottom: env(safe-area-inset-bottom); }
}