/* ============================================================================
   header-menu.css — DROP-DOWN MENUS in the header (tablet + desktop, 768px and wider)           [build 1]
   Loaded by includes/header.php with the file's date (?v=...), so a browser can never show an OLD cached copy.
   ONE white panel under the bar that glides + resizes between "Vehicles" and "Service & Support", content sliding across.
   It only appears when you point at one of those two menu names (js/header-menu.js). Text only: no icons in the menu.
   Phones (<768px) never see it: .hdr-dd is display:none there (and it also carries the HTML "hidden" attribute).
   ============================================================================ */
.hdr-dd{display:none;--dd-build:1;}                           /* (the build marker is here, outside the media query, so the script can see it at every width) */

@media (min-width:768px){
  .header-v2-overlay header{position:relative;}                         /* the panel is positioned against the green bar */

  /* the two menu names in the bar: label + small chevron that flips while the menu is open */
  .header-v2-overlay .hdr-trigger{display:inline-flex;align-items:center;}
  .hdr-chev{flex:0 0 auto;margin-left:7px;opacity:.7;transition:transform .25s ease;}
  .header-v2-overlay .hdr-trigger[aria-expanded="true"]{color:var(--ink);}
  .hdr-trigger[aria-expanded="true"] .hdr-chev{transform:rotate(180deg);}

  /* the panel: sits 10px under the green bar; --dd-x / --dd-w / --dd-h are set by the script for the menu you point at */
  .hdr-dd{
    --dd-build:1;                                                       /* js/header-menu.js checks this to know this file is the one in use */
    display:block;position:absolute;top:calc(100% + 10px);left:var(--dd-x,0);width:var(--dd-w,500px);height:var(--dd-h,200px);z-index:30;
    background:#fff;border-radius:18px;
    box-shadow:0 22px 55px rgba(10,25,20,.17),0 3px 12px rgba(10,25,20,.07);
    opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
    transition:left .36s cubic-bezier(.22,.8,.24,1),width .36s cubic-bezier(.22,.8,.24,1),height .36s cubic-bezier(.22,.8,.24,1),
               opacity .2s ease,transform .26s ease,visibility 0s linear .26s;
  }
  .hdr-dd::before{content:'';position:absolute;left:0;right:0;top:-24px;height:24px;}      /* invisible bridge, so the pointer can travel from the bar to the panel */
  .hdr-dd.is-open{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:left .36s cubic-bezier(.22,.8,.24,1),width .36s cubic-bezier(.22,.8,.24,1),height .36s cubic-bezier(.22,.8,.24,1),
               opacity .2s ease,transform .26s ease,visibility 0s;
  }
  .hdr-dd.no-morph{transition:opacity .2s ease,transform .26s ease,visibility 0s;}          /* first open: appear where it belongs instead of gliding in */
  .hdr-dd-body{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;}

  /* each menu's content: the active one fades in, the others slide away to the side they sit on */
  .hdr-dd-sec{
    position:absolute;top:0;left:0;width:var(--sec-w,500px);box-sizing:border-box;padding:18px 20px 6px;
    opacity:0;visibility:hidden;transform:translateX(var(--dd-shift,0));
    transition:opacity .2s ease,transform .36s cubic-bezier(.22,.8,.24,1),visibility 0s linear .2s;
  }
  .hdr-dd-sec.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease .06s,transform .36s cubic-bezier(.22,.8,.24,1),visibility 0s;}

  .hdr-dd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;margin:0;padding:0;list-style:none;}
  .hdr-dd-list li{margin:0;padding:0;list-style:none;}
  .hdr-dd-item{display:block;padding:12px 16px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background .15s;}
  .hdr-dd-item:hover{background:#F3F4F1;}
  .hdr-dd-item:focus-visible,.hdr-dd-foot a:focus-visible{outline:2.5px solid var(--ink);outline-offset:-2px;}
  .hdr-dd-txt strong{display:block;font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.25;color:var(--ink);}
  .hdr-dd-txt span{display:block;margin-top:3px;font-size:.84rem;line-height:1.35;color:#6A6A66;}

  .hdr-dd-foot{margin:8px 16px 0;border-top:1px solid #E7E8E4;}
  .hdr-dd-foot a{display:inline-block;padding:13px 0 14px;font-size:.86rem;font-weight:500;color:#6A6A66;text-decoration:none;transition:color .15s;}
  .hdr-dd-foot a:hover{color:var(--ink);}
}

/* the narrowest tablets (768-819px) have no room to spare: a little tighter so the two chevrons still fit with some margin */
@media (min-width:768px) and (max-width:819px){
  .header-v2-overlay .hdr-nav{gap:14px;}
  .header-v2-overlay .hdr-nav a{font-size:.9rem;}
  .hdr-chev{margin-left:5px;}
}