/*
 * Worqo Artikelmall 2.0
 * Stilar för den nya, valbara inläggsmallen (template-artikelmall-2.php).
 * Laddas ENDAST in på inlägg som använder den mallen, se functions.php.
 * Rör inte sidhuvud/kategori-banner/sidfot, de är befintliga och orörda.
 */

:root{
  --wqm-ink:#182238;
  --wqm-ink-soft:#4b5568;
  --wqm-line:#e3e6ec;
  --wqm-surface:#ffffff;
  --wqm-surface-sunken:#f4f6f9;
  --wqm-accent:#2f6fed;
  --wqm-accent-soft:#eaf1ff;
  --wqm-accent-ink:#1c4fc4;
  --wqm-placeholder-bg:repeating-linear-gradient(135deg,#eef0f4 0 10px,#e4e7ee 10px 20px);
}

.wqm-main{max-width:900px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 4rem;}
.wqm-main h1,.wqm-main h2,.wqm-main h3{font-family:"Fraunces", Georgia, serif; text-wrap:balance; color:var(--wqm-ink); font-weight:600; margin:0;}
.wqm-main p{color:var(--wqm-ink-soft); line-height:1.65;}
.wqm-main a{color:var(--wqm-accent-ink); text-decoration:none;}
.wqm-main a:hover{text-decoration:underline;}

.wqm-tag{
  background:var(--wqm-accent-soft); color:var(--wqm-accent-ink);
  font-size:.75rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:5px; display:inline-block;
}

.wqm-article-head{padding:1.2rem 0 1.6rem; border-bottom:1px solid var(--wqm-line); margin-bottom:2rem;}
.wqm-article-head h1{font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.15; margin-bottom:.9rem;}
.wqm-byline{display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--wqm-ink-soft); flex-wrap:wrap; margin-top:.8rem;}
.wqm-byline strong{color:var(--wqm-ink); font-weight:600;}
.wqm-byline .wqm-dot{width:3px; height:3px; border-radius:50%; background:var(--wqm-ink-soft); display:inline-block;}

.wqm-hero{margin:1.6rem 0 2rem; border-radius:12px; overflow:hidden;}
.wqm-hero img{width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; display:block;}

.wqm-lede{font-size:1.1rem; color:var(--wqm-ink); margin-bottom:2rem;}

.wqm-toc{
  background:var(--wqm-surface); border:1px solid var(--wqm-line); border-radius:10px;
  padding:1.2rem 1.4rem; margin-bottom:2.4rem;
}
.wqm-toc .wqm-eyebrow{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--wqm-accent-ink); font-weight:700; margin-bottom:.7rem; display:block;}
.wqm-toc ol{columns:2; column-gap:2rem; margin:0; padding:0 0 0 1.1rem; font-size:.92rem;}
.wqm-toc li{margin-bottom:.45rem; break-inside:avoid;}
@media (max-width:600px){.wqm-toc ol{columns:1;}}

/* Löpande artikelinnehåll, kommer från the_content() */
.wqm-content h2{font-size:1.5rem; margin:2.4rem 0 1rem; scroll-margin-top:1.5rem;}
.wqm-content h3{font-size:1.15rem; margin:1.4rem 0 .6rem;}
.wqm-content p{margin:0 0 1rem;}
.wqm-content ul,.wqm-content ol{padding-left:1.3rem; color:var(--wqm-ink-soft); line-height:1.7; margin:0 0 1rem;}
.wqm-content li{margin-bottom:.4rem;}
.wqm-content li strong{color:var(--wqm-ink);}
.wqm-content figure{margin:1.4rem 0;}
.wqm-content img{max-width:100%; height:auto; border-radius:10px;}
.wqm-content table{width:100%; border-collapse:collapse; font-size:.92rem;}
.wqm-content .wp-block-table{overflow-x:auto; margin:1.2rem 0; border:1px solid var(--wqm-line); border-radius:10px;}
.wqm-content thead th{background:var(--wqm-surface-sunken); text-align:left; font-weight:700; padding:.7rem .9rem; border-bottom:1px solid var(--wqm-line); color:var(--wqm-ink);}
.wqm-content tbody td{padding:.65rem .9rem; border-bottom:1px solid var(--wqm-line); color:var(--wqm-ink-soft); font-variant-numeric:tabular-nums;}
.wqm-content tbody tr:last-child td{border-bottom:none;}

/* Yoast FAQ-block, platt styling tills vidare (TODO: ackordeon-CSS/JS, se promptdeck) */
.wqm-content .schema-faq-section{background:var(--wqm-surface); border:1px solid var(--wqm-line); border-radius:8px; padding:1rem 1.2rem; margin-bottom:.8rem; list-style:none;}
.wqm-content .schema-faq-question{color:var(--wqm-ink); font-size:1rem; margin-bottom:.4rem;}
.wqm-content .schema-faq-answer{font-size:.94rem;}

/* Granskad av-box, statisk, se functions.php/mallfilen för markup */
.worqo-author-bio{display:flex;gap:24px;align-items:flex-start;background:#f7f7f8;border-radius:12px;padding:32px;margin-top:32px;}
.worqo-author-bio img{flex:0 0 100px;width:100px;height:100px;border-radius:12px;object-fit:cover;}
.worqo-author-bio .worqo-bio-text{flex:1;min-width:0;}
@media (max-width:600px){
  .worqo-author-bio{flex-direction:column;align-items:center;text-align:center;padding:24px;gap:16px;}
  .worqo-author-bio img{width:80px;height:80px;}
  .worqo-author-bio .worqo-bio-text{text-align:left;}
}

.wqm-share-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--wqm-line);}
.wqm-share-btns{display:flex; gap:.5rem;}
.wqm-share-btns a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--wqm-line); background:var(--wqm-surface);
  color:var(--wqm-ink-soft); font-size:.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.wqm-share-btns a:hover{text-decoration:none; background:var(--wqm-accent-soft); color:var(--wqm-accent-ink);}

.wqm-post-nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--wqm-line); font-size:.9rem;}