/* Delade stilar för guidesidorna (guide-*.html) och guidehubbens titelpill.
   ENDA källan för breadcrumb-titelraden, tips-rutor, CTA-knappar, tabeller,
   figurer och "Fler guider"-kortet. Sidspecifika avvikelser läggs som
   overrides i respektive sidas style-block. */

/* Breadcrumb-titelrad efter "Tiny CSS3 Round Breadcrumb": överlappande
   pills med ring i sidbakgrundens färg och fallande z-index (vänster
   ligger överst); överlappade pills får padding-left så ikonen inte
   täcks. Guider-crumben är kollapsad (ikon) och fälls ut vid hover/fokus.
   Nuvarande sida är alltid öppen och bär sidans h1 i titelstorlek.
   Radie 13px som topbaren. -4px topp/vänster kompenserar li-ringens
   padding så pillen linjerar med hubbens .crumbtitle. */
.breadcrumb{list-style:none;display:flex;margin:-4px 0 16px -4px;padding:0}
.breadcrumb li{position:relative;margin:0;padding:4px;background:var(--bg);border-radius:17px}
.breadcrumb li+li{margin-left:-40px}
.breadcrumb li:nth-child(1){z-index:3}
.breadcrumb li:nth-child(2){z-index:2}
.breadcrumb li:nth-child(3){z-index:1}
.breadcrumb a,.breadcrumb .cur{display:flex;align-items:center;height:58px;
  border-radius:13px;background:var(--accent2);color:#fff;text-decoration:none;
  overflow:hidden;transition:background .2s ease}
.breadcrumb li+li a,.breadcrumb li+li .cur{padding-left:40px}
.breadcrumb a:hover,.breadcrumb a:focus-visible{background:#1f545e}
.breadcrumb .ico{flex:0 0 58px;width:58px;height:58px;display:flex;
  align-items:center;justify-content:center}
.breadcrumb .material-symbols-rounded{font-size:26px}
.breadcrumb .lbl{overflow:hidden;white-space:nowrap;margin:0;color:#fff;
  font-family:'Stack Sans Notch',sans-serif;font-size:30px;font-weight:800}
.breadcrumb a .lbl{max-width:0;transition:max-width .3s ease,padding .3s ease}
.breadcrumb a:hover .lbl,.breadcrumb a:focus-visible .lbl{max-width:220px;padding-right:18px}
.breadcrumb .cur .lbl{padding-right:18px}

/* Sidtiteln på guidehubben, samma pill-utseende som breadcrumben */
.crumbtitle{display:inline-flex;align-items:center;height:58px;border-radius:13px;
  background:var(--accent2);color:#fff;margin-bottom:14px}
.crumbtitle .ico{flex:0 0 58px;width:58px;height:58px;display:flex;
  align-items:center;justify-content:center}
.crumbtitle .material-symbols-rounded{font-size:26px}
.crumbtitle h1{margin:0;padding-right:18px;font-size:30px;color:#fff}

/* Artikelinnehåll */
article h2{font-size:17px;margin:26px 0 8px;color:#1f545e}
article ul,article ol{margin:8px 0 8px 20px}
article li{margin:5px 0}
/* Löpande länkar i artikeltexten, samma turkos som a.inline på
   villkor/integritet. :where håller specificiteten nere så
   .breadcrumb/.gcta-reglernas färger vinner över den här. */
article :where(a){color:var(--accent2)}
article :where(a:hover){color:#1f545e}
.tip{background:#eef7f6;border:1px solid #cfe7e5;border-left:3px solid var(--accent2);
  border-radius:10px;padding:12px 14px;margin:18px 0;font-size:14px;color:#374A6A}
.tip b{color:#1f545e}
.gcta{display:inline-block;margin-top:10px;background:var(--accent2);color:#fff;font-weight:600;
  font-size:14px;border-radius:8px;padding:9px 16px;text-decoration:none;transition:filter .2s ease}
.gcta:hover{filter:brightness(1.08)}
.ctable{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.ctable th,.ctable td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.ctable th{color:#1f545e;font-weight:600}
.gfig{margin:16px 0;background:#f7fafc;border:1px solid var(--line);border-radius:10px;
  padding:16px 14px 10px;text-align:center}
.gfig svg{max-width:100%;height:auto}
.gfig figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}
.more{background:#fff;border-radius:12px;padding:16px 20px;margin-top:30px;
  box-shadow:0 2px 10px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.04)}
.more h2{margin-top:2px}

@media (max-width:600px){
  .breadcrumb a,.breadcrumb .cur{height:46px}
  .breadcrumb .ico{flex-basis:46px;width:46px;height:46px}
  .breadcrumb .material-symbols-rounded{font-size:22px}
  .breadcrumb .lbl{font-size:20px}
  .breadcrumb li+li{margin-left:-32px}
  .breadcrumb li+li a,.breadcrumb li+li .cur{padding-left:32px}
  .crumbtitle{height:46px}
  .crumbtitle .ico{flex-basis:46px;width:46px;height:46px}
  .crumbtitle .material-symbols-rounded{font-size:22px}
  .crumbtitle h1{font-size:20px}
}