/* Konnekt365 — shared site styles.
   Most layout and colour lives inline on each page (as in the original design).
   This file holds page basics, the navigation, the solution tabs, forms and the
   responsive rules that inline styles can't express. */

:root {
  --k-ink: #15171C;
  --k-muted: #4F5663;
  --k-line: #E6E8EC;
  --k-soft: #F5F7FA;
  --k-tint: #EEF4FA;
  --k-blue: #3D8FCC;
  --k-link: #1F6AA8;
  --k-link-dark: #15507F;
  --k-font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--k-font);
  color: var(--k-ink);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { display: block; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: var(--k-link); }
a:hover { color: var(--k-link-dark); }
:focus-visible { outline: 3px solid var(--k-blue); outline-offset: 2px; }
[id] { scroll-margin-top: 96px; }

.k-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: var(--k-ink); color: #fff; font-weight: 600; text-decoration: none;
}
.k-skip:focus { top: 12px; color: #fff; }

/* ---------- Navigation ---------- */
/* Sticky header: slides away while scrolling down, back on scroll up (site.js). */
.k-header {
  position: sticky; top: 0; z-index: 50;
  background: #FFFFFF; border-bottom: 1px solid var(--k-line);
  /* A soft shade at all times separates the header from white sections; it deepens once scrolled. */
  box-shadow: 0 6px 18px -12px rgba(21,23,28,.22);
  transition: transform .25s ease, box-shadow .2s ease, visibility 0s linear 0s;
}
.k-header.is-stuck { box-shadow: 0 8px 24px -14px rgba(21,23,28,.3); }
.k-header.is-hidden { transform: translateY(calc(-100% - 32px)); visibility: hidden; box-shadow: none; transition: transform .25s ease, visibility 0s linear .25s; }
.k-nav {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
  height: 76px; display: flex; align-items: center; gap: 32px;
}
.k-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; color: var(--k-ink); }
.k-brand:hover { color: var(--k-ink); }
.k-brand img { width: 34px; height: 34px; display: block; }
.k-brand > span { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.k-nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; }
.k-nav-links a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; color: var(--k-muted); }
.k-nav-links a:hover { color: var(--k-ink); border-bottom-color: var(--k-line); }
.k-nav-links a[aria-current="page"] { color: var(--k-ink); border-bottom-color: var(--k-blue); }
.k-nav-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 8px;
  background: var(--k-ink); color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none;
}
.k-nav-cta:hover { background: #2B2F37; color: #FFFFFF; }
.k-menu-btn {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center; border: 1px solid var(--k-line); border-radius: 8px; background: #FFFFFF; cursor: pointer;
}
.k-mobile-menu { border-top: 1px solid var(--k-line); padding: 8px 16px 20px; display: flex; flex-direction: column; background: #FFFFFF; }
.k-mobile-menu a {
  display: flex; align-items: center; min-height: 52px; font-size: 18px; font-weight: 600;
  text-decoration: none; color: var(--k-ink); border-bottom: 1px solid var(--k-line);
}
.k-mobile-menu a[aria-current="page"] { color: var(--k-link); }
.k-mobile-menu .k-mobile-cta {
  margin-top: 16px; justify-content: center; height: 52px; border: 0; border-radius: 8px; background: var(--k-ink); color: #FFFFFF; font-size: 16px;
}
@media (max-width: 860px) {
  .k-nav-links, .k-nav-cta { display: none; }
  .k-menu-btn { display: flex; }
}
@media (min-width: 861px) {
  .k-mobile-menu { display: none !important; }
}

/* ---------- Links styled as buttons ---------- */
main a[style*="height: 4"], main a[style*="height: 5"] { transition: filter .15s ease, transform .15s ease; }
main a[style*="height: 4"]:hover, main a[style*="height: 5"]:hover { filter: brightness(.94); }
main button[type="submit"]:hover { filter: brightness(1.25); }

/* Text link with an arrow (e.g. "Compare all three solutions") */
.k-arrow-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 16px; font-weight: 700;
  color: var(--k-link); text-decoration: none; border-bottom: 2px solid #CFE3F4; transition: border-color .15s ease;
}
.k-arrow-link:hover { color: var(--k-link-dark); border-bottom-color: currentColor; }
.k-arrow-link svg { transition: transform .15s ease; }
.k-arrow-link:hover svg { transform: translateX(3px); }

/* ---------- Home: solution tabs ---------- */
.k-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.k-tab {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; border-radius: 14px;
  cursor: pointer; font: inherit; background: var(--k-soft); border: 2px solid transparent; box-shadow: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.k-tab:hover { background: #EBEEF3; }
.k-tab[aria-pressed="true"] { background: #FFFFFF; background: color-mix(in srgb, var(--k-tab) 8%, #FFFFFF); border-color: var(--k-tab); border-color: color-mix(in srgb, var(--k-tab) 45%, #FFFFFF); box-shadow: 0 6px 18px rgba(21,23,28,.08); }
/* Without JavaScript the tabs can't switch, so all three panels show, one after another. */
html:not(.js) .k-tabs { display: none; }
.k-panels { display: flex; flex-direction: column; gap: 28px; }
/* With JavaScript all three panels share one grid cell, so the section is always as tall as the
   tallest panel and switching tabs never moves the rest of the page. */
.js .k-panels { display: grid; }
.js .k-panels > .k-panel { grid-area: 1 / 1; }
.js .k-panel.is-off { visibility: hidden; }

/* ---------- Forms ---------- */
form input:focus, form select:focus, form textarea:focus { border-color: var(--k-blue) !important; outline: 2px solid var(--k-blue); outline-offset: 0; }
.k-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.k-form-error { flex: 1 1 100%; margin: 0; font-size: 14px; color: #B42318; }
[data-k-form-done]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}