/* Shawmut - phone + tablet menu (batch 20, C-045, 2026-11). Goes with library/js/touch-nav.js.
   Desktop with a mouse: nothing here applies (the arrow buttons and the extra links are hidden from 1240 px up). */

/* ---------- menu-button view (phones + tablets, below 1240 px) ---------- */
@media only screen and (max-width: 1239px) {
  /* bigger tap area for the menu button (the icon was a 16 px target) */
  #container .header #inner-header nav .navburger { position: relative; z-index: 2; padding-right: 14px; }
  #container .header #inner-header nav .navburger img.navburger-icon { box-sizing: content-box; padding: 14px; margin: -14px 0; }

  /* each top item: word (link) + arrow button on one row, its pages underneath */
  #container .header #inner-header nav ul#menu-the-main-menu > li {
    display: flex !important; flex-wrap: wrap; align-items: center; height: auto !important; min-height: 2.4em;
  }
  #container .header #inner-header nav ul#menu-the-main-menu > li > a { flex: 1 1 auto; }
  #container .header #inner-header nav ul#menu-the-main-menu > li > .shm-sub-toggle {
    flex: 0 0 56px; height: 44px; margin: 0 8px 0 0; padding: 0; border: 0; border-radius: .2em;
    background: transparent; color: #fff; cursor: pointer; display: flex !important; align-items: center; justify-content: center;
  }
  #container .header #inner-header nav ul#menu-the-main-menu > li > .shm-sub-toggle:focus-visible { outline: 2px solid #fff; }
  #container .header #inner-header nav ul#menu-the-main-menu > li > .shm-sub-toggle span {
    display: block; width: 11px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: translateY(-3px) rotate(45deg); transition: transform .2s;
  }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-open > .shm-sub-toggle { background: rgba(255,255,255,.12); }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-open > .shm-sub-toggle span { transform: translateY(3px) rotate(-135deg); }

  /* the opened pages */
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-open > .sub-menu {
    display: block !important; flex: 0 0 100%; position: static !important; visibility: visible !important;
    margin: 0 8px .5em 1em !important; padding: 0; height: auto !important; background: rgba(0,0,0,.18); border-radius: .2em;
  }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-open > .sub-menu li {
    height: auto !important; line-height: 1.4 !important; display: block; float: none; margin: 0;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-open > .sub-menu li:last-child { border-bottom: 0 !important; }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-open > .sub-menu li a {
    display: block; min-width: 0; width: auto; height: auto !important; line-height: 1.4 !important;
    padding: .75em 1em !important; font-size: 1em; background: transparent !important; border: 0; color: #fff;
  }

  /* Tools links (Get a Quote, Request a Tour, Upload a File) */
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-tools-first { border-top: 1px solid rgba(255,255,255,.25) !important; margin-top: .4em; padding-top: .3em; }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-tools-copy > a { font-size: 1em; opacity: .92; }

  /* search box at the bottom (was hidden on phones/tablets) */
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-search-item { height: auto !important; display: block !important; padding: .5em 1em 1em; }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-search-item #searchform { display: block !important; height: auto !important; margin: 0 !important; }
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-search-item input[type="search"] { max-width: none; width: 100%; box-sizing: border-box; height: 44px; }
}

/* ---------- desktop menu view (1240 px up) ---------- */
@media only screen and (min-width: 1240px) {
  #container .header #inner-header nav ul .shm-sub-toggle,
  #container .header #inner-header nav ul .shm-tools-copy { display: none !important; }
  /* touch screens: the sub-menu opened by the first tap */
  #container .header #inner-header nav ul#menu-the-main-menu > li.shm-open > .sub-menu { display: block !important; visibility: visible !important; }
}
