/*
Theme Name: PodržiKlub Blog
Theme URI: https://blog.podrziklub.com
Description: Blog tema za PodržiKlub — vizuelno identična glavnoj aplikaciji (podrziklub.com). Topli papirni ton, Bricolage Grotesque + Manrope, kartice sa lift efektom.
Author: PodržiKlub
Author URI: https://podrziklub.com
Version: 2.0
License: MIT
Text Domain: podrziklub
*/

/* ── Dizajn tokeni (hex fallback + OKLCH za moderne browsere) ───── */
:root {
    --color-background: #f7f5ef;
    --color-foreground: #29241f;
    --color-card: #fefdfb;
    --color-primary: #b54a28;
    --color-primary-foreground: #fdfbf7;
    --color-secondary: #ece7dc;
    --color-muted-foreground: #7a736a;
    --color-border: #e2dccf;
    --color-ink: #221d17;
    --color-ink-foreground: #f6f4ee;
    --radius: 0.9rem;
    --shadow-card: 0 1px 0 0 rgba(41, 36, 32, 0.06), 0 12px 30px -18px rgba(41, 36, 32, 0.35);
    --shadow-lift: 0 24px 60px -32px rgba(41, 36, 32, 0.5);
}

@supports (color: oklch(0% 0 0)) {
    :root {
        --color-background: oklch(0.973 0.011 88);
        --color-foreground: oklch(0.21 0.02 60);
        --color-card: oklch(0.995 0.005 90);
        --color-primary: oklch(0.53 0.19 30);
        --color-primary-foreground: oklch(0.985 0.01 90);
        --color-secondary: oklch(0.93 0.018 88);
        --color-muted-foreground: oklch(0.5 0.02 70);
        --color-border: oklch(0.885 0.017 85);
        --color-ink: oklch(0.18 0.018 60);
        --color-ink-foreground: oklch(0.97 0.01 88);
        --shadow-card: 0 1px 0 0 oklch(0.21 0.02 60 / 0.06), 0 12px 30px -18px oklch(0.21 0.02 60 / 0.35);
        --shadow-lift: 0 24px 60px -32px oklch(0.21 0.02 60 / 0.5);
    }
}

/* ── Reset i osnove ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: 'Manrope', -apple-system, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Papirna tekstura — potpis dizajna platforme */
.bg-paper {
    background-image: radial-gradient(circle, rgba(41, 36, 32, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}

h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-foreground);
}

a { color: var(--color-primary); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

img { max-width: 100%; height: auto; }

.container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }

/* ── Header (isti kao na podrziklub.com) ────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(254, 253, 251, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}
body.admin-bar .site-header { top: 32px; }

.site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.logo {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
}
.logo span { color: var(--color-primary); }
.logo:hover { opacity: 1; }

.main-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 900px) { .main-nav { display: flex; } }

.main-nav a {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    font-weight: 500;
}
.main-nav a:hover { color: var(--color-foreground); opacity: 1; }
.main-nav a.active { color: var(--color-foreground); font-weight: 700; }

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    transition: opacity 0.2s, background 0.2s;
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-foreground) !important; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { background: var(--color-secondary); color: var(--color-foreground) !important; }
.btn-secondary:hover { background: var(--color-border); opacity: 1; }
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    border-radius: 0.6rem;
}

.mobile-nav { display: flex; gap: 0.5rem; }
@media (min-width: 900px) { .mobile-nav { display: none; } }

/* ── Hero bloga ─────────────────────────────────────────────────── */
.blog-hero { padding: 4rem 0 3rem; text-align: center; }
.blog-hero h1 { font-size: 2.5rem; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .blog-hero h1 { font-size: 3.25rem; } }
.blog-hero p { color: var(--color-muted-foreground); font-size: 1.1rem; max-width: 36rem; margin: 0 auto; }

