/* phone-fixes.css — the ONLY place this site's phone layout is corrected.
 *
 * Why this file exists
 * --------------------
 * Every page of www.pouch.health was built for a wide screen and then squeezed
 * down. On a phone the result has real faults: the header floats over the words,
 * the sliders' arrows land on people's faces, whole screens of nothing sit
 * between sections, and several buttons are twelve pixels tall. None of that was
 * introduced by taking the site off Webflow — it is on the live site too — but
 * the site is ours now, so it can be put right.
 *
 * The rules
 * ---------
 * 1. Webflow's own stylesheet is NEVER edited. This file loads after it and
 *    overrides it, so any fix can be undone by deleting a few lines here.
 * 2. EVERY rule in this file lives inside a max-width media query. Nothing here
 *    can reach a desktop screen — that is checked by tools/check-phone-only.mjs,
 *    which fails the build if a rule ever escapes.
 * 3. Webflow's breakpoints, so we speak the same language as the original:
 *       <= 991px  tablet and below      <= 767px  phone landscape and below
 *       <= 479px  phone portrait
 *
 * Each block below says what was wrong, measured, before it says what it does.
 */

/* =============================================================================
   1. THE HEADER HAD NO BACKGROUND
   -----------------------------------------------------------------------------
   Webflow sets  .nav-container.mobille { background-color:#0000 }  at 991px and
   below — fully transparent — while the header stays fixed to the top of the
   screen. So on every page, on every phone, the page's own words scroll along
   underneath the logo and the button and show through the gaps between them.
   This is the single thing that makes the site look broken while scrolling.
   Desktop is unaffected: above 991px Webflow uses .nav-container, which has
   always had a solid background.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .nav-container.mobille {
    background-color: var(--pouch-colours--pouch-offwhite);
    /* a hairline and a soft lift, so the bar reads as a bar and not as a
       floating pair of pills once the page scrolls under it */
    box-shadow: 0 1px 0 rgba(53, 44, 37, .08), 0 8px 24px rgba(53, 44, 37, .06);
  }
}

/* =============================================================================
   2. THE SLIDER ARROWS SAT ON TOP OF THE CARDS
   -----------------------------------------------------------------------------
   Webflow parks the two round arrows with  .slideshow-arrow { margin-top:400px }
   at 479px and below — one hard-coded distance for two sliders whose cards are
   nothing like the same height. Measured on a 390px screen:
     /mission, the team slider — each card is 427px tall, so arrows parked at
       400px land 27px above the bottom of the card, squarely on the name and
       the job title. On the first card they cover "Fred Ushakov / FETAL
       MEDICINE DOCTOR". The card is a photo, so it also grows with the screen:
       427px at 390px wide, 467px at 430px wide. A fixed 400px cannot follow it.
     /, the review slider — cards are only 224px tall, so the same 400px leaves
       176px of empty white between the review and the arrows.
   A percentage margin on an absolutely positioned element is measured against
   the width of the box it sits in — and these cards are as tall as they are
   wide plus their caption. So a percentage follows the card as the screen
   changes, where Webflow's fixed pixel value cannot.
   The slide area itself is deliberately left alone: it is position:absolute
   inside the slider (.mask-2), and taking it out of that collapses the slider
   to nothing — tried, measured, reverted.
   ========================================================================== */
@media screen and (max-width: 479px) {
  /* the review slider: cards ~224px in a 342px-wide box (~65%), then a gap */
  .pouch-slider .slideshow-arrow {
    margin-top: 74%;
  }
  /* the team slider: photo cards, ~125% of their own width, then a gap */
  .pouch-slider:has(.team-image-wrapper) .slideshow-arrow {
    margin-top: 132%;
  }
  /* the arrows now sit below the card, so the section needs room for them
     before whatever comes next */
  .pouch-slider:has(.team-image-wrapper) {
    margin-bottom: 200px;
  }
}

/* =============================================================================
   3. SECTIONS FORCED TO A FULL SCREEN EACH, LEAVING SCREENFULS OF NOTHING
   -----------------------------------------------------------------------------
   Webflow sets  .wireframe-section { height:100% }  below 767px, which pins each
   of these sections to the full height of the phone screen whatever is in it.
   Measured by scanning the rendered page for bands of flat colour with nothing
   in them at all:
       home     360px at y=3898, then 588px at y=4336   (1.1 screens of nothing)
       mission  300px at y=2230, then 588px at y=2608
   Letting the sections be as tall as their contents removes the empty screens
   without moving, resizing or dropping a single thing that is in them.
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* height only — no padding. Adding 56px of breathing room here was tried and
     measured: it made the homepage 209px TALLER than Webflow's version, because
     these sections were already taller than their contents. */
  .wireframe-section {
    height: auto;
    min-height: 0;
  }
  /* these grids are set to position:sticky for a desktop scroll effect that no
     longer runs on a phone; sticky without a working effect just adds drift */
  .wireframe-section .wireframe-grid {
    position: relative;
  }
}
/* Those sections sit inside TWO boxes that are both pinned to a fixed height:
   .wireframes-mobile at 400vh (four phone screens) and, inside it,
   .pouch-wireframe-container.tablet at 100vh. All three have to be freed
   together or the result is worse, not better — freeing only the outer two
   leaves the sections spilling 1805px out of a 844px box and printing on top of
   the reviews that follow. That was tried, measured, and is the reason the
   inner container is named here explicitly.
   Measured with all three freed, and the four feature sections all still
   present and not overlapping anything:
       homepage  9963px -> 9237px, empty space 1343px -> 771px
       /mission  8571px -> 7844px, empty space 1080px -> 566px */
