/* ============================================================
   Velkommen til Harstad — multilingual HTML edition
   Design system reproduced from the Canva booklet (1440×810)
   ============================================================ */
:root{
  --bg:#3c6f8f;            /* steel-blue page background            */
  --bg-deep:#345f7b;       /* slightly deeper blue                 */
  --navy:#1c3c59;          /* ribbon / dark accents                */
  --navy-d:#15314a;        /* ribbon fold shadow                   */
  --ink:#ffffff;           /* primary text (white)                 */
  --muted:rgba(255,255,255,.86);
  --line:rgba(255,255,255,.6);
  --red:#e23b2e;           /* BRANN                                */
  --red-o:#f6e3b8;         /* warm outline for emergency titles    */
  --green:#1f9d57;         /* AMBULANSE                            */
  --amber:#f4b740;
  --card:#ffffff;
  --canvasW:1440;
  --canvasH:810;
  --font-body:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:'Nunito',system-ui,sans-serif;
  --font-display:'Fredoka','Nunito',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  background:#26465c;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 20px;
  background:linear-gradient(180deg,#15314a,#1c3c59);
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}
.topbar .brand{display:flex;align-items:center;gap:11px;color:#fff}
.topbar .brand img{height:34px;width:auto;display:block}
.topbar .brand b{font-family:var(--font-head);font-weight:800;font-size:16px;letter-spacing:.2px;line-height:1.05}
.topbar .brand span{display:block;font-weight:500;font-size:11px;opacity:.8}
.langs{display:flex;gap:6px;background:rgba(255,255,255,.08);padding:5px;border-radius:999px}
.langs button{
  font-family:var(--font-head);font-weight:700;font-size:13px;
  color:#cfe0ec;background:transparent;border:0;cursor:pointer;
  padding:7px 15px;border-radius:999px;transition:.18s;letter-spacing:.3px;
}
.langs button:hover{color:#fff;background:rgba(255,255,255,.12)}
.langs button.active{color:#15314a;background:#fff}

/* ---------- deck / responsive scaling ---------- */
.deck{display:flex;flex-direction:column;align-items:center;gap:26px;padding:26px 14px 70px}
.slide-frame{
  width:100%;max-width:1440px;position:relative;
  border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.slide{
  position:absolute;top:0;left:0;
  width:1440px;height:810px;
  transform-origin:top left;
  background:var(--bg);
  overflow:hidden;
  font-size:16px;
}
.slide *{line-height:1.32}

/* page number chip */
.pageno{position:absolute;right:16px;bottom:12px;font-family:var(--font-head);
  font-weight:700;font-size:13px;color:rgba(255,255,255,.45);z-index:5}

/* ---------- shared chrome: header ---------- */
.s-head{position:absolute;left:40px;top:26px;display:flex;align-items:center;gap:14px;z-index:6}
.s-head img.shield{height:74px;width:auto;display:block}
.s-head .wm{font-family:var(--font-head);font-weight:800;color:#fff;font-size:25px;line-height:1.02;letter-spacing:.2px}

/* ---------- ribbon banner (shared, default centered top) ---------- */
.ribbon{position:absolute;left:60px;width:1000px;top:18px;z-index:6;
  display:flex;align-items:center;justify-content:center}
.ribbon .band{
  position:relative;background:var(--navy);color:#fff;
  font-family:var(--font-display);font-weight:600;font-style:italic;
  font-size:25px;letter-spacing:.3px;line-height:1.12;text-align:center;
  padding:11px 38px 12px;border-radius:3px;white-space:normal;max-width:430px;
  transform:rotate(-5deg);
  box-shadow:0 8px 16px rgba(0,0,0,.22);
}
/* left fishtail flag */
.ribbon .band::before{
  content:"";position:absolute;left:-52px;top:50%;
  width:60px;height:46px;background:var(--navy);
  transform:translateY(-50%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,26% 50%);
}
/* darker underside fold beneath the flag/band joint */
.ribbon .band::after{
  content:"";position:absolute;left:-6px;top:84%;width:34px;height:26px;
  background:var(--navy-d);transform:skewX(-22deg);border-radius:0 0 3px 4px;z-index:-1;
}

/* ---------- generic helpers ---------- */
.abs{position:absolute}
.h-section{font-family:var(--font-head);font-weight:800;text-transform:uppercase;color:#fff;letter-spacing:.4px}
.body{font-family:var(--font-body);color:var(--ink)}
.lead{font-size:20px;font-weight:600}
a.link{color:#fff;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.icon-h{display:flex;gap:14px;align-items:flex-start}
.icon-h img{flex:0 0 auto}

/* hide all language variants except active is done by JS via [data-i18n] text swap */
[hidden]{display:none!important}

/* ---------- COVER ---------- */
#s-cover{background:#2b566f}
#s-cover .cover-bg{position:absolute;inset:0;background:url(../assets/cover.jpg) center/cover no-repeat}
#s-cover .shield{position:absolute;left:40px;top:28px;height:106px;z-index:3}
#s-cover .title{
  position:absolute;left:110px;width:650px;top:48px;text-align:center;z-index:3;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:64px;line-height:1.08;color:#fff;letter-spacing:2px;
  text-shadow:0 3px 18px rgba(8,30,45,.5);
}
#s-cover .subtitle{
  position:absolute;left:110px;width:650px;top:262px;text-align:center;z-index:3;
  font-family:var(--font-body);font-weight:600;font-size:23px;color:rgba(255,255,255,.94);
  text-shadow:0 2px 10px rgba(8,30,45,.55);
}

/* ---------- ABOUT (slide 2) ---------- */
#s-about .ab-map{position:absolute;right:34px;top:12px;width:150px;height:auto;z-index:4}
#s-about .ab-moose{position:absolute;right:38px;bottom:16px;width:140px;height:auto;z-index:4}
#s-about .ab-body{position:absolute;left:40px;top:104px;width:1190px;z-index:3}
#s-about .ab-intro{font-size:17.5px;font-weight:600;color:#fff;margin-bottom:15px;max-width:1150px}
#s-about .sec{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
#s-about .sec .ico{flex:0 0 80px;width:80px;display:flex;justify-content:center;align-items:flex-start;padding-top:2px}
#s-about .sec .ico img{width:76px;height:auto}
#s-about .sec .ico .emoji{font-size:27px;line-height:1.12;text-align:center}
#s-about .sec h3{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:17.5px;color:#fff;letter-spacing:.3px;margin:0 0 2px}
#s-about .sec p{font-size:15.4px;line-height:1.32;color:var(--ink);max-width:1110px}

/* ---------- shared content-slide bits ---------- */
.qh{font-family:var(--font-head);font-weight:800;text-transform:uppercase;color:#fff;letter-spacing:.3px}
.contact-ico{font-style:normal;margin-right:5px}
.footrow{position:absolute;left:36px;bottom:18px;display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;
  font-size:14px;color:#fff;z-index:5;max-width:980px}
.footrow .it{display:flex;align-items:center;gap:7px}
.footrow .it .ic{width:26px;height:26px;border-radius:50%;background:#2b556e;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.qr-img{position:absolute;background:#fff;padding:5px;border-radius:6px;z-index:5}

/* ---------- PAGE 10 — Integration Unit ---------- */
#s-p10 .rcard{position:absolute;right:8px;width:150px;text-align:center;z-index:4}
#s-p10 .rcard img{display:block;margin:0 auto;max-width:144px;max-height:104px;height:auto}
#s-p10 .rcard span{display:inline-block;background:#fff;color:#16324a;font-family:var(--font-body);font-weight:800;
  font-size:12px;line-height:1.1;border-radius:8px;padding:3px 9px;margin-top:2px;box-shadow:0 2px 6px rgba(0,0,0,.22)}
#s-p10 .main{position:absolute;left:34px;top:96px;width:1240px;z-index:3}
#s-p10 .main .qh{font-size:21px;margin:0 0 3px}
#s-p10 .qb{font-size:16.5px;margin:0 0 14px;max-width:1210px}
#s-p10 ul.checks{list-style:none;margin:0 0 8px;padding:0}
#s-p10 ul.checks li{font-size:15.6px;padding-left:22px;position:relative;margin-bottom:5px;max-width:1190px;line-height:1.34}
#s-p10 ul.checks li::before{content:"▸";position:absolute;left:2px;color:#a8d4f5;font-weight:900}
#s-p10 .tagline{font-family:var(--font-display);font-weight:600;font-size:18.5px;color:#ffd35e;margin:9px 0 13px}
#s-p10 .contact{font-size:16px;margin:0 0 8px}
#s-p10 .contact .qh{font-size:17px}
#s-p10 .contact .phone{display:inline-flex;align-items:center;gap:7px;margin-left:6px}
#s-p10 .contact .phone b{background:#2b556e;border-radius:13px;padding:2px 12px}
#s-p10 .lower{position:absolute;left:34px;top:566px;width:1270px;z-index:3}
#s-p10 .note{font-size:15.5px;max-width:1150px;color:var(--muted);margin:8px 0 0}
#s-p10 .footrow.inflow{position:static;margin-top:18px;max-width:1270px;bottom:auto;left:auto;font-size:14.5px}
#s-p10 .rcard img{max-height:92px;max-width:132px}

/* ---------- PAGE 11 — Emergency services ---------- */
#s-p11 .emrows{position:absolute;left:36px;top:78px;right:22px;bottom:14px;display:flex;
  flex-direction:column;justify-content:space-between;z-index:3}
#s-p11 .emrow{display:flex;align-items:center;gap:20px}
#s-p11 .emtext{flex:1 1 auto;min-width:0}
#s-p11 .emveh{flex:0 0 auto;width:262px;height:auto}
#s-p11 .em-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:40px;line-height:1;margin:0 0 4px;-webkit-text-stroke:4px #fff;paint-order:stroke fill;
  letter-spacing:.5px}
#s-p11 .em-title.brann{color:#e8342a;-webkit-text-stroke-color:#ffe3a8}
#s-p11 .em-title.amb{color:#62c23a;-webkit-text-stroke-color:#fbfff5}
#s-p11 .em-title.politi{color:#2f86e6;-webkit-text-stroke-color:#ffffff}
#s-p11 .em-title .num{margin-left:10px}
#s-p11 h4.emq{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:16.5px;
  color:#fff;margin:4px 0 1px}
#s-p11 .emb{font-size:15.3px;color:var(--ink);margin:0 0 2px;max-width:1090px;line-height:1.32}

/* ---------- PAGE 12 — Home care ---------- */
#s-p12 .p12title{position:absolute;top:96px;left:120px;right:120px;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:29px;color:#fff;z-index:3;
  text-shadow:0 2px 8px rgba(8,30,45,.4)}
#s-p12 .cats{position:absolute;left:30px;top:150px;width:1130px;height:600px;
  display:flex;flex-direction:column;justify-content:space-between;z-index:3}
#s-p12 .cat h3{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:17px;
  color:#1fb0ec;margin:0;letter-spacing:.3px}
#s-p12 .cat p{font-size:14.6px;color:#fff;margin:0;line-height:1.28;max-width:1120px}
#s-p12 .cat p+p{margin-top:2px}
#s-p12 .closing{position:absolute;left:120px;right:120px;bottom:16px;text-align:center;
  font-size:14.5px;color:#fff;font-weight:700;z-index:3}
#s-p12 .ic{position:absolute;z-index:4;height:auto}

/* ---------- PAGE 13 — Kindergarten & school ---------- */
#s-p13 .p13title{position:absolute;top:92px;left:120px;right:120px;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:28px;color:#fff;z-index:3;
  text-shadow:0 2px 8px rgba(8,30,45,.4)}
#s-p13 .cats{position:absolute;left:30px;top:138px;width:1150px;height:540px;
  display:flex;flex-direction:column;justify-content:space-between;z-index:3}
#s-p13 .cat h3{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:17px;
  color:#1fb0ec;margin:0 0 1px;letter-spacing:.3px}
#s-p13 .cat p{font-size:13.9px;color:#fff;margin:0;line-height:1.3;max-width:1150px}
#s-p13 .illus{position:absolute;right:2px;top:8px;width:198px;height:auto;z-index:4}
#s-p13 .ist{position:absolute;left:1176px;top:600px;width:142px;height:auto;z-index:4}
#s-p13 .stores{position:absolute;left:30px;bottom:22px;display:flex;align-items:center;
  gap:8px 30px;z-index:5;flex-wrap:wrap}
#s-p13 .store{display:flex;align-items:center;gap:10px}
#s-p13 .store .badge{height:50px;width:auto}
#s-p13 .store .qr{height:78px;width:auto;background:#fff;padding:3px;border-radius:4px}
#s-p13 .store .lbl{font-family:var(--font-body);font-weight:700;font-size:14.5px;color:#fff;
  text-decoration:underline;text-underline-offset:2px}

