/* Base / layout */
/* === TOKENS (global defaults) === */
:root{
  /* Minimal Colors palette */
  --bg:#8fa6f2;      /* page background (very light) */
  --text:#060606;    /* primary text */
  --muted:#000000;   /* subdued text (derived for contrast) */

  /* surfaces */
  --card:#FFFFFF;    /* card background (clean white for readability) */
  --card-border:#D0BDF4; /* soft lavender border */
  --card-shadow:0 8px 20px rgba(2,6,23,0.06);
  --card-shadow-hover:0 12px 28px rgba(2,6,23,0.10);

  /* navigation / accents */
  --menu-bg:#494D5F;   /* dark slate nav bar */
  --menu-ink:#E5EAF5;  /* nav text */
  --accent:#8458B3;    /* primary accent */
  --accent-hover:#6E3FA2; /* darker hover accent */
}

html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
.pf-container{ max-width:1200px; margin:0 auto; padding:0 18px; }

/* ================= Brand ================= */
.brand{ color:var(--text); font-weight:800; text-decoration:none; font-size:22px; }
.brand:hover{ opacity:.9; }

/* ================= Nav bar (capsules) ?" CANONICAL ================= */
.menu-bar{ background:var(--menu-bg); border-bottom:1px solid var(--card-border); box-shadow:none; }
.menu-bar .pf-container{ padding:12px 18px; }
.menu-bar .nav{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:flex-start;
  padding:0; margin:0; list-style:none;
}
.menu-bar .nav a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .85rem; border-radius:12px;
  background:var(--card);
  border:1px solid var(--card-border);
  color:#0f172a; text-decoration:none; font-weight:800; line-height:1;
  box-shadow:0 1px 0 rgba(2,6,23,.04);
  transition:transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease;
}
.menu-bar .nav a:hover,
.menu-bar .nav a:focus{
  background:var(--accent-hover);
  border-color:var(--accent);
  color:#ffffff; text-decoration:none; transform:translateY(-1px); outline:0;
}
.menu-bar .nav a[aria-current="page"]{
  background:var(--menu-bg); border-color:var(--menu-bg); color:#fff;
}

/* Mobilno poravnanje */
@media (max-width:768px){
  .menu-bar .pf-container{ padding:10px 12px; }
  .menu-bar .nav{ gap:10px; justify-content:center; }
  .menu-bar .nav a{ padding:7px 10px; font-weight:800; }
}

/* ================= Featured (hero) ================= */
.featured-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr);
  gap:22px; margin-top:20px; align-items:stretch;
}
@media (max-width:1000px){ .featured-grid{ grid-template-columns:1fr; } }

.featured-card{
  position:relative; display:block; background:transparent;
  border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:none;
  aspect-ratio: 16 / 9;              /* stabilna visina */
  min-height:360px;
}
@media (max-width:1024px){ .featured-card{ min-height:300px; } }
@media (max-width:640px){ .featured-card{ min-height:220px; } }

.featured-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.featured-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(16px,2.8vw,28px) clamp(18px,3vw,36px) clamp(18px,3vw,36px);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.7) 100%);
  color:#fff; box-sizing:border-box;
}
.featured-title{
  color:#fff; font-size:clamp(26px,3.8vw,48px); line-height:1.1;
  margin:0; font-weight:900; letter-spacing:-.5px; word-break:break-word;
}
.featured-excerpt{ color:rgba(255,255,255,.98); margin:0; font-size:clamp(14px,1.2vw,18px); }

/* ================= Right column (side blog cards) ================= */
.side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.side-card{
  display:grid; grid-template-columns:120px 1fr; gap:12px; padding:12px;
  text-decoration:none; color:inherit; border-radius:20px;
  border:1px solid var(--card-border); background:var(--card);
  transition:transform .15s ease, box-shadow .15s ease;
}
.side-card:hover{ transform:translateY(-2px); box-shadow:var(--card-shadow-hover); }
.side-thumb{ width:100%; height:100%; max-height:84px; object-fit:cover; border-radius:12px; }
.side-title{ font-size:17px; line-height:1.25; margin:0 0 6px; font-weight:800; color:var(--text); }
.side-meta{ font-size:12px; margin:0; color:var(--muted); }

