/* ============================================================
   MOBILE STYLESHEET — Pleasant View Cleaning

   HOW THIS WORKS:
   - This file is loaded AFTER style.css
   - Rules here only apply on screens 768px wide or smaller
     (phones and small tablets)
   - Each section below overrides the desktop layout from style.css
   - To change a mobile style, find the matching section below
   ============================================================ */

@media (max-width: 768px) {

  /* === HEADER & NAV (mobile) === */

  /* Show the hamburger menu button */
  .nav-toggle {
    display: block;
  }

  /* Hide nav links by default on mobile */
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding-top: 1rem;
  }

  /* Dropdown sub-menu on mobile */
  .nav-item-dropdown {
    width: 100%;
  }

  .nav-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--light-bg);
    padding: 0;
    min-width: unset;
    margin-top: 0.25rem;
  }

  .nav-dropdown-link {
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.9rem;
  }


  /* Show nav links when toggled open */
  .nav-links.open {
    display: flex;
  }

  .nav-bar .container {
    flex-wrap: wrap;
  }

  .nav-link {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--card-border);
    width: 100%;
  }

  .nav-link {
    text-decoration: none !important;
  }

  .nav-link::after {
    display: none;
    content: none;              /* fully remove underline animation on mobile */
  }

  .nav-cta {
    margin-top: 0.75rem;
    text-align: center;
    width: 100%;
    padding: 0.85rem;
  }

  /* Top bar stacks on very small screens */
  .top-bar .container {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }

  .top-bar a {
    margin-right: 0;
  }


  /* === HERO SECTION (mobile) === */

  .hero {
    min-height: 400px;
  }

  .hero h1 {
    font-size: 2rem;             /* smaller heading on mobile */
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-small {
    min-height: 220px;
  }

  .hero-btn {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }


  /* === SERVICES ICON GRID (mobile) === */

  .services-icon-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .service-icon-card {
    padding: 1.5rem 1rem;
  }


  /* === SERVICE DETAIL PAGES (mobile) === */

  .service-detail-inner {
    grid-template-columns: 1fr;  /* stack image above text */
    gap: 1.5rem;
  }

  .service-detail:nth-child(even) .service-detail-inner {
    direction: ltr;              /* remove flip on mobile */
  }

  .service-detail-img {
    height: 250px;
  }


  /* === WHY CHOOSE US (mobile) === */

  .why-grid {
    grid-template-columns: 1fr;  /* single column on mobile */
    gap: 1.5rem;
  }


  /* === TESTIMONIALS (mobile) === */

  .testimonial-card {
    padding: 1.75rem;
    margin: 1.5rem auto 0;
  }

  .testimonial-card blockquote {
    font-size: 1rem;
  }


  /* === ABOUT PAGE (mobile) === */

  .about-mission-inner {
    grid-template-columns: 1fr;  /* stack image above text */
    gap: 1.5rem;
  }

  .about-mission-img {
    height: 280px;
  }

  .values-grid {
    grid-template-columns: 1fr;  /* single column on mobile */
  }


  /* === OUR STORY SECTION (mobile) === */

  .story-images {
    grid-template-columns: 1fr;  /* stack photos vertically */
  }

  .story-images img {
    height: 220px;
  }


  /* === SERVICE AREA (mobile) === */

  .service-area-grid {
    grid-template-columns: 1fr;  /* stack NJ and PA columns */
    gap: 2rem;
  }

  .service-area-col h3 {
    justify-content: center;
  }


  /* === CONTACT PAGE (mobile) === */

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-form-wrapper {
    padding: 1.5rem;
  }

  .contact-layout {
    grid-template-columns: 1fr;  /* stack details above form */
    gap: 2.5rem;
  }

  .contact-details-col {
    max-width: 100%;
  }


  /* === QUOTE FORM (mobile) === */

  .quote-form-wrap {
    padding: 1.25rem;
  }

  .service-checks {
    grid-template-columns: 1fr 1fr;  /* keep 2-col but tighten */
    gap: 0.5rem;
  }

  .service-check span {
    padding: 0.55rem 0.6rem;
    font-size: 0.8rem;
  }

  .form-row {
    grid-template-columns: 1fr;  /* stack city / zip */
  }

  .form-btn-submit {
    font-size: 0.85rem;
    padding: 0.65rem 1rem;
  }

  /* Full-width value card */
  .value-card--full {
    max-width: 100%;
  }


  /* === COMMERCIAL PAGE (mobile) === */

  .commercial-creds-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .commercial-cred-value {
    font-size: 1.4rem;
  }



  .property-types-grid {
    grid-template-columns: 1fr;
  }

  .commercial-service-item {
    flex: 0 0 calc(50% - 0.5rem);
  }

  .contracts-grid {
    grid-template-columns: 1fr;
  }

  .commercial-callout-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .commercial-callout-photo img {
    height: 260px;
  }

  .commercial-callout-icons {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
  }


  /* === GALLERY PAGE (mobile) === */

  .comparison-grid,
  .video-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .comparison-before {
    height: 240px;
  }

  .gallery-service-group {
    margin-top: 2.5rem;
  }

  .gallery-group-heading {
    font-size: 0.9rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .gallery-item img {
    height: 200px;
  }

  .gallery-item-overlay {
    opacity: 1;
  }


  /* === FAQ PAGE (mobile) === */

  .faq-category-heading {
    font-size: 1.1rem;
  }

  .faq-question {
    padding: 1rem 1.1rem;
    font-size: 0.93rem;
  }

  .faq-answer {
    padding: 0.25rem 1.1rem 1rem;
  }

  .faq-answer-img {
    float: none;
    width: 100%;
    height: 180px;
    margin: 0 0 0.75rem 0;
  }


  /* === CTA SECTION (mobile) === */

  .cta-section h2 {
    font-size: 1.5rem;
  }


  /* === FOOTER (mobile) === */

  .footer-grid {
    grid-template-columns: 1fr;  /* single column footer */
    gap: 2rem;
  }


  /* === GENERAL MOBILE SPACING === */

  .section-padding {
    padding: 3rem 0;
  }

  .container {
    padding: 0 1.25rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* Very small screens (under 400px) */
@media (max-width: 400px) {

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item img {
    height: 220px;
  }



  .service-checks {
    grid-template-columns: 1fr;  /* single column on very small phones */
  }

  .form-nav {
    flex-direction: column-reverse;
    gap: 0.5rem;
    align-items: stretch;
  }

  .form-btn-next,
  .form-btn-submit,
  .form-btn-back {
    width: 100%;
    justify-content: center;
  }

}