/* ODA Concepts mobile navigation repair.
 * Loaded after the design and text-contract styles so late Elementor rules
 * cannot restore the desktop header layout at mobile/tablet widths. */

@media (max-width: 980px) {
  .oda-site-header.oda-site-header.oda-site-header {
    --oda-mobile-header-height: 68px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: var(--oda-mobile-header-height) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: var(--oda-mobile-header-height) !important;
    height: var(--oda-mobile-header-height) !important;
    padding: 0 var(--oda-gutter) !important;
    box-sizing: border-box !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .oda-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .oda-site-nav,
  .oda-site-header.oda-site-header.oda-site-header > .oda-header-cta {
    display: none !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .oda-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    justify-self: end !important;
    align-self: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .oda-mobile-navigation {
    grid-column: 1 / -1 !important;
    /* Keep the fixed drawer in the header's first grid track. Elementor's
     * second implicit row adds the header height to an otherwise-correct
     * fixed top offset, producing a blank gap above the open menu. */
    grid-row: 1 !important;
  }

  .oda-mobile-navigation {
    position: fixed !important;
    inset: var(--oda-mobile-header-height, 68px) 0 auto !important;
    width: auto !important;
    max-height: calc(100vh - var(--oda-mobile-header-height, 68px)) !important;
    margin: 0 !important;
    z-index: 49 !important;
  }

  .oda-mobile-navigation[hidden] { display: none !important; }
  .oda-mobile-navigation.is-open { display: grid !important; }

  /* The fallback toggle uses an authored SVG so its open state is explicit
   * without relying on a Unicode glyph or a font-specific icon. */
  .oda-menu-toggle .oda-menu-icon {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
    pointer-events: none;
  }

  .oda-menu-toggle .oda-menu-icon-line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .25s var(--oda-ease), opacity .2s var(--oda-ease);
  }

  .oda-menu-toggle.is-open .oda-menu-icon-line--top {
    transform: translateY(6px) rotate(45deg);
  }

  .oda-menu-toggle.is-open .oda-menu-icon-line--middle { opacity: 0; }

  .oda-menu-toggle.is-open .oda-menu-icon-line--bottom {
    transform: translateY(-6px) rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .oda-menu-toggle .oda-menu-icon-line { transition: none; }
  }

  /* Theme Builder headers may place the same controls inside an inner
   * Elementor container. Keep that variant on the same one-row contract. */
  .oda-site-header.oda-site-header.oda-site-header > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: var(--oda-mobile-header-height, 68px) !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: var(--oda-mobile-header-height, 68px) !important;
    height: var(--oda-mobile-header-height, 68px) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .e-con-inner > .oda-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .e-con-inner > .oda-site-nav,
  .oda-site-header.oda-site-header.oda-site-header > .e-con-inner > .oda-header-cta {
    display: none !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .e-con-inner > .oda-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .oda-site-header.oda-site-header.oda-site-header > .e-con-inner > .oda-mobile-navigation {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
}