/* 1433 HR – felles kontaktblokk (velg tidspunkt eller send melding).
   Brukes på mørk bakgrunn: forsiden, Kontakt, Interim HR og AQS.
   Markup: .ks (wrapper) med .ks-book og form.ks-form. Oppførsel i /kontakt-skjema.js. */

.ks{display:grid;gap:20px;align-content:start;min-width:0}
.ks-book{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px;border-radius:20px;background:var(--ink2,#12302C);border:1px solid var(--line-d,#2A4743)}
.ks-book p{margin:0;max-width:340px;font-size:16px;line-height:1.5;color:var(--on-d2,#C9D8D4)}
.ks-book strong{display:block;margin-bottom:2px;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--on-d,#F7F9F8)}
.ks-book .btn{flex:none}
.ks-or{display:flex;align-items:center;gap:14px;margin:4px 0 0;font-family:var(--mono);font-size:13px;color:var(--on-d3,#93AAA5)}
.ks-or::before,.ks-or::after{content:"";flex:1;height:1px;background:var(--line-d,#2A4743)}

.ks-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.ks-form .full{grid-column:1/-1}
.ks-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ks-form .ks-field label,.ks-legend{display:block;margin:0;font-size:14px;line-height:1.4;font-weight:500;color:var(--on-d2,#C9D8D4)}
.ks-field label span,.ks-legend span{font-weight:400;color:var(--on-d3,#93AAA5)}
.ks-form input[type="text"],.ks-form input[type="email"],.ks-form input[type="tel"],.ks-form textarea{width:100%;min-width:0;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-d2,#3B5651);background:var(--ink2,#12302C);color:var(--on-d,#F7F9F8);font:inherit;font-size:16px}
.ks-form textarea{min-height:110px;resize:vertical}
.ks-form ::placeholder{color:var(--on-d3,#93AAA5)}
.ks-form input:focus,.ks-form textarea:focus{outline:none;border-color:var(--lamp,#F2B84B)}
.ks-form input:focus-visible,.ks-form textarea:focus-visible{outline:3px solid var(--lamp,#F2B84B);outline-offset:2px}

.ks-topic{border:0;margin:0;padding:0;min-width:0}
.ks-legend{margin:0 0 10px;padding:0}
.ks-pills{display:flex;flex-wrap:wrap;gap:8px}
.ks-form .ks-pills label{position:relative;display:inline-flex;flex-direction:row;gap:0}
.ks-pills input{position:absolute;opacity:0;width:1px;height:1px}
.ks-pills span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-d2,#3B5651);color:var(--on-d2,#C9D8D4);font-size:15px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ks-pills label:hover span{border-color:var(--on-d3,#93AAA5);color:var(--on-d,#F7F9F8)}
.ks-pills input:checked+span{background:var(--lamp,#F2B84B);border-color:var(--lamp,#F2B84B);color:var(--ink,#0B1F1D)}
.ks-pills input:focus-visible+span{outline:3px solid var(--lamp,#F2B84B);outline-offset:2px}

.ks-note{margin:0;font-size:14px;line-height:1.55;color:var(--on-d3,#93AAA5)}
.ks-note a{color:var(--on-d2,#C9D8D4);text-decoration:underline;text-underline-offset:2px}
.ks-form button[type="submit"]{justify-self:start;border:0}
.ks-form button[disabled]{opacity:.7;cursor:progress;transform:none}

@media (max-width:640px){
  .ks-form{grid-template-columns:minmax(0,1fr)}
  .ks-book{padding:20px}
  .ks-book .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.ks-pills span{transition:none}}