@media screen and (max-width: 991px) {
  .wireframes-mobile {
    height: auto;
  }
  .pouch-wireframe-container.tablet {
    height: auto;
  }
}

/* =============================================================================
   3b. HALF A SCREEN OF NOTHING BEFORE THE POLICY PAGES START
   -----------------------------------------------------------------------------
   Webflow sets  .hero-section { height:95vh }  below 767px — a whole phone
   screen, whatever is in it. On the three pages whose hero is a picture that is
   right, and they are left alone: measured, / , /midwife and /mission fill 784
   of those 802px. The three policy pages have no picture, only a title and a
   line of date text, so they open on:
       /community-policy      459px of nothing
       /terms-and-conditions  396px of nothing
       /privacy-policy        273px of nothing
   Only the picture-less heroes are allowed to be as tall as their contents.
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* The header is fixed to the top of the screen and is 13vh tall, so it
     measures 87px on a small phone and 121px on a large one — while the hero
     text below it starts at a flat 120px on every phone. The two cross over at
     about 923px of screen height, so on an iPhone 15 Pro Max or a Pixel 8 Pro
     the top of the first headline is sliced off: "Your Pregnancy" on the
     homepage, "Carrying you through pregnancy" on /mission, "Your Online
     Midwife" on /midwife. That is Webflow's, not ours, and it is here because
     it is the same fault as the one below and takes the same line to fix.
     max() means small and normal phones keep exactly the spacing they have. */
  .hero-section {
    padding-top: max(60px, calc(13vh - 44px));
  }
  /* A hero with no picture in it — the three policy pages — is only as tall as
     its words. Webflow's 95vh box cleared the header by accident, by centring
     its contents in a full screen; once the box fits the text that accident is
     gone and the title starts underneath the header. "Community Guidelines."
     showed as "Guidelines." at every phone size tested. So the clearance is
     asked for explicitly, in the same unit as the header itself. */
  .hero-section:not(:has(img)) {
    height: auto;
    min-height: 0;
    padding-top: calc(13vh + 32px);
  }
}

/* =============================================================================
   4. THINGS TOO SMALL TO TAP
   -----------------------------------------------------------------------------
   Apple and Google both ask for 44px. Measured on a 390px screen:
       "Learn more" (3 of them on the homepage)   294 x 12px
       footer links (Our Mission, Midwife ...)    up to 153 x 12px
       policy-page links                          up to 231 x 19px
   The text stays exactly the size it is; only the invisible target grows.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .learn-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
    margin-bottom: 0;
  }
  .footer-link,
  .footer a:not(.footer-social-link):not(.w-inline-block) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* the icon links (app badges, social) get a target without changing their look */
  .footer-social-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* =============================================================================
   5. TEXT BELOW THE SIZE A PHONE CAN COMFORTABLY READ
   -----------------------------------------------------------------------------
   Measured: 23 elements under 13px on the homepage, 28 on /mission. The worst
   are the button labels, which are 10px — "TRY POUCH TODAY", "WHAT POUCH DOES",
   "ENQUIRE ABOUT POUCH" — and body copy, which drops from 16px on desktop to
   14px on a phone, the opposite of what a smaller screen needs.
   These are small, deliberate steps up. Nothing is re-styled, only re-sized.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .button---primary.try,
  .button---primary.learn {
    font-size: 12px;
    line-height: 14px;
  }
  .pouch-body {
    font-size: 15px;
  }
  .pouch-body.slider {
    font-size: 12px;
  }
  .pouch-meta {
    font-size: 11px;
  }
  /* the small print under each statistic */
  .pouch-body.note {
    font-size: 11px;
  }
}

/* =============================================================================
   6. GUTTERS THAT DID NOT LINE UP
   -----------------------------------------------------------------------------
   Text blocks on the homepage start 24px from the left edge in some sections and
   48px in others, so the left-hand edge of the page visibly steps in and out as
   you scroll. 24px is the site's own --default-margin, so that is the one kept.
   ========================================================================== */
@media screen and (max-width: 479px) {
  .wireframe-grid-test {
    padding-left: var(--default-margin);
    padding-right: var(--default-margin);
  }
}