@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ---- Infinite logo marquee ---- */
.marquee-track { overflow: hidden; }
.marquee-inner {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.marquee-track:hover .marquee-inner { animation-play-state: paused; }
.marquee-item {
  flex-shrink: 0;
  width: 120px;
  height: 72px;
  margin: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-item img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.65);
  transition: filter 0.3s;
}
.marquee-item img:hover { filter: grayscale(0) opacity(1); }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Blog post body — WordPress HTML rendered raw */
.prose-c360 { font-size: 17px; line-height: 1.75; color: #111E37; }
.prose-c360 h1,.prose-c360 h2,.prose-c360 h3,.prose-c360 h4 { font-family:'Sora',system-ui,sans-serif; font-weight:700; color:#0C2C73; margin:1.8em 0 0.6em; line-height:1.2; }
.prose-c360 h2 { font-size:1.55rem; }
.prose-c360 h3 { font-size:1.25rem; }
.prose-c360 h4 { font-size:1.05rem; }
.prose-c360 p  { margin:0 0 1.25em; }
.prose-c360 a  { color:#1A50C8; text-decoration:underline; }
.prose-c360 a:hover { color:#0C2C73; }
.prose-c360 ul,.prose-c360 ol { padding-left:1.6em; margin:0 0 1.25em; }
.prose-c360 li { margin-bottom:0.4em; }
.prose-c360 strong { font-weight:700; color:#111E37; }
.prose-c360 blockquote { border-left:4px solid #F4A22B; padding:0.75em 1.25em; margin:1.5em 0; background:#F3F7FD; border-radius:0 12px 12px 0; color:#3C4A66; font-style:italic; }
.prose-c360 img { max-width:100%; border-radius:12px; margin:1.5em 0; }
.prose-c360 table { width:100%; border-collapse:collapse; margin:1.5em 0; font-size:15px; }
.prose-c360 th,.prose-c360 td { padding:10px 14px; border:1px solid #E5EBF4; text-align:left; }
.prose-c360 th { background:#F3F7FD; font-weight:700; color:#0C2C73; }
.prose-c360 code { font-size:0.88em; background:#F3F7FD; padding:2px 6px; border-radius:5px; }
.prose-c360 pre  { background:#0A1A38; color:#fff; padding:1.25em; border-radius:12px; overflow-x:auto; font-size:0.875em; margin:1.5em 0; }
.prose-c360 hr   { border:none; border-top:1px solid #E5EBF4; margin:2em 0; }