/* ==========================================================================
   mobile-center.css  —  Cranial Facial Release
   Bashō, Aug 19 2026: "center align all things on mobile."

   Loaded LAST on every page so it wins the cascade without editing the
   four existing stylesheets. Every rule lives inside the <=768px query,
   so desktop and tablet-landscape are byte-for-byte unchanged.

   768px is the safe line: cfr2.css collapses its grids at 880px and
   main.css at 768px, so at <=768 every layout is already single-column.

   Two deliberate exceptions, both instrument rather than content:
     - the sticky header bar (logo + Find a Doctor button)
     - Leaflet's own map controls and attribution
   Both are called out below and are one comment away from joining in.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- 1 · text ---------------------------------------------------------
     text-align inherits, so the body declaration carries most of the page.
     It is not enough on its own: several pages hard-set left further down
     the cascade, at a specificity a plain override cannot reach, and two
     do it from an inline style attribute, which nothing can outrank.
     Known offenders: .hero-grid .answer-first (conditions hub),
     .seminar-card / .seminar-actions / .seminar-cta (seminars),
     .editorial-note inline (articles), footer, .refer-visual.

     So the sweep runs on !important, held inside :where() to keep the
     selector at zero specificity. That way the exceptions below, which are
     also !important but genuinely more specific, still win cleanly. */

  html body { text-align: center; }

  html body :where(header, footer, main, section, article, aside, nav, div,
    p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd,
    blockquote, figure, figcaption, span, small, strong, em, address,
    label, table, thead, tbody, tr, th, td) { text-align: center !important; }


  /* --- 2 · lists --------------------------------------------------------
     A centred line with a bullet hanging off the left margin reads as a
     mistake. Pull the marker inside so it travels with the text. */

  html body ul,
  html body ol { list-style-position: inside; padding-left: 0; margin-left: 0; }

  html body li { text-align: center; }

  /* icon-plus-text rows are flex, so they need the row centred, not the
     glyph re-aligned inside it */
  html body .cta-includes li,
  html body .check-list li,
  html body li[class*="flex"] { justify-content: center; }


  /* --- 3 · flex and grid columns ----------------------------------------
     Anything that stacks on mobile with a start-anchored cross axis. */

  html body .footer-bottom,
  html body .footer-grid,
  html body .nav-links,
  html body .seminar-actions,
  html body .about-meta,
  html body .founder-portrait-stack { align-items: center; }

  html body .seminar-date,
  html body .seminar-cta { justify-content: center; }


  /* --- 4 · block boxes --------------------------------------------------
     Elements sized narrower than their column need auto margins; a text
     centre alone will not move the box itself. */

  html body .btn,
  html body .button,
  html body a.btn,
  html body img,
  html body figure,
  html body .card > img,
  html body .logo-thumb { margin-left: auto; margin-right: auto; }

  html body .btn,
  html body .button,
  html body a.btn { justify-content: center; }


  /* --- 5 · form controls ------------------------------------------------
     Labels, helper text and buttons centre with everything else. The
     fields themselves keep typed text on the left, because a centred
     caret jumping around as someone types is a real usability defect. */

  html body input,
  html body textarea,
  html body select { text-align: left !important; }

  html body input[type="submit"],
  html body input[type="button"],
  html body input[type="checkbox"],
  html body input[type="radio"],
  html body button { text-align: center; }


  /* --- 6 · EXCEPTION · the sticky header --------------------------------
     Left-anchored logo with the action on the right. Centring collides
     the two on a 390px screen. Delete this block to centre it. */

  html body header .bar { justify-content: space-between; }
  html body header .logo,
  html body header .logo * { text-align: left !important; }


  /* --- 7 · EXCEPTION · Leaflet chrome -----------------------------------
     Zoom buttons, scale and the attribution line are the map's own
     furniture and break when re-aligned. Popups and the results panel
     are content and DO centre with everything else. */

  html body .leaflet-control-container,
  html body .leaflet-control-container * { text-align: left !important; }
}