/* ---------- PAGE 14 — Integration Council ---------- */
#s-p14 .body{position:absolute;left:34px;top:140px;width:1140px;z-index:3}
#s-p14 .body h2{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:22px;
  color:#fff;margin:0 0 16px;letter-spacing:.3px}
#s-p14 .body p{font-size:16.5px;color:#fff;margin:0 0 15px;max-width:1130px;line-height:1.36}
#s-p14 .url{position:absolute;left:34px;top:300px;font-size:14px;white-space:nowrap;z-index:3}
#s-p14 .cap{position:absolute;left:300px;top:454px;width:236px;text-align:center;font-size:13.6px;
  color:#fff;line-height:1.32;z-index:3}
#s-p14 .meet{position:absolute;left:1206px;top:150px;width:214px;height:auto;z-index:4}
#s-p14 .ppl{position:absolute;left:1178px;top:420px;width:262px;height:auto;z-index:4}

/* ---------- PAGE 15 — Meeting places ---------- */
#s-p15 .intro{position:absolute;left:140px;top:152px;width:1150px;text-align:center;
  font-size:16px;color:#fff;z-index:3;line-height:1.32}
#s-p15 .cols{position:absolute;left:132px;top:226px;width:1170px;display:grid;
  grid-template-columns:1fr 1fr;column-gap:30px;z-index:3}
