/* Phone / tablet layout for federalsignalsales.com (2026-10-04, gross-shared microsite-server/federalsignal-mobile/PLAN.md).
   The site is a fixed 1000px desktop layout. EVERY layout rule below is inside (max-width: 1023px), so desktop (1024px+)
   renders exactly as before; the only top-level rule hides the two toggle buttons that js/mobile-nav.js injects. */

.mobile-toggle { display: none; }

@media (max-width: 1023px) {
  html { -webkit-text-size-adjust: 100%; }
  img { max-width: 100%; height: auto; }

  /* ---------- frame ---------- */
  #wrapper, #content, #content #wrapper, #topper .topper_wrapper { width: auto; max-width: 100%; box-sizing: border-box; }
  #wrapper { margin: 0 auto 40px; padding: 0 12px; }
  #content { max-width: none; border-left: 0; border-right: 0; margin-left: -12px; margin-right: -12px; padding-bottom: 12px; }
  #content #wrapper { margin: 8px 0 20px; padding: 0; border-left: 0; border-radius: 0; background-color: transparent; }
  .clear { clear: both; }

  /* ---------- top bar ---------- */
  #topper { margin-bottom: 8px; }
  #topper .topper_wrapper { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 4px 12px; }
  #topper .topper_wrapper h1, #topper .topper_wrapper h2, #topper .topper_wrapper span.tagline { float: none; margin: 4px 0; }
  #topper .topper_wrapper span.tagline { flex: 1 1 auto; margin-left: 0; }
  #topper .topper_wrapper a, #topper .topper_wrapper span.phone { float: none; padding: 10px 0 10px 28px; font-size: .85rem; }
  #topper .topper_wrapper span.phone { padding-left: 0; order: 5; width: 100%; padding-top: 0; }
  #topper .topper_wrapper a#quote_link, #topper .topper_wrapper a#support_link { margin-left: 0; background-position: 0 9px; }

  /* ---------- header logos ---------- */
  #header { padding: 6px 0; gap: 12px; }
  .federal-signal-logo { float: none; width: 58%; max-width: 315px; height: auto; }
  .gross-automation-header-logo { float: none; transform: none; width: 32%; max-width: 180px; height: auto; }

  /* ---------- main menu: "Menu" button + vertical list (no hover dropdowns) ---------- */
  .mobile-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; box-sizing: border-box;
    background: #e1e1e1; border: 1px solid #c1c1c1; border-bottom: 2px solid #d8152e; color: #333;
    font: bold .95rem Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: left; cursor: pointer;
  }
  .mobile-toggle::after { content: '\25BE'; margin-left: auto; transition: transform .2s; }
  .mobile-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .mobile-toggle:focus-visible { outline: 3px solid #d8152e; outline-offset: 2px; }
  div#menu { margin: 8px 0 0; }
  .mnav ul.tabs { display: none; }
  .mnav #menu.open ul.tabs { display: block; }
  ul.tabs { float: none; border-top: 0; }
  ul.tabs li { display: block; float: none; border-bottom: 1px solid #ccc; }
  ul.tabs li:hover { background-color: transparent; }
  ul.tabs li .tab, ul.tabs li h4 { border-right: 0; }
  ul.tabs li .tab a, ul.tabs li h4 a { padding: 13px 14px; font-size: .95rem; }
  ul.tabs li .tab a img { display: none; }
  ul.dropdown, ul.dropdown[style] {
    display: block !important; position: static; width: auto; padding: 0 0 6px 14px; border: 0; background: transparent;
    font-size: .95rem; height: auto !important; opacity: 1 !important;
  }
  ul.dropdown li { border-bottom: 0; }
  ul.dropdown li a { padding: 11px 12px; }

  /* ---------- search ---------- */
  form#search { float: none; top: 0; margin: 10px 0 0; }
  form#search input { width: 100%; box-sizing: border-box; bottom: 0; padding: 11px 44px 11px 12px; font-size: 16px; }
  form#search input#findit { right: 4px; bottom: auto; top: 50%; margin-top: -12px; }

  /* ---------- section header + side menu ---------- */
  p.breadcrumbs { margin: 12px; font-size: .85rem; line-height: 1.45; }
  .prod_category, .quoteHeader { width: auto; margin: 12px 0 8px; border-radius: 0; }
  .prod_category h3, .quoteHeader { font-size: 1.15rem; }
  #side_menu { float: none; width: auto; background-color: transparent; }
  #side_menu .mobile-toggle { background: #ababab; border: 0; border-bottom: 2px solid #d8152e; text-transform: none; }
  .mnav #side_menu ul { display: none; }
  .mnav #side_menu.open ul { display: block; }
  #side_menu ul { background-color: #ababab; }
  #side_menu ul li a, #side_menu ul li.active { height: auto; line-height: 1.3; padding: 12px 14px; font-size: .95rem; }

  /* ---------- category + technical lists ---------- */
  #content #product_selection, #content #technical_docs, #content #product_info { float: none; width: auto; padding: 16px 12px 0; min-height: 0; }
  #product_selection ul li, #technical_docs ul li { float: none; width: auto; overflow: hidden; }
  #product_selection ul li p, #technical_docs ul li p { float: none; width: auto; font-size: .9rem; line-height: 1.45; }
  #product_selection h2 a, #technical_docs h2 a { float: none; width: auto; font-size: 1.05rem; padding: 4px 0; }
  #product_selection img { max-width: 38%; }
  #technical_docs ul#dwg_accordion, #technical_docs ul#dxf_accordion, #product_selection ul#dxf_accordion, ul#accordion { width: auto; }
  #product_selection h5, #technical_docs h5 { width: auto; }
  #accordion h2 a, #technical_docs #drawing_dwg h2 a, #technical_docs #drawing_dxf h2 a { font-size: 1rem; padding: 13px 34px 13px 12px; }
  #technical_docs ul li ul.doc_list li a { font-size: .95rem; line-height: 1.4; padding: 8px 10px; }

  /* ---------- product pages ---------- */
  #product_info h1 { height: auto; line-height: 1.3; font-size: 1.15rem; padding: 8px 12px; }
  #product_info #summary ul { float: none; width: auto; margin: 14px 0 0 18px; font-size: .95rem; }
  #product_info #summary img { float: none; display: block; margin: 14px auto 0; }
  ul#product_shuffle { float: none; width: auto; display: flex; flex-wrap: wrap; margin-top: 14px; }
  ul#product_shuffle li a { height: auto; line-height: 1.2; padding: 12px 12px; font-size: .8rem; }
  #desc, #ordering, #replacement, #agency, #diagrams, #specs { float: none; width: auto; padding: 18px 12px; }
  #desc p, #ordering p, #replacement p, #agency p, #diagrams p, #specs p { font-size: .95rem; }
  #desc #summary { float: none; width: auto; padding: 0; border-right: 0; }
  #desc #links { float: none; width: auto; margin-top: 16px; border-radius: 10px; }
  #desc #links a, #desc #links li.sound { font-size: .95rem; }
  #desc #links ul { margin: 6px 0 12px 30px; }
  #desc #links ul li { padding: 6px 0; }
  #desc #links li.sound { margin-left: -22px; }
  #ordering ul { font-size: .95rem; }
  #ordering table, #replacement table, #agency table, #specs table, table#specs_add {
    display: block; width: auto; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .85rem;
  }
  #agency td.static { width: auto; }
  #diagrams img { max-width: 100%; height: auto; }

  /* ---------- homepage ---------- */
  #content #home { margin: 14px 12px; }
  /* the nivo slider only starts on desktop (js/slider.js); here the slides are a swipeable strip */
  #slider { height: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: none; -webkit-overflow-scrolling: touch; }
  #slider > img, #slider > a { flex: 0 0 100%; scroll-snap-align: start; }
  #slider img { position: static; display: block; width: 100%; height: auto; }
  .nivo-html-caption { display: none; }
  #content #home #subfeatures { margin: 20px 0 30px; padding: 14px; }
  #content #home #subfeatures .subfeature { float: none; width: auto; margin: 0 0 18px; overflow: hidden; }
  #content #home #subfeatures .subfeature img.catalog_icon, #content #home #subfeatures .subfeature img.product_icon {
    position: static; float: left; width: 64px; height: auto; margin: 0 12px 6px 0;
  }
  #content #home #subfeatures #brochure_feature h2, #content #home #subfeatures #brochure_feature p,
  #content #home #subfeatures #product_feature h2, #content #home #subfeatures #product_feature p { padding-left: 0; }
  #content #home .subfeature p { font-size: .95rem; }
  #content #home #subfeatures .subfeature .subfeature_links a { font-size: .95rem; padding: 8px 0; }
  #content #home #home_about { float: none; width: auto; margin: 0; padding: 14px; border-radius: 12px; }
  #content #home #home_about img { max-width: 40%; margin: 0 0 8px 10px; }
  #content #home ul#home_product_links { float: none; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  #content #home ul#home_product_links li h3 { width: auto; }
  #content #home ul#home_product_links li h3 a { font-size: .85rem; padding: 12px 0; }

  /* ---------- other pages ---------- */
  #content .privacy, #content .contact_info, .search_results, .quote_left, .quote_right, #quote_form, #quote_form_contact, #quote_table {
    float: none; width: auto; max-width: 100%;
  }
  .search_results { margin: 20px 12px; padding-right: 0; }
  #content .privacy p { font-size: .95rem; }
}

