/* ============================================================
   Mobile responsiveness for Centered Body Wellness.
   Pages use inline styles, so these use !important overrides
   keyed to structural selectors. Desktop is untouched.
   ============================================================ */

@media (max-width: 960px) {
  /* Any multi-column inline grid collapses to one column */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* The thin vertical divider between homepage columns disappears */
  div[style*="width: 1px"][style*="min-height"] { display: none !important; }
  /* Fixed backgrounds are janky on mobile browsers */
  section[data-fixed-bg="1"] { background-attachment: scroll !important; }
}

@media (max-width: 760px) {
  /* Header: let it grow, wrap the nav under the logo, keep logo LARGE and readable */
  header[data-screen-label="Header"] { height: auto !important; padding: 10px 0 !important; }
  header[data-screen-label="Header"] > div {
    flex-wrap: wrap !important; justify-content: center !important;
    gap: 10px 14px !important; padding: 0 14px !important;
  }
  header[data-screen-label="Header"] img[alt="Centered Body Wellness"] { height: 96px !important; }
  header[data-screen-label="Header"] nav {
    margin-left: 0 !important; justify-content: center !important;
    gap: 12px 16px !important; font-size: 12px !important;
  }
  /* Homepage transparent header can't stay see-through once it wraps tall */
  header[data-transparent-header="1"] { position: relative !important; background: #23221C !important; }
  section[data-screen-label="Hero"] { margin-top: 0 !important; min-height: 64vh !important; }

  /* Type + spacing rhythm on small screens */
  h1 { font-size: 34px !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }

  /* Floating decorative art scales down instead of crowding text */
  img[src*="brain"], img[src*="heart-art"], img[src*="roots"] { width: 96px !important; }
  div[style*="width: 205px"][style*="height: 190px"] { width: 130px !important; height: 130px !important; }

  /* Footer stacks and centers */
  footer div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; text-align: center; }
  footer img { margin-left: auto !important; margin-right: auto !important; }

  /* Newsletter slide-in becomes full-width bottom sheet */
  #cbw-news { right: 10px !important; left: 10px !important; bottom: 10px !important; max-width: none !important; }

  /* Cards and CTA rows breathe */
  div[style*="flex-wrap: wrap"][style*="justify-content: center"] { gap: 14px !important; }
}

@media (max-width: 420px) {
  header[data-screen-label="Header"] img[alt="Centered Body Wellness"] { height: 84px !important; }
  h1 { font-size: 30px !important; }
}

/* ============================================================
   Utility topbar (phone / email / location) — was overflowing
   and getting clipped on narrow screens.
   ============================================================ */
div[data-screen-label="Topbar"] {
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: visible !important;
}
div[data-screen-label="Topbar"] * { box-sizing: border-box; }

@media (max-width: 620px) {
  div[data-screen-label="Topbar"] {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 10px 16px !important;
    text-align: center;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  /* Separator pipes only make sense inline; hide them once stacked */
  div[data-screen-label="Topbar"] > span:not(:last-child) { display: none !important; }
}

@media (max-width: 380px) {
  div[data-screen-label="Topbar"] { font-size: 11.5px !important; }
}