#s-p15 .col{display:flex;flex-direction:column;gap:17px}
#s-p15 .venue{display:flex;gap:14px;align-items:flex-start}
#s-p15 .venue>img{flex:0 0 auto;width:128px;height:auto}
#s-p15 .vt{flex:1;min-width:0}
#s-p15 .vt h3{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:16.5px;
  color:#1fb0ec;margin:0 0 2px;letter-spacing:.2px}
#s-p15 .vt p{font-size:13.2px;color:#fff;margin:0;line-height:1.28}
#s-p15 .vt .lab{color:#ffd35e;font-weight:800}

/* ---------- PAGE 16 — Culture café & House of Opportunity ---------- */
#s-p16 .kafelogo{position:absolute;left:40px;top:92px;width:194px;height:auto;z-index:4;border-radius:6px}
#s-p16 .ktext{position:absolute;left:252px;top:84px;width:650px;z-index:3}
#s-p16 .ktext p{font-size:14.5px;color:#fff;margin:0 0 9px;line-height:1.3}
#s-p16 .kopen{position:absolute;left:252px;top:200px;font-family:var(--font-head);font-weight:800;
  font-size:15px;color:#fff;letter-spacing:.3px;z-index:3}
#s-p16 .rodekors{position:absolute;left:298px;top:420px;width:116px;height:auto;z-index:4}
#s-p16 .mulighus{position:absolute;left:418px;top:426px;width:462px;height:auto;z-index:4}
#s-p16 .nav{position:absolute;left:884px;top:432px;width:84px;height:auto;z-index:4}
#s-p16 .house{position:absolute;left:40px;top:544px;width:148px;height:auto;z-index:4;border-radius:6px}
#s-p16 .mtext{position:absolute;left:292px;top:534px;width:600px;z-index:3}
#s-p16 .mtext p{font-size:14.5px;color:#fff;margin:0;line-height:1.32}
#s-p16 .fbqr{position:absolute;left:728px;top:644px;width:94px;z-index:5}
#s-p16 .mscan{position:absolute;left:846px;top:648px;width:220px;font-size:12.8px;color:#fff;
  line-height:1.3;z-index:3}
