/* Mobile menu fix - Richie Rich Holidays
   Load this AFTER responsive.css and superfish.css */

/* Hamburger button: hidden on desktop */
.mobile-nav-toggle { display: none; }

@media (max-width: 1199px) {

  /* Hide the tinynav <select> fallback that clashes with the menu */
  header select,
  header .tinynav,
  select.tinynav { display: none !important; }

  /* Let the header use the real screen width (theme fixes .container at 300-960px) */
  header#navigationmenu .container { width: 100% !important; max-width: none; }

  /* Header bar: logo left, hamburger right, menu panel below */
  header#navigationmenu .gridnavigation {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    float: none !important;
    width: auto !important;
    margin: 0 10px !important;
    padding: 6px 0;
    position: relative;
  }
  header#navigationmenu .gridnavigation > a { float: none !important; display: block; }
  header#navigationmenu .logo {
    float: none !important;
    display: block;
    width: auto !important;
    max-width: 220px;
    max-width: min(220px, 60vw);
    height: auto !important;
  }

  .mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin: 0;
    background: #f9fafc;
    border: 1px solid #ebeef2;
    border-radius: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background: #434a54;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Menu panel: collapsed by default, scrolls if long */
  #nav.sf-menu {
    display: none !important;
    flex: 0 0 100%;
    float: none !important;
    position: static !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-top: 1px solid #ebeef2;
  }
  #nav.sf-menu.is-open { display: block !important; }

  /* Top-level items: stacked full-width rows */
  #nav.sf-menu > li {
    display: block !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #ebeef2;
    box-shadow: none !important;               /* remove desktop top colour bar */
    border-left: 4px solid transparent;
  }
  #nav.sf-menu > li.yellow { border-left-color: #f1c40f; }
  #nav.sf-menu > li.orange { border-left-color: #f39c12; }
  #nav.sf-menu > li.blue   { border-left-color: #14b9d5; }
  #nav.sf-menu > li.red    { border-left-color: #e74c3c; }
  #nav.sf-menu > li.violet { border-left-color: #9b59b6; }
  #nav.sf-menu > li.green  { border-left-color: #1bbc9b; }

  #nav.sf-menu .menufilter { display: none !important; }
  #nav.sf-menu .sf-sub-indicator { display: none !important; }

  #nav.sf-menu > li > a {
    display: block !important;
    float: none !important;
    padding: 14px 56px 14px 16px !important;   /* room for the arrow button */
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
  }

  /* Arrow button that opens a submenu */
  #nav .sub-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid #ebeef2;
    cursor: pointer;
    z-index: 2;
  }
  #nav .sub-toggle::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin: -6px auto 0;
    border-right: 2px solid #434a54;
    border-bottom: 2px solid #434a54;
    transform: rotate(45deg);
    transition: transform .2s ease;
    position: relative;
    top: 50%;
  }
  #nav li.sub-open > .sub-toggle::before { transform: rotate(-135deg); margin-top: -2px; }

  /* Submenus: collapsed, inline (no floating dropdown) */
  #nav.sf-menu li > ul {
    display: none !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    background: #f9fafc;
  }
  #nav.sf-menu li.sub-open > ul { display: block !important; }

  #nav.sf-menu li > ul > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-top: 1px solid #ebeef2;
  }
  #nav.sf-menu li > ul > li > a {
    display: block !important;
    float: none !important;
    padding: 12px 16px 12px 32px !important;
    font-size: 15px;
    white-space: normal;
  }

  /* ---- Typography: clean Signika (already loaded by the theme) ---- */
  #nav.sf-menu, #nav.sf-menu a, #nav.sf-menu strong {
    font-family: 'Signika', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
  }
  #nav.sf-menu > li > a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #2f3640 !important;
  }
  #nav.sf-menu > li > a strong { font-weight: inherit; }
  #nav.sf-menu > li.current > a,
  #nav.sf-menu > li.sub-open > a { color: #14b9d5 !important; }

  #nav.sf-menu li > ul > li > a {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .02em;
    color: #5e6d81 !important;
    border: 0 !important;
  }
  #nav.sf-menu li > ul > li > a:hover,
  #nav.sf-menu li > ul > li > a:active { color: #14b9d5 !important; background: #fff; }
}