/* ============================================================
   TryPrompt — custom styles on top of Tailwind CSS
   (Tailwind is loaded via its official Play CDN; this file only
   contains the few things that are easier in plain CSS.)
   ============================================================ */

/* ---------- Brand palette (kept in sync with the Tailwind config) ---------- */
:root {
  --pk-ink: #17141F;
  --pk-paper: #FAFAF8;
  --pk-brand: #E8590C;
  --pk-brand-dark: #C2410C;
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Pinterest-style masonry gallery ---------- */
.pk-masonry {
  column-count: 2;
  column-gap: 1.25rem;
}
@media (min-width: 768px)  { .pk-masonry { column-count: 3; } }
@media (min-width: 1280px) { .pk-masonry { column-count: 4; } }
@media (min-width: 1600px) { .pk-masonry { column-count: 5; } }

.pk-masonry > * { break-inside: avoid; }

/* ---------- Horizontal scroll row (category chips etc.) ----------
   A soft fade on the right edge hints that the row can be scrolled. */
.pk-scrollx {
  position: relative;
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
}
.pk-scrollx::-webkit-scrollbar { display: none; }

/* ---------- Cards ---------- */
.pk-card img { display: block; }

/* ---------- Small entrance animation for loaded gallery cards ---------- */
@keyframes pk-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pk-fade-up { animation: pk-fade-up .4s ease both; }

/* ---------- Premium hero (dark section on the homepage) ----------
   1. .pk-dotgrid — a soft dotted grid over the aurora glow,
      faded out towards the edges with a radial mask.
   2. .pk-float   — a gentle up/down drift for the floating
      prompt showcase cards. */
.pk-dotgrid {
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 90% 85% at 50% 25%, black 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 25%, black 25%, transparent 72%);
}

@keyframes pk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.pk-float { animation: pk-float 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .pk-fade-up { animation: none; }
  .pk-float   { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Toast notification (copy prompt etc.) ---------- */
#pk-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 80;
}
#pk-toast.pk-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Native details/summary (FAQ + admin nav) ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- Search suggestions dropdown ---------- */
.pk-suggest {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.5rem);
  z-index: 40;
}

/* ---------- Prompt text panel (detail page) ---------- */
.pk-prompt-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #F3F0F7;
}

/* ---------- Footer link underline animation ---------- */
.pk-link {
  position: relative;
}
.pk-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: currentColor;
  transition: width .25s ease;
}
.pk-link:hover::after { width: 100%; }

/* ---------- Focus visibility for keyboard users ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--pk-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Admin: sticky sidebar on desktop ---------- */
@media (min-width: 1024px) {
  .pk-admin-shell { display: grid; grid-template-columns: 16rem 1fr; min-height: 100vh; }
}

/* ---------- Print: hide interactive chrome ---------- */
@media print {
  header, footer, .no-print { display: none !important; }
}