/* Project styles: small extras on top of Tailwind (CDN). */
[x-cloak] { display: none !important; }

/* Поля форм с ошибкой валидации (Django ставит aria-invalid) — красная обводка. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #B33A54 !important;
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 2px rgba(179, 58, 84, .2) !important;
}

/* File inputs: style the native picker button to match the site. */
input[type="file"] {
  font-size: .9rem;
  color: #6B7280;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: .75rem;
  border: 0;
  border-radius: 9999px;
  background: #432C4F;            /* accent */
  color: #fff;
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: opacity .15s;
}
input[type="file"]::file-selector-button:hover { opacity: .9; }

/* Readable, "media-like" base typography.
   Bumping the root size scales all rem-based Tailwind sizes up ~6%. */
html { scroll-behavior: smooth; font-size: 17px; }
@media (max-width: 480px) { html { font-size: 16px; } }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { line-height: 1.7; }
h1, h2, h3 { line-height: 1.2; }

/* Editorial body for long-form content (info pages, blog). */
.article { font-family: "Lora", Georgia, serif; font-size: 1.2rem; line-height: 1.8; color: #2D2D2D; }
/* Якорные переходы (оглавления, тултипы → справка): заголовок не прячется под sticky-шапкой. */
.article [id] { scroll-margin-top: 6rem; }
.article > * + * { margin-top: 1.1em; }
.article h2 { font-family: "Clash Display", sans-serif; font-size: 1.7rem; font-weight: 600; line-height: 1.25; margin-top: 1.6em; }
.article h3 { font-family: "Clash Display", sans-serif; font-size: 1.35rem; font-weight: 600; margin-top: 1.4em; }
.article ul, .article ol { padding-left: 1.4em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-top: .4em; }
.article li::marker { color: #B33A54; }

/* Password requirement list (auth forms). */
.pw-rules ul { list-style: disc; padding-left: 1.1rem; }
.pw-rules li { margin-top: .2em; }
.pw-rules li::marker { color: #B33A54; }
.article a { color: #B33A54; text-decoration: underline; text-underline-offset: 2px; }
.article strong { font-weight: 600; }
/* Контент из визуального редактора (картинки, подписи, цитаты, таблицы). */
.article img { max-width: 100%; height: auto; border-radius: 1rem; }
.article figure { margin: 1.6em 0; }
.article figure img { margin: 0 auto; }
.article figcaption { margin-top: .5em; font-size: .85rem; color: #6B7280; text-align: center; }
.article blockquote { border-left: 3px solid #B33A54; padding-left: 1em; font-style: italic; color: #4B5563; }
.article table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.article th, .article td { border: 1px solid #E5E7EB; padding: .5em .75em; text-align: left; }
.article th { background: #FFFDF9; font-weight: 600; }
.article iframe, .article video { max-width: 100%; border-radius: 1rem; }

/* Decorative gradient blobs (hero / sections). */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Gentle floating for badges / cards. */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 5s ease-in-out infinite; }
.animate-float-slow { animation: float 8s ease-in-out infinite; }

/* Soft blob morph + drift. */
@keyframes blobmove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.08); }
}
.animate-blob { animation: blobmove 12s ease-in-out infinite; }

/* Scroll reveal (toggled by IntersectionObserver in base.html). */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }

/* Gradient text helper. */
.text-gradient {
  background-image: linear-gradient(90deg, #B33A54, #432C4F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hide scrollbar for carousels. */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }