/* Inter (brand default font) is loaded as a non-blocking <link> in app.blade.php
   — importing it here made it a render-blocking serial chain (css → @import →
   font css → font) that delayed first paint. */
@import '@fortawesome/fontawesome-free/css/all.min.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------------------------------
   Convoro design tokens — single source of truth for the theme.
   The live theme editor (P6) recompiles this :root block at runtime.
   Colors are space-separated RGB channels so Tailwind can apply opacity.
   --------------------------------------------------------------------------- */
@layer base {
  :root {
    --c-primary: 91 91 214;        /* #5B5BD6 */
    --c-primary-600: 79 79 207;
    --c-primary-700: 66 66 181;
    --c-primary-soft: 236 237 251;
    --c-bg: 243 244 249;
    --c-surface: 255 255 255;
    --c-surface-2: 248 249 252;
    --c-border: 230 232 240;
    --c-text: 27 32 48;
    --c-text-2: 74 81 104;
    --c-muted: 138 144 166;
    --c-radius: 12px;
    --c-radius-btn: 12px;
    --c-accent: 139 92 246;        /* #8B5CF6 */
    --c-accent-600: 124 58 237;
    --c-header-bg: rgb(255 255 255);
    --c-header-text: 27 32 48;
    --c-link: 91 91 214;
    --c-density: 1;
    --c-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);
  }

  [data-theme='dark'] { --c-header-bg: rgb(22 25 41); --c-header-text: 233 235 243; }

  [data-theme='dark'] {
    --c-bg: 16 18 30;
    --c-surface: 22 25 41;
    --c-surface-2: 28 32 52;
    --c-border: 42 47 70;
    --c-text: 233 235 243;
    --c-text-2: 174 180 208;
    --c-muted: 120 127 152;
  }

  html { font-family: var(--c-font, 'Inter', ui-sans-serif, system-ui, sans-serif); }
  body { background: rgb(var(--c-bg)); color: rgb(var(--c-text)); font-size: var(--c-font-size, 16px); -webkit-font-smoothing: antialiased; }
}

.q-grad { background: var(--c-grad); }

/* Live-editor tokens applied site-wide (every Convoro install gets these) */
h1, h2, h3, h4, h5, h6 { font-family: var(--c-font-heading, var(--c-font)); }
/* Header bar honors the chosen background + contrast text. */
header.q-header { background: var(--c-header-bg) !important; color: rgb(var(--c-header-text)); }
header.q-header a { color: rgb(var(--c-header-text)); }
/* Buttons honor a distinct button radius. */
.rounded-c, .btn { border-radius: var(--c-radius-btn, var(--c-radius)); }
/* Content links honor the chosen link color. */
.q-link { color: rgb(var(--c-link)); }
/* Density scales the main content vertical rhythm. */
main.q-main { padding-top: calc(1.5rem * var(--c-density, 1)); padding-bottom: calc(1.5rem * var(--c-density, 1)); }

/* Post container style (live theme editor): card (default) | bordered | flat */
[data-post-style='bordered'] .q-post { box-shadow: none !important; }
[data-post-style='flat'] .q-post {
  box-shadow: none !important;
  border-color: transparent !important;
  background: transparent !important;
}

/* Respect users who prefer reduced motion (accessibility). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content link: hidden until keyboard-focused. */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: rgb(var(--c-primary)); color: #fff; padding: 8px 16px;
  border-radius: var(--c-radius); font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* --- Track 1 polish: focus rings, selection, smooth scroll -------------- */
@layer base {
  html { scroll-behavior: smooth; }
  ::selection { background: rgb(var(--c-primary) / 0.22); }
  /* A consistent, on-brand keyboard focus ring everywhere. */
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--c-primary));
    outline-offset: 2px;
    border-radius: 4px;
  }
  kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Rendered post content (.prose-q) — quote blocks. The composer (Editor.vue)
   styles its own preview; these rules style quotes in DISPLAYED posts so a
   quoted reply reads as an intentional, on-brand card rather than a bare
   browser blockquote.
   --------------------------------------------------------------------------- */
.prose-q blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid rgb(var(--c-primary));
  background: rgb(var(--c-surface-2));
  border-radius: 0 10px 10px 0;
  color: rgb(var(--c-text-2));
}
.prose-q blockquote p { margin: 0 0 8px; }
.prose-q blockquote > :last-child { margin-bottom: 0; }
.prose-q blockquote a { color: rgb(var(--c-primary)); text-decoration: none; font-weight: 700; }
.prose-q blockquote a:hover { text-decoration: underline; }
/* Nested quotes get progressively quieter. */
.prose-q blockquote blockquote { opacity: 0.85; }

