/* Dodaci uz Lovable CSS (app.css): animacije, izbornik, obrasci, prototip kartica, tekst članaka. */

/* Pojavljivanje pri pomicanju (kao framer-motion na Lovableu). Bez JS-a sve je odmah vidljivo. */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
html.js [data-reveal].svm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* WordPress traka za prijavljene ne smije prekriti zaglavlje */
body.admin-bar .svm-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .svm-header { top: 46px; } }

/* Izbornik na mobitelu */
#svm-mobile-nav[hidden] { display: none; }
.svm-header a[aria-current="page"] { color: hsl(var(--foreground)); }

/* Često postavljana pitanja */
[data-svm-faq] button svg { transition: transform .2s; }
[data-svm-faq] button[data-state="open"] > svg { transform: rotate(180deg); }
[data-svm-faq] [role="region"]:not([hidden]) { animation: svm-faq-in .2s ease-out; }
@keyframes svm-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Karusel preporuka */
[data-svm-quotes] .svm-fade { animation: svm-fade .45s ease-out; }
@keyframes svm-fade { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* Obrasci */
.svm-textarea { min-height: 128px; resize: vertical; }
.svm-msg { padding: 14px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.svm-msg-ok { background: hsl(140 40% 92%); color: hsl(145 55% 24%); }
.svm-msg-err { background: hsl(8 70% 94%); color: hsl(8 60% 38%); }

/* Softver po mjeri: kartica prototipa */
.svm-ticket { box-shadow: 0 30px 60px -35px rgba(13, 13, 13, .35); }
.svm-days { list-style: none; margin: 8px 0; padding: 0; }
.svm-days li { display: grid; grid-template-columns: 64px 1fr 22px; gap: 12px; align-items: center; padding: 12px 0; font-size: 15px; }
.svm-chk { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid hsl(var(--border)); display: grid; place-items: center; font-size: 11px; }
.svm-days li.done .svm-chk { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.svm-days li.now .svm-chk { border-color: hsl(var(--foreground)); box-shadow: 0 0 0 4px hsl(var(--card)); }

/* Paginacija bloga */
.svm-pager .page-numbers { min-width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0 12px; border: 1px solid hsl(var(--border)); border-radius: 999px; font-weight: 600; font-size: 14px; }
.svm-pager .current { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

/* Tekst članaka (Lovable nije imao typography dodatak; ovo daje urednu tipografiju) */
.svm-prose { font-size: 1.125rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }
.svm-prose > * + * { margin-top: 1.1em; }
.svm-prose h2 { font-family: Sora, system-ui, sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.02em; color: hsl(var(--foreground)); margin-top: 2em; }
.svm-prose h3 { font-family: Sora, system-ui, sans-serif; font-weight: 600; font-size: 1.35rem; line-height: 1.3; color: hsl(var(--foreground)); margin-top: 1.6em; }
.svm-prose h4 { font-weight: 700; color: hsl(var(--foreground)); margin-top: 1.4em; }
.svm-prose strong, .svm-prose b { color: hsl(var(--foreground)); }
.svm-prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.svm-prose ul, .svm-prose ol { padding-left: 1.4em; }
.svm-prose ul { list-style: disc; }
.svm-prose ol { list-style: decimal; }
.svm-prose li + li { margin-top: .4em; }
.svm-prose blockquote { border-left: 3px solid hsl(var(--foreground)); padding-left: 1.1em; font-style: italic; color: hsl(var(--foreground)); }
.svm-prose img { border-radius: 12px; height: auto; margin: 1.6em 0; }
.svm-prose figure { margin: 1.6em 0; }
.svm-prose figcaption { font-size: .875rem; text-align: center; margin-top: .5em; }
.svm-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: .95rem; }
.svm-prose th, .svm-prose td { border: 1px solid hsl(var(--border)); padding: 8px 12px; text-align: left; }
.svm-prose .wp-block-image, .svm-prose .aligncenter { text-align: center; }