/*
 * Mobile header and off-canvas navigation.
 *
 * The theme gave phones a 100px header that scrolled away with the page, holding an
 * empty 1x1px logo and a hamburger that slid a panel down from the top, pushing the
 * content. This replaces both: a slim white bar that stays put with the site title in
 * it, and a panel that comes in from the right over the page.
 *
 * Everything is scoped to the theme's own mobile breakpoint, so the desktop header
 * is untouched.
 */

:root {
  --mvh-bar-h: 56px;
}

@media only screen and (max-width: 1000px) {

  /* ---------------------------------------------------------------- the bar */

  header.page_header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    height: var(--mvh-bar-h);
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  /* The theme nests four wrappers between <header> and its contents; each one has to
     agree to the new height, or the bar keeps the old 100px. */
  header.page_header .header_inner,
  header.page_header .header_top_bottom_holder,
  header.page_header .header_bottom,
  header.page_header .header_bottom .container,
  header.page_header .header_bottom .container_inner {
    height: var(--mvh-bar-h) !important;
    min-height: var(--mvh-bar-h) !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* The .container around this is already inset by 15px, and a flex `gap` here also
     applied before the first item. Both were pushing the hamburger inward, so the
     spacing is set explicitly on the items instead. */
  header.page_header .header_bottom .container_inner {
    display: flex !important;
    align-items: center;
    gap: 0 !important;
    padding: 0 !important;
  }

  header.page_header .header_inner_left {
    position: static !important;
    display: flex !important;
    align-items: center;
    height: auto !important;
    margin: 0 !important;
  }

  /* The logo is a 1x1 transparent png — it only takes up room. */
  header.page_header .logo_wrapper {
    display: none !important;
  }

  body:not(.home) header.page_header .logo_wrapper { display: none !important; }

  /* Push the page down by the height of the now-fixed bar. */
  body {
    padding-top: var(--mvh-bar-h) !important;
  }

  /* ------------------------------------------------------------- the title */

  .mvh-mobile-title {
    display: block;
    margin-left: 6px;
    padding-right: 12px;
    font-family: Tinos, Georgia, serif;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #303030 !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mvh-mobile-title:hover { color: #000 !important; }

  /* ---------------------------------------------------------- hamburger */

  header.page_header .mobile_menu_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 0 -10px !important;   /* line the icon up with the text below it */
    padding: 0 !important;
    float: none !important;
  }

  header.page_header .mobile_menu_button > span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1 !important;
    color: #303030 !important;
    cursor: pointer;
  }

  header.page_header .mobile_menu_button i { font-size: 20px; }

  /* ------------------------------------------------------ off-canvas panel */

  nav.mobile_menu {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto !important;
    width: min(82vw, 330px);
    /* top:0 + bottom:0 sizes the panel to the viewport. An explicit height competed
       with them and came out 96px too tall. */
    height: auto !important;
    margin: 0 !important;
    padding: calc(var(--mvh-bar-h) + 12px) 0 28px !important;
    background: #fff;
    border: 0 !important;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.16);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1300;

    /* Kept in the layout but out of sight and out of reach until opened. The theme's
       slideToggle writes inline display/height, so these need !important. */
    display: block !important;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.28s;
  }

  body.mvh-nav-open nav.mobile_menu {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
  }

  nav.mobile_menu > ul {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  nav.mobile_menu > ul > li {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
  }

  nav.mobile_menu > ul > li > a {
    display: block !important;
    padding: 15px 26px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #303030 !important;
    text-transform: none !important;
    letter-spacing: 0.01em;
  }

  nav.mobile_menu > ul > li > a:hover,
  nav.mobile_menu > ul > li.active > a {
    background: #f7f7f7 !important;
    color: #000 !important;
  }

  /* No submenus in this menu, so the expand arrows would only confuse. */
  nav.mobile_menu .mobile_arrow { display: none !important; }

  /* The language switcher is a flag image; give it room to breathe. */
  nav.mobile_menu > ul > li > a img { vertical-align: middle; }

  /* ------------------------------------------------------------- backdrop */

  .mvh-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 1250;
  }

  body.mvh-nav-open .mvh-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* --------------------------------------------------------- close button */

  .mvh-nav-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: #303030;
    cursor: pointer;
  }

  /* Nothing should scroll behind an open panel. */
  body.mvh-nav-open {
    overflow: hidden !important;
  }

  /* The theme's back-to-top button would sit under the panel. */
  body.mvh-nav-open #back_to_top { display: none !important; }
}

/* Desktop keeps the original header; the title is a phone-only affordance.
   The panel is moved to <body> at runtime, so hide it here explicitly rather than
   relying on a theme rule that may have assumed it sat inside the header. */
@media only screen and (min-width: 1001px) {
  .mvh-mobile-title,
  .mvh-nav-backdrop,
  .mvh-nav-close { display: none !important; }

  body > nav.mobile_menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  nav.mobile_menu { transition: none !important; }
  .mvh-nav-backdrop { transition: none !important; }
}