/* Quietwork 2026-10-28: W. O. Jones logo in the phone header
   Owen asked for the logo on phones on every page. The old template.css hid the header logo
   (@media (max-width: 769px) { #headerLeft { display: none } }) and leaned on a 100px logo in
   the slogan strip (p.visible-xs.wojlogo), which blog articles hide along with the whole strip,
   so phones showed only the menu button there.

   Layout on phones: one white bar, logo left (links home), menu button right, both vertically
   centred. The open menu drops below the bar at full width and pushes the page down, as before.
   To get a full-width menu in the page flow, the wrappers between #headerRow and the menu
   (#headerRight > #mainmenu > .moduletable > #jux_megamenucss3 > #js-mainnavcss3) use
   display: contents, so the toggle and the menu list become items of the #headerRow flex row;
   the list wraps onto its own line. The DOM is unchanged, so the menu's own CSS and JS still match.

   Two breakpoints, on purpose:
   - max-width 768px is where the megamenu itself switches to the button (style_responsive.css)
     and its script to accordion mode, so the phone bar lives there.
   - At exactly 769px template.css both hides the logo (its max-width: 769px block) and applies its
     desktop header (its min-width: 769px block), so showing #headerLeft is all that width needs:
     it then looks like every wider screen.
   Loaded last, after readability.css. Nothing here applies above 769px. */

@media (max-width: 769px) {
   #headerLeft {
      display: block;
   }
}

@media (max-width: 768px) {
   #headerRow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      min-height: 64px;
   }
   #headerRight,
   #headerRight #mainmenu,
   #headerRight #mainmenu > .moduletable,
   #headerRight #jux_megamenucss3,
   #headerRight #js-mainnavcss3 {
      display: contents;
   }

   /* Logo: 96px wide (about 50px tall) from 320px to 768px; the slogan-strip logo it replaces was 100px. */
   #headerLeft {
      flex: 0 0 auto;
      margin: 0;
      padding: 7px 0 7px 16px;
      max-width: none;
   }
   #headerLeft #logo .moduletable,
   #headerLeft #logo .custom,
   #headerLeft #logo p {
      margin: 0;
      padding: 0;
   }
   #headerLeft #logo a.logoHome {
      display: block;
      width: 96px;
      line-height: 0;
   }
   #headerLeft #logo a.logoHome IMG {
      display: block;
      width: 100%;
      height: auto;
   }

   /* Menu button: 48px square tap target, icon centred, right edge 8px in (16px to the icon). */
   #jux_megamenucss3 .megamenu.noJS #css3-megaMenuToggle {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 48px;
      height: 48px;
      margin: 0 8px 0 0;
      padding: 0;
      border-radius: 0;
   }
   #jux_megamenucss3 #css3-megaMenuToggle .jux-fa.jux-fa-bars {
      float: none;
      line-height: 1;
   }

   /* Open menu: its own full-width line under the bar (it carried the 95% .container width). */
   #headerRow #js-meganav {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      margin: 0 !important;
      box-sizing: border-box;
   }

   /* One logo: the header one replaces the slogan strip's phone-only copy. */
   #slideshow P.visible-xs.wojlogo {
      display: none;
   }

   /* Slogan strip grows with long titles. template.css fixes it at 230px and centres the column,
      so a title that wraps to four lines at 320px (Funeral order of service, Die cutting and
      creasing) spilled upwards over the header bar. Short titles keep the old height. */
   #inside DIV.sloganbox {
      height: auto;
      min-height: 230px;
   }
}

/* Smallest phones (320px class): the 60px slogan title cannot fit one long word ("Personalised",
   "Testimonials") and a fixed 300px image on Quality policy overran its column, so those pages
   scrolled sideways. Both were the same on the old site; fixed here while touching the top. */
@media (max-width: 360px) {
   #slideshow H1 {
      font-size: 48px;
   }
   DIV.main DIV.item-page IMG {
      max-width: 100%;
      height: auto;
   }
}