/* ============================================================
   HelloSun Solar — Responsive Stylesheet
   Breakpoints: 1200px · 1024px · 768px · 480px
   ============================================================ */

/* ---- Hamburger Button (hidden on desktop) ---- */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 201;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: #1B3A5C;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---- Mobile-only founder photo (hidden on desktop) ---- */
.founder-photo-mobile { display: none; }

/* ---- Mobile Nav Overlay ---- */
.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 43, 69, 0.5);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-overlay.active {
  display: block;
  opacity: 1;
}

/* ============================================================
   BREAKPOINT: 1200px — Gentle squeeze
   ============================================================ */
@media (max-width: 1200px) {
  /* Reduce generous desktop padding */
  .hero-content { padding: 60px 60px; }
  .services, .reviews { padding: 60px 48px; }
  .why, .lead { padding: 60px 48px; }
  .vendors { padding: 48px 48px; }
  footer { padding: 48px 48px 28px; }
  .page-header { padding: 56px 48px 48px; }
  .cards-section, .diff-section, .cta-banner { padding: 60px 48px; }
  .combo-section { padding: 60px 48px; }
  .contact-section { padding: 60px 48px; }
  .content { padding: 60px 40px; }
  .portfolio-section { padding: 48px 48px 80px; }
  .problem { padding: 60px 48px; }
  .standard { padding: 60px 48px; }

  /* Reduce nav padding */
  nav { padding: 0 32px; }
  .nav-links { gap: 24px; }
}

/* ============================================================
   BREAKPOINT: 1024px — Tablet landscape / small laptop
   ============================================================ */
