/* Site-wide custom CSS (everything that is not a Tailwind utility).
   Loaded in addition to Tailwind - works with both the compiled build and the dev CDN. */

html { scroll-behavior: smooth; }
body { font-family: 'Archivo', sans-serif; }
h1, h2, h3, h4 { font-family: 'Fraunces', serif; }
::selection { background: #C89B3C; color: #14110F; }

/* Alpine: hide elements until Alpine has initialised */
[x-cloak] { display: none !important; }

/* Hide scrollbars but keep scrolling (partner logos row on small screens) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (min-width: 1108px) {
  .partner-logos { flex-wrap: wrap; justify-content: space-between; overflow-x: visible; }
}

/* Vinyl-record decoration in the homepage hero */
.groove {
  border-radius: 9999px;
  background-color: #a9432a;
  background-image: repeating-radial-gradient(circle at center,
    transparent 0px, transparent 10px,
    rgba(20, 17, 15, 0.18) 10px, rgba(20, 17, 15, 0.18) 11px);
}
.dark .groove { background-color: #F2E9D8; }
.groove::before {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #A9432A, #6f2a19 70%);
}
.groove::after {
  content: "";
  position: absolute;
  inset: 47%;
  border-radius: 9999px;
  background: #F2E9D8;
}
.dark .groove::after { background: #14110F; }

/* Entrance animation */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: riseIn .7s cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* ------------------------------------------------------------------
   Article body. The HTML comes from the database (edited in the admin),
   so it is styled by element here instead of with Tailwind utility
   classes, which the Tailwind build could not see inside database content.
   ------------------------------------------------------------------ */
.article-body { display: flex; flex-direction: column; gap: 1.25rem; }
.article-body p { font-size: 17px; line-height: 1.625; color: rgb(20 17 15 / .7); }
.dark .article-body p { color: rgb(242 233 216 / .65); }
.article-body h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: .25rem; }
.article-body h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; margin-top: 2rem; margin-bottom: .25rem; }
.article-body figure { margin: 2rem 0; }
.article-body img { display: block; width: 100%; height: auto; border-radius: .5rem; object-fit: cover; }
.article-body figcaption { font-size: .75rem; line-height: 1rem; text-align: center; margin-top: .5rem; color: rgb(20 17 15 / .5); }
.dark .article-body figcaption { color: rgb(242 233 216 / .5); }
.article-body blockquote {
  border-left: 2px solid #A9432A; padding-left: 1.25rem; margin: 2rem 0;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 1.25rem; line-height: 1.75rem;
  color: rgb(20 17 15 / .85);
}
.dark .article-body blockquote { border-left-color: #cc4423; color: rgb(242 233 216 / .85); }
.article-body a { color: #A9432A; text-underline-offset: 4px; }
.article-body a:hover { text-decoration: underline; }
.dark .article-body a { color: #cc4423; }
.article-body ul { list-style: disc; padding-left: 1.5rem; }
.article-body ol { list-style: decimal; padding-left: 1.5rem; }
.article-body li { font-size: 17px; line-height: 1.625; color: rgb(20 17 15 / .7); }
.dark .article-body li { color: rgb(242 233 216 / .65); }