/* ========================================================
   Lulu's on Main — Easy Social Feed Complete Styling
   ======================================================== */

/* 1. Media Container & Image Ratio */
.esf-facebook-feed__split-media,
.esf-facebook-feed__split-media a.esf-facebook-feed__tile {
  aspect-ratio: 720 / 900 !important;
  height: auto !important;
  max-height: none !important;
}

/* 2. Media Background */
.esf-facebook-feed__split-media,
.esf-facebook-feed__tile-img,
.esf-facebook-feed__thumbnail {
  background-color: var(--at-black, #000000) !important;
}

/* 3. Post Card: Site Border & Depth */
.esf-facebook-feed__split-cell {
  border: 4px solid var(--at-black-t-1) !important;
  outline: 2px solid var(--at-secondary) !important;
  box-shadow: 7px 7px 0 0 var(--at-black) !important;
  overflow: hidden !important;
}

/* 4. Reset Inner Structural Wrappers */
.esf-facebook-feed__split-cell article,
.esf-facebook-feed__split-inner,
.esf-facebook-feed__split-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5. Text & Story Panel Background */
.esf-facebook-feed__split-main .esf-facebook-feed__split-content {
  background: radial-gradient(#f6cf5320 1.5px, transparent 1.5px) 0 0 / 6px 6px, var(--at-white);
}

/* 6. Post Header & Timestamp */
.esf-facebook-feed__split-header .time,
.esf-facebook-feed__split-header time,
.esf-facebook-feed__split-date,
.esf-facebook-feed__date {
  color: var(--at-primary) !important;
  font-size: var(--at-text--xs);
  font-weight: 600;
}

/* 7. Post Body Text / Story Content */
.esf-facebook-feed__split-content,
.esf-facebook-feed__caption,
.esf-facebook-feed__caption * {
  font-family: comic neue; 
  color: var(--at-black, #111111) !important;
  font-size: var(--at-text--s, 1rem) !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* 8. Caption Expansion & Remove Read More */
div.esf-facebook-feed__caption.esf-facebook-feed__caption--expandable {
  height: auto !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
}

/* Reveal Full Text Block */
div.esf-facebook-feed__caption.esf-facebook-feed__caption--expandable div[id$="-full"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* Hide Truncated Snippet and Toggle Button */
div.esf-facebook-feed__caption.esf-facebook-feed__caption--expandable span[id$="-preview"],
div.esf-facebook-feed__caption.esf-facebook-feed__caption--expandable .esf-facebook-feed__caption-toggle {
  display: none !important;
}

/* 9. Post Content Links (Orange Accent) */
.esf-facebook-feed__split-content a,
.esf-facebook-feed__caption a {
  color: var(--at-primary) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.esf-facebook-feed__split-content a:hover,
.esf-facebook-feed__caption a:hover {
  color: var(--at-secondary) !important;
  text-decoration: none !important;
}

/* 10. Footer Container & Structure (Dark Theme) */
.esf-facebook-feed__split-footer {
  background: var(--at-black, #000000) !important;
  color: var(--at-white, #ffffff) !important;
  border-top: 2px solid var(--at-black-t-1, #333333) !important;
  padding: var(--at-space-xs, 12px) var(--at-space-s, 16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Ensure inner footer text/labels inherit light color */
.esf-facebook-feed__split-footer * {
  color: var(--at-white, #ffffff) !important;
}

/* 11. Footer Action Buttons / View on Facebook (Square Corners) */
.esf-facebook-feed__split-footer a[class*="view"],
.esf-facebook-feed__split-footer .esf-facebook-feed__btn,
.esf-facebook-feed__split-footer a.esf-facebook-feed__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: var(--at-text--xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--at-black, #000000) !important;
  background-color: var(--at-secondary) !important;
  border: 2px solid var(--at-black, #000000) !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  box-shadow: 2px 2px 0 0 var(--at-black) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

/* Footer Button Hover States */
.esf-facebook-feed__split-footer a[class*="view"]:hover,
.esf-facebook-feed__split-footer .esf-facebook-feed__btn:hover,
.esf-facebook-feed__split-footer a.esf-facebook-feed__link:hover {
  background-color: var(--at-primary) !important;
  color: var(--at-white, #ffffff) !important;
  border-radius: 0 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 0 var(--at-black) !important;
}

/* 11. Header Logo and Name - Hidden */
/* Hide Avatar Logo & Name Row */
.esf-facebook-feed__split-header .esf-facebook-feed__split-avatar-link,
.esf-facebook-feed__split-header .esf-facebook-feed__split-name-row {
  display: none !important;
}

/* Ensure Timestamp Remains Visible */
.esf-facebook-feed__split-header time.esf-facebook-feed__split-time {
  display: inline-block !important;
  color: var(--at-primary) !important;
  font-size: var(--at-text--xs) !important;
  font-weight: 600 !important;
}