/* nav-dd.css - [HDRDROP-20261030] desktop header dropdowns on auto-seo.co.uk (Mark approved 30 Oct 2026 07:22):
   Features (Features, How it Works, GEO) and Free tools (AI Check, Website Audit, Outrank a Competitor, Free AI Search Playbook).
   Shared by all three copies of the homepage header: header[data-hdr-unify] pages (site-header.css), the Tailwind homepage + 10 niche
   pages, and the blogexample.auto-seo.co.uk theme. Behaviour: /assets/nav-dd.js (hover + click/tap + keyboard). Without JS the
   panels still open on hover / focus-within. Phone menu (#mobile-menu) is untouched: it stays a flat list.
   Source: CLAWD/tools/hdrunify/nav-dd.css */
#navbar .ash-dd{position:relative;display:flex;align-items:center;margin:0;padding:0}
#navbar .ash-dd-btn{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:20px;font-weight:500;font-style:normal;letter-spacing:normal;text-transform:none;
  color:#475569;cursor:pointer;-webkit-appearance:none;appearance:none;white-space:nowrap;min-width:0;min-height:0;width:auto;height:auto;
  transition:color .15s cubic-bezier(.4,0,.2,1)}
#navbar .ash-dd-btn:hover,#navbar .ash-dd.is-open > .ash-dd-btn{color:#6366f1}
#navbar .ash-dd-btn:focus{outline:none}
#navbar .ash-dd-btn:focus-visible{outline:2px solid #6366f1;outline-offset:4px;border-radius:4px}
#navbar .ash-dd-chev{display:block;width:14px;height:14px;flex:0 0 14px;margin:0;transition:transform .15s cubic-bezier(.4,0,.2,1)}
#navbar .ash-dd.is-open .ash-dd-chev{transform:rotate(180deg)}
/* the panel starts right at the trigger's bottom edge; its transparent 14px top padding is the hover bridge (no gap to fall through) */
#navbar .ash-dd-panel{position:absolute;top:100%;left:50%;z-index:60;display:block;margin:0;padding:14px 0 0;transform:translateX(-50%);
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
#navbar .ash-dd.is-open > .ash-dd-panel,
#navbar:not(.ash-dd-js) .ash-dd:hover > .ash-dd-panel,
#navbar:not(.ash-dd-js) .ash-dd:focus-within > .ash-dd-panel{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .12s ease}
#navbar .ash-dd-card{display:flex;flex-direction:column;gap:2px;min-width:228px;margin:0;padding:8px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;
  box-shadow:0 12px 32px -10px rgba(15,23,42,.20),0 2px 6px rgba(15,23,42,.06);text-align:left}
#navbar .ash-dd-card a{display:flex;align-items:center;height:40px;margin:0;padding:0 14px;border-radius:10px;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:20px;font-weight:500;color:#475569;white-space:nowrap;text-decoration:none;background:none;
  transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}
