/* ============================================================
   Mobilabonnemangpensionär.se — "Lugn horisont"
   Tillgänglighetsförst, lugn redaktionell design för 55+.
   Display: Literata (varm serif). Brödtext: Atkinson Hyperlegible
   (ritad för läsbarhet vid nedsatt syn). Himmelsblå + marin + sol.
   ============================================================ */

/* ---------- Fonts (lokala woff2) ---------- */
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('/media/font/Literata-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('/media/font/Literata-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url('/media/font/Literata-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url('/media/font/Literata-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:700;font-display:swap;src:url('/media/font/Literata-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:700;font-display:swap;src:url('/media/font/Literata-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson';font-style:normal;font-weight:400;font-display:swap;src:url('/media/font/AtkinsonHyperlegible-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson';font-style:normal;font-weight:400;font-display:swap;src:url('/media/font/AtkinsonHyperlegible-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson';font-style:normal;font-weight:700;font-display:swap;src:url('/media/font/AtkinsonHyperlegible-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Palett & tokens ---------- */
:root{
  --map-sky:#1FA2DE;          /* logotypens cyanblå */
  --map-sky-deep:#1280B8;
  --map-sky-soft:#EAF6FC;
  --map-sky-mist:#F4FAFD;
  --map-navy:#0E3A53;         /* rubriker */
  --map-ink:#1B2733;          /* brödtext, hög kontrast */
  --map-muted:#56707F;
  --map-sun:#F6A623;          /* varm CTA-accent */
  --map-sun-deep:#DA8400;
  --map-orange-deep:var(--map-sun-deep);
  --map-bg:#FBFDFE;
  --map-card:#FFFFFF;
  --map-line:#D6E6F0;
  --map-line-soft:#E9F2F8;
  --map-shadow:0 1px 2px rgba(14,58,83,.05), 0 10px 30px -18px rgba(14,58,83,.25);
  --map-shadow-lg:0 2px 4px rgba(14,58,83,.06), 0 24px 60px -28px rgba(14,58,83,.4);
  --map-radius:18px;
  --map-radius-sm:12px;
  --map-maxw:1140px;
}

/* ---------- Bas ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Atkinson','Segoe UI',system-ui,sans-serif;
  font-size:18px;
  line-height:1.72;
  color:var(--map-ink);
  background:var(--map-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media(max-width:560px){body{font-size:17.5px}}
img{max-width:100%;height:auto}
a{color:var(--map-sky-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--map-navy)}
.container{width:100%;max-width:var(--map-maxw);margin:0 auto;padding:0 22px}
.container.narrow{max-width:760px}

/* Typografi */
h1,h2,h3,h4,h5{font-family:'Literata',Georgia,'Times New Roman',serif;color:var(--map-navy);line-height:1.2;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.05rem,5vw,3.1rem);margin:.2em 0 .35em;font-weight:700}
h2{font-size:clamp(1.55rem,3.4vw,2.1rem);margin:1.8em 0 .55em}
h3{font-size:clamp(1.25rem,2.4vw,1.55rem);margin:1.4em 0 .4em}
h4{font-size:1.2rem;margin:.2em 0}
.map-section p,.map-section li{font-size:1.075rem}
.map-section .container.narrow p{max-width:68ch}
.lead{font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.6;color:var(--map-navy);font-family:'Literata',Georgia,serif;font-weight:400}
strong,b{font-weight:700;color:var(--map-navy)}
ul,ol{padding-left:1.3em}
li{margin:.35em 0}

/* ---------- Topphuvud / nav ---------- */
.map-top{position:sticky;top:0;z-index:40;background:rgba(251,253,254,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--map-line)}
.map-nav{display:flex;align-items:center;gap:1rem;min-height:78px;flex-wrap:wrap}
.map-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.map-brand img{height:48px;width:auto;display:block}
.map-brand-text{display:flex;flex-direction:column;line-height:1.05}
.map-brand-name{font-family:'Literata',serif;font-weight:700;font-size:1.18rem;color:var(--map-navy)}
.map-brand-tag{font-size:.78rem;color:var(--map-muted);letter-spacing:.02em}
.map-menu{display:flex;gap:.35rem;list-style:none;margin:0;padding:0;align-items:center}
.map-menu a{display:inline-block;padding:.6rem .85rem;border-radius:999px;color:var(--map-navy);text-decoration:none;font-weight:700;font-size:1.02rem}
.map-menu a:hover{background:var(--map-sky-soft)}
.map-menu a.active{background:var(--map-sky);color:#fff}
.map-burger{display:none;border:1.5px solid var(--map-line);background:#fff;color:var(--map-navy);font-weight:700;font-family:inherit;font-size:1rem;padding:.55rem 1rem;border-radius:999px;cursor:pointer}
@media(max-width:860px){
  .map-burger{display:inline-block}
  .map-menu{display:none;width:100%;flex-direction:column;align-items:stretch;gap:.2rem;padding:.4rem 0 .6rem}
  .map-menu.show{display:flex}
  .map-menu a{padding:.85rem 1rem;border-radius:12px;font-size:1.1rem}
}

/* Brödsmulor */
.map-crumbs{font-size:.92rem;color:var(--map-muted);padding:.9rem 0 0}
.map-crumbs a{color:var(--map-sky-deep);text-decoration:none}
.map-crumbs .sep{margin:0 .4rem;color:var(--map-line)}

/* ---------- Knappar ---------- */
.btn-map-primary,.btn-map-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:'Atkinson',sans-serif;font-weight:700;font-size:1.08rem;
  min-height:54px;padding:.6rem 1.5rem;border-radius:999px;text-decoration:none;
  cursor:pointer;border:2px solid transparent;transition:transform .12s ease,box-shadow .18s ease,background .18s ease
}
.btn-map-primary{background:var(--map-sun);color:#3a2600;box-shadow:0 8px 22px -10px rgba(218,132,0,.7)}
.btn-map-primary:hover{background:var(--map-sun-deep);color:#fff;transform:translateY(-2px)}
.btn-map-ghost{background:#fff;color:var(--map-navy);border-color:var(--map-sky)}
.btn-map-ghost:hover{background:var(--map-sky-soft);color:var(--map-navy);transform:translateY(-2px)}

/* ---------- Sektioner & horisont-motiv ---------- */
.map-section{padding:3.2rem 0}
.map-section.alt{background:var(--map-sky-soft);border-top:1px solid var(--map-line-soft);border-bottom:1px solid var(--map-line-soft)}
.map-section>.container>h2:first-child{margin-top:0}
/* tunn horisontlinje som avdelare */
.map-line,hr.map-line{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--map-sky) 18%,var(--map-sun) 82%,transparent);opacity:.5;margin:2.4rem 0}

/* Hero med himmel + horisont + sol */
.map-hero{position:relative;overflow:hidden;padding:3.6rem 0 3.2rem;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(246,166,35,.20), transparent 46%),
    linear-gradient(180deg,#EAF6FC 0%, #F4FAFD 60%, var(--map-bg) 100%)}
.map-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--map-sky),transparent);opacity:.45}
.map-hero .lead{max-width:60ch}
.map-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:center}
@media(max-width:860px){.map-hero-grid{grid-template-columns:1fr;gap:1.4rem}}
.map-hero-art{position:relative;aspect-ratio:1/1;border-radius:24px;overflow:hidden;box-shadow:var(--map-shadow-lg)}
.map-hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.map-hero-sub{color:var(--map-muted);font-size:.98rem;margin:.2rem 0 1.4rem}
.map-em{color:var(--map-sun-deep);font-weight:700}
.map-hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
/* mjuk soldekor (aria-hidden art) */
.map-sun-disc{position:absolute;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(246,166,35,.55), rgba(246,166,35,0) 70%);
  top:-26px;right:8%;pointer-events:none;animation:mapfloat 9s ease-in-out infinite}