@media (max-width: 1023px) {
  span.footer { display: block; padding: 14px 12px; font-size: .85rem; line-height: 1.5; }
  span.footer a { display: inline-block; padding: 8px 0; }
}

@media (max-width: 1023px) {
  .footer, .footer p { font-size: .85rem; line-height: 1.5; }
  .footer a { display: inline-block; padding: 6px 0; }
  /* homepage feature boxes: the icons come last in the markup; show them first */
  #content #home #subfeatures .subfeature { display: flex; flex-direction: column; }
  #content #home #subfeatures .subfeature img.catalog_icon, #content #home #subfeatures .subfeature img.product_icon { order: -1; float: none; margin: 0 0 4px; }
  #content #home #subfeatures .subfeature .subfeature_links { align-self: stretch; }
}

@media (max-width: 1023px) {
  /* category lists: thumbnail left, title + text right (the desktop floats leave ragged rows when narrow) */
  #product_selection > ul > li { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; align-items: start; margin-bottom: 22px; }
  #product_selection > ul > li > a:first-child { grid-row: 1 / span 2; float: none; display: block; width: 76px; }
  #product_selection > ul > li > a:first-child img { float: none; width: 76px; max-width: 100%; height: auto; padding: 0; }
  #product_selection > ul > li > h2, #product_selection > ul > li > p { grid-column: 2; margin: 0; text-align: left; }
  #product_selection > ul > li > h2 a { margin-bottom: 6px; }
  #content .privacy { margin: 20px 12px; padding: 0; }
}

