/* Tokens from the Stilguide in design/Bergso.no redesign project.zip */
:root {
  --blekk: #161514;
  --bronse: #8a6a3f;
  --tekst-2: #4a4742;
  --graa: #6b6862;
  --linje: #e6e3dd;
  --hvit: #ffffff;
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Karla', Helvetica, Arial, sans-serif;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/spectral-300-latin.woff2) format('woff2');
}

/* Karla is a variable font: one file covers 300 and 400 */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/karla-latin.woff2) format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--hvit);
  color: var(--blekk);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blekk); text-decoration: none; }
a:hover { color: var(--bronse); }

input, textarea, button { font: inherit; }

.side {
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Safe-area insets keep content clear of the notch in landscape (needs viewport-fit=cover) */
  padding:
    max(clamp(24px, 4vw, 56px), env(safe-area-inset-top))
    max(clamp(20px, 5vw, 72px), env(safe-area-inset-right))
    max(clamp(24px, 4vw, 56px), env(safe-area-inset-bottom))
    max(clamp(20px, 5vw, 72px), env(safe-area-inset-left));
}

.logo { height: 40px; width: auto; display: block; }
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Logo as home link on sub-pages: 2px invisible padding lifts the tap target to 44px */
header .hjem { display: inline-block; padding: 2px 0; margin: -2px 0; }

/* Buttons — Stilguide «Knapper og lenker»: pill, 36px standard, 46px (Medium) on touch.
   Secondary = 1px ink border, transparent; hover bronze. Keeps «Send» the only primary. */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  touch-action: manipulation;
}
.knapp--sekundaer { border: 1px solid var(--blekk); color: var(--blekk); }
.knapp--sekundaer:hover { border-color: var(--bronse); color: var(--bronse); }
.knapp:focus-visible { outline: 1px solid var(--blekk); outline-offset: 3px; }
@media (pointer: coarse) {
  .knapp { height: 46px; padding: 0 22px; font-size: 15px; }
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  /* Design: 80px. Scales down on short phone screens so the form sits closer to the fold */
  padding: clamp(40px, 8vh, 80px) 0;
}

.etikett {
  margin: 0 0 24px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--bronse);
}

h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.1;
  margin: 0 0 28px;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.ingress {
  margin: 0;
  font-size: 18px;
  max-width: 480px;
  color: var(--tekst-2);
}

/* Form: markup and measures from «Forside midlertidig» in the design zip */
.skjema {
  display: grid;
  gap: 8px;
  max-width: 480px;
  margin-top: 40px;
}

.skjema .rad {
  display: grid;
  /* Design: minmax(150px). 200px stacks Navn/E-post as full-width fields on phones */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.skjema input,
.skjema textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--linje);
  background: var(--hvit);
  color: var(--blekk);
  font-size: 14px;
  font-weight: 300;
  outline: none;
}

.skjema input { height: 42px; padding: 0 18px; border-radius: 999px; }
.skjema textarea { padding: 12px 18px; border-radius: 20px; resize: none; line-height: 1.5; }
.skjema input:focus,
.skjema textarea:focus { border-color: var(--blekk); }
.skjema ::placeholder { color: var(--graa); opacity: 1; }
.skjema button {
  height: 36px;
  padding: 0 18px;
  background: var(--blekk);
  color: var(--hvit);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  touch-action: manipulation;
}
.skjema button:hover { background: var(--bronse); }
.skjema button:focus-visible { outline: 1px solid var(--blekk); outline-offset: 3px; }
.skjema button:disabled { background: var(--graa); cursor: default; }

/* Touch: fields and button use the Stilguide's Medium size (46px, «skjema og kort») so every
   target clears 44px, and fields are 16px because iOS Safari zooms into anything smaller */
@media (pointer: coarse) {
  .skjema input,
  .skjema textarea { font-size: 16px; }
  .skjema input { height: 46px; padding: 0 22px; }
  .skjema textarea { padding: 13px 22px; }
  .skjema button { height: 46px; padding: 0 26px; font-size: 15px; }
}

.kvittering,
.feil {
  margin: 0;
  color: var(--tekst-2);
  font-size: 16px;
  border-top: 1px solid var(--blekk);
  padding-top: 20px;
}
.kvittering { max-width: 480px; margin-top: 40px; outline: none; }
.feil { margin-top: 12px; }
.feil a { border-bottom: 1px solid var(--blekk); }

.skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--graa);
  border-top: 1px solid var(--linje);
  padding-top: 20px;
}
/* /janfrode: HubSpot Meetings calendar. The iframe reports its own height (kalender.js).
   Starting size is HubSpot's own embed default (756px, min 615px). */
.side--kalender main { max-width: 1040px; }
.kalender { margin-top: 12px; }
.kalender iframe {
  display: block;
  width: 100%;
  height: 756px;
  min-height: 615px;
  border: 0;
}
/* HubSpot's calendar needs ~312px; on phones it bleeds to the screen edge instead of scrolling sideways */
@media (max-width: 480px) {
  .kalender { margin-inline: calc(-1 * clamp(20px, 5vw, 72px)); }
}
.reserve { margin: 24px 0 0; font-size: 14px; color: var(--graa); }
/* Underline via text-decoration (a border would follow the invisible tap padding) */
.reserve a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* Invisible padding gives the e-mail link a 44px tap target without moving the layout */
footer a { display: inline-block; padding: 12px 0; margin: -12px 0; }