@media (max-width: 1024px) {
  /* ---- Navigation → Hamburger ---- */
  /* Raise nav above the overlay so the slide-out panel is tappable */
  nav { z-index: 200; }
  .hamburger { display: flex; }
  .mobile-cta-li { display: list-item !important; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    flex-direction: column;
    padding: 100px 36px 40px;
    gap: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 200;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open {
    right: 0;
  }
  .nav-links li {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    font-size: 1.05rem !important;
  }

  .nav-cta {
    display: none;
  }
  /* Show a CTA inside mobile menu instead */
  .nav-links .mobile-cta {
    display: inline-block;
    margin-top: 20px;
    background: #FD8B21;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
  }

  /* ---- Grids: 4-col → 2-col ---- */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .standard-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }

  /* ---- Grids: 3-col → 2-col ---- */
  .diff-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- Grids: 5-col → 3-col ---- */
  .vendors-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ---- 2-col layouts: stack or tighten ---- */
  .why { grid-template-columns: 1fr !important; gap: 40px !important; }
  .lead { grid-template-columns: 1fr !important; gap: 40px !important; }
  .background { grid-template-columns: 1fr !important; gap: 40px !important; }
  /* Hide desktop sidebar photo; show inline mobile photo instead */
  .background-right { display: none; }
  .founder-photo-mobile {
    display: flex;
    justify-content: center;
    margin: 28px 0 8px;
  }
  .founder-photo-mobile .founder-photo-wrap { width: 220px; height: 220px; }

  /* ---- About: problem & standard sections ---- */
  .problem { padding: 56px 36px; }
  .standard { padding: 56px 36px; }

  /* ---- Remove max-width constraints on mobile ---- */
  .problem-content,
  .standard-intro,
  .cards-intro,
  .section p,
  .services-panel > p,
  .page-header p,
  .cta-strip p,
  .cta-banner h2 { max-width: 100% !important; }

  /* Page header with image → stack */
  .page-header { grid-template-columns: 1fr !important; }
  .page-header-img { max-width: 480px; }

  /* Cards (pain/solution) → stack */
  .card { grid-template-columns: 1fr !important; }

  /* Feature / combo inner → stack */
  .feature-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .combo-inner { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Contact layout */
  .contact-inner { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Delineation (SREC) */
  .delineation { grid-template-columns: 1fr !important; }

  /* ---- Hero ---- */
  .hero { min-height: 560px; }
  .hero-content { max-width: 560px; padding: 56px 48px; }
  .hero-content h1 { font-size: 2.6rem; }

  /* ---- Section padding ---- */
  .services, .reviews { padding: 56px 36px; }
  .vendors { padding: 40px 36px; }
  footer { padding: 44px 36px 24px; }
  .cards-section, .diff-section, .cta-banner { padding: 56px 36px; }
  .combo-section { padding: 56px 36px; }
  .contact-section { padding: 56px 36px; }
  .content { padding: 48px 32px; }
  .portfolio-section { padding: 40px 36px 64px; }

  /* ---- Map ---- */
  #service-map { height: 420px !important; }
}

/* ============================================================
   BREAKPOINT: 768px — Tablet portrait / large phone
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Typography ---- */
  .hero-content h1 { font-size: 2.1rem; }
  .hero-content p { font-size: 1.05rem; }
  h2, .section-title { font-size: 1.7rem !important; }
  h3 { font-size: 1.15rem !important; }

  /* ---- Hero ---- */
  .hero {
    min-height: 480px;
    background-position: center center;
  }
  .hero-content {
    padding: 48px 28px;
    max-width: 100%;
  }

  /* ---- Grids: further collapse ---- */
  .services-grid { grid-template-columns: 1fr !important; }
  .reviews-grid { grid-template-columns: 1fr !important; }
  .diff-grid { grid-template-columns: 1fr !important; }
  .standard-grid { grid-template-columns: 1fr !important; }
  .vendors-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-top { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ---- Section padding ---- */
  nav { padding: 0 20px; height: 68px; }
  .nav-logo img { height: 52px; }
  .nav-logo div { display: none; }
  .services, .reviews { padding: 48px 24px; }
  .why, .lead { padding: 48px 24px; }
  .vendors { padding: 36px 24px; }
  footer { padding: 40px 24px 20px; }
  .page-header { padding: 44px 24px 36px; }
  .cards-section, .diff-section, .cta-banner { padding: 48px 24px; }
  .combo-section { padding: 48px 24px; }
  .contact-section { padding: 48px 24px; }
  .content { padding: 40px 20px; }
  .portfolio-section { padding: 36px 24px 56px; }
  .background { padding: 56px 24px !important; }
  .problem { padding: 48px 24px; }
  .standard { padding: 48px 24px; }

  /* ---- SREC services panel ---- */
  .services-panel { padding: 36px 24px !important; }
  .services-panel .services-grid { grid-template-columns: 1fr !important; }

  /* ---- CTA banner stack on mobile ---- */
  .cta-banner { flex-direction: column; text-align: center; gap: 20px; }

  /* ---- Cards (pain/solution) ---- */
  .card-pain, .card-solution { padding: 32px 24px; }
  .card-solution { border-left: none !important; border-top: 3px solid #FD8B21; }

  /* ---- Contact form ---- */
  .form-row { grid-template-columns: 1fr !important; }
  .contact-form { padding: 32px 24px; }

  /* ---- FAQ ---- */
  .cta-strip { flex-direction: column; text-align: center; gap: 16px; padding: 36px 24px; }

  /* ---- Map ---- */
  #service-map { height: 340px !important; }

  /* ---- Filter bar (Portfolio) ---- */
  .filter-bar { gap: 8px; }
  .filter-bar button { font-size: 0.8rem; padding: 8px 14px; }

  /* ---- Footer ---- */
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* ---- Buttons / CTAs ---- */
  .hero-cta, .cta-button, .lead-cta, .form-submit {
    width: 100%;
    text-align: center;
    padding: 16px 24px;
    font-size: 1rem;
  }

  /* ---- Review cards ---- */
  .review-card { padding: 24px 20px; }

  /* ---- Service cards ---- */
  .service-card { padding: 28px 20px; }

  /* ---- Diff items ---- */
  .diff-item { padding: 20px 16px; }
}

/* ============================================================
   BREAKPOINT: 480px — Small phone
   ============================================================ */
@media (max-width: 480px) {
  /* ---- Typography ---- */
  .hero-content h1 { font-size: 1.75rem; line-height: 1.25; }
  .hero-content p { font-size: 0.95rem; }
  h2, .section-title { font-size: 1.4rem !important; }
  .page-header h1 { font-size: 1.6rem !important; }
  .page-header .eyebrow { font-size: 0.7rem !important; }

  /* ---- Hero ---- */
  .hero { min-height: 400px; }
  .hero-content { padding: 36px 20px; }

  /* ---- Section padding ---- */
  nav { padding: 0 16px; height: 60px; }
  .nav-logo img { height: 44px; }
  .services, .reviews { padding: 36px 16px; }
  .why, .lead { padding: 36px 16px; }
  .vendors { padding: 28px 16px; }
  .vendors-grid { grid-template-columns: repeat(2, 1fr) !important; row-gap: 28px !important; }
  footer { padding: 32px 16px 16px; }
  .page-header { padding: 36px 16px 28px; }
  .cards-section, .diff-section, .cta-banner { padding: 36px 16px; }
  .combo-section { padding: 36px 16px; }
  .contact-section { padding: 36px 16px; }
  .content { padding: 32px 16px; }
  .portfolio-section { padding: 28px 16px 48px; }
  .background { padding: 40px 16px !important; }
  .problem { padding: 36px 16px; }
  .standard { padding: 36px 16px; }
  .services-panel { padding: 28px 16px !important; }
  .founder-photo-mobile .founder-photo-wrap { width: 160px; height: 160px; }

  /* ---- Cards ---- */
  .card-pain, .card-solution { padding: 24px 16px; }

  /* ---- Contact form ---- */
  .contact-form { padding: 24px 16px; }

  /* ---- Map ---- */
  #service-map { height: 280px !important; }

  /* ---- Nav links (slide panel) ---- */
  .nav-links {
    width: 100%;
    max-width: 100vw;
    padding: 80px 24px 32px;
  }

  /* ---- Vendor logos ---- */
  .vendors-grid img { max-height: 36px; }
}

/* ============================================================
   Utility: Smooth transitions for all interactive elements
   ============================================================ */
@media (max-width: 1024px) {
  body.nav-open {
    overflow: hidden;
  }
}