/* ============================================================================
   SnugDates — shared theme responsive layer          v4  (2026-07-26)
   Loaded from resources/views/layouts/theme.blade.php AFTER the content yield,
   because every theme's <style> block lives inside its own content section and
   therefore in the body. A <head> stylesheet loses every equal-specificity
   contest on document order.

   v2 change: the fix that matters is now CLASS-FREE. v1 scoped min-width:0 to
   `.wall > *` and `.mg > *`, which missed the live page entirely — the active
   generated theme has no `.wall` and no <video> at all; its hero media is
   <img>. The root cause is identical for both element types, so it is fixed
   universally below instead of per class name.

   DELIBERATELY MINIMAL. The 118 themes are meant to look different from each
   other, so this file carries only rules that are either unopposed by theme
   CSS or cannot change an intentional design decision. Per-theme breakpoints
   belong in the theme, not here.
   ============================================================================ */

/* --- 1. THE universal fix ---------------------------------------------------
   Grid `1fr` is shorthand for `minmax(auto, 1fr)`, and `auto` resolves to the
   item's min-content size. For a replaced element that is its intrinsic width:
   300px for an unstyled <video>, or the full source width for an <img>. So a
   4-column media grid inherited a four-figure minimum width and blew far past
   a 412px viewport — giant faces, hard seams, clipped edges.

   min-width/min-height:0 only PERMITS shrinking. It cannot override a size a
   theme actually asked for, so it is safe to apply to every image and video in
   the fleet regardless of class name or structure.
   --------------------------------------------------------------------------- */
