/* v7.5.7 — Global mobile header centering (applies to ALL pages) */
/* This does NOT change desktop. It only affects <= 768px widths. */
/* It works with multiple class names used across earlier versions. */

@media (max-width: 768px){
  /* The colored title bar */
  header .brand-gradient,
  header .brand-strip,
  header .brandbar,
  header .header-gradient,
  .brand-gradient,
  .brand-strip,
  .brandbar,
  .header-gradient {
    display:flex;
    align-items:center;
    justify-content:center;   /* center the hospital name */
    position:relative;
    min-height:56px;
  }

  /* Title text itself */
  header .brand-gradient .brand-title,
  header .brand-gradient .site-name,
  header .brand-gradient h1,
  .brandbar .brand-title,
  .brandbar .site-name,
  .header-gradient .site-name {
    margin:0;
    text-align:center;
    width:100%;
    line-height:1.2;
    font-size: clamp(18px, 5vw, 22px);
  }

  /* Keep the hamburger/menu toggle pinned to the right */
  header .menu-toggle,
  header #navToggle,
  header .nav-toggle,
  .menu-toggle,
  #navToggle,
  .nav-toggle {
    position:absolute;
    right:12px;
    top:50%;
    transform: translateY(-50%);
  }

  /* If a large "Book on WhatsApp" CTA sits in the header bar, hide it on phones
     to avoid overlapping the centered title. The action remains available in
     the sticky bottom bar and hero section. */
  header .book-whatsapp,
  .brandbar .book-on-whatsapp,
  .brand-gradient .book-on-whatsapp {
    display:none !important;
  }
}