/* ==========================================================
   Sprockett's — Community Custom CSS  (v6 — max specificity)
   Replaces v5. Uses html body div.<class> chain to defeat
   any Tailwind utility / media-query variant in the cascade.
   Paste in: Settings → Branding → Custom CSS — Save, Cmd+Shift+R.
   ========================================================== */

/* --- Brand typography --- */
body, button, input, textarea, select {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}
h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
}

/* --- Brand buttons --- */
button[class*="primary"],
.btn-primary,
button[type="submit"] {
  background-color: #1974CE !important;
  border-color: #1974CE !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
button[class*="primary"]:hover { background-color: #0d4f8a !important; }


/* ==========================================================
   POST FEED — image full-width on top of card.
   Targets verified DOM:
     div.post_container          (flex-row root)
     div.line-clamp-1.flex.w-full (left text column)
     div.flex.h-full.flex-col.items-end.justify-center.gap-4 (right image col)
     div with class containing 'border-communities-border'  (image wrapper)
     img[alt="Thumbnail"]
   ========================================================== */

/* 1. Stack post container vertically: image on top, text below */
html body div.post_container {
  flex-direction: column-reverse !important;
  gap: 14px !important;
  width: 100% !important;
  align-items: stretch !important;
}

/* 2. Force the LEFT text column to full width */
html body div.post_container > div.line-clamp-1 {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Force the RIGHT image column to full width and remove items-end pinning */
html body div.post_container > div.flex.h-full.flex-col {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

/* 4. Inner flex row that wraps the image-bordered box */
html body div.post_container div.flex.items-start.justify-end {
  width: 100% !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

/* 5. The actual image wrapper — defeat hard-coded h-[72px]/w-[72px]
      and lg:h-[104px]/lg:w-[104px] */
html body div.post_container [class*="border-communities-border"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 460px !important;
  border-radius: 14px !important;
  flex: 1 1 auto !important;
}

/* 6. Inner divs of the image wrapper — fill */
html body div.post_container [class*="border-communities-border"] > div,
html body div.post_container [class*="border-communities-border"] > div > div {
  width: 100% !important;
  height: 100% !important;
}

/* 7. The image itself */
html body div.post_container img[alt="Thumbnail"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* 8. Card polish */
html body .hl-card-content {
  border-radius: 16px !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 1px 2px rgba(25,116,206,0.04) !important;
}