/* ==========================================================================
   Gemz mobile-first responsive CSS
   Site-wide supplementary stylesheet — loaded after the theme's own CSS via
   the gemz-mobile-css must-use plugin, so it can override theme rules where
   needed without ever touching the theme's own files. Delete
   wp-content/mu-plugins/gemz-mobile-css.php (and this file) to fully revert.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Box-sizing reset + horizontal-scroll prevention
   -------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* Images/video never breach their container on small screens */
img, picture, video {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------
   2. Fluid typography — scales smoothly between mobile and desktop
      instead of jumping at fixed breakpoints. Only touches heading/
      paragraph tags actually used across the site.
   -------------------------------------------------------------------- */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.75rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
}

p {
  font-size: clamp(0.95rem, 1vw + 0.8rem, 1.125rem);
}

/* --------------------------------------------------------------------
   3. Touch-friendly targets — real buttons and links only. Deliberately
      NOT applied as a blanket rule to <input>/<select>, since that would
      restyle every real form field on the site (WooCommerce checkout,
      the affiliate signup/lead forms) with opinionated flex/border-radius
      styling well beyond a touch-target size fix.
   -------------------------------------------------------------------- */
button,
.button,
.btn,
a.button {
  min-height: 48px;
  touch-action: manipulation;
}

/* Just the tap-target size for form fields — no layout/visual opinion,
   so this can't clash with existing WooCommerce/theme form styling. */
input,
select,
textarea {
  min-height: 44px;
}

/* --------------------------------------------------------------------
   4. Brighter hero images (2026-09-05) — Cary compared this site's hero
      treatment against Solar's and preferred Solar's: a vivid, largely
      unobstructed photo instead of a heavily darkened one. The theme's
      own .thb-hero::before applies a 35%-to-78% opacity dark gradient
      over the whole photo, specifically so white text stays readable —
      necessary with that approach, but it dims the image a lot. This
      overrides it to a much lighter gradient (just enough contrast at
      the bottom for the text) and adds a text-shadow instead, so the
      photo itself stays close to full brightness edge-to-edge.
   -------------------------------------------------------------------- */
.thb-hero::before {
  background: linear-gradient(180deg, rgba(16,25,15,.05), rgba(16,25,15,.35));
}

.thb-hero h1,
.thb-hero-content .thb-eyebrow {
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}