/* Mobile compatibility layer for the fixed-width WebPlus export. */
:root {
  --redwood-red: #d20b0b;
  --redwood-dark: #171717;
  --mobile-header-height: 60px;
}

#mobile-header,
#mobile-footer {
  display: none;
}

/* WebPlus disabled native vertical overflow on several pages and delegated
   scrolling to an old jQuery plugin. Native scrolling is more reliable across
   current desktop, tablet and mobile browsers, and still fires window scroll
   events for the sticky desktop navigation. */
html,
body {
  overflow-y: auto !important;
}

/* The generated canvas is exactly 1000px wide. Use the adaptive treatment on
   phones and tablets, then leave the original desktop export untouched. */
@media (max-width: 1024px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  /* The generated desktop canvas remains visually intact and is fitted to
     the phone width by mobile.js. */
  #divMain {
    margin: 0 !important;
    transform-origin: left top;
  }

  body > div[style*="min-width:1000px"],
  #divMain > div[id="nav"],
  #divMain .desktop-primary-nav {
    display: none !important;
  }

  #mobile-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: var(--mobile-header-height);
    padding: 0 16px;
    color: #fff;
    background: rgba(20, 20, 20, 0.98);
    border-bottom: 3px solid var(--redwood-red);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
    font-family: "Montserrat Semi Bold", Montserrat, Arial, sans-serif;
  }

  .mobile-brand {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 17px;
    line-height: 1;
  }

  .mobile-menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }

  .mobile-menu-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    display: block;
    width: 25px;
    height: 2px;
    background: currentColor;
    content: "";
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .mobile-menu-icon {
    position: relative;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    position: absolute;
    left: 0;
  }

  .mobile-menu-icon::before { top: -8px; }
  .mobile-menu-icon::after { top: 8px; }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon {
    background: transparent;
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  #mobile-menu {
    position: fixed;
    inset: var(--mobile-header-height) 0 auto 0;
    display: none;
    max-height: calc(100dvh - var(--mobile-header-height));
    padding: 8px 0 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(20, 20, 20, 0.99);
    border-bottom: 3px solid var(--redwood-red);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  }

  #mobile-menu.is-open {
    display: block;
  }

  #mobile-menu a {
    display: block;
    padding: 13px 20px;
    color: #fff;
    border-left: 4px solid transparent;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    font-size: 14px;
    line-height: 1.25;
  }

  #mobile-menu a:hover,
  #mobile-menu a:focus,
  #mobile-menu a.is-current {
    color: #fff;
    background: #2a2a2a;
    border-left-color: var(--redwood-red);
  }

  #mobile-footer {
    position: absolute;
    left: 0;
    z-index: 20;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 30px 22px 24px;
    color: #ddd;
    background: #1b1b1b;
    border-top: 4px solid var(--redwood-red);
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
  }

  #mobile-footer h2 {
    margin: 0 0 12px;
    color: #fff;
    font-family: "Montserrat Semi Bold", Montserrat, Arial, sans-serif;
    font-size: 17px;
    font-weight: normal;
    text-transform: uppercase;
  }

  #mobile-footer p {
    margin: 0 0 20px;
  }

  #mobile-footer a {
    color: #fff;
    overflow-wrap: anywhere;
  }

  .mobile-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 28px;
  }

  .mobile-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 22px;
  }

  .mobile-footer-social a {
    display: inline-block;
    padding: 8px 11px;
    border: 1px solid #555;
    border-radius: 3px;
    text-decoration: none;
  }

  .mobile-footer-copy {
    margin: 0 !important;
    padding-top: 18px;
    color: #aaa;
    border-top: 1px solid #444;
    font-size: 12px;
  }
}

@media (min-width: 540px) and (max-width: 1024px) {
  .mobile-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}