#navbar .ash-dd-card a:hover,#navbar .ash-dd-card a:focus-visible{background:#eef2ff;color:#6366f1;outline:none}
/* top-level links never wrap now the bar is short */
#navbar .ash-menu > a,#navbar .ash-menu > .ash-dd{white-space:nowrap;flex-shrink:0}
@media (prefers-reduced-motion:reduce){ #navbar .ash-dd-panel,#navbar .ash-dd-chev{transition:none} }

/* [HDRDROP-20261030] TABLETS 768-879px: the bar needs about 818px (logo + menu + Login/Get Started), so below 880px the header switches to the
   PHONE header (white bar, "Menu" pill, flat list) instead of wrapping. Same look as hdr-mobile.css gives phones (<=767px). Desktop bar from 880px. */
@media (min-width:768px) and (max-width:879px){
  #navbar .ash-menu,#navbar #nav-auth{display:none !important}
  #navbar #mobile-menu{display:block !important}
  nav#navbar,nav#navbar.scrolled{background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    border-bottom:1px solid #e2e8f0 !important;box-shadow:0 1px 6px rgba(15,23,42,.06) !important;padding-top:12px !important;padding-bottom:12px !important;z-index:1000 !important}
  /* [HDRMOBAUDIT-20261030] the toggle here is the plain burger: see the HDRMOBAUDIT block at the end */
}

/* [HDRAUDITBTN-20261030] Mark 30 Oct: free Google Map listing audit button (/free-local-audit/) in the header, next to Login (label: see HDRAUDITBTN3 below).
   Two layouts, switched by the data-gba attribute on #nav-auth and #mobile-menu (same value on every page):
     data-gba="a"  Login | [audit] (outline) | [Get Started] (filled, unchanged)
     data-gba="b"  Login | [audit] (filled); Get Started hidden. Signed in: Get Started has already become
                   "My dashboard" (me-cta.js / the homepage's own check set its href to /dashboard.php), so it shows again and the audit button hides.
   Mark chose layout a (30 Oct). Where the one-row bar has no room for it, the header button hides: see the media query below (measured incl. a 17px scrollbar).
   Same 44px height and pill radius as Get Started; even 16px gaps (#nav-auth gap). Phones/tablets (<880px) use the phone menu (same label, full-width outline button). */
#navbar #nav-gmb-audit{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;margin:0;padding:0 24px;border:0;border-radius:9999px;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:20px;font-weight:700;letter-spacing:normal;white-space:nowrap;flex-shrink:0;text-decoration:none;cursor:pointer;
  background:transparent;color:#4f46e5;box-shadow:inset 0 0 0 2px #6366f1;transition:background-color .2s,color .2s,box-shadow .2s}
#navbar #nav-gmb-audit:hover{background:#eef2ff;color:#4338ca}
#navbar #nav-gmb-audit:active{transform:scale(.95)}
#navbar #mobile-gmb-audit{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:12px 24px;border:0;border-radius:9999px;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:24px;font-weight:700;text-align:center;text-decoration:none;text-wrap:balance;
  background:#fff;color:#4f46e5;box-shadow:inset 0 0 0 2px #6366f1}
/* layout b: the audit button is the filled one, Get Started hidden unless it has become "My dashboard" */
#navbar [data-gba="b"] #nav-gmb-audit,#navbar [data-gba="b"] #mobile-gmb-audit{background:#6366f1;color:#fff;box-shadow:none}
#navbar [data-gba="b"] #nav-gmb-audit:hover{background:#4f46e5;color:#fff}
#navbar [data-gba="b"] #nav-get-started:not([href="/dashboard.php"]),#navbar [data-gba="b"] #mobile-get-started:not([href="/dashboard.php"]){display:none !important}
#navbar.ash-li [data-gba="b"] #nav-gmb-audit,#navbar.ash-li [data-gba="b"] #mobile-gmb-audit,
#navbar [data-gba="b"]:has(#nav-get-started[href="/dashboard.php"]) #nav-gmb-audit,#navbar [data-gba="b"]:has(#mobile-get-started[href="/dashboard.php"]) #mobile-gmb-audit{display:none !important}
/* [HDRAUDITBTN3-20261030] Mark 11:07: label is now "Get FREE [Google Business Profile logo] Audit" (logo = our existing /gbp-logo.svg, own colours,
   26px since Mark 11:18 "make the house bigger" [HDRAUDITBTN4], centred, 6px either side; aria-label "Get free Google Map listing audit"). One label everywhere; the old shorter labels are gone. */
#navbar #nav-gmb-audit,#navbar #mobile-gmb-audit{gap:6px;white-space:nowrap}
#navbar #nav-gmb-audit > span,#navbar #mobile-gmb-audit > span{display:inline;margin:0;padding:0}
#navbar .ash-gba-ico{display:block;flex:0 0 26px;width:26px !important;height:26px !important;max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
/* it needs ~963px of bar (+48 padding, +17 scrollbar): shown from 1100px with even ~36px+ gaps; hidden 880-1099 (still in Free tools + phone menu) */
@media (max-width:1099px){ #navbar [data-gba="a"] #nav-gmb-audit{display:none !important} }
/* [HDRAUDITBTN4-20261030] 26px logo: 11px top/bottom padding keeps the phone-menu button at 48px, same as Get Started under it */
#navbar #mobile-gmb-audit{padding-top:11px;padding-bottom:11px}

/* [HDRMENUSCROLL-20261030] phone menu scrolls inside itself when it is taller than the screen (height cap + page lock: nav-dd.js) */
#navbar.ash-mm-open #mobile-menu{overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* 96px: the last button always clears the floating WhatsApp/chat bubble (about 82px from the bottom) and the iPhone home bar */
#navbar #mobile-menu > div{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important}
html.ash-mm-lock,html.ash-mm-lock body{overscroll-behavior:none}

/* [HDRMOBAUDIT-20261030] Mark 15:40: phone header (everything below 880px) = logo | [GBP logo + "Audit"] pill (/free-local-audit/, same outline pill as
   the old "Menu" pill) | plain burger (three lines, turns into an X when open; still #mobile-toggle, so every page's open/close script and the
   menu-scroll lock keep working). Selectors are #navbar #id so they beat hdr-mobile.css (shared with other sites, left untouched). Desktop: pill hidden. */
#navbar #mobile-gmb-pill{display:none}
@media (max-width:879px){
  #navbar #mobile-gmb-pill{display:inline-flex !important;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:44px;min-height:44px;margin:0;
    padding:0 14px 0 10px !important;border:2px solid #6366f1;border-radius:9999px;background:#eef2ff;color:#4338ca;text-decoration:none;white-space:nowrap;flex:0 0 auto;
    font:800 16px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;box-shadow:0 1px 2px rgba(15,23,42,.1);cursor:pointer}
  #navbar #mobile-gmb-pill:active{transform:scale(.97)}
  #navbar #mobile-gmb-pill > img{display:block;flex:0 0 24px;width:24px !important;height:24px !important;max-width:none;margin:0;padding:0;border:0}
  #navbar #mobile-gmb-pill > span{display:inline;margin:0;padding:0;white-space:nowrap}
  #navbar #mobile-toggle{display:inline-flex !important;align-items:center;justify-content:center;gap:0 !important;box-sizing:border-box;flex:0 0 44px;
    width:44px !important;height:44px !important;min-width:44px;min-height:44px;margin:0 !important;padding:0 !important;border:0 !important;border-radius:10px !important;
    background:transparent !important;color:#0f172a !important;box-shadow:none !important;cursor:pointer}
  #navbar #mobile-toggle::before{content:none !important;display:none !important}
  #navbar #mobile-toggle svg{display:block;width:30px !important;height:30px !important;flex-shrink:0;stroke-width:2.3 !important}
  #navbar #mobile-toggle:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
}
@media (max-width:420px){
  #navbar #mobile-gmb-pill{padding:0 12px 0 9px !important;font-size:15px}
  #navbar #mobile-gmb-pill > img{flex-basis:22px;width:22px !important;height:22px !important}
}
/* [HDRMOBAUDIT2-20261030] Mark 15:53 "move it closer to the burger": at every phone/tablet width the pill + burger sit together on the right
   (12px apart; 10px at <=350px), the free space sits between the logo and the pill (min 8px), row edges unchanged (14px phones, 24px tablets; 12px <=350px). */
@media (max-width:879px){
  #navbar > div:not(#mobile-menu){column-gap:0 !important}
  #navbar > div:not(#mobile-menu) > a:first-child{margin-right:8px}
  #navbar #mobile-gmb-pill{margin-left:auto !important}
  #navbar #mobile-toggle{margin-left:4px !important}   /* [HDRMOBAUDIT3-20261030] Mark 17:23 'a bit closer': 12px -> 4px (tap areas still apart) */
}
/* small phones (<=350px): slimmer pill and 12px row edges so logo + pill + burger still fit on one row at 320 */
@media (max-width:350px){
  #navbar > div:not(#mobile-menu){padding-left:12px !important;padding-right:12px !important}
  #navbar #mobile-gmb-pill{padding:0 9px 0 7px !important;font-size:14px;gap:4px}
  #navbar #mobile-gmb-pill > img{flex-basis:20px;width:20px !important;height:20px !important}
  #navbar #mobile-toggle{margin-left:4px !important}
}