/* Per-page nav & header overrides for tech_support.html */
@media (max-width: 768px) {
  nav { max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: max-height 0.36s ease, opacity 0.28s ease; }
  nav.active { max-height: 80vh; opacity: 1; pointer-events: auto; transform: translateY(0); padding: 1.2rem 1.6rem; }
  nav ul li { opacity: 0; transform: translateY(-6px); transition: opacity 0.28s ease, transform 0.28s ease; }
  nav.active ul li:nth-child(1){ transition-delay:0.06s; opacity:1; transform:translateY(0);}
  nav.active ul li:nth-child(2){ transition-delay:0.12s; opacity:1; transform:translateY(0);}
  nav.active ul li:nth-child(3){ transition-delay:0.18s; opacity:1; transform:translateY(0);}
}

/* Ensure images stack and text flows under them on small screens for tech_support page */
@media (max-width: 992px) {
  /* Common image containers used in the page */
  .hero-image,
  .hero-image.active,
  .hero-image.right,
  .tablet-container,
  .too-much-image-container,
  .welcomish-container,
  .swing-sign,
  .spoon-kid-image-container,
  .relaxed-container {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Make sure figcaptions and captions don't overlap images */
  .doormat-caption,
  .doormat-figure figcaption {
    display: block !important;
    margin-top: 0.5rem !important;
  }

  /* Reset any float-aware margins inside paragraphs */
  .hero-paragraph img,
  .hero-paragraph .hero-image {
    margin: 0 0 1rem 0 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important; /* avoid cropping on narrow screens */
  }
  /* prevent stacking overlap: ensure each paragraph starts on a new line */
  .hero-paragraph { display: block !important; clear: both !important; margin-bottom: 1rem !important; }
}

/* ------------------------------------------------------------------
   Header & Mobile Nav overrides (mirror canonical pattern used on other pages)
   Purpose: ensure a full-bleed gradient and a robust mobile nav (max-height +
   opacity) so the mobile menu and header behavior match site-wide fixes.
   ------------------------------------------------------------------ */
@media (min-width: 481px) and (max-width: 1400px) {
  body header { position: relative !important; }

  body header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to right, #00a79d 0%, #639 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body header .header-container { position: relative !important; z-index: 1 !important; }

  .logo-text { font-size: clamp(1rem, 2.6vw, 1.6rem) !important; white-space: normal !important; line-height: 1.05 !important; }
  .logo img { height: 56px !important; width: auto !important; display: block !important; }
}

@media (max-width: 480px) {
  body header::before { background-size: 100% 100% !important; }
  .logo img { height: 44px !important; }
  .logo-text { font-size: clamp(0.9rem, 4.2vw, 1.1rem) !important; }
  .mobile-toggle { position: relative !important; z-index: 3 !important; }
}

@media (max-width: 768px) {
  nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    padding: 0 2rem !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: max-height 0.36s ease, opacity 0.28s ease, padding 0.28s ease, transform 0.28s ease !important;
    z-index: 200 !important;
  }

  nav.active { max-height: 80vh !important; padding: 1.5rem 2rem !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }

  nav ul li { opacity: 0 !important; transform: translateY(-6px) !important; transition: opacity 0.28s ease, transform 0.28s ease !important; }
  /* Ensure all items become visible when nav expands (including Contact) */
  nav.active ul li { opacity: 1 !important; transform: translateY(0) !important; }
  nav.active ul li:nth-child(1) { transition-delay: 0.06s; }
  nav.active ul li:nth-child(2) { transition-delay: 0.12s; }
  nav.active ul li:nth-child(3) { transition-delay: 0.18s; }
  nav.active ul li:nth-child(4) { transition-delay: 0.24s; }
  nav.active ul li:nth-child(5) { transition-delay: 0.30s; }
  nav.active ul li:nth-child(6) { transition-delay: 0.36s; }

  nav ul li.dropdown .dropdown-menu { position: relative !important; top: auto !important; left: auto !important; min-width: 100% !important; background: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important; border-radius: 8px !important; padding: 0 !important; margin-top: 0.5rem !important; opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; transform: translateY(-8px) !important; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.36s ease !important; pointer-events: none !important; }

  nav a { color: #222 !important; text-decoration: none !important; }
  nav a:hover, nav a:focus { color: var(--primary) !important; text-decoration: underline !important; }

  nav ul li.dropdown.open .dropdown-menu,
  nav ul li.dropdown:focus-within .dropdown-menu,
  nav ul li.dropdown:hover .dropdown-menu {
    opacity: 1 !important; transform: translateY(0) !important; max-height: 420px !important; pointer-events: auto !important;
  }
}

/* ------------------------------------------------------------------
   Neutralize problematic large min-heights on small screens that cause
   excessive white space below images/content (targeted overrides)
   ------------------------------------------------------------------ */
@media (max-width: 992px) {
  /* Reduce interactive content and services container min-heights introduced elsewhere */
  .interactive-content { min-height: 0 !important; padding-bottom: 0.5rem !important; }
  #services-content-container { min-height: 0 !important; }
  .interactive-content, .service-content-section, #services-content-container { position: relative !important; }

  /* Ensure hero and main sections collapse to their content on very small screens */
  .hero { min-height: auto !important; padding-bottom: 1rem !important; }
  .main { min-height: auto !important; padding-bottom: 1rem !important; }

  /* Prevent invisible large gaps caused by off-screen background elements */
  .hero-bg, .main-bg, .main-bg-alt { display: none !important; }
}

/* Extra-narrow mobile fixes (portrait phones) */
@media (max-width: 480px) {
  /* Ensure hero paragraphs stack cleanly and images don't push large empty boxes */
  .hero-paragraph,
  .hero-paragraph.hero-image-text-align {
    display: block !important;
    padding: 0 0.5rem !important;
  }

  .hero-paragraph img,
  .hero-image.active,
  #waiting-image,
  #default-image,
  #wires-image {
    width: 100% !important;
    height: auto !important;
    max-height: 260px !important; /* cap images to prevent huge tall boxes */
    object-fit: cover !important;
    margin: 0 0 0.75rem 0 !important;
    float: none !important;
  }

  /* Remove any stubborn min-heights set on interactive containers */
  .interactive-content,
  .accordion,
  .accordion .accordion-content,
  #services-content-container {
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0.5rem !important;
  }

  /* Reduce card spacing at bottom */
  .main-cards { margin: 2rem 0 !important; }
}

