@media screen and (max-width: 1199px) {
  .filter-section.expanded {
    min-width: 290px;
  }

  .filter-section.expanded {
    min-width: 230px;
  }

  #accordionFlushExample {
    padding-left: 0;
  }

  .filter-section.expanded ~ .main-content {
    margin-left: 240px;
  }
}

@media screen and (max-width: 991px) {
  .search-asset {
    display: none !important;
  }

  .offcanvas .search-asset {
    display: flex !important;
  }

  .filter-section.expanded {
    min-width: 160px;
  }

  #accordionFlushExample {
    padding-left: 0;
  }

  .filter-section.expanded ~ .main-content {
    margin-left: 170px;
  }
}

@media screen and (max-width: 767px) {
  .gal {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  .video {
    margin-top: 3rem;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    cursor: pointer;
  }

  .modal-body {
    max-height: 600px;
    overflow: scroll;
  }

  .filter-section.expanded {
    max-height: 100vh;
  }

  .filter-section.expanded ~ .main-content {
    margin-left: 0;
  }

  #accordionFlushExample {
    padding-left: 0px;
  }

  .filter-section.expanded {
    min-width: 290px;
  }

  .gal {
    margin-top: 15rem;
  }
  .video {
    margin-top: 15rem;
  }
}

/* ============================================================
   Mobile search form fixes — added 2026-09-01
   The `.search-asset { display: none !important; }` rule above
   (line 20) hides BOTH copies of the search form at <=991px with
   no working fallback — `.offcanvas .search-asset` never matches
   anything in the actual markup. These rules give each copy a
   real mobile treatment instead of just disappearing.
   ============================================================ */

/* hidden by default (desktop) — only shown <=991px below */
.mobile-search-toggle,
.mobile-search-close {
  display: none;
}

@media screen and (max-width: 991px) {
  /* --- Hero search form (index.php) — column layout, stays visible --- */
  .hero-detail .search-asset {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 300px;
    margin: 0 auto !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .hero-detail .search-asset select,
  .hero-detail .search-asset .form-control,
  .hero-detail .search-asset .input-group-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    /* uniform height/padding so all three fields read as one even
       stack — style-asset.css sets .form-control to 56px but leaves
       select/button at their (shorter, mismatched) native sizes */
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    text-align: center;
  }
  .hero-detail .search-asset select,
  .hero-detail .search-asset .form-control {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  .hero-detail .search-asset .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Navbar search form (header.php) — icon toggles a centered modal --- */
  .nav-top {
    /* backdrop-filter is visually inert here (bg-white, Bootstrap
       !important, always applied, never toggled, fully covers it) but
       still creates a new containing block for position:fixed
       descendants, which would pin the modal to nav's small box
       instead of the viewport. */
    backdrop-filter: none !important;
  }

  /* the navbar-row Login/Register block (.ms-auto, direct child of
     nav) is a redundant duplicate at this width — the offcanvas drawer
     already has its own copy (see .offcanvas-body .d-lg-none in
     header.php), shown whenever the burger menu is open. Hiding the
     navbar-row copy here removes that duplication AND removes its
     competing margin-left:auto, so the search icon's own auto margin
     is the sole claimant pushing it (and the burger button) flush to
     the edge — no separate margin override needed. Applies on every
     page at this width, not just ones with the search icon, since the
     offcanvas fallback always exists regardless of $type. Desktop
     (>991px) is untouched, scoped inside this media query. */
  .nav-top > .ms-auto {
    display: none !important;
  }

  .mobile-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    background: none;
    border: none;
    color: #071c53;
    font-size: 18px;
    cursor: pointer;
  }

  .mobile-search-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 28, 83, 0.55);
  }
  .mobile-search-backdrop.mobile-open {
    display: flex !important;
  }

  .mobile-search-dialog-wrap {
    /* close button sits in its own row above the card, rather than
       absolutely overlapping it — lets the card itself match the hero
       form's container exactly (flush fields, no padding) instead of
       needing its own top padding to make room for the button */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  /* --- container matches .hero-detail .search-asset exactly: flush
     fields, no background/padding of its own, same radius/shadow --- */
  .mobile-search-backdrop .search-asset {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  .mobile-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: none;
    color: #9c9c9c;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .mobile-search-close:hover {
    color: #071c53;
  }

  .mobile-search-backdrop .search-asset select,
  .mobile-search-backdrop .search-asset .form-control,
  .mobile-search-backdrop .search-asset .input-group-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    /* uniform height/padding so all three fields read as one even
       stack — style-asset.css sets .form-control to 56px but leaves
       select/button at their (shorter, mismatched) native sizes */
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    text-align: center;
  }
  .mobile-search-backdrop .search-asset select,
  .mobile-search-backdrop .search-asset .form-control {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  .mobile-search-backdrop .search-asset .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}