/* header-fix.css - ONE phone header for every page (loaded last).
   Layout: [menu] [logo ........] [account] [EN]. Fixes: "Sign in" text spilling out of the
   account icon, menu button sitting low / off-centre, different header heights per page. */
@media (max-width: 760px) {
  html body .site-header:not(#_) {
    display: block !important; position: relative !important; min-height: 0 !important; height: auto !important;
    padding: 6px 12px !important; background: #fffdf8 !important; border-bottom: 1px solid rgba(8,127,62,.14) !important;
  }
  html body .site-header .header-main:not(#_) {
    display: grid !important; grid-template-columns: 44px minmax(0,1fr) auto auto !important;
    align-items: center !important; column-gap: 8px !important;
    height: 52px !important; min-height: 52px !important; padding: 0 !important; margin: 0 !important; width: 100% !important; position: relative !important;
  }
  html body .site-header .header-search:not(#_),
  html body .site-header .header-contact:not(#_) { display: none !important; }
  html body .site-header .header-actions:not(#_) { display: contents !important; }

  /* menu button: always first, always centred, drawn in CSS (works without the icon font) */
  html body .site-header .mobile-menu:not(#_) {
    grid-column: 1 !important; order: 1 !important; position: static !important; inset: auto !important; transform: none !important;
    margin: 0 !important; padding: 0 !important; width: 44px !important; height: 44px !important; min-width: 44px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border: 0 !important; border-radius: 12px !important; background-color: transparent !important; box-shadow: none !important;
    font-size: 0 !important; color: transparent !important; line-height: 1 !important;
    background-repeat: no-repeat !important;
    background-image: linear-gradient(#066a33,#066a33), linear-gradient(#066a33,#066a33), linear-gradient(#066a33,#066a33) !important;
    background-size: 22px 2.5px, 22px 2.5px, 22px 2.5px !important;
    background-position: center 14.5px, center 20.5px, center 26.5px !important;
  }
  html body .site-header .mobile-menu:not(#_)::before,
  html body .site-header .mobile-menu:not(#_)::after,
  html body .site-header .mobile-menu span,
  html body .site-header .mobile-menu i { display: none !important; content: none !important; }

  /* logo: second column, centred between the buttons */
  html body .site-header .logo-wrap:not(#_) {
    grid-column: 2 !important; order: 2 !important; position: static !important; inset: auto !important; transform: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; margin: 0 !important;
  }
  html body .site-header .brand-mark:not(#_) { display: none !important; }
  html body .site-header .foods-banner:not(#_) { display: block !important; height: 32px !important; width: auto !important; max-width: 44vw !important; object-fit: contain !important; }
  /* pages that have only the round logo and no banner: show it */
  html body .site-header .logo-wrap:not(:has(.foods-banner)) .brand-mark:not(#_) { display: block !important; height: 38px !important; width: auto !important; max-width: 44vw !important; }

  /* account icon: a 44px square with the icon only - the words never show on a phone */
  html body .site-header .wf-header-signin:not(#_) {
    grid-column: 3 !important; order: 3 !important; position: relative !important; inset: auto !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 44px !important;
    padding: 0 !important; margin: 0 !important; border-radius: 12px !important; gap: 0 !important;
    font-size: 0 !important; line-height: 0 !important; overflow: hidden !important;
  }
  html body .site-header .wf-header-signin:not(#_) .account-login-label,
  html body .site-header .wf-header-signin:not(#_) .account-name-label { display: none !important; }
  html body .site-header .wf-header-signin:not(#_):not(:has(.account-mini-avatar))::before {
    content: "" !important; display: block !important; position: static !important; width: 20px !important; height: 20px !important; margin: 0 !important; flex: 0 0 20px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
  html body .site-header .wf-header-signin:not(#_) { color: #066a33 !important; }
  html body .site-header .wf-header-signin:not(#_) .account-mini-avatar { width: 30px !important; height: 30px !important; font-size: 13px !important; line-height: 30px !important; flex: 0 0 30px !important; margin: 0 !important; }
  html body .site-header .wf-header-signin:not(#_):has(.account-mini-avatar) { width: 44px !important; max-width: 44px !important; padding: 0 !important; }

  /* language button: last column */
  html body .site-header .bagdad-language-switcher:not(#_) {
    grid-column: 4 !important; order: 4 !important; width: auto !important; height: 44px !important; display: flex !important; align-items: center !important; margin: 0 !important; position: static !important;
  }
  html body .site-header .bagdad-language-toggle:not(#_) { min-height: 40px !important; padding: 0 10px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; }

  /* the bottom bar stays one fixed size on every page */
  html body .mobile-bottom-nav:not(#_) { min-height: 64px !important; }
}