/* Broadened overrides for a range of tablet/portrait/laptop sizes where gaps were reported */
@media (max-width: 820px) {
  .interactive-content,
  #services-content-container,
  .service-content-section,
  .accordion,
  .accordion .accordion-content {
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0.5rem !important;
  }

  .hero-paragraph img,
  .hero-image.active,
  #waiting-image,
  #default-image,
  #wires-image {
    max-height: 360px !important;
    width: 100% !important;
    object-fit: cover !important;
    margin: 0 0 1rem 0 !important;
  }
}

@media (max-width: 912px) {
  .hero-paragraph img,
  .hero-image.active,
  #waiting-image,
  #default-image,
  #wires-image { max-height: 420px !important; }
  .interactive-content { min-height: 0 !important; }
}

/* Force paragraph stacking and explicit caps for the known images across wider viewports */
@media (max-width: 1368px) {
  .hero-paragraph,
  .hero-paragraph.hero-image-text-align {
    display: block !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  #waiting-image, #wires-image, #default-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: contain !important; /* prefer contain to avoid cutting off sides */
    margin: 0 0 1rem 0 !important;
    float: none !important;
  }
}

/* Improve large desktop layout (e.g., 1920×1080): enlarge images and avoid floats */
@media (min-width: 1369px) {
  /* Use a consistent 40/60 grid for image+text paragraphs */
  .hero-paragraph.hero-image-text-align {
    display: grid !important;
    grid-template-columns: 2fr 8fr !important; /* ~20% / 80% split (about another third smaller) */
    align-items: start !important;
    column-gap: 1.25rem !important;
  }

  /* Prevent the image wrapper from shrinking in flex layout */
  /* Grid columns: image fills first, text fills second */
  .hero-paragraph.hero-image-text-align picture { grid-column: 1 !important; }
  .hero-paragraph.hero-image-text-align span { grid-column: 2 !important; min-width: 0 !important; }

  /* Grow images and stop floats; scope only to the two image+text paragraphs */
  .hero-paragraph.hero-image-text-align .hero-image,
  .hero-paragraph.hero-image-text-align img {
    float: none !important;
    width: 100% !important;      /* image fills its grid column */
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 1rem 1rem 0 !important;
  }

  .hero-image-text-align img { max-width: 100% !important; }

  /* Explicitly tame the standalone first image on desktop */
  #default-image { width: clamp(160px, 11vw, 260px) !important; height: auto !important; }
}

/* Ensure accordions never sit beside floated elements */
.accordion { clear: both !important; }

/* Fix How We Help cards layout for narrower desktop/tablet widths where they
   were staying in multi-column layout and stretching vertically. Make them
   stack and allow text to wrap naturally. */
@media (max-width: 1368px) {
  .main-cards {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin: 2.5rem 0 !important;
    width: 100% !important;
  }

  .main-card {
    width: 100% !important;
    max-width: none !important;
    align-items: flex-start !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }

  .main-card p {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
}

@media (max-width: 1024px) {
  #waiting-image, #wires-image, #default-image { max-height: 420px !important; }
}

@media (max-width: 820px) {
  #waiting-image, #wires-image, #default-image { max-height: 360px !important; }
}

@media (max-width: 540px) {
  #waiting-image, #wires-image, #default-image { max-height: 300px !important; }
}

@media (max-width: 1024px) {
  .hero-paragraph img,
  .hero-image.active { max-height: 520px !important; }
  .interactive-content, #services-content-container { min-height: 0 !important; }
}

@media (max-width: 1368px) {
  /* Desktop-laptop narrow widths */
  .interactive-content, #services-content-container { min-height: 0 !important; }
}

@media (max-width: 1400px) {
  /* safety net for medium-large laptops */
  .hero-bg, .main-bg, .main-bg-alt { display: none !important; }
}