/* Reply-with-quote cards. The first paragraph is an "Author said:" attribution
   (it carries an author link), so render these as a titled quote card with a
   header bar and a big quote glyph — like XenForo/Invision quotes. */
.prose-q blockquote:has(> p:first-child a) {
  position: relative;
  padding: 0;
  border: 1px solid rgb(var(--c-border));
  border-left: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  overflow: hidden;
}
.prose-q blockquote:has(> p:first-child a) > p:first-child {
  margin: 0;
  padding: 9px 16px;
  background: rgb(var(--c-primary) / 0.10);
  border-bottom: 1px solid rgb(var(--c-border));
  font-size: 0.9em;
  font-weight: 700;
  color: rgb(var(--c-text-2));
}
.prose-q blockquote:has(> p:first-child a) > *:not(:first-child) { margin: 0; padding: 0 18px 0 46px; }
.prose-q blockquote:has(> p:first-child a) > *:nth-child(2) { position: relative; padding-top: 14px; }
.prose-q blockquote:has(> p:first-child a) > *:last-child { padding-bottom: 14px; }
.prose-q blockquote:has(> p:first-child a) > *:nth-child(2)::before {
  content: '\201C';
  position: absolute;
  left: 12px;
  top: 6px;
  font: 800 34px/1 Georgia, "Times New Roman", serif;
  color: rgb(var(--c-primary) / 0.4);
}

/* @mentions rendered as profile chips (Mentions::linkify). */
.prose-q .mention,
.mention {
  color: rgb(var(--c-primary));
  font-weight: 600;
  text-decoration: none;
  background: rgb(var(--c-primary) / 0.1);
  padding: 0 4px;
  border-radius: 5px;
  white-space: nowrap;
}
.prose-q .mention:hover,
.mention:hover { background: rgb(var(--c-primary) / 0.18); }

/* Media embeds (YouTube/Vimeo/Spotify/X/Facebook/Instagram) */
.embed-video { position: relative; width: 100%; max-width: 680px; aspect-ratio: 16 / 9; margin: 14px 0; border-radius: 12px; overflow: hidden; background: #000; }
.embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-spotify { margin: 14px 0; max-width: 680px; }
.twitter-tweet, .instagram-media, .fb-post, .fb-video { margin: 14px 0 !important; }

/* Code blocks + syntax highlighting. Shared by the composer (.prose-q editor
   content) and rendered posts. Stored code is raw; highlight.js adds .hljs-*
   token spans on display, lowlight adds them live while editing. */
.prose-q pre {
  background: rgb(var(--c-surface-2));
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.prose-q pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: none;
  padding: 0;
  color: rgb(var(--c-text));
  white-space: pre;
  display: block;
}
.prose-q :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgb(var(--c-primary) / 0.1);
  color: rgb(var(--c-primary));
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 0.9em;
}
/* highlight.js tokens — mid-tone palette legible on light & dark surfaces */
.hljs-comment, .hljs-quote { color: #8a90a2; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag, .hljs-name { color: #c64b8c; }
.hljs-built_in, .hljs-class .hljs-title, .hljs-title.class_ { color: #b5852f; }
.hljs-string, .hljs-meta .hljs-string, .hljs-regexp, .hljs-addition { color: #2e9e6e; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: #c2772b; }
.hljs-title, .hljs-title.function_, .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #3b82c4; }
.hljs-type, .hljs-selector-id, .hljs-selector-class, .hljs-keyword.hljs-type { color: #9a6ad1; }
.hljs-meta, .hljs-deletion { color: #8a90a2; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Spoilers — collapsible <details> blocks. */
.prose-q .spoiler {
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  background: rgb(var(--c-surface-2));
  margin: 12px 0;
  padding: 0 14px;
}
.prose-q .spoiler > summary {
  cursor: pointer;
  font-weight: 600;
  color: rgb(var(--c-text-2));
  padding: 10px 0;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.prose-q .spoiler > summary::-webkit-details-marker { display: none; }
.prose-q .spoiler > summary::before { content: "▸"; color: rgb(var(--c-muted)); font-size: 0.85em; }
.prose-q .spoiler[open] > summary::before { content: "▾"; }
.prose-q .spoiler > div { padding: 2px 0 12px; }
.prose-q .spoiler > div > :last-child { margin-bottom: 0; }

/* Themed scrollbars — match the site surface/border palette in both light &
   dark, instead of the OS default grey. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--c-muted) / 0.45) rgb(var(--c-surface-2) / 0.6);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgb(var(--c-surface-2) / 0.5); }
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-muted) / 0.45);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-muted) / 0.7); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
