/* ==========================================================================
 * Better Flags — mobile responsive pass
 * --------------------------------------------------------------------------
 * WHY THIS FILE EXISTS (and why it is NOT in src/app/globals.css):
 * Next injects the app's own stylesheet BEFORE the three Webflow <link>s in
 * layout.tsx. Every rule here overrides a class the Webflow export already
 * styles, and most of them at equal specificity — so from globals.css they
 * would silently lose the cascade. This file is linked LAST in layout.tsx so
 * plain, readable selectors win without a wall of !important.
 *
 * KEEP IT LAST. If you add a stylesheet after this one, these rules stop
 * applying and the site regains a horizontal scrollbar on phones.
 *
 * The Webflow export sizes a lot of things in absolute pixels — fixed card
 * widths, fixed image boxes, px letter-spacing — all measured at desktop
 * widths only. Everything below is a consequence of that.
 * ========================================================================== */

/* --- 1. Nothing may push the document wider than the viewport -------------
 * Root causes are fixed at source (see §8 and the per-page stylesheets), but a
 * single stray absolutely-positioned decoration is enough to reintroduce a
 * sideways scroll on a phone, so this is the safety net.
 * `clip` rather than `hidden` on purpose: `hidden` would turn the root into a
 * scroll container and break every `position: sticky` on the site — the hero,
 * the configurator image column, the checkout summary panel.
 */
html {
  overflow-x: clip;
}

/* --- 2. Images must never be stretched ------------------------------------
 * Webflow writes width/height pairs onto images whose source aspect ratio
 * doesn't match, and next/image requires both props, so several marks render
 * squashed. object-fit is the layout-preserving correction.
 */

/* Yellow "Built to Last" belt: the five glyphs are 12x23 … 24x24, all forced
   into a 30x30 box. Derive the width from the intrinsic ratio instead. */
.marquee_icon {
  display: inline-block;
  width: auto;
  height: 30px;
  object-fit: contain;
}

/* Rotating "scroll more" badge marks. */
.scroll_circle,
.scroll_circle-2,
.scroll_text,
.scroll_burst-badge {
  object-fit: contain;
}

/* Configurator gallery thumbnails: `.image-3` is width:100%/height:100% inside
   a fixed 64x64 tile, so every non-square product shot was squashed. */
.image-3 {
  object-fit: cover;
}

/* --- 3. Type: px letter-spacing doesn't survive the mobile type scale -----
 * The headings keep their -3px/-4px tracking while the font size drops from
 * 5rem to ~2.5rem, so words visually merge ("Theonly planet", "OurStory").
 * Relative tracking keeps the intended tight look at every size.
 */
@media screen and (max-width: 767px) {
  .heading-style-h1,
  .custom_flag-name,
  .stats_count {
    letter-spacing: -0.03em;
  }
  .heading-style-h2,
  .nav_link {
    letter-spacing: -0.025em;
  }
  .flag_name-2,
  .heading-style-h2-2 {
    letter-spacing: -0.02em;
  }
  .vs_tab-link,
  .heading-style-h3-2 {
    letter-spacing: -0.01em;
  }
}

/* --- 4. Touch targets ----------------------------------------------------
 * The nav menu, its contact links and the article back-link were all between
 * 21px and 35px tall. 44px is the accessibility floor for a touch target.
 */
