/* =====================================================================
   themes/shared/css/live-feed.css - base styles for the markup that
   themes/shared/js/live-feed.js builds or toggles, for every v2 theme.

   Theme-neutral: structure, motion and states only. Colours come from
   --lf-* custom properties with light, neutral fallbacks, so a theme
   restyles all of it by setting the tokens (see themes/worldsedge/css/
   feed.css), not by repeating these rules. Selectors are wrapped in
   :where() (zero specificity), so any theme rule wins without !important.

   Tokens:
     --lf-text, --lf-muted, --lf-accent, --lf-line
     --lf-popover-bg, --lf-popover-border, --lf-popover-radius, --lf-popover-shadow
     --lf-hover-bg, --lf-mark-bg, --lf-mark-text
     --lf-badge-bg, --lf-badge-border, --lf-badge-text
     --lf-badge-muted-bg, --lf-badge-muted-text
     --lf-skeleton-card-bg, --lf-skeleton-base, --lf-skeleton-shine
     --lf-like
   ===================================================================== */

/* ---- Search box ---- */
:where(.live-feed-search__sr-only) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:where(.live-feed-search__input-wrap) { position: relative; }

/* ---- Autocomplete list (live-feed.js renders the rows) ---- */
:where(.lfs-autocomplete-list) {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
  background: var(--lf-popover-bg, #fff);
  border: 1px solid var(--lf-popover-border, #e7ecf3);
  border-radius: var(--lf-popover-radius, 12px);
  box-shadow: var(--lf-popover-shadow, 0 12px 32px rgba(15, 23, 42, .14));
}
:where(.lfs-autocomplete-item) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--lf-text, inherit);
  transition: background .12s ease;
}
:where(.lfs-autocomplete-item:hover, .lfs-autocomplete-item.is-active) { background: var(--lf-hover-bg, rgba(0, 0, 0, .05)); }
:where(.lfs-autocomplete-item .lfs-ac-icon) { flex-shrink: 0; color: var(--lf-muted, #94a3b8); }
:where(.lfs-autocomplete-item .lfs-ac-label) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.lfs-autocomplete-item .lfs-ac-label mark) {
  background: var(--lf-mark-bg, #fff3a3);
  color: var(--lf-mark-text, inherit);
  padding: 0 2px;
  border-radius: 3px;
}
:where(.lfs-autocomplete-item .lfs-ac-sub) {
  margin-top: 1px;
  font-size: 14px;
  color: var(--lf-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.lfs-autocomplete-item .lfs-ac-badge) {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--lf-badge-border, transparent);
  background: var(--lf-badge-bg, #eef2f7);
  color: var(--lf-badge-text, #5b6776);
  font-size: 14px;
  font-weight: 600;
}
:where(.lfs-autocomplete-item .lfs-ac-badge-recent, .lfs-autocomplete-item .lfs-ac-badge-hint) {
  background: var(--lf-badge-muted-bg, #eef2f7);
  border-color: transparent;
  color: var(--lf-badge-muted-text, var(--lf-muted, #5b6776));
}
:where(.lfs-autocomplete-item.is-loading) { cursor: default; color: var(--lf-muted, #64748b); }
:where(.lfs-autocomplete-item.is-loading:hover) { background: transparent; }
:where(.lfs-ac-spinner) {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--lf-line, #dbe3ee);
  border-top-color: var(--lf-accent, var(--site_color_g, currentColor));
  animation: lfSpin .7s linear infinite;
}
@keyframes lfSpin { to { transform: rotate(360deg); } }
:where(.lfs-autocomplete-item .lfs-ac-remove) {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--lf-muted, #aab2bd);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
:where(.lfs-autocomplete-item .lfs-ac-remove:hover) { background: var(--lf-hover-bg, rgba(0, 0, 0, .06)); color: var(--lf-text, inherit); }

/* ---- Loading skeleton (live-feed.js getSkeletonHtml) ---- */
:where(.skeleton-container) { width: 100%; }
:where(.lf-skeleton-card) { background: var(--lf-skeleton-card-bg, #fff); box-shadow: none; }
@keyframes lfShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
:where(.shimmer-placeholder) {
  position: relative;
  background: linear-gradient(to right, var(--lf-skeleton-base, #eee) 8%, var(--lf-skeleton-shine, #ddd) 18%, var(--lf-skeleton-base, #eee) 33%);
  background-size: 800px 104px;
  animation: lfShimmer 1.25s linear infinite forwards;
}
:where(.skeleton-avatar) { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; }
:where(.skeleton-line) { height: 10px; margin-bottom: 8px; border-radius: 4px; }
:where(.skeleton-image) { height: 180px; margin-bottom: 15px; border-radius: 8px; }
:where(.lf-skel-w50) { width: 50%; height: 12px; }
:where(.lf-skel-w30) { width: 30%; height: 8px; }
:where(.lf-skel-w80) { width: 80%; height: 14px; }
:where(.lf-skel-w95) { width: 95%; height: 10px; }
:where(.lf-skel-w40) { width: 40%; height: 10px; }

/* ---- States toggled by live-feed.js ---- */
@keyframes lfPop { 50% { transform: scale(1.3); } }
:where(.like_count.heartfill) { color: var(--lf-like, var(--site_color_g, currentColor)); }
:where(.like_count.heartfill svg) {
  fill: var(--lf-like, var(--site_color_g, currentColor));
  stroke: var(--lf-like, var(--site_color_g, currentColor));
  animation: lfPop .35s ease;
}
@keyframes lfFadeIn { from { opacity: 0; } to { opacity: 1; } }
:where(.lf-fade-in) { animation: lfFadeIn .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  :where(.shimmer-placeholder, .lfs-ac-spinner, .like_count.heartfill svg, .lf-fade-in) { animation: none; }
}

/* THE "BACK TO THE TOP OF THIS POST" ARROW (post_loop .abs_hide_box). Hidden
   until a post is opened (post_loop_script shows it on Read More and hides it
   on close); it rests at the RIGHT of the open post and the shared script pins
   it mid-screen while the post is on screen. Colours are each theme's. */
.post_loop .hide_post_details{display:none}
.post_loop .eq_height_wrapper,.post_loop .card{position:relative}
.post_loop .abs_hide_box{position:absolute;right:20px;bottom:20px;left:auto;width:auto;z-index:5}