#s-p16 .ph1{position:absolute;left:1176px;top:16px;width:130px;height:auto;z-index:4;border-radius:5px}
#s-p16 .ph2{position:absolute;left:1308px;top:16px;width:128px;height:auto;z-index:4;border-radius:5px}
#s-p16 .ph3{position:absolute;left:1176px;top:536px;width:258px;height:auto;z-index:4;border-radius:5px}
#s-p16 .mhlabel{position:absolute;left:1180px;top:704px;font-family:var(--font-head);font-weight:800;
  font-size:18px;color:#ff8a3d;z-index:5}
#s-p16 .addr{position:absolute;display:flex;align-items:center;gap:9px;font-size:14px;color:#fff;z-index:3}
#s-p16 .addr .ic{width:30px;height:30px;border-radius:50%;background:#2b556e;display:flex;
  align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}

/* ---------- PAGE 17 — Activity guide ---------- */
#s-p17 .intro{position:absolute;left:150px;top:86px;width:880px;text-align:center;font-size:13.6px;
  color:#fff;line-height:1.32;z-index:3}
#s-p17 .qrcap{position:absolute;font-size:12px;color:#fff;line-height:1.25;z-index:3}
#s-p17 .qr-img{position:absolute;z-index:5}
#s-p17 .logo{position:absolute;z-index:4;height:auto}
#s-p17 .rtitle{position:absolute;font-family:var(--font-head);font-weight:800;font-size:16px;color:#1fb0ec;z-index:3}
#s-p17 .desc{position:absolute;font-size:12.8px;color:#fff;line-height:1.3;z-index:3}
#s-p17 .soccer{position:absolute;left:1180px;top:40px;width:258px;height:auto;z-index:4}
#s-p17 .camping{position:absolute;left:1298px;top:592px;width:142px;height:auto;z-index:4}
#s-p17 .turbtitle{position:absolute;left:34px;top:716px;font-family:var(--font-head);font-weight:800;
  font-size:16px;color:#ffd35e;z-index:3;width:170px;text-align:center}
