/* ============================================================
   Ameritank — custom overrides (layered ON TOP of Webflow CSS)
   Added by Claude. Loaded after Webflow's SRI-protected CSS, so
   Webflow's own stylesheet is never modified (hashes stay valid).
   Desktop (>=992px) is intentionally LEFT ALONE except the global
   tagline color. Menu is rebuilt for the whole <=991 range.
   ============================================================ */

/* (1) GLOBAL — eyebrow / tagline labels were near-white on light
   backgrounds (CONNECTIVITY, CAPABILITIES, LOCATION, CAPACITY...).
   Force solid black on every viewport. */
.text-style-tagline {
  color: #000000 !important;
}

/* ============================================================
   iPad / tablet band only (480px - 991px) — page-section fixes
   ============================================================ */
@media screen and (min-width: 480px) and (max-width: 991px) {

  /* (2) "Why Ameritank?" — stack the worker image ON TOP of the blue block */
  .section_layout237 .w-layout-layout.quick-stack {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
  }
  .section_layout237 .w-layout-layout.quick-stack > .w-layout-cell {
    grid-column: span 1 / span 1 !important;
    grid-row: auto !important;
  }
  .section_layout237 .w-layout-layout.quick-stack > .w-layout-cell > img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* (3) Footer AMERITANK wordmark — cap it */
  .footer2_logo {
    max-width: 240px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* (4) "Why choose Ameritank?" — trim heading/subhead, shrink card headings */
  .layout239_component .heading-style-h2 { font-size: 2.25rem !important; line-height: 1.15 !important; }
  .layout239_component .text-size-medium { font-size: 1.05rem !important; line-height: 1.5 !important; }
  .layout239_item .heading-style-h4 { font-size: 1.3rem !important; line-height: 1.25 !important; }
}

/* ============================================================
   (5) Fullscreen menu — rebuilt clean single column for the whole
   phone + tablet range (<=991px). Fixes: items jammed to the left
   edge, wildly uneven vertical spacing, the two nav columns
   overlapping, the Texas map slicing through the links, the LinkedIn
   bar overflowing, and the large dead blank space.
   ============================================================ */
@media screen and (max-width: 991px) {

  /* full-height blue overlay, column flow (blue gradient lives here, so
     100dvh guarantees full coverage — no white bleed) */
  #fullscreen-menu {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  /* ONE shared left edge (28px) for the close bar, logo, links + footer */
  #fullscreen-menu .div-block-14 {
    flex: 0 0 auto !important;
    padding: 1.25rem 1.75rem 0 1.75rem !important;
  }

  /* nav block fills the space between the top bar and footer and centres
     vertically (safe = falls back to top-aligned if it would overflow) */
  #fullscreen-menu .div-block-10 {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: safe center !important;
    gap: 1.15rem !important;
    padding: 1.5rem 1.75rem !important;
  }
  #fullscreen-menu .div-block-12 { margin: 0 0 0.85rem 0 !important; padding: 0 !important; } /* logo */
  #fullscreen-menu .div-block-12 img { margin: 0 !important; }
  #fullscreen-menu .div-block-11,
  #fullscreen-menu .div-block-13 { width: 100% !important; padding: 0 !important; margin: 0 !important; }

  /* uniform, tight rhythm across BOTH nav groups — zero out the stacked
     li / listitem-text margins that were creating uneven gaps */
  #fullscreen-menu .menu-nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  #fullscreen-menu .list-item.menu {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  #fullscreen-menu .listitem-text { margin: 0 !important; padding: 0 !important; }

  /* the decorative Texas map (absolute .bg-overlay) was overlapping the
     links — hide it on small screens (blue bg is on #fullscreen-menu, so
     this is safe and leaves no white). */
  #fullscreen-menu .bg-overlay { display: none !important; }

  /* bottom bar: pinned to the bottom, wraps cleanly, never overflows */
  #fullscreen-menu .div-block-2 {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.6rem 1.5rem !important;
    padding: 1.25rem 1.75rem !important;
  }
}