/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html,
body {
  overflow-x: clip; /* 'clip' creates no scroll container; prevents touch-panning on Android Chrome */
  max-width: 100vw;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Scoped to #feed_frame (post feeds, room feeds, search, bookmarks) only.
   Exclusive content carousel cards are NOT inside #feed_frame and must not
   be affected — they set explicit h-[323px] on images that must be respected.
   Specificity 0,2,2 beats Tailwind h-full (0,1,0) inside feed contexts. */
#feed_frame li[role="article"] img,
#feed_frame li[role="article"] video,
#feed_frame li[role="article"] iframe {
  max-width: 100%;
  height: auto;
}

/* Specificity 0,3,2 — restores height:100% for multi-image grids within feeds.
   Grid containers have a fixed h-[300px] so height:100% correctly fills each cell. */
#feed_frame li[role="article"] .grid img,
#feed_frame li[role="article"] .grid video {
  height: 100%;
  object-fit: cover;
}

/* Feed container turbo-frames must be block so #feed_frame fills its parent width.
   Inline frames (comment-count, reaction-count, bookmark) must NOT be affected —
   they live inside text-flow and must remain inline-level. */
turbo-frame#main_page_feed,
turbo-frame#search_results {
  display: block;
}

#feed_frame {
  overflow-x: clip;
}

/* Belt-and-suspenders: every feed ul must be width-locked to #feed_frame.
   Prevents a "problem post" from driving the ul wider via intrinsic sizing. */
#feed_frame ul[role="feed"] {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* 'clip' does not create a scroll container or BFC, so it safely constrains
   image width without breaking IntersectionObserver (used by Ahoy visit tracking). */
#feed_frame li[role="article"] {
  overflow-x: clip;
  min-width: 0;
}

.trix-content {
  overflow-wrap: break-word;
  word-break: break-word;
}

li a {
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

li a:hover {
  color: #1d4ed8;
}

.emoji-explosion {
  position: fixed;
  font-size: 24px;
  pointer-events: none;
  transition: all 0.8s ease-out;
  opacity: 0.75;
  transform: translate(0, 0);
  z-index: 9999;
}

/* Sensory-calm mode: respects the OS-level prefers-reduced-motion setting
   automatically, and the html.reduced-motion class lets a user opt in
   in-app regardless of their OS setting (see ApplicationHelper#reduced_motion?). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* High-contrast mode: darkens the app's lighter muted text colors and
   enforces minimum touch-target sizes on interactive elements.
   Targets the specific utility classes the app uses rather than redefining
   the Tailwind palette, since those colors are baked in at build time. */
html.high-contrast .text-disable-text,
html.high-contrast .text-secondary-text,
html.high-contrast .text-taupe-gray,
html.high-contrast .text-silver-sand {
  color: #2d2d2d !important;
}

html.high-contrast .border-disable-background {
  border-color: #4a4a4a !important;
}

/* Excludes <a> tags — inline links inside post/comment text would break
   text flow with a blanket min-size. Buttons and checkbox/radio inputs
   are reliably standalone controls and safe to enlarge everywhere. */
html.high-contrast button,
html.high-contrast input[type="checkbox"],
html.high-contrast input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}