/* ── Kartice postova ────────────────────────────────────────────── */
.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 4rem;
}
@media (min-width: 640px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) + 8px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.post-card .thumb { height: 200px; overflow: hidden; background: var(--color-secondary); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-card .content { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }

.post-meta { font-size: 0.75rem; color: var(--color-muted-foreground); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.post-meta .category {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
}

.post-card h2, .post-card h3 { font-size: 1.2rem; line-height: 1.3; }
.post-card h2 a, .post-card h3 a { color: var(--color-foreground); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--color-primary); opacity: 1; }

.post-card .excerpt { font-size: 0.9rem; color: var(--color-muted-foreground); flex: 1; }
.post-card .read-more { font-size: 0.875rem; font-weight: 600; }

/* ── Pojedinačni post ───────────────────────────────────────────── */
.single-article { max-width: 48rem; margin: 0 auto; padding: 3rem 0 4rem; }
.single-article > header { text-align: center; margin-bottom: 2rem; }
.single-article h1 { font-size: 2.25rem; margin: 0.75rem 0; }
@media (min-width: 640px) { .single-article h1 { font-size: 2.9rem; } }

.single-article .featured {
    border-radius: calc(var(--radius) + 8px);
    overflow: hidden;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-card);
}
.single-article .featured img { display: block; width: 100%; }

.prose { font-size: 1.08rem; line-height: 1.8; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin-bottom: 1.4rem; }
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 1rem; }
.prose h3 { font-size: 1.3rem; margin: 2rem 0 0.8rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.prose img { border-radius: var(--radius); }
.prose blockquote {
    border-left: 3px solid var(--color-primary);
    padding: 0.5rem 0 0.5rem 1.25rem;
    color: var(--color-muted-foreground);
    font-style: italic;
    background: var(--color-card);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.prose code { background: var(--color-secondary); padding: 0.15em 0.4em; border-radius: 6px; font-size: 0.9em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ── CTA blok (povratak na platformu) ───────────────────────────── */
.cta-band { background: var(--color-ink); color: var(--color-ink-foreground); padding: 4rem 0; text-align: center; }
.cta-band h2 { color: var(--color-ink-foreground); font-size: 2rem; margin-bottom: 0.75rem; }
.cta-band p { opacity: 0.8; max-width: 34rem; margin: 0 auto 1.75rem; }

.cta-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) + 12px);
    box-shadow: var(--shadow-card);
    padding: 2rem;
    text-align: center;
    margin-top: 3rem;
}
.cta-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.cta-card p { color: var(--color-muted-foreground); font-size: 0.95rem; margin-bottom: 1.25rem; }

/* ── Paginacija ─────────────────────────────────────────────────── */
.pagination-wrap { text-align: center; padding-bottom: 4rem; }
.pagination-wrap .nav-links { display: inline-flex; gap: 0.5rem; }
.pagination-wrap .page-numbers {
    display: inline-block;
    min-width: 2.5rem;
    padding: 0.5rem 0.85rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    color: var(--color-foreground);
    font-weight: 600;
    font-size: 0.9rem;
}
.pagination-wrap .page-numbers.current { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }

/* ── Footer (isti kao na podrziklub.com) ────────────────────────── */
.site-footer { background: var(--color-card); border-top: 1px solid var(--color-border); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-grid .about p { font-size: 0.875rem; color: var(--color-muted-foreground); margin-top: 0.75rem; }
.footer-grid h4 { font-size: 0.875rem; margin-bottom: 0.75rem; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid ul a { font-size: 0.875rem; color: var(--color-muted-foreground); }
.footer-grid ul a:hover { color: var(--color-foreground); opacity: 1; }
.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}
.footer-bottom p { margin-bottom: 0.25rem; }

/* ── 404 ────────────────────────────────────────────────────────── */
.error-404 { text-align: center; padding: 6rem 0; }
.error-404 h1 { font-size: 3rem; margin-bottom: 1rem; }
.error-404 p { color: var(--color-muted-foreground); margin-bottom: 2rem; }

/* ── WP specifično ──────────────────────────────────────────────── */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.8rem; color: var(--color-muted-foreground); text-align: center; margin-top: 0.5rem; }
.aligncenter { display: block; margin: 0 auto; }
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
}