@keyframes mapfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.map-sun-disc{animation:none}}

/* ---------- Operatörsrutor (tiles) ---------- */
.map-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1.1rem;margin-top:1.6rem}
.map-tile{position:relative;background:var(--map-card);border:1px solid var(--map-line);border-radius:var(--map-radius);padding:1.5rem 1.3rem;box-shadow:var(--map-shadow);display:flex;flex-direction:column;text-align:center;transition:transform .14s,box-shadow .2s,border-color .2s}
.map-tile:hover{transform:translateY(-3px);box-shadow:var(--map-shadow-lg);border-color:var(--map-sky)}
.map-tile-rank{position:absolute;top:14px;left:14px;font-family:'Literata',serif;font-weight:700;color:var(--map-sky);background:var(--map-sky-soft);border-radius:10px;padding:.1rem .55rem;font-size:.95rem}
.map-tile-logo{height:54px;display:flex;align-items:center;justify-content:center;margin:.4rem 0 .7rem}
.map-tile-logo img{max-height:54px;max-width:150px;object-fit:contain}
.map-tile h3{margin:.3rem 0 .5rem;font-size:1.3rem}
.map-facts{list-style:none;padding:0;margin:0 0 1.1rem;color:var(--map-muted);font-size:.98rem}
.map-facts li{margin:.25rem 0}
.map-facts li.price{color:var(--map-navy);font-weight:700;font-size:1.05rem}
.map-tile-cta{display:flex;flex-direction:column;gap:.55rem;margin-top:auto}
.map-tile-cta .btn{width:100%;min-height:48px;padding:.5rem 1rem;font-size:1rem}