img, video {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

/* Any direct child of any flex or grid container may shrink below intrinsic
   size. Same reasoning: permission, not instruction. */
img, video, iframe, svg, canvas, picture, figure {
  min-width: 0;
}

/* --- 2. Viewport containment ------------------------------------------------
   Nothing replaced or tabular may be wider than its container. Safe: no theme
   intends a horizontally scrolling page.
   --------------------------------------------------------------------------- */
iframe, svg, canvas, table, pre {
  max-width: 100%;
}

/* --- 3. Media that IS meant to fill its cell --------------------------------
   Scoped to the house media-grid vocabulary, which the AI generator does reuse
   (hero, hero-in, nav, wrap, btn, row, sp, logo, band, foot, cols, sub,
   members, mg are all shared between hand-built and generated themes). These
   rules are unopposed wherever a theme styled only `.wall img` while emitting
   <video>, and harmless where the theme already set them.
   --------------------------------------------------------------------------- */
.wall img,   .wall video,
.mg img,     .mg video,
.pc img,     .pc video,
.ph img,     .ph video,
.mcard img,  .mcard video,
.member-card img, .member-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 4. Long-string safety for non-English locales --------------------------
   Themes were laid out against English copy. Translated strings run
   materially longer (Yoruba "Fi oruko re sile" for "Join free"), and some
   locales produce single tokens longer than a narrow container. Allow breaking
   rather than overflowing. Does not change layout where strings already fit.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, p, a, button, li, td, th, label, .btn, .sub {
  overflow-wrap: break-word;
}

/* Buttons and pills grow to fit their label instead of clipping it. No width
   or padding is set here — the theme keeps control of both. */
.btn, button, [role="button"] {
  height: auto;
  min-height: 0;
  white-space: normal;
}

/* --- 5. Injected floating widgets ------------------------------------------
   The locale switcher is injected by ThemeTranslate middleware and positioned
   by FabDrag from a per-user saved coordinate, which can land off-screen or on
   top of content on a narrow viewport. This clamps the width only; the real
   position clamp belongs in FabDrag itself.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  [style*="position:fixed"],
  [style*="position: fixed"] {
    max-width: calc(100vw - 20px);
  }
}

/* --- 6. Unopposed layout wins (v3) ------------------------------------------
   IMPORTANT CONSTRAINT: every theme scopes its CSS as `#t-<slug> .x`, which is
   specificity 1-1-0. A class-only rule here is 0-1-0 and LOSES no matter where
   it loads — loading after the content yield only wins EQUAL-specificity
   contests. So this layer can only ever set properties that NO theme sets.
   Everything below is chosen on that test.
   --------------------------------------------------------------------------- */

/* Themes leave flex-wrap at its `nowrap` default on the header row, so the auth
   buttons get pushed past the viewport edge instead of moving to a second line.
   Allowing the wrap is unopposed and fixes the clipped button on every theme
   that uses the house `.nav` vocabulary. */
.nav {
  flex-wrap: wrap;
}

/* A button may never be wider than its container. No theme sets max-width on
   .btn, so this is unopposed; padding and width stay under theme control. */
.btn, button, [role="button"] {
  max-width: 100%;
}

/* Hero copy legibility. Several themes place white text over near-full-
   brightness photography with little or no dark scrim, and the scrim itself
   cannot be fixed from here (it is an ID-scoped ::after background). A shadow
   is unopposed and helps on any background; it is invisible where contrast is
   already good.

   DELIBERATELY EXCLUDES h1. Themes commonly render the accent word with
   -webkit-background-clip:text and color:transparent, and a text-shadow behind
   transparent text renders as a visible blob. Hero headline contrast needs the
   per-theme pass. */
.hero p,
.hero .logo,
.hero .pill,
.hero .sub,
.hero .eyebrow,
.hero-in p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

/* ============================================================================
   PER-THEME BLOCK — fehslug13  (launch theme, snugdates.com)
   ----------------------------------------------------------------------------
   These rules are ID-scoped, which gives them EQUAL specificity to the theme's
   own `#t-fehslug13 .x` rules — and because this stylesheet is linked after the
   content yield, equal specificity means these win on document order. The theme
   file itself stays untouched, so nothing here is lost if the theme is
   re-edited or regenerated in the generator.

   Verified by grep before writing:
     - id="t-fehslug13"
     - NO ::before / ::after anywhere in the theme  -> no scrim exists to darken
     - exactly ONE media query, at max-width:900px:
         .hero-in, .fg  -> grid-template-columns:1fr
         .hero h1       -> font-size:42px
         .nav nav       -> display:none
       So there is no breakpoint below 900px at all, and 42px is still far too
       large on a 412px viewport.
   ============================================================================ */

/* --- Hero legibility --------------------------------------------------------
   White headline and body copy sit over near-full-brightness photography with
   no overlay, because the theme has no scrim pseudo-element.

   Darkening the photographs themselves is used here INSTEAD of injecting a
   ::after scrim. A scrim would need correct z-index stacking against the
   theme's internal structure, and getting that wrong puts a dark layer over the
   headline. `filter` affects only <img>, so it physically cannot cover text,
   and no theme sets `filter`, so it is unopposed. Adjust the brightness value
   to taste — .58 is a starting point, not a considered brand decision.
   --------------------------------------------------------------------------- */
#t-fehslug13 .hero img,
#t-fehslug13 .ph img {
  filter: brightness(.58) saturate(.95);
}

/* --- The missing narrow breakpoint -----------------------------------------
   Everything below 600px. The theme stops adapting at 900px.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {

  /* 42px runs the headline to both edges and orphans words onto their own
     lines. clamp() keeps it fluid instead of adding another fixed step. */
  #t-fehslug13 .hero h1 {
    font-size: clamp(27px, 7.8vw, 34px);
    line-height: 1.08;
    letter-spacing: -.5px;
  }

  /* Header row. With .nav nav hidden below 900px, the overflow is the logo plus
     the auth buttons. Shrinking all three is what stops the second button being
     pushed off the right edge — and it has to survive long locales, where this
     button reads "Fi oruko re sile" rather than "Sign in". */
  #t-fehslug13 .nav  { gap: 10px; padding: 14px 0; }
  #t-fehslug13 .logo { font-size: 18px; }
  #t-fehslug13 .btn  { padding: 10px 16px; font-size: 13px; line-height: 1.25; }

  /* Primary CTAs read better full width than at half width on a phone. */
  #t-fehslug13 .row .btn { width: 100%; text-align: center; }
}