/* ============================================================
   B Corp page — mobile + overflow + hero fixes  (CSS only)
   Add to the page's inline <style> block, or the site stylesheet.
   The honeypot rule (#1) is worth adding GLOBALLY — the newsletter
   sign-up sits on every page, so this bug can bite site-wide.
   ============================================================ */

/* ---- 1. Kill the horizontal overflow (the "miles off to the left" bug) ----
   Root cause: the Mailchimp anti-spam honeypot is positioned at left:-5000px,
   which extends the page ~5000px to the left and squashes the mobile layout.
   Fix: hide the honeypot with a clip technique instead of off-screen offset. */
#mc_embed_signup div[aria-hidden="true"]{
  position:absolute !important;
  left:0 !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
}

/* Belt-and-braces guard against any other stray overflow.
   overflow-x:clip (not hidden) does NOT break the sticky page menu. */
html,body{ overflow-x:clip; }


/* ---- 2. Mobile polish (phones / small tablets) ---- */
@media (max-width:767.98px){

  /* Two-column text+image sections: drop the desktop indent and right padding
     so the copy uses the full width instead of hugging the middle. */
  #means .offset-1,
  #how   .offset-1{ margin-left:0 !important; }
  #means .pr-5,
  #how   .pr-5{ padding-right:0 !important; }

  /* When the columns stack, the image panels use height:100% of a now-0-height
     column and can collapse. Guarantee they still show. */
  #means .home-block-large,
  #how   .home-block-large{ min-height:200px; }

  /* Sticky on-page menu: let the pink pills scroll sideways rather than
     stack into a tall block. */
  #onPageMenu{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  #onPageMenu::-webkit-scrollbar{ display:none; }


  /* ---- 3. Hero (mobile) ----
     - remove the dark placeholder box that covered the top of the video
     - let the video fill the whole hero
     - turn the heading card into a full-width, square-cornered overlay
       that covers the entire video, with the text centred on top */

  /* the "black shape": collapse the placeholder box so the video shows through */
  #slider .hero-video{ background:none !important; min-height:0 !important; }

  /* video fills the whole hero */
  #slider video.up{
    position:absolute; top:0; left:0; right:0; bottom:0;
    width:100% !important; height:100% !important;
    object-fit:cover;
  }

  /* full-bleed, square, dark overlay across the entire video */
  #slider .carousel-container{
    position:absolute; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
    width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important;
    background:rgba(0,0,0,0.55);
    display:flex; align-items:center;
    border-radius:0 !important;
  }
  #slider .carousel-container > .container{
    width:100% !important; max-width:100% !important; margin:0 !important;
    padding:28px 24px !important;
  }

  /* inner text block: transparent (the overlay is on the container), and
     centred in the hero (the template leaves it pinned to the left) */
  #slider .sliderfirst{
    position:static !important;
    background:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #slider .sliderfirst h1{ font-size:1.7rem; line-height:1.25; }


  /* ---- 4. Long-form copy: left-align + full width on mobile ----
     Centred long paragraphs are hard to read on a phone. Left-align the body
     copy in the text-heavy sections. Section headings and the icon tiles
     (icon + label) deliberately stay centred. */
  #what p{ text-align:left !important; }                          /* What is a B Corp */
  #director-quote .col-lg-9{ text-align:left !important; }        /* Tim's quote */
  #whyidnetbusiness .row.pt-5 p{ text-align:left !important; }    /* Why choose — intro only, not the icon tiles or CTA */
  #faqs .card-header,
  #faqs .card-body{ text-align:left !important; }                 /* FAQ questions + expanded answers */

  /* section headings left too, to match the body copy
     (icon-tile labels and the "Ready to switch" CTA stay centred) */
  #what h3,
  #commitments .row.pt-5 h3,
  #commitments .row.pt-5 p,
  #whyidnetbusiness .row.pt-5 h3,
  #faqs .keepinformed-title{ text-align:left !important; }
}