/* ---------- Deal-list (topplistor) ---------- */
.map-deal-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.map-deal{position:relative;display:grid;grid-template-columns:auto 132px 1fr auto;align-items:center;gap:1.2rem;
  background:var(--map-card);border:1px solid var(--map-line);border-radius:var(--map-radius);padding:1.35rem 1.5rem;box-shadow:var(--map-shadow);transition:box-shadow .2s,border-color .2s}
.map-deal:hover{box-shadow:var(--map-shadow-lg);border-color:var(--map-sky)}
.map-deal-rank{font-family:'Literata',serif;font-weight:700;font-size:1.05rem;color:var(--map-muted);min-width:34px;text-align:center}
.map-deal-rank.top{color:#fff;background:var(--map-sun);border-radius:10px;padding:.2rem .5rem;font-size:.82rem;line-height:1.3}
.map-deal .logo{display:flex;align-items:center;justify-content:center;height:56px}
.map-deal .logo img{max-height:54px;max-width:122px;object-fit:contain}
.map-deal .info h4{font-size:1.2rem;margin:0 0 .5rem;color:var(--map-navy)}
.pills{display:flex;flex-wrap:wrap;gap:.4rem}
.pill{display:inline-block;background:var(--map-sky-soft);color:var(--map-navy);border:1px solid var(--map-line);font-size:.86rem;font-weight:700;padding:.22rem .6rem;border-radius:999px}
.pill.orange{background:#FFF1DA;border-color:#F6D69A;color:var(--map-sun-deep)}
.pill.dark{background:var(--map-navy);color:#fff;border-color:var(--map-navy)}
.map-deal .price{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.15rem;min-width:170px}
.map-deal .price .big{font-family:'Literata',serif;font-weight:700;font-size:1.7rem;color:var(--map-navy)}
.map-deal .price .small{color:var(--map-muted);font-size:.85rem;max-width:22ch}
.map-deal .price .cta{margin-top:.5rem;display:inline-flex;align-items:center;gap:.3rem;background:var(--map-sun);color:#3a2600;font-weight:700;text-decoration:none;padding:.55rem 1.1rem;border-radius:999px;min-height:46px;box-shadow:0 8px 20px -12px rgba(218,132,0,.8)}
.map-deal .price .cta:hover{background:var(--map-sun-deep);color:#fff}

/* Jämförpris-badge på topplinjen */
.map-jmf-badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:var(--map-navy);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.01em;
  padding:.28rem .8rem;border-radius:999px;white-space:nowrap;cursor:help;box-shadow:0 6px 16px -8px rgba(14,58,83,.6)}
@media(max-width:760px){
  .map-deal{grid-template-columns:auto 1fr;grid-template-areas:"rank logo" "info info" "price price";row-gap:.9rem;padding:2.6rem 1.2rem 1.2rem}
  .map-deal-rank{grid-area:rank}.map-deal .logo{grid-area:logo;justify-content:flex-start}
  .map-deal .info{grid-area:info}.map-deal .price{grid-area:price;align-items:stretch;text-align:left;min-width:0}
  .map-deal .price .small{max-width:none}
  .map-deal .price .cta{justify-content:center}
  .map-jmf-badge{left:auto;right:14px;transform:none}
}

/* ---------- CTA-box ---------- */
.map-cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  background:linear-gradient(120deg,var(--map-navy),#12506f);color:#fff;border-radius:var(--map-radius);padding:1.7rem 1.8rem;margin:2rem 0;box-shadow:var(--map-shadow-lg)}
.map-cta-inline__h{color:#fff;margin:0 0 .3rem;font-size:1.4rem}
.map-cta-inline__p{margin:0;color:#dbeaf3;font-size:1.02rem;max-width:54ch}
.map-cta-inline__p p{margin:0}
.map-cta-inline__actions{display:flex;flex-wrap:wrap;gap:.7rem}
.map-cta-inline .btn-map-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.map-cta-inline .btn-map-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- Affiliate-disclosure ---------- */
.map-aff-disclosure{background:var(--map-sky-mist);border:1px solid var(--map-line);border-left:4px solid var(--map-sky);
  border-radius:12px;padding:.85rem 1.1rem;font-size:.92rem;color:var(--map-muted);margin:1.6rem auto;max-width:760px}
.map-aff-disclosure strong{color:var(--map-navy)}

/* ---------- Topic grid ---------- */
.map-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:1.4rem}
.map-topic{display:block;background:var(--map-card);border:1px solid var(--map-line);border-radius:var(--map-radius-sm);padding:1.3rem;text-decoration:none;transition:transform .14s,box-shadow .2s,border-color .2s}
.map-topic:hover{transform:translateY(-3px);box-shadow:var(--map-shadow);border-color:var(--map-sky)}
.map-topic .ico{font-size:1.7rem;display:block;margin-bottom:.5rem}
.map-topic .name{display:block;font-family:'Literata',serif;font-weight:700;color:var(--map-navy);font-size:1.12rem;margin-bottom:.25rem}
.map-topic .desc{display:block;color:var(--map-muted);font-size:.96rem;line-height:1.5}

/* ---------- FAQ ---------- */
.map-faq{margin-top:1.4rem;border-top:1px solid var(--map-line)}
.map-faq details{border-bottom:1px solid var(--map-line)}
.map-faq summary{cursor:pointer;list-style:none;padding:1.15rem .2rem;font-family:'Literata',serif;font-weight:700;font-size:1.18rem;color:var(--map-navy);position:relative;padding-right:2rem}
.map-faq summary::-webkit-details-marker{display:none}
.map-faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--map-sky);font-family:'Atkinson',sans-serif;line-height:1}
.map-faq details[open] summary::after{content:"–"}
.map-faq details>div{padding:0 .2rem 1.2rem}
.map-faq p{margin:.2rem 0 .6rem}

/* ---------- Stjärnor ---------- */
.map-stars{display:inline-flex;gap:2px;color:var(--map-sun);margin:.2rem 0}
.map-stars svg{width:20px;height:20px}
.map-stars svg.empty{color:#C9DCE8}

/* ---------- Tabeller ---------- */
.map-table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:1rem;background:#fff;border:1px solid var(--map-line);border-radius:var(--map-radius-sm);overflow:hidden}
.map-table th,.map-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--map-line-soft)}
.map-table th{background:var(--map-sky-soft);color:var(--map-navy);font-family:'Literata',serif}
.map-table tr:last-child td{border-bottom:0}
.map-table tbody tr:hover{background:var(--map-sky-mist)}

/* ---------- Artikelbilder ---------- */
.map-art-figure{margin:1.8rem 0}
.map-art-hero{width:100%;border-radius:var(--map-radius);box-shadow:var(--map-shadow)}
figure figcaption{color:var(--map-muted);font-size:.92rem;margin-top:.5rem;text-align:center}

/* ---------- Footer ---------- */
.map-foot{background:var(--map-navy);color:#cfe2ee;padding:3rem 0 2rem;margin-top:3rem}
.map-foot h5{color:#fff;font-size:1.05rem;margin:0 0 .8rem}
.map-grid-2{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
@media(max-width:760px){.map-grid-2{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
.map-foot a{display:block;color:#cfe2ee;text-decoration:none;padding:.22rem 0;font-size:.98rem}
.map-foot a:hover{color:#fff;text-decoration:underline}
.map-foot .logos{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:2rem 0 1.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
.map-foot .logos img{height:30px;width:auto;background:#fff;border-radius:8px;padding:5px 8px;opacity:.92}
.map-foot .small{color:#9fc0d3;font-size:.86rem;line-height:1.5;margin:.4rem 0;max-width:none}
.map-foot-bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14)}
.map-foot-bottom a{display:inline;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:0}
.map-foot-bottom a:hover{color:var(--map-sun)}
.map-foot-bottom span{color:#6f93a8}

/* ---------- Bootstrap-tooltip (jämförpris-förklaring, större) ---------- */
.map-tooltip{--bs-tooltip-bg:#fff;--bs-tooltip-color:var(--map-ink);--bs-tooltip-max-width:320px;--bs-tooltip-opacity:1;font-family:'Atkinson',sans-serif}
.map-tooltip .tooltip-inner{background:#fff;color:var(--map-ink);border:1px solid var(--map-line);border-top:3px solid var(--map-sun);
  box-shadow:var(--map-shadow-lg);border-radius:12px;padding:.85rem 1rem;font-size:.95rem;line-height:1.5;text-align:left;max-width:320px}
.map-tooltip .tooltip-inner strong{color:var(--map-navy)}
.map-tooltip .tooltip-arrow::before{border-top-color:#fff}

/* Skip-link för tillgänglighet */
.map-skip{position:absolute;left:-999px;top:0;background:var(--map-sun);color:#3a2600;padding:.6rem 1rem;border-radius:0 0 10px 0;z-index:100;font-weight:700}
.map-skip:focus{left:0}
:focus-visible{outline:3px solid var(--map-sun);outline-offset:2px;border-radius:4px}