/* Detectronic header - mobile corrections.
 *
 * Every rule in this file sits inside @media (max-width:1020px), which is the
 * same breakpoint the module already uses to swap the desktop nav for the
 * hamburger. Nothing here can reach the desktop layout: above 1020px this
 * file contributes no declarations at all.
 *
 * Three separate faults were making the phone menu behave the way it did.
 * Each numbered block below fixes one of them.
 *
 * Delete this file and its wp_enqueue_style call in dt-header.php to revert.
 */

@media (max-width: 1020px) {

  /* 1. Give the nav its own row.
     .head__bar is a flex row with the default flex-wrap:nowrap. At this
     breakpoint .nav is handed width:100%, but a nowrap row cannot break, so
     the nav was competing for space with the logo, the search button and the
     Menu button - and lost. Measured on a 390px viewport it collapsed to five
     pixels wide, which is why the menu items were almost impossible to hit and
     the CONTACT US button hung off the right edge of the screen. */
  .dt-hdr .head__bar { flex-wrap: wrap; }

  /* 2. Hold the panels open against the theme's universal accordion.
     dt-main.js carries a generic accordion that binds to any button with an
     aria-expanded attribute, finds a panel through aria-controls, and writes
     max-height:0; height:0; opacity:0; overflow:hidden straight onto the
     element's style attribute when it decides the panel is not visible. On a
     phone it decided wrong every time, so a tap opened the dropdown to nothing.
     The JavaScript now keeps that handler away from these buttons, and these
     rules are the guarantee: an inline style with no !important always loses
     to an author rule that has one. */
  .dt-hdr .nav.open {
    display: flex !important;
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .dt-hdr .mega[hidden] { display: none !important; }
  .dt-hdr .mega:not([hidden]) {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;

    /* No entry animation on a phone, deliberately.
       The module's dtHdrMegaIn keyframes open from translateY(-5px), and the
       opacity:1 !important above - which is the whole point of this block -
       outranks the animation's own opacity, so the fade never played and the
       panel simply sat five pixels high, overlapping the bottom of its own
       button. Rather than fight that, the panel just appears. It is instant,
       it never flickers, and the chevron below still turns smoothly, which is
       the part that actually tells you something happened. */
    animation: none !important;
    transform: none !important;
  }

  /* 3. Rows a thumb can actually hit.
     52px clears the 44px minimum both Apple and Google publish, and the button
     now spans the full width of the menu rather than shrink-wrapping its text,
     so there is no small target left anywhere in the list. touch-action tells
     the browser it never needs to wait to see whether a tap is a double-tap
     zoom, which removes the 300ms delay some Android browsers still apply. */
  .dt-hdr .nav__btn {
    width: 100%;
    min-height: 52px;
    padding: 14px 4px;
    font-size: .95rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .dt-hdr .nav__cta {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* 4. The chevron follows a class this module owns rather than aria-expanded,
     because the theme's accordion resets aria-expanded behind our back. */
  .dt-hdr .nav__btn .chev { transition: transform .18s ease; }
  .dt-hdr .nav__btn.is-open .chev { transform: rotate(-135deg) translate(-3px,-3px); }
  .dt-hdr .nav__btn.is-open { background: var(--steel); color: var(--ink); }

  /* 5. A panel sitting under its own button is part of the list, not a slab
     dropped over the page, so it drops the header's border and shadow and
     the wrapper's side padding. */
  .dt-hdr .nav > .mega {
    border-top: 0;
    box-shadow: none;
    margin: 0;
    border-bottom: 1px solid var(--line-2);
    background: var(--steel-2);
  }
  .dt-hdr .nav > .mega .wrap { padding-inline: 0; }
  .dt-hdr .nav > .mega .mega__in { padding-block: 14px 18px; gap: 16px; }
  .dt-hdr .nav > .mega .mega__aside { padding: 16px; }

  /* 6. Nothing in the header may push the page sideways.
     The Service panel carries .mega--narrow, and that class's two-column rule
     (1fr 290px) is one step more specific than the single-column rule the
     module already applies at this breakpoint, so it survived it. A fixed
     290px sidebar sitting beside the content in a 390px viewport is what was
     pushing the page sideways - measured at 506px of scroll width against a
     390px screen. Same specificity as the rule it corrects, and later in the
     cascade, so it wins without needing !important. */
  .dt-hdr .mega--narrow .mega__in { grid-template-columns: 1fr; }

  .dt-hdr .nav,
  .dt-hdr .nav > .mega,
  .dt-hdr .mega__in,
  .dt-hdr .mega__aside { max-width: 100%; }
}

@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .dt-hdr .mega:not([hidden]) { animation: none !important; }
  .dt-hdr .nav__btn .chev { transition: none; }
}