#s-p17 .addr{position:absolute;display:flex;align-items:center;gap:8px;font-size:13px;color:#fff;z-index:3}
#s-p17 .addr .ic{width:28px;height:28px;border-radius:50%;background:#2b556e;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}

/* ---------- PAGE 18 — Important mobile apps ---------- */
#s-p18 .intro{position:absolute;left:40px;top:84px;width:1180px;font-size:14px;color:#fff;
  line-height:1.3;z-index:3}
#s-p18 .icons{position:absolute;left:28px;top:150px;width:120px;height:auto;z-index:4}
#s-p18 .qrs{position:absolute;left:978px;top:132px;width:326px;height:auto;z-index:4}
#s-p18 .phone{position:absolute;left:1332px;top:18px;width:108px;height:auto;z-index:4}
#s-p18 .hva{position:absolute;left:158px;top:158px;font-family:var(--font-head);font-weight:800;
  font-size:15px;color:#fff;z-index:3}
#s-p18 .rows{position:absolute;left:158px;top:196px;width:800px;height:594px;display:grid;
  grid-template-rows:repeat(8,1fr);z-index:3}
#s-p18 .rows .r{display:flex;align-items:center;font-size:12.5px;color:#fff;line-height:1.24;padding:2px 8px 2px 0}
#s-p18 .rows .r b{color:#bfe6ff}

/* ---------- PAGE 19 — Religious communities ---------- */
#s-p19 .intro{position:absolute;left:40px;top:96px;width:1280px;font-size:15px;color:#fff;line-height:1.32;z-index:3}
#s-p19 .symbols{position:absolute;right:8px;top:150px;width:96px;height:auto;z-index:4}
#s-p19 .grid{position:absolute;left:34px;top:180px;width:1270px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:18px 26px;z-index:3}
#s-p19 .rc h4{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:13.5px;
  color:#1fb0ec;margin:0 0 2px;line-height:1.15}
#s-p19 .rc .den{display:block;color:#cfe0ec;font-weight:600;font-size:11.5px;text-transform:none;margin-bottom:2px}
#s-p19 .rc p{font-size:12.5px;color:#fff;margin:0;line-height:1.3}
#s-p19 .rc .ph{color:#ffd35e;font-weight:700}

/* responsive: stack langs under brand on narrow screens */
@media (max-width:560px){
  .topbar{flex-direction:column;gap:10px;align-items:stretch}
  .topbar .brand{justify-content:center}
  .langs{justify-content:center}
}