/* ============================================================================
   mobile-menu.css — the full-screen MENU on phones (below 768px)                                   [build 1]
   Opened by the menu (hamburger) button in the header. A white screen with: close X, logo and "Book Test Drive" along the top,
   then big bold accordion headings (Vehicles, Service & Support) that unfold to their links, and Careers.
   Loaded by includes/header.php with the file's date (?v=...), so a browser can never show an OLD cached copy.
   Behaviour: js/mobile-menu.js. Text only: no icons in the lists.
   ============================================================================ */
.mm{display:none;}

@media (max-width:767px){
  .mm{
    --mm-build:1;                                                       /* js/mobile-menu.js checks this to know this file is in use */
    display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;left:0;height:100vh;height:100dvh;z-index:1000;
    background:#fff;color:var(--ink);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,.8,.24,1),visibility 0s linear .3s;
  }
  .mm.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s cubic-bezier(.22,.8,.24,1),visibility 0s;}
  html.mm-lock{overflow:hidden;}                                        /* the page behind does not scroll while the menu is open */
  .mm *{box-sizing:border-box;}
  .mm a,.mm button{-webkit-tap-highlight-color:transparent;}

  /* top bar: close X | logo | Book Test Drive */
  .mm-bar{
    flex:0 0 auto;display:flex;align-items:center;gap:10px;
    padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px 8px;min-height:72px;
    background:#fff;border-bottom:1px solid #E6E6E2;
  }
  .mm-close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;}
  .mm-logo{flex:1 1 auto;min-width:0;display:block;padding:6px 2px;}
  .mm-logo img{display:block;width:100%;max-width:178px;height:auto;}
  .mm-cta{
    flex:0 0 auto;padding:11px 16px;border-radius:999px;background:var(--yellow);color:var(--ink);
    font-family:var(--body);font-weight:700;font-size:.85rem;line-height:1.2;white-space:nowrap;text-decoration:none;
  }

  /* scrolling area */
  .mm-body{
    position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:6px 24px calc(env(safe-area-inset-bottom,0px) + 48px);
  }
  .mm-list{margin:0;padding:0;list-style:none;}
  .mm-list li{margin:0;padding:0;list-style:none;}

  /* big bold headings: the two menus (accordion) and Careers (a plain link) */
  .mm-acc-btn{
    display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:20px 0;border:0;background:none;text-align:left;cursor:pointer;
    font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2;color:var(--ink);
  }
  .mm-chev{flex:0 0 auto;transition:transform .25s ease;}
  .mm-acc.is-open .mm-chev{transform:rotate(180deg);}
  .mm-link{display:block;padding:20px 0;font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2;color:var(--ink);text-decoration:none;}

  /* the part that unfolds (animates its height) */
  .mm-sec{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.22,.8,.24,1);}
  .mm-acc.is-open .mm-sec{grid-template-rows:1fr;}
  .mm-sec-inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .32s;}
  .mm-acc.is-open .mm-sec-inner{visibility:visible;transition:visibility 0s;}

  .mm-sub{margin:0;padding:0 0 6px;list-style:none;}
  .mm-item{display:block;padding:14px 0;color:var(--ink);text-decoration:none;}
  .mm-item strong{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.3;}
  .mm-item span{display:block;margin-top:6px;font-size:.95rem;line-height:1.4;color:#6A6A66;}
  .mm-foot{margin:4px 0 12px;padding:0;list-style:none;}
  .mm-foot a{display:block;padding:14px 0;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);text-decoration:none;}

  .mm a:focus-visible,.mm button:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px;}
  .mm-close:focus-visible{border-radius:50%;}
  .mm-cta:focus-visible{border-radius:999px;}
}

/* the very narrowest phones (320-340px): a more compact button and tighter spacing, so the logo keeps a readable size */
@media (max-width:340px){
  .mm-bar{gap:6px;padding-right:10px;}
  .mm-cta{padding:9px 12px;font-size:.78rem;}
}

/* 761-767px: the mobile header is in use but the menu button was hidden (it only showed up to 760px), so there was no way to open any menu. Show it. */
@media (min-width:761px) and (max-width:767px){
  .mobile-toggle{display:flex;}
}