/* Vklass topbar: samma sidhuvud som företagswebben (company/site/assets/css/site.css,
   avsnitten nav, tjänste-, språk- och temakontroller och responsivt). Ändras det ena
   ska det andra följa med. Tokens heter --tb-* så att de inte krockar med sajtens
   egna; ytan är alltid Djupblå och växlarens meny följer ljust och mörkt tema.
   Två avvikelser för produktlockupen och schemasajtens fem menyval: menyknappen tar
   över vid 1340 px i stället för 1260, och under 360 px flyttar temavalet in i menyn.
   Filen är identisk på product-schema och product-analys. */

@font-face { font-family: 'Visma Display'; src: url('/fonts/VismaDisplay-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Visma Text'; src: url('/fonts/VismaText-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Visma Text'; src: url('/fonts/VismaText-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Visma Text'; src: url('/fonts/VismaText-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --topbar-bg: #182A5D; --topbar-height: 64px;
  --tb-surface: #FFFFFF; --tb-ink: #131313; --tb-gra: #5A5A5A; --tb-kant: #E3E7F2;
  --tb-ljusbla: #EDF1FA; --tb-creme: #F7F5F0; --tb-accent: #26418F;
}
[data-theme="dark"] {
  --tb-surface: #181E33; --tb-ink: #F0F2F8; --tb-gra: #9DA3B6; --tb-kant: #2A3150;
  --tb-ljusbla: #232C4E; --tb-creme: #151A2E; --tb-accent: #849BE0;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --tb-surface: #181E33; --tb-ink: #F0F2F8; --tb-gra: #9DA3B6; --tb-kant: #2A3150;
    --tb-ljusbla: #232C4E; --tb-creme: #151A2E; --tb-accent: #849BE0;
  }
}

/* ---------- nav ---------- */
.nav{box-sizing:border-box; height:var(--topbar-height); min-height:var(--topbar-height); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(20px,4vw,64px); background:var(--topbar-bg); color:#FFFFFF; position:sticky; top:0; z-index:80; font-family:'Visma Text',system-ui,sans-serif; line-height:1.5;}
.nav *,.nav *::before,.nav *::after{box-sizing:border-box;}
.nav a{text-decoration:none;}
.nav-logo{display:flex; align-items:center; gap:5px; min-width:0; max-width:100%; min-height:44px; flex:0 0 auto; border-radius:8px; color:#FFFFFF;}
.nav-logo img{display:block; width:auto; height:35px;}
/* Produktlockupen: Vklass-lockupen följd av produktdelen i gemener (Designmanual 1.0),
   i Visma Display SemiBold med wordmarkets x-höjd och baslinje. */
.nav-product{display:block; margin-top:-4px; color:#FFFFFF; font-family:'Visma Display',system-ui,sans-serif; font-size:17px; font-weight:600; line-height:1; letter-spacing:-.01em; white-space:nowrap;}
.nav-links{display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; height:100%; font-size:14px; font-weight:600;}
.nav-links > a{display:flex; align-items:center; min-height:44px; padding:0 8px; color:#FFFFFF; border-radius:9px; white-space:nowrap;}
.nav-links > a:hover,.nav-links > a.active{background:rgba(255,255,255,.12); color:#FFFFFF;}
.nav a:focus-visible,.nav button:focus-visible{outline:2px solid #FFFFFF; outline-offset:2px;}
.nav-toggle{display:none; align-items:center; justify-content:center; flex-direction:column; width:44px; height:44px; min-height:44px; flex:0 0 44px; padding:0; background:transparent; border:none; border-radius:9px; cursor:pointer;}
.nav-toggle:hover{background:rgba(255,255,255,.12);}
.nav-toggle span{display:block; width:23px; height:2px; background:#FFFFFF; margin:3px 0; border-radius:2px; transition:transform .2s, opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------- tjänste-, språk- och temakontroller ---------- */
.topbar-utilities{display:flex; align-items:center; gap:4px; min-width:0;}
.topbar-dropdown{position:relative; min-width:0;}
.topbar-control{display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; max-width:100%; min-height:44px; padding:0 8px; background:transparent; border:0; border-radius:9px; color:#FFFFFF; cursor:pointer; font:600 13.5px/1 'Visma Text',system-ui,sans-serif; white-space:nowrap;}
.topbar-control:hover,.topbar-control[aria-expanded="true"]{background:rgba(255,255,255,.12);}
.topbar-control .control-icon{font-size:20px;}
.topbar-control .control-chevron{font-size:18px; transition:transform .15s;}
.topbar-control[aria-expanded="true"] .control-chevron{transform:rotate(180deg);}
.control-label{flex:1 1 auto; min-width:0; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.control-icon,.control-chevron{flex:0 0 auto;}
.topbar-menu{position:absolute; right:0; top:calc(100% + 6px); min-width:210px; max-width:calc(100vw - 32px); margin:0; padding:6px; background:var(--tb-surface); color:var(--tb-ink); border:1px solid var(--tb-kant); border-radius:12px; box-shadow:0 12px 30px rgba(13,17,32,.28); z-index:90;}
.topbar-menu[hidden]{display:none;}
.topbar-menu a,.topbar-menu button{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 10px; background:transparent; border:0; border-radius:8px; color:var(--tb-ink); cursor:pointer; font:500 14px/1.25 'Visma Text',system-ui,sans-serif; text-align:left;}
.topbar-menu a:hover,.topbar-menu button:hover{background:var(--tb-ljusbla); color:var(--tb-accent); text-decoration:none;}
.topbar-menu a:focus-visible,.topbar-menu button:focus-visible{outline:2px solid var(--tb-accent); outline-offset:-2px;}
.topbar-menu [aria-checked="true"]{background:var(--tb-ljusbla); color:var(--tb-accent); font-weight:600;}
.topbar-menu .material-icons{font-size:18px; color:var(--tb-accent);}
.topbar-menu .menu-check{opacity:0;}
.topbar-menu [aria-checked="true"] .menu-check{opacity:1;}
.service-switcher .topbar-control{min-width:44px; min-height:44px;}
.service-trigger-glyph{display:block; width:22px; height:22px; flex:0 0 22px;}
.service-trigger-glyph svg{display:block; width:22px; height:22px;}
.service-menu{width:420px; max-width:calc(100vw - 32px); padding:8px; border-radius:14px;}
.service-title{margin:0; padding:7px 10px 9px; color:var(--tb-ink); font-family:'Visma Display',system-ui,sans-serif; font-size:17px; font-weight:600; line-height:1.5;}
.topbar-menu .service-item{align-items:flex-start; gap:12px; min-height:64px; padding:10px;}
.topbar-menu .service-item:hover{background:var(--tb-creme); color:var(--tb-ink);}
.topbar-menu .service-item[aria-current="true"]{background:var(--tb-ljusbla); color:var(--tb-ink);}
.service-vklass{--service-accent:#26418F;}
.service-schema{--service-accent:#182A5D;}
.service-praktik{--service-accent:#A0521D;}
.service-analys{--service-accent:#0E7C86;}
.service-icon{background:var(--service-accent); display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; border-radius:10px; color:#FFFFFF;}
.service-icon img{display:block; width:24px; height:24px; filter:brightness(0) invert(1);}
.service-copy{display:flex; flex:1 1 auto; min-width:0; flex-direction:column; gap:2px;}
.service-name{color:var(--tb-ink); font-family:'Visma Display',system-ui,sans-serif; font-size:15px; font-weight:600; line-height:1.25;}
.service-description{color:var(--tb-gra); font-size:12.5px; font-weight:400; line-height:1.35;}
.service-current{color:var(--tb-gra); font-size:12px; font-weight:600; line-height:1.35;}
/* Demo och inloggning är skilda val: de har olika målgrupper och olika vikt. */
.nav-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0;}
.nav .nav-cta,.nav .nav-login{display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 18px; border:2px solid; border-radius:999px; font:600 15px/1.5 'Visma Text',system-ui,sans-serif; white-space:nowrap; cursor:pointer; transition:background .15s, color .15s;}
.nav .nav-cta{background:#FFFFFF; border-color:#FFFFFF; color:#182A5D;}
.nav .nav-cta:hover{background:#EDF1FA; border-color:#EDF1FA; color:#182A5D;}
.nav .nav-login{background:transparent; border-color:rgba(255,255,255,.7); color:#FFFFFF;}
.nav .nav-login:hover{background:rgba(255,255,255,.12); border-color:#FFFFFF; color:#FFFFFF;}

/* ---------- responsivt ---------- */
@media (max-width: 1340px){
  :root{--topbar-height:56px;}
  .nav{padding:0 16px;}
  .nav-logo img{height:30px;}
  .nav-product{margin-top:-4px; font-size:15px;}
  .nav-toggle{display:flex;}
  .nav-links{display:contents;}
  .nav-links:not(.open) > a{display:none;}
  .nav-links:not(.open) .nav-actions{display:none;}
  .nav-links:not(.open) .topbar-utilities{position:absolute; top:6px; right:68px; display:flex; width:auto; gap:0;}
  .nav-links:not(.open) .topbar-control{width:44px; padding:0;}
  .nav-links:not(.open) .control-label,.nav-links:not(.open) .control-chevron{display:none;}
  .nav-links.open{position:absolute; top:100%; left:0; right:0; height:auto; max-height:calc(100vh - var(--topbar-height)); overflow-y:auto; background:var(--topbar-bg); flex-direction:column; align-items:stretch; justify-content:flex-start; padding:12px 16px 20px; gap:4px; box-shadow:0 16px 30px rgba(13,17,32,.24);}
  .nav-links.open{display:flex;}
  .nav-links > a{width:100%; padding:0 10px;}
  .topbar-utilities{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; max-width:100%;}
  .topbar-dropdown,.topbar-control{width:100%; max-width:100%;}
  .topbar-menu{width:min(260px,calc(100vw - 32px)); min-width:0;}
  .topbar-dropdown:first-child .topbar-menu{left:0; right:auto;}
  .topbar-dropdown:last-child .topbar-menu{left:auto; right:0;}
  .service-menu{position:fixed; top:calc(var(--topbar-height) + 6px); left:16px; right:16px; width:auto; max-width:none;}
  .topbar-dropdown:first-child .service-menu{left:16px; right:16px;}
  .nav-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; max-width:100%;}
  .nav .nav-cta,.nav .nav-login{width:100%;}
}
@media (max-width: 400px){
  .nav-logo img{height:26px;}
  .nav-product{margin-top:-4px; font-size:13px;}
}
@media (max-width: 359px){
  /* Produktlockupen och två kontroller får plats bredvid menyknappen ned till 320 px. */
  .nav-links:not(.open) .topbar-dropdown:last-child{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .nav-toggle span,.topbar-control .control-chevron,.nav .nav-cta,.nav .nav-login{transition:none;}
}

/* Cookiesamtycke: samma ruta och ikon som företagswebben (company/site/assets/css/site.css). */
.cookie-consent { position: fixed; z-index: 60; left: 16px; bottom: 16px; max-width: 480px; padding: 16px;
  background: var(--tb-surface); color: var(--tb-ink); border: 1px solid var(--tb-kant); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-family: 'Visma Text', 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.45; }
.cookie-consent[hidden], .cookie-settings[hidden] { display: none; }
.cookie-consent p { margin: 0 0 12px; }
.cookie-consent a { color: var(--tb-accent); text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-consent-btn { flex: 1 1 auto; font: inherit; font-weight: 600; color: var(--tb-accent); background: transparent;
  border: 1.5px solid var(--tb-accent); border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.cookie-consent-btn:hover { background: var(--tb-ljusbla); }
.cookie-settings { position: fixed; z-index: 60; right: 16px; bottom: 16px; width: 44px; height: 44px; display: grid;
  place-items: center; color: var(--tb-accent); background: var(--tb-surface); border: 1px solid var(--tb-kant);
  border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); cursor: pointer; }
.cookie-consent-btn:focus-visible, .cookie-consent a:focus-visible, .cookie-settings:focus-visible {
  outline: 2px solid var(--tb-accent); outline-offset: 2px; }
@media (max-width: 600px) { .cookie-consent { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
@media print { .cookie-consent, .cookie-settings { display: none; } }