/* hdr-mobile.css - [HDR-20261017] ONE consistent phone header for every public page, shared by auto-seo.co.uk and wordpress-seo.co.uk.
   Mark 17 Oct 2026: on his iPhone the logo wrapped ('Auto-' / 'Seo.co.uk'), 'Sign in ->' wrapped and 'Blog' was squeezed.
   Root cause: every page carries its own copy of the header markup (about 8 variants) and only some had white-space:nowrap or a phone
   size; the plain Tailwind nav (pricing, free-audit, payment ...) had neither, so any enlarged text size or narrow phone wrapped it.
   Phones only (max-width 480px): desktop is untouched. Logo = icon + name on ONE line, name scales down with the screen instead of wrapping;
   header links/buttons never wrap and are at least 44px tall; nothing may push the page sideways.
   Does NOT touch hosted-blog headers (those are pixel clones of the client's own site) and is not loaded by dashboard/admin pages. */
@media (max-width:480px){
  /* the bar itself */
  body > nav:not(#navbar):not(.gs-nav), body > header:not(#lp-head) > nav:not(#navbar):not(.nav-links){ padding-left:14px !important; padding-right:14px !important; padding-top:10px !important; padding-bottom:10px !important; column-gap:10px !important; flex-wrap:nowrap !important; }
  :is(body > nav, body > header, body > header > nav, body > header > .wrap, #navbar > div, #lp-head > div, .gs-nav){ column-gap:10px; max-width:100%; }
  body > nav > div:not([id]), body > header > div > div:not([id]):not(.logo){ column-gap:10px !important; gap:10px !important; flex-shrink:0; min-width:0; }

  /* logo: icon + name, single line, scales down, never shrinks into a wrap */
  :is(body > nav, body > header, body > header > nav, #navbar, #lp-head, .gs-nav, header.hd) a:is([href="/"], [href="index.html"], [href="/index.html"], [href="#top"], .logo, .gs-brand):not(.brand):not(.hidden){
    flex:0 0 auto !important; white-space:nowrap !important; display:inline-flex !important; align-items:center; min-height:44px; max-width:100%;
  }
  header a.brand, .hd a.brand, a.brand{ flex:0 0 auto !important; white-space:nowrap !important; display:inline-block !important; line-height:44px; }
  :is(body > nav, body > header, body > header > nav, #navbar, #lp-head, .gs-nav) a:is([href="/"], [href="index.html"], [href="/index.html"], [href="#top"], .logo, .gs-brand) :is(span, b):not([style*="width"]):not(.gs-mark){
    white-space:nowrap !important;
  }
  :is(body > nav, body > header, body > header > nav, #navbar, #lp-head) a:is([href="/"], [href="index.html"], [href="/index.html"], [href="#top"]) > span:last-child,
  :is(body > nav, body > header, body > header > nav, #lp-head) a.logo, a.brand, .gs-name{
    font-size:clamp(13px, 3.8vw, 16px) !important; letter-spacing:-.01em;
  }

  /* buttons and links in the bar: one line, 44px tap height (links the page deliberately hides on phones stay hidden) */
  :is(body > nav, body > header, #lp-head, .gs-nav) > a:not(:is([href="/"], [href="index.html"], [href="/index.html"], [href="#top"], .logo, .brand, .gs-brand)),
  :is(body > nav, body > header, #lp-head, .gs-nav) > div:not(#mobile-menu) > a:not(.hidden):not(:is([href="/"], [href="index.html"], [href="/index.html"], [href="#top"], .logo, .brand, .gs-brand)),
  body > header > .wrap > nav > a.btn, body > header > nav > a.btn, .nav-links a.btn,
  body > nav button:not(#mobile-toggle), #lp-head button{
    white-space:nowrap !important; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  }
  .nav-links a:not(.btn){ white-space:nowrap; }
  body > nav > a:not(:first-child):not([class*="rounded"]):not([class*="bg-"]):not(.gs-login),
  body > nav > div > a:not([class*="rounded"]):not([class*="bg-"]){ padding-left:4px; padding-right:4px; }
  #navbar > div{ padding-left:14px !important; padding-right:14px !important; column-gap:8px; }
  #navbar > div > a:first-child{ flex:0 0 auto; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
  #navbar > div > a:first-child > span:last-child{ white-space:nowrap; font-size:clamp(13px, 3.9vw, 18px) !important; }
  #navbar #mobile-toggle, #mobile-toggle{ min-width:44px; min-height:44px; }
  header.hd .pill, .hd .pill{ white-space:nowrap; flex-shrink:0; }

  /* long labels shrink instead of wrapping */
  .gs-login{ white-space:nowrap; font-size:clamp(13px, 3.9vw, 15px); }
  html, body{ overflow-x:clip; }
}
@media (max-width:360px){
  body > header > .wrap.nav, body > header > .nav{ padding-left:14px !important; padding-right:14px !important; column-gap:8px !important; }
  .nav-links{ gap:10px !important; }
  .nav-links a.btn{ padding-left:12px !important; padding-right:12px !important; }
  #lp-head a[class*="rounded"]{ padding-left:12px !important; padding-right:12px !important; font-size:13px !important; }
}
@media (max-width:340px){
  body > nav > a.rounded-full, body > nav > a[class*="rounded"]{ padding-left:10px !important; padding-right:10px !important; font-size:12px !important; }
  :is(body > nav, body > header, #lp-head) > a:not(:is([href="/"], .logo, .brand, .gs-brand)){ font-size:13px; padding-left:12px !important; padding-right:12px !important; }
  #lp-head a[class*="rounded"]{ padding-left:12px !important; padding-right:12px !important; font-size:13px !important; }
}
/* WordPress-SEO only: wpseo-nav.css used to hide 'Blog' on phones; the headers must match, so Blog stays visible (nowrap, 44px). */
@media (max-width:480px){
  body > nav a.wpseo-xs-hide[href*="blog"]{ display:inline-flex !important; }
}
@media (max-width:320px){
  body > header .logo > span:first-child, #lp-head a:first-child > span:first-child, #lp-head a:first-child > div:first-child{ width:26px !important; height:26px !important; min-width:26px; }
  .nav-links a.btn, #lp-head a[class*="rounded"], body > nav > a[class*="rounded"]{ font-size:12px !important; padding-left:9px !important; padding-right:9px !important; }
  body > header > .wrap.nav, body > header > .nav{ padding-left:12px !important; padding-right:12px !important; }
}

/* [HDR2-20261017] customer dashboard mobile top bar (_dashboard-mobile-nav.php, class dash-mbar) and the PHP blog/author nav: same rules. */
@media (max-width:480px){
  .dash-mbar{ column-gap:10px; padding-left:14px !important; padding-right:14px !important; }
  .dash-mbar > a:first-child{ flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px; }
  .dash-mbar > a:first-child > span{ white-space:nowrap; font-size:clamp(13px, 3.8vw, 16px); }
  .dash-mbar > button{ min-height:44px; min-width:44px; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
  nav.sticky > div:first-child{ padding-left:14px !important; padding-right:14px !important; column-gap:8px; }
  nav.sticky > div:first-child > a:first-child > span:last-child{ font-size:clamp(13px, 3.9vw, 18px) !important; }
  nav.sticky > div:first-child > a:first-child{ min-height:44px; flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; }
  nav.sticky > div:first-child > button{ min-height:44px; min-width:44px; }
}
@media (max-width:320px){
  body > nav > a:first-child > div:first-child{ width:26px !important; height:26px !important; min-width:26px; }
  body > nav{ padding-left:10px !important; padding-right:10px !important; column-gap:6px !important; }
  body > nav > a[class*="rounded"]{ padding-left:8px !important; padding-right:8px !important; font-size:12px !important; }
}

/* [MENU-20261017] ONE phone 'Menu' pill on every page (reference: Mark's screenshot of the dashboard pill). Brand tokens: indigo here, violet on WordPress-SEO. */
:root{--mnu-ink:#4338ca;--mnu-bd:#6366f1;--mnu-bg:#eef2ff;--mnu-cta:#4f46e5;--mnu-cta-h:#4338ca}
@media (max-width:767px){
  #mobile-toggle, button[onclick*="toggleMobileMenu"], .dash-mbar > button{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px; box-sizing:border-box;
    width:auto !important; height:auto !important; min-width:0; min-height:44px; margin:0 !important; padding:0 12px 0 16px !important;
    border:2px solid var(--mnu-bd) !important; border-radius:9999px !important; background:var(--mnu-bg) !important; color:var(--mnu-ink) !important;
    font:800 16px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif !important; box-shadow:0 1px 2px rgba(15,23,42,.1);
    white-space:nowrap; flex-shrink:0; cursor:pointer;
  }
  #mobile-toggle::before, button[onclick*="toggleMobileMenu"]::before, .dash-mbar > button:not(:has(> span))::before{ content:"Menu"; font-weight:800; font-size:16px; line-height:1; }
  #mobile-toggle > svg, button[onclick*="toggleMobileMenu"] > svg, .dash-mbar > button > svg{ width:22px !important; height:22px !important; flex-shrink:0;  stroke-width:2.6 !important; }
}

@media (max-width:420px){
  #mobile-toggle, button[onclick*="toggleMobileMenu"]{ padding:0 10px 0 13px !important; gap:6px; }
  #mobile-toggle::before, button[onclick*="toggleMobileMenu"]::before{ font-size:15px; }
  #mobile-toggle > svg, button[onclick*="toggleMobileMenu"] > svg{ width:20px !important; height:20px !important; }
}