@media screen and (max-width: 991px) {
  .nav_menus .nav_link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav_contact-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav_social-link {
    min-width: 44px;
    min-height: 44px;
  }
  .back_btn,
  .material-learn-more,
  .link-block,
  .link-block-2,
  .matlink {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* --- 5. iOS zoom-on-focus ------------------------------------------------
 * Safari zooms the whole page when a focused control's text is under 16px,
 * which leaves the shopper scrolled sideways mid-checkout. `.w-input` /
 * `.w-select` set 14px in webflow.css, hence the class in the selector.
 */
@media screen and (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .w-input,
  .w-select {
    font-size: max(16px, 1em);
  }
}

/* --- 6. Full-height sections on mobile browsers --------------------------
 * `100vh` counts the collapsible URL bar, so the hero's bottom — the CTAs and
 * the scroll badge — sits below the fold until the user scrolls.
 */
@media screen and (max-width: 991px) {
  .section_hero {
    height: 100svh;
  }
}

/* --- 7. Wide decorations must be clipped by their own section -------------
 * `.chain_bg` is a 4000px-wide animated band absolutely positioned inside a
 * 342px header, which dragged the whole sustainability page 147px sideways.
 */
.chain_header {
  overflow: clip;
}

/* The "scroll more" badge is anchored bottom-right, which is where the
   floating cart button now lives on phones. Move it to the opposite corner
   rather than stack two circular controls on top of each other. */
@media screen and (max-width: 991px) {
  .scroll_more {
    inset: auto auto 24px 1.25rem;
    transform: scale(0.8);
    transform-origin: bottom left;
  }
}

/* --- 7b. Desktop-sized gaps ---------------------------------------------
 * `/custom-flags` cards space their icon and their title/CTA apart with a
 * 113px gap (80px under 992px). That reads as deliberate air in a 3-up desktop
 * grid; stacked one-per-row on a phone it is just ~360px-tall cards with a
 * hole in the middle and a very long scroll.
 */
@media screen and (max-width: 767px) {
  .custom_flag {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    padding: 20px;
  }
}

/* --- 7c. Breadcrumbs ------------------------------------------------------
 * `HOME > CUSTOM FLAGS > <flag name>` is a nowrap flex row; the flag name is
 * CMS copy of unbounded length, so on a 320px screen the trail ran off the
 * right edge. Let it wrap onto a second line.
 */
.go-back-section,
.go-back-section .div-block-15 {
  flex-wrap: wrap;
}
.go-back-section .div-block-15 {
  justify-content: flex-start;
  min-width: 0;
}

/* --- 7d. Webflow's 13px checkbox ------------------------------------------ */
@media (hover: none) {
  .w-checkbox-input {
    width: 20px;
    height: 20px;
  }
}

/* --- 8. Grid/flex items must be allowed to shrink ------------------------
 * A grid item defaults to `min-width: auto`, i.e. it refuses to get narrower
 * than its content's min-content width. The Beach Flags feature column holds
 * the 480px-wide comparison table, so that single item forced the whole page
 * to 504px on a 390px phone. The table keeps its own horizontal scroller.
 */
.product-feature-details,
.product-feature-shipping {
  min-width: 0;
}
.comparison_table-wrap {
  max-width: 100%;
}

/* --- 9. Floating cart button + drawer (src/components/Cart.tsx) -----------
 * Both used to be inline-styled with no breakpoint of their own:
 *  - the button sat at the vertical centre of the screen, printing itself over
 *    the hero headline and the product description on every phone;
 *  - the drawer's z-index (80) was below the fixed navigation (100), so on a
 *    phone — where the drawer is full-width and the backdrop is therefore
 *    invisible — the drawer's own title and close button were hidden behind
 *    the navbar.
 */
.bf-cart-fab {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .bf-cart-fab {
    top: auto;
    transform: none;
    right: 14px;
    /* `--bf-dock-h` is published by the configurator's floating quote bar
       (QuoteWidget) while that bar is on screen, so the two never stack on top
       of each other. It is 0px everywhere else. */
    bottom: calc(
      14px + env(safe-area-inset-bottom, 0px) + var(--bf-dock-h, 0px)
    );
    width: 52px;
    height: 52px;
  }
}

.bf-cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.25s ease;
  z-index: 120;
}

.bf-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  /* Above `.navigation` (z-index 100) — see the note above. */
  z-index: 130;
  display: flex;
  flex-direction: column;
  font-family: Spacegrotesk, Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}