/* ==========================================================
   Sprockett's — Community Custom CSS  (v2 — adds post layout)
   Paste in: Settings → Branding → Custom CSS
   Replaces the v1 block from Step 11.
   ========================================================== */

/* --- 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 — make post cover images render LARGE at the top
   of the post card instead of a tiny side thumbnail.

   Kanamé/HighLevel uses obfuscated class names that change.
   We hit several plausible selectors; only the matching one
   takes effect. If none hit, send me the DOM and I'll tune.
   ========================================================== */

/* Common HighLevel community post-image selectors */
[class*="post-card"] img[class*="image"],
[class*="postCard"]   img[class*="image"],
[class*="post-card"] img[class*="thumbnail"],
[class*="postCard"]   img[class*="thumbnail"],
[class*="hl-community-post"] img,
[class*="community-post"] img[class*="cover"],
[class*="discussion-post"] img[class*="cover"],
.post-feed [class*="card"] img[class*="cover"],
[class*="feed-post"] img[class*="cover"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
  margin: 0 0 16px 0 !important;
  float: none !important;
  display: block !important;
  flex: none !important;
}

/* Kill side-thumbnail layout: when a post card uses flex-row to
   put text left + image right, force it to flex-column */
[class*="post-card"] [class*="content"],
[class*="postCard"]   [class*="content"],
[class*="hl-community-post"] [class*="content"] {
  flex-direction: column !important;
}

/* Make post card itself feel premium */
[class*="post-card"],
[class*="postCard"],
[class*="hl-community-post"] {
  border-radius: 16px !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 1px 2px rgba(25,116,206,0.04) !important;
  padding: 20px !important;
}

/* Title styling inside posts */
[class*="post-card"] h2,
[class*="post-card"] h3,
[class*="postCard"] h2,
[class*="postCard"] h3 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  margin-bottom: 12px !important;
}