/* ================================================
   Pyrografia.sk – Custom Styles  (CLASSIK palette)
   Palette: #0b090c · #50311d · #806248 · #a5907b · #d4cabc
   ================================================ */

/* --- Alpine.js: skryje elementy kým sa Alpine neinicializuje --- */
[x-cloak] { display: none !important; }

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

::selection {
    background-color: rgba(80, 49, 29, 0.18);
    color: #0b090c;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f0ea; }
::-webkit-scrollbar-thumb { background: #a5907b; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #806248; }

/* --- Gradient text --- */
.gradient-text-classik {
    background: linear-gradient(135deg, #50311d 0%, #806248 60%, #a5907b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Grain / noise texture overlay --- */
.grain-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
    opacity: 0.22;
    pointer-events: none;
}

/* --- Subtle dot grid decoration --- */
.dot-grid {
    background-image: radial-gradient(circle, #a5907b 1px, transparent 1px);
    background-size: 28px 28px;
}

/* --- Navigation states --- */
.nav-transparent {
    background: transparent;
    border-bottom: 1px solid transparent;
}

.nav-solid {
    background: rgba(250, 248, 245, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #d4cabc;
    box-shadow: 0 1px 24px rgba(80, 49, 29, 0.06);
}

/* --- Classic card --- */
.classik-card {
    background: #ffffff;
    border: 1px solid #d4cabc;
    border-radius: 1rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.classik-card:hover {
    box-shadow: 0 8px 40px rgba(80, 49, 29, 0.12);
    transform: translateY(-3px);
}

/* --- Section divider --- */
.section-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #50311d, #a5907b);
    border-radius: 99px;
    margin: 0 auto;
}

/* --- Animations --- */
@keyframes pulseSlow {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 0.9; }
}

@keyframes bounceSlow {
    0%, 100% { transform: translateY(0) translateX(-50%); }
    50%       { transform: translateY(7px) translateX(-50%); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-pulse-slow  { animation: pulseSlow 4s ease-in-out infinite; }
.animate-bounce-slow { animation: bounceSlow 2.5s ease-in-out infinite; }
.animate-float       { animation: float 6s ease-in-out infinite; }

/* --- Line clamp --- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Form focus --- */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(80, 49, 29, 0.12);
}

/* --- Override browser autofill blue background --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0b090c !important;
    caret-color: #0b090c;
    transition: background-color 9999s ease-in-out 0s;
}

/* --- Prevent horizontal scroll from decorative overflow --- */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* --- Smooth tap highlight --- */
a, button { -webkit-tap-highlight-color: transparent; }

/* --- AOS: hints --- */
[data-aos] { will-change: transform, opacity; }

/* --- Badge pill --- */
.badge-classik {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 99px;
    background: rgba(80, 49, 29, 0.07);
    border: 1px solid rgba(80, 49, 29, 0.14);
    color: #50311d;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* --- Quotation mark decoration --- */
.quote-mark {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 6rem;
    line-height: 1;
    color: #d4cabc;
    user-select: none;
}

/* --- Mobile tweaks --- */
@media (max-width: 640px) {
    /* Ensure tap targets are large enough */
    nav a, nav button { min-height: 44px; }

    /* Improve article readability on small screens */
    .article-content h2 { font-size: 1.4rem; }
    .article-content h3 { font-size: 1.1rem; }

    /* Reduce quote mark size on mobile */
    .quote-mark { font-size: 4rem; }
}

/* --- Article / blog content typography --- */
.article-content { color: #50311d; line-height: 1.8; }
.article-content h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: #0b090c;
    margin-top: 2.5rem;
    margin-bottom: 0.875rem;
    line-height: 1.25;
}
.article-content h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0b090c;
    margin-top: 2rem;
    margin-bottom: 0.625rem;
}
.article-content p  { margin-bottom: 1.25rem; }
.article-content strong { color: #0b090c; font-weight: 600; }
.article-content em { font-style: italic; color: #806248; }
.article-content ul {
    list-style: none;
    margin-bottom: 1.25rem;
    padding-left: 0;
}
.article-content ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}
.article-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #806248;
}
.article-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.article-content ol li { margin-bottom: 0.5rem; }
.article-content blockquote {
    border-left: 3px solid #d4cabc;
    padding-left: 1.25rem;
    margin: 1.75rem 0;
    color: #806248;
    font-style: italic;
    font-size: 1.05rem;
}
.article-content a {
    color: #50311d;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #d4cabc;
    transition: color 0.2s;
}
.article-content a:hover { color: #0b090c; text-decoration-color: #50311d; }
.article-content .tip-box {
    background: #f5f0ea;
    border: 1px solid #d4cabc;
    border-left: 3px solid #50311d;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
}
.article-content .tip-box p { margin-bottom: 0; }

/* --- Print --- */
@media print {
    .grain-overlay { display: none !important; }
}