/* ================= Sitnice / CTA ================= */
.note{ opacity:.9; }
.below-cards{ display:flex; justify-content:flex-end; margin:18px 0 8px; }
.pill-link,
.browse-btn{
  display:inline-block; padding:8px 12px; background:var(--accent); color:#fff;
  border-radius:10px; font-weight:800; text-decoration:none; border:1px solid var(--card-border);
  box-shadow:0 2px 4px rgba(2,6,23,.08); transition:background .15s ease, transform .05s ease;
}
.pill-link:hover,.browse-btn:hover{ background:var(--accent-hover); }
.pill-link:active,.browse-btn:active{ transform:translateY(1px); }
.browse-btn:focus-visible{ outline:3px solid #93c5fd; outline-offset:2px; }

/* ================= Links / text ================= */
.pf-root a{ color:var(--text); text-decoration:none; }
a:hover,a:focus{ color:var(--accent); text-decoration:underline; }
:focus-visible{ outline:2px solid var(--accent-hover); outline-offset:2px; }
p,li,small,.meta,.byline{ color:var(--muted); }
h1,h2,h3,h4{ color:var(--text); }
h1{ letter-spacing:-.5px; font-weight:800; line-height:1.15; }
h2{ font-weight:700; line-height:1.2; }
hr,.hr{ border-color:var(--card-border); }
.pf-root img{ background:transparent; }
.disclosure{ color:var(--muted); font-size:.9rem; opacity:.95; }

/* ================= Listicles preview ================= */
.listicles-wrap{ margin:18px 0 6px; }
.listicles-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:10px; }
@media (max-width:900px){ .listicles-grid{ grid-template-columns:1fr; } }

.listicles-card{
  display:grid; grid-template-columns:120px 1fr; gap:12px; padding:10px;
  text-decoration:none; color:inherit; border-radius:14px;
  border:1px solid var(--card-border); background:var(--card);
  transition:transform .15s ease, box-shadow .15s ease;
}
.listicles-card:hover{ transform:translateY(-2px); box-shadow:var(--card-shadow-hover); }
.lc-thumb{ width:100%; height:82px; object-fit:cover; border-radius:10px; display:block; }
.lc-title{ margin:0 0 6px; font-size:16px; line-height:1.25; color:var(--text); font-weight:700; }
.lc-meta{ margin:0; color:var(--muted); font-size:12px; }

/* ================= BLOGS: kompaktan list layout (kao Listicles) ================= */
.posts-list{ display:grid; gap:14px; margin:18px 0; }
.post-row{
  display:grid; grid-template-columns:120px 1fr; gap:12px; padding:10px;
  text-decoration:none; color:inherit; border-radius:14px;
  border:1px solid var(--card-border); background:var(--card);
  transition:transform .15s ease, box-shadow .15s ease;
}
.post-row:hover{ transform:translateY(-2px); box-shadow:var(--card-shadow-hover); }
.post-row .post-thumb{ width:100%; height:82px; object-fit:cover; border-radius:10px; display:block; }
.post-row .post-body h3{
  margin:0 0 6px; font-size:16px; line-height:1.25; font-weight:800; color:var(--text);
}
.post-row .post-body p{ margin:0 0 8px; color:var(--muted); }
.post-row .post-meta{ margin:0; font-size:12px; color:var(--muted); }
.post-row .btn{
  display:inline-block; padding:6px 10px; border-radius:10px; background:var(--accent);
  color:#fff; font-weight:700; text-decoration:none; border:1px solid var(--card-border);
}
.post-row .btn:hover{ background:var(--accent-hover); text-decoration:none; }

@media (max-width:900px){
  .post-row{ grid-template-columns:1fr; }
  .post-row .post-thumb{ height:160px; }
}

/* ================= HOME HUB: story kartice -> kompaktne list kartice ================= */
.home-hub.show-thumbs .story{
  display:grid; grid-template-columns:120px 1fr; gap:12px; padding:10px;
  border-radius:14px; border:1px solid var(--card-border); background:var(--card);
  text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease;
}
.home-hub.show-thumbs .story:hover{ transform:translateY(-2px); box-shadow:var(--card-shadow-hover); }
.home-hub.show-thumbs .story img{
  width:100%; height:82px; object-fit:cover; border-radius:10px; display:block; background:#0a0a0c;
}
.home-hub.show-thumbs .story h3{
  margin:0 0 6px; font-size:16px; line-height:1.25; font-weight:700; color:var(--text);
}
.home-hub.show-thumbs .story .meta{ margin:0; font-size:12px; color:var(--muted); }
@media (max-width:900px){
  .home-hub.show-thumbs .story{ grid-template-columns:1fr; }
  .home-hub.show-thumbs .story img{ height:160px; }
}

