/* Seedling Society — mobile pass overrides.
   Loaded after styles.css so these win. Added 2026-09-21.
   To revert entirely: delete this file and its <link> in Base/base.html. */

/* The theme never shipped a responsive-image rule, and Bootstrap 5's Reboot
   deliberately doesn't add one (.img-fluid is opt-in). Any image or embed
   wider than the viewport therefore pushed the whole page sideways on a
   phone. This is the standard guard. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Wide tables and preformatted blocks scroll inside themselves rather than
   widening the page. */
table,
pre {
  max-width: 100%;
}

pre {
  overflow-x: auto;
}

/* Long unbroken strings (order ids, crypto addresses, emails) are a common
   source of a few px of horizontal scroll on narrow screens. */
.address,
.dash_caption,
.breadcrumb-item {
  overflow-wrap: anywhere;
}

/* The header logo carries class="logo", but in this theme .logo is a TEXT
   wrapper (.logo h1 a / .logo span) — there is no img.logo size rule at all.
   The uploaded mark is 512x481 (near-square), so it rendered at natural size:
   before the max-width guard above it overflowed narrow viewports, and after
   it filled the container. Give it a real height and let width follow. */
img.logo {
  max-height: 48px;
  width: auto;
}

/* Same mark is reused in the footer at up to 180px wide; because it is nearly
   square that reads far taller than the wide wordmark the theme assumed. */
img.img-footer {
  max-width: 120px;
}

img.img-footer.small {
  max-width: 96px;
}

/* Edge-to-edge on phones and small tablets.
   Bootstrap's default nets out to 12px of inset (container padding 12 +
   row margin -12 + column padding 12), so zeroing the container alone does
   nothing — the gutter has to come off the row variable that drives both
   the negative margin and the column padding. Zeroing --bs-gutter-x keeps
   those two in balance, so this cannot reintroduce horizontal overflow.
   Cards and forms carry their own inner padding (p-3/p-4), so text still
   doesn't touch the glass. */
@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .row {
    --bs-gutter-x: 0;
  }
}

/* Vertical rhythm. The theme ships desktop section padding with no mobile
   override anywhere in styles.css: a plain <section> is 80px top AND bottom,
   so 160px of empty space per section on a ~640px-tall phone viewport.
   Roughly halved here; desktop is untouched. */
@media (max-width: 767.98px) {
  section {
    padding: 40px 0;
  }

  section.space {
    padding: 32px 0;
  }

  section.middle {
    padding: 28px 0;
  }

  section.space.min {
    padding: 32px 0 16px;
  }
}

/* Hero. shop/index.html sets min-height:380px and a 2.8rem heading inline —
   desktop values that eat most of a phone screen for one line and a button.
   !important is required only because both are inline styles. This class is
   used on exactly one section sitewide, so the override is contained. */
@media (max-width: 767.98px) {
  section.image-cover {
    min-height: 260px !important;
  }

  section.image-cover h1 {
    font-size: 1.9rem !important;
  }
}

/* ===================================================================
   READABILITY PASS — larger, higher-contrast, easier to tap.
   The theme's baseline is hostile to older eyes: body text is 14px
   (below the 16px floor), 35 separate rules sit at 10-13px, and body
   colour #707070 on white is only ~4.7:1 contrast.

   Raising the ROOT font size is what does the heavy lifting: Bootstrap
   sizes its buttons, inputs and headings in rem, so they all scale with
   it. The theme's own px rules don't scale, so the worst of those are
   given an explicit floor below.
   =================================================================== */
html {
  font-size: 17px;
}

body {
  font-size: 1rem;
  line-height: 1.65;
  color: #3f3d39;
}

/* Nothing should render below ~15px. These are the theme's small-text
   classes; without a floor they land at 10-13px. */
small,
.small,
.smalls,
.fs-sm,
.fs-md,
.text-muted,
.footer-menu a,
.breadcrumb-item {
  font-size: 0.9rem !important;
}

/* Comfortable, unambiguous tap targets. 48px is the Material/WCAG
   comfortable size — larger than the 44px minimum, which matters for
   less precise touch. */
.btn,
button[type="submit"],
.nav-menu > li > a,
.footer-menu a,
.dahs_navbar a {
  min-height: 48px;
  display: flex;
  align-items: center;
}

.btn,
button[type="submit"] {
  justify-content: center;
  font-size: 1rem;
  padding: 12px 20px;
}

/* Form fields: never below 16px or mobile browsers zoom on focus, and
   give them room. */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font-size: 1rem !important;
  min-height: 48px;
  padding: 12px 14px;
}

/* Links inside prose should be obviously links, not just a colour shift. */
.footer-menu a,
p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}