/*
Theme Name: Anksioznost.eu
Theme URI: https://anksioznost.eu
Author: Primož Groblar
Description: Custom tema za anksioznost.eu blog — usklajena z glavno stranjo.
Version: 1.0
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  --bg:    #f8f9f7;
  --w:     #ffffff;
  --ink:   #12140f;
  --ink2:  rgba(18,20,15,.65);
  --ink3:  rgba(18,20,15,.38);
  --a:     #2a6644;
  --a2:    #1f5235;
  --b1:    rgba(18,20,15,.08);
  --b2:    rgba(18,20,15,.14);
  --dark:  #12140f;
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { overflow-x:hidden; scroll-behavior:smooth; }
body { font-family:var(--sans); font-size:16px; font-weight:300; line-height:1.75; color:var(--ink); background:var(--bg); overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

/* NAV */
.site-header {
  position:sticky; top:0;
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.25rem,5vw,3rem);
  background:rgba(248,249,247,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--b1);
  z-index:100;
}
.site-logo { font-family:var(--serif); font-size:1.05rem; font-style:italic; color:var(--ink); }
.site-logo b { font-style:normal; color:var(--a); font-weight:400; }
.nav-cta {
  height:34px; padding:0 16px;
  background:var(--a); color:#fff;
  font-size:13px; font-weight:500; border-radius:7px;
  transition:opacity 120ms;
}
.nav-cta:hover { opacity:.85; }

/* BLOG HEADER */
.blog-header {
  padding:clamp(3rem,8vw,5rem) clamp(1.25rem,5vw,3rem) clamp(2rem,4vw,3rem);
  max-width:760px; margin:0 auto; text-align:center;
}
.blog-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--a); margin-bottom:.85rem;
}
.blog-eyebrow::before,.blog-eyebrow::after { content:''; width:18px; height:1px; background:rgba(42,102,68,.35); }
.blog-title { font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:400; letter-spacing:-.025em; line-height:1.1; color:var(--ink); margin-bottom:.75rem; }
.blog-title em { font-style:italic; color:var(--a); }
.blog-sub { font-size:15px; font-weight:300; color:var(--ink2); }

/* POSTS GRID */
.posts-wrap { max-width:1100px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem) clamp(4rem,8vw,6rem); }
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:860px) { .posts-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .posts-grid { grid-template-columns:1fr; } }

/* POST CARD */
.post-card {
  background:var(--w); border:1px solid var(--b1); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color 150ms, transform 250ms cubic-bezier(0.16,1,0.3,1);
}
.post-card:hover { border-color:var(--b2); transform:translateY(-3px); }
.post-card-img { aspect-ratio:16/9; overflow:hidden; background:var(--bg); }
.post-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 400ms; }
.post-card:hover .post-card-img img { transform:scale(1.03); }
.post-card-body { padding:1.25rem; flex:1; display:flex; flex-direction:column; }
.post-card-date { font-size:11px; color:var(--ink3); letter-spacing:.05em; margin-bottom:.5rem; }
.post-card-title { font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--ink); line-height:1.3; margin-bottom:.5rem; }
.post-card-excerpt { font-size:13px; color:var(--ink2); line-height:1.65; flex:1; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-card-link { font-size:13px; font-weight:500; color:var(--a); display:inline-flex; align-items:center; gap:4px; }
.post-card-link:hover { gap:8px; }

/* PAGINATION */
.pagination { display:flex; justify-content:center; align-items:center; gap:.75rem; padding:2rem 0; }
.page-link {
  height:36px; padding:0 14px; border-radius:7px;
  border:1px solid var(--b2); font-size:13px; color:var(--ink2);
  display:flex; align-items:center;
  transition:border-color 120ms, color 120ms;
}
.page-link:hover, .page-link.current { border-color:var(--a); color:var(--a); }
.page-link.current { background:rgba(42,102,68,.06); font-weight:500; }

/* SINGLE POST */
.single-wrap { max-width:740px; margin:0 auto; padding:clamp(2rem,5vw,4rem) clamp(1.25rem,5vw,2rem) clamp(4rem,8vw,6rem); }
.single-header { margin-bottom:2.5rem; }
.single-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink3); margin-bottom:1.5rem; padding:6px 12px; border:1px solid var(--b1); border-radius:7px; transition:color 120ms; }
.single-back:hover { color:var(--ink); }
.single-date { font-size:11px; color:var(--ink3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.75rem; }
.single-title { font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:400; letter-spacing:-.025em; line-height:1.15; color:var(--ink); margin-bottom:1.5rem; }
.single-featured { border-radius:14px; overflow:hidden; margin-bottom:2.5rem; }
.single-featured img { width:100%; }

/* Post content */
.entry-content { font-size:16px; font-weight:300; color:var(--ink2); line-height:1.8; }
.entry-content h2 { font-family:var(--serif); font-size:clamp(1.3rem,2.5vw,1.8rem); font-weight:400; color:var(--ink); margin:2.5rem 0 .85rem; letter-spacing:-.015em; }
.entry-content h3 { font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--ink); margin:2rem 0 .65rem; }
.entry-content p { margin-bottom:1.25rem; }
.entry-content p:last-child { margin-bottom:0; }
.entry-content strong { color:var(--ink); font-weight:500; }
.entry-content a { color:var(--a); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul, .entry-content ol { padding-left:1.5rem; margin-bottom:1.25rem; }
.entry-content li { margin-bottom:.4rem; }
.entry-content blockquote { border-left:3px solid var(--a); padding:1rem 1.25rem; margin:1.5rem 0; background:rgba(42,102,68,.04); border-radius:0 8px 8px 0; font-style:italic; color:var(--ink); }

/* CTA block */
.post-cta {
  margin-top:3rem; padding:2rem;
  background:var(--dark); border-radius:16px;
  text-align:center; position:relative; overflow:hidden;
}
.post-cta::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--a),transparent); }
.post-cta-title { font-family:var(--serif); font-size:1.3rem; font-weight:400; color:#fff; margin-bottom:.5rem; }
.post-cta-sub { font-size:13px; color:rgba(255,255,255,.5); margin-bottom:1.25rem; }
.post-cta-btn { display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 22px; background:var(--a); color:#fff; font-size:14px; font-weight:500; border-radius:8px; transition:opacity 150ms; }
.post-cta-btn:hover { opacity:.85; }

/* FOOTER */
.site-footer {
  background:var(--dark);
  padding:2.5rem clamp(1.25rem,5vw,3rem);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-in { max-width:1100px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.footer-logo { font-family:var(--serif); font-size:1rem; font-style:italic; color:rgba(255,255,255,.6); }
.footer-logo b { font-style:normal; color:var(--a); font-weight:400; }
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.footer-links a { font-size:13px; color:rgba(255,255,255,.35); transition:color 120ms; }
.footer-links a:hover { color:rgba(255,255,255,.7); }
.footer-copy { font-size:11px; color:rgba(255,255,255,.2); }