/* ================= PF Footer (postoje?i HTML) ================= */
.pf-footer{ background:var(--menu-bg); color:var(--menu-ink); margin-top:4rem; }
.pf-footer .pf-root a{ color:inherit; text-decoration:underline; }
.pf-footer a:hover{ text-decoration:none; }
.pf-footer-inner{ max-width:72rem; margin:0 auto; padding:3rem 1rem; }
@media (min-width:640px){ .pf-footer-inner{ padding:3rem 1.5rem; } }
@media (min-width:1024px){ .pf-footer-inner{ padding:3rem 2rem; } }
.pf-footer-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:640px){ .pf-footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .pf-footer-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pf-title{ font-weight:700; font-size:1.25rem; margin:0 0 .75rem; }
.pf-heading{ font-weight:600; margin:0 0 .75rem; }
.pf-blurb{ color:#c9d2e0; margin:0; }
.pf-col ul{ list-style:disc; padding-left:1.25rem; margin:.25rem 0 0; }
.pf-social{ display:flex; gap:.75rem; margin-top:2rem; }
.pf-social .pf-root a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.75rem; background:#1f2937; color:#fff; text-decoration:none;
}
.pf-copy{ border-top:1px solid #334155; margin-top:2rem; padding-top:1.5rem; color:#cbd5e1; font-size:.9rem; }

/* ================= Hidden/announcement helpers ================= */
.hidden-banner{ display:none; }
.banner-text{ margin:24px 0; line-height:1.6; }
.announcement{
  background:var(--menu-bg); color:var(--menu-ink);
  font-size:14px; line-height:1.4; padding:10px 14px;
  border-bottom:1px solid var(--card-border); text-align:center;
}

/* ================= Responsive tune-ups ================= */
@media (max-width:768px){
  .pf-container{ padding:0 14px; }
  .brand{ font-size:20px; }
  .featured-grid{ gap:16px; margin-top:14px; }
  .featured-body{ padding:20px 18px; }
  .featured-title{ font-size:clamp(22px,5.5vw,28px); }
  .featured-excerpt{ font-size:15px; }

  .side-card{ grid-template-columns:96px 1fr; gap:10px; padding:10px; }
  .side-thumb{ max-height:72px; }
  .side-title{ font-size:16px; }
  .side-meta{ font-size:12px; }

  .below-cards{ justify-content:center; }
}
@media (max-width:580px){
  .menu-bar .nav{ gap:8px; }
  .menu-bar .nav a{ padding:6px 9px; font-size:14px; }
  .featured-title{ font-size:clamp(20px,6vw,26px); }
  .featured-body{ padding:18px 14px; }
  .side-card{ grid-template-columns:86px 1fr; }
  .side-thumb{ max-height:64px; }
}
@media (max-width:420px){
  .menu-bar .nav a{ padding:6px 8px; font-size:13px; }
  .side-card{ grid-template-columns:76px 1fr; gap:8px; padding:9px; }
  .side-thumb{ max-height:58px; }
}

/* ===== SHARE: canonical size/look everywhere (48x48) ===== */
.pf-share-wrap{ margin:0 0 1.25rem; }
.pf-share-title{ text-align:center; margin:0 0 .5rem; font-weight:600; }
.pf-share-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.75rem; margin:1rem 0 2rem;
}
.pf-share-btn{
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:9999px; text-decoration:none; color:#fff;
  box-shadow:0 1px 2px rgba(2,6,23,.08);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.pf-share-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(2,6,23,.14); opacity:.98; }
.pf-share-btn:active{ transform:translateY(-1px); }
.pf-share-btn:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }
.pf-share-btn svg{ width:24px; height:24px; fill:#fff; display:block; }
.pf-share-fb{ background:#1877F2; }
.pf-share-ig{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.pf-share-x{ background:#000000; }
.pf-share-wa{ background:#25D366; }
.pf-share-mail{ background:#6B7280; }
.pf-share-pin{ background:#E60023; }
.pf-share-reddit{ background:#FF4500; }
.pf-share-viber{ background:#7360F2; }
.pf-share-threads{ background:#101010; }

/* ===== META POPOVER ===== */
.pf-meta-wrap{ position:relative; display:inline-block; }
.pf-meta-popover{
  position:absolute; left:50%; bottom:56px; transform:translateX(-50%);
  display:none; gap:.5rem; z-index:50;
}
.pf-meta-wrap.is-open .pf-meta-popover{ display:flex; }

/* === Pre-review disclosure toggle (lokalno sakriven) === */
.pre-review{ display:none !important; }

/* Globalno: Meta launcher kontrast */
.pf-meta-wrap > .pf-share-btn{
  background:#ffffff; color:#111;
  box-shadow:0 0 0 2px rgba(255,255,255,.65), 0 2px 6px rgba(2,6,23,.20);
}
.pf-meta-wrap > .pf-share-btn svg{ fill:#111; }
.pf-meta-wrap > .pf-share-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 2px rgba(255,255,255,.75), 0 4px 10px rgba(2,6,23,.24);
}

/* === BLOG HERO: share ?' pa naslov === */
.hero{ display:flex; flex-direction:column; }
.hero .share-wrap{ order:1; }
.hero h1{
  order:2; text-align:center; font-weight:800;
  font-size:clamp(26px,3.2vw,40px); line-height:1.2;
  margin:12px auto 10px; color:var(--text);
}

/* ===========================================================
   Unified PROSE (blogs + listicles) ?" isto kao Smart Plugs
   =========================================================== */
.prose{
  max-width:72ch;
  margin:0 auto;
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
}
.prose > *{ margin-left:auto; margin-right:auto; }

.prose > h1{
  color:var(--text);
  font-weight:800;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.2;
  letter-spacing:-.01em;
  text-align:center;
  margin:12px auto 10px;
}
.prose .lead{
  display:block !important;
  font-size:clamp(16px,2vw,18px);
  max-width:70ch;
  margin:.25rem auto 1.25rem;
  color:var(--muted);
  text-align:center;
}
.prose h2{
  color:var(--text);
  font-weight:800;
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.25;
  margin:1.4rem 0 .6rem;
}
.prose h3{
  color:var(--text);
  font-weight:700;
  font-size:clamp(18px,1.9vw,22px);
  line-height:1.28;
  margin:1.2rem 0 .4rem;
}
.prose p{ margin:.6rem 0; }
.prose b,.prose strong{ color:var(--text); font-weight:700; }
.prose em{ font-style:italic; }
.prose ul,.prose ol{ margin:.5rem 0 .9rem 1.25rem; padding:0; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin:.25rem 0; }
.prose hr{ border:0; border-top:1px solid var(--card-border); margin:1.25rem 0; }
.prose a{ color:var(--text); text-decoration:underline; }
.prose 
/* Static pages (About, Contact, Privacy, Disclaimer, Terms) - modern card layout */
.pf-container.page-static{
  max-width: 880px;
  margin: 32px auto 56px;
  padding: 0 18px;
}

.pf-container.page-static .prose{
  max-width: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: 0;
}

@media (max-width: 768px){
  .pf-container.page-static{
    margin: 20px auto 40px;
    padding: 0 14px;
  }

  .pf-container.page-static .prose{
    padding: 22px 18px 24px;
    border-radius: 16px;
  }
}
a:hover{ color:var(--accent); }
.prose img{ max-width:100%; height:auto; display:block; border-radius:8px; background:transparent; }

/* Share?'Title?'Body poredak, sa fallback-om za Tailwind safe mode */
main.pf-container:has(#share-top){ display:flex; flex-direction:column; }
main.pf-container > #share-top    { order:1; }
main.pf-container > .prose        { order:2; }
main.pf-container > #share-bottom { order:3; }


.pf-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: block;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .pf-layout {
    padding: 12px;
  }
}

.user-comments {
  margin: 2rem auto;
  padding: 1rem;
  max-width: 700px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.user-comments h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}
.user-comments .comment {
  border-top: 1px solid #eee;
  padding: 0.5rem 0;
}
.user-comments .comment:first-of-type {
  border-top: none;
}
.user-comments strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #34495e;
}
.user-comments p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
}



/* === User Comments ?" refresh (non?'breaking) === */

.user-comments{
  margin: 40px auto 0;
  max-width: 880px;
  padding: 0 18px 60px;
}

.user-comments h2{
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.user-comments-intro{
  font-size: 0.94rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

/* outer card */
.comments-shell{
  background: var(--card);
  border-radius: 20px;
  padding: 20px 22px 18px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border-soft);
}

/* list of comments */
.comment-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.comment-card{
  padding: 0.85rem 1rem 0.9rem;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.comment-header{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.35rem;
}

.comment-author{
  font-weight: 600;
  font-size: 0.95rem;
}

.comment-meta{
  font-size: 0.8rem;
  color: var(--muted);
}

.comment-body{
  font-size: 0.95rem;
  line-height: 1.6;
}

/* form */
.comment-form{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.comment-form label{
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.1rem;
}

.comment-form input,
.comment-form textarea{
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--card-border-soft);
  background: #ffffff;
  font: inherit;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(132, 88, 179, 0.28);
}

.comment-submit{
  align-self: flex-start;
  margin-top: 0.25rem;
}

.comment-note{
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

@media (max-width: 640px){
  .user-comments{
    padding: 0 12px 40px;
  }

  .comments-shell{
    padding: 16px 14px 16px;
    border-radius: 18px;
  }

  .comment-card{
    padding: 0.8rem 0.8rem 0.85rem;
  }
}
/* Hide any legacy duplicate block if present */
#user-comments-2{display:none;}
/* === /User Comments refresh === */
/* === MENU: center align (safe patch) === */
.menu-bar{
  display:flex;                /* preuzmi layout */
  justify-content:center;      /* centriraj celu traku */
}

.menu-bar nav,
.menu-bar .nav,
.menu-bar ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;      /* centriraj stavke u kontejneru */
  gap:.5rem;                   /* razmak izme'u kapsula */
  margin:0 auto;
  text-align:center;
}

.menu-bar a{
  display:inline-flex;         /* zadrži ?okapsule ? kao inline-flex */
  align-items:center;
  justify-content:center;
}

/* Mobile fallback: ako se skupi, i dalje centrirano u više redova */
@media (max-width: 720px){
  .menu-bar{ padding-inline:.5rem; }
  .menu-bar nav,
  .menu-bar .nav,
  .menu-bar ul{ gap:.4rem; }
}



/* === Normalize static page layout (About/Privacy/Contact/Disclaimer/Terms) === */
body.static main .prose,
main .prose{
  margin: 0 auto !important; /* override stray inline margin="0" */
}
/* Ensure top H1 is centered consistently */
main .prose > h1{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Keep share rows centered with consistent spacing */
main .prose .share-row{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin:.5rem auto 1.25rem;
}
/* === /normalize === */

/* === STATIC PAGES ?" no bold in body copy (About/Contact/Privacy/Disclaimer/Terms) === */
.pf-container.page-static p b,
.pf-container.page-static p strong,
.pf-container.page-static li b,
.pf-container.page-static li strong {
  font-weight: inherit !important;     /* overrides global .prose strong {700} */
}

.pf-container.page-static p > strong:only-child,
.pf-container.page-static li > strong:first-child {
  display: inline !important;
  margin: 0 !important;
}

/* Keep headings strong */
.pf-container.page-static h1 { font-weight: 800; }
.pf-container.page-static :where(h2,h3) { font-weight: 700; }


/* === [TOC SIDEBAR] Sticky card + responsive grid (safe, non-breaking) === */
.pf-container.has-toc{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:24px;
  align-items:start;
}
@media (max-width: 1024px){
  .pf-container.has-toc{ display:block; }
}
.toc-sidebar{
  position:sticky;
  top:90px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  box-shadow:var(--card-shadow);
  padding:14px 16px;
}
.toc-sidebar h3{
  margin:0 0 .5rem;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
}
.toc-list{ list-style:disc; margin:.25rem 0 0 1.1rem; padding:0; }
.toc-list li{ margin:.25rem 0; }
.toc-list a{
  display:block;
  text-decoration:none;
  color:var(--text);
  line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toc-list a:hover{ color:var(--accent); text-decoration:underline; }
.toc-list a.is-active{ font-weight:700; text-decoration:underline; }
@media (max-width:1024px){
  .toc-sidebar{ max-width:640px; margin:0 auto 16px; position:static; }
}
/* === [/TOC SIDEBAR] === */


/* === [TOC SIDEBAR v2] Use inner wrapper to protect hero/H1 layout === */
.pf-article-wrap.has-toc{
  display:grid;
  grid-template-columns: minmax(0,1fr) 280px; /* content | toc */
  gap:24px;
  align-items:start;
  margin: 0 auto;
}
.pf-article-wrap .toc-sidebar{
  position:sticky;
  top:90px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  box-shadow:var(--card-shadow);
  padding:14px 16px;
}
.pf-article-wrap .toc-sidebar h3{
  margin:0 0 .5rem;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
}
.pf-article-wrap .toc-list{ list-style:disc; margin:.25rem 0 0 1.1rem; padding:0; }
.pf-article-wrap .toc-list li{ margin:.25rem 0; }
.pf-article-wrap .toc-list a{
  display:block;
  text-decoration:none;
  color:var(--text);
  line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pf-article-wrap .toc-list a:hover{ color:var(--accent); text-decoration:underline; }
.pf-article-wrap .toc-list a.is-active{ font-weight:700; text-decoration:underline; }

/* Keep article text neatly aligned in its column */
.pf-article-wrap .prose{ margin-left:0; margin-right:0; }

@media (max-width:1024px){
  .pf-article-wrap.has-toc{ display:block; }
  .pf-article-wrap .toc-sidebar{ max-width:640px; margin:0 auto 16px; position:static; }
}
/* === [/TOC SIDEBAR v2] === */


/* FAQ polish (inside .prose) */
.prose .faq h3 { margin-top: .9rem; margin-bottom: .25rem; font-weight:700; }
.prose .faq p  { margin: .35rem 0 .8rem; }



/* === Canonical share placement guard (non-breaking) === */
/* Hide any share widgets that render *inside* the article body. We keep share only in #share-bottom (or #share-top if used). */
article.prose .pf-share-wrap,
article.prose .share-row { display: none !important; }

/* Ensure canonical containers remain visible when present */
#share-bottom.pf-share-wrap,
#share-top.pf-share-wrap { display: flex !important; }



/* === Listicles parity: enforce canonical share placement on listicle pages too === */
/* Hide any share widgets rendered inside article content for listicles as well */
.listicle article.prose .pf-share-wrap,
.listicle article.prose .share-row { display: none !important; }
/* Keep canonical containers visible */
.listicle #share-bottom.pf-share-wrap,
.listicle #share-top.pf-share-wrap { display: flex !important; }



/* Fallback for legacy class names that might appear on listicles */
article.prose .listicle-share-row { display: none !important; }



/* === Guard: hide non-canonical .share-wrap inside article, keep #share-bottom visible even if inside === */
article.prose .share-wrap:not(#share-bottom) { display:none !important; }
.listicle article.prose .share-wrap:not(#share-bottom) { display:none !important; }


/* === Accessibility: skip-to-content link (non-intrusive) === */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#fff;color:#000;z-index:9999;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.2);}


/* === 2025 Sci‑Fi Micro Accent (SAFE ADD‑ON) =========================
   - 2% futuristic glow + subtle grid
   - No class/markup changes, no layout shifts
   - Works with existing tokens
   ================================================================== */

:root{
  --pf-glow-cyan: rgba(0, 255, 255, .14);
  --pf-glow-cyan-soft: rgba(0, 255, 255, .08);
  --pf-glow-white-soft: rgba(255, 255, 255, .06);
}

/* Subtle HUD grid behind the page (very low opacity) */
body{
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 36px 36px,
    var(--bg);
}

/* Menu bar: faint sci‑fi edge glow */
.menu-bar{
  box-shadow:
    0 1px 0 var(--pf-glow-white-soft),
    0 0 22px var(--pf-glow-cyan-soft);
}

/* Cards & list items: add a soft neon aura on hover */
.featured-card:hover,
.side-card:hover,
.listicles-card:hover,
.comment-card:hover{
  box-shadow:
    var(--card-shadow-hover),
    0 0 0 1px var(--pf-glow-cyan),
    0 0 24px var(--pf-glow-cyan-soft);
}

/* TOC sidebar: glassy edge + cyan ring */
.toc-sidebar{
  box-shadow:
    var(--card-shadow),
    0 0 0 1px var(--pf-glow-cyan-soft);
  border-color: rgba(255,255,255,0.7);
}

/* Share buttons: neon pop on hover */
.pf-share-btn:hover{
  box-shadow:
    0 4px 10px rgba(2,6,23,.14),
    0 0 18px rgba(0,255,255,.35);
}



/* Brand heading for static pages (About, Contact, Privacy, Terms, Disclaimer) */
.pf-page-brand{
  text-align:center;
  font-size:1.8rem;
  font-weight:700;
  margin:24px 0 12px;
}


/* Back link buttons (Blogs/Listicles) */
.back-link-row{
  margin:32px 0 16px;
  display:flex;
  justify-content:flex-start;
  padding-left:140px;
}
.back-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .95rem;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--card-border);
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  box-shadow:0 1px 0 rgba(2,6,23,.04);
  transition:transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease;
}
.back-link-btn:hover{
  transform:translateY(-1px);
  background:var(--accent-soft);
  border-color:var(--accent);
}