@media (max-width: 1023px) {
  /* product sidebar: document links and the warranty badge as full-height tap targets */
  #desc #links ul li a { display: inline-block; padding: 8px 0; }
  #desc #links > a, #desc #links a:has(img) { display: inline-block; }
}

@media (max-width: 1023px) {
  /* The toggle buttons are injected after first paint: reserve their 44px from the start (html.mnav is set in <head>)
     and place them into that space, so nothing shifts when they appear (CLS). */
  .mnav div#menu, .mnav #side_menu { position: relative; padding-top: 44px; }
  .mnav div#menu > .mobile-toggle, .mnav #side_menu > .mobile-toggle { position: absolute; top: 0; left: 0; right: 0; }
  /* homepage slides: reserve the 928x400 aspect before each image loads */
  #slider img { aspect-ratio: 928 / 400; object-fit: cover; }
}

@media (max-width: 1023px) {
  /* header logos have no width/height attributes on some pages: keep their box before they load */
  .federal-signal-logo { aspect-ratio: 315 / 82; }
  .gross-automation-header-logo { aspect-ratio: 262 / 133; }
}

@media (max-width: 1023px) {
  #content #home #subfeatures .subfeature img.catalog_icon { aspect-ratio: 120 / 144; }
  #content #home #subfeatures .subfeature img.product_icon { aspect-ratio: 98 / 134; }
}