@import "tokens/fonts.css";
@import "tokens/layout.css";

/* Gruppe 7 (28.09.2026): migrationen er afsluttet. Repo-scan: 0 referencer til udfasede tokens,
   klasser eller hex-værdier i Saldi Website.dc.html og tokens/layout.css. De gamle filer
   colors/typography/spacing/radius/shadows/motion/cards.css importeres ikke længere
   (filerne ligger urørte til reference; checkpoints/G7 viser tilstanden før afviklingen).
   saldi-v1.css (v1.0.2) er eneste token-kilde. */
@import "tokens/v1/saldi-v1.css";
@import "tokens/v1/saldi-v1-dark.css";
/* Bredt layout, én topbar og glas. Virker under html[data-layout="wide"], som [2026-10-28] er sat på alle sider. */
@import "tokens/v1/saldi-v1-glass.css";
@import "tokens/accounting.css";
@import "tokens/products.css";
@import "tokens/about.css";
@import "tokens/support.css";
@import "tokens/site-rhythm.css";
@import "tokens/glass-cards.css";
@import "tokens/changelog.css";

/* Callback form on the contact page: the intro text on the left and the form on the right, using the width the adviser card
   left behind (2026-11-06). One column at 900px and below, the same breakpoint as .split. */
.callback-layout { scroll-margin-top: 90px; }
.callback-intro { max-width: 52ch; }
.callback-intro__h {
  margin: var(--space-8) 0 0;
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}
/* The three steps: compact rows with a small icon tile, same tint as .mod-card__icon. */
.callback-steps { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.callback-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.callback-steps__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: var(--surface-tint-purple);
  color: var(--color-purple-ink);
}
.callback-steps strong { display: block; font-size: var(--type-body); font-weight: 600; line-height: 1.4; color: var(--color-text-strong); }
.callback-steps p { margin: 2px 0 0; font-size: var(--type-small); line-height: 1.55; color: var(--color-text-body); }
/* "Vil du hellere ringe til os?": set apart by a quiet divider. */
.callback-phone { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-divider); }
.callback-phone .callback-intro__h { margin-top: 0; }
.callback-phone p { margin: var(--space-2) 0 0; font-size: var(--type-body); line-height: 1.65; color: var(--color-text-body); }
.callback-phone a { color: var(--color-link); font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.callback-phone a:hover { color: var(--color-link-hover); }
/* The form column's heading ("Bliv ringet op") is for screen readers only, so the form doesn't fall under the phone heading. */
.callback-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.callback-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-12);
  align-items: start;
  min-width: 0;
}
.callback-main > * { min-width: 0; }
.callback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* Stacked, the form follows the phone block: keep the break larger than the intro's own (32px) so it reads as a new part. */
@media (max-width: 900px) {
  .callback-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
}
.callback-form fieldset {
  padding: var(--space-5) 0 !important;
  border-top: 1px solid var(--border-divider) !important;
  border-bottom: 1px solid var(--border-divider) !important;
}
.callback-topics { display: grid; gap: var(--space-1); }
.callback-topic {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--type-body);
  color: var(--color-text-strong);
  cursor: pointer;
}
.callback-topic input { accent-color: var(--color-purple); width: 20px; height: 20px; margin: 0; flex: none; }
.callback-time {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-text-strong);
  background: var(--surface-default);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
}
.callback-time:focus-visible, .callback-topic input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* Phones: more room in the closed select (the long "Fleksibel – ring når det passer jer" fits from 390px; narrower phones cut
   its last letters until the list is opened) and a taller message box so its help text (the placeholder) isn't clipped.
   The font stays at 16px so iOS doesn't zoom in on focus. */
@media (max-width: 640px) {
  .callback-time { padding-left: var(--space-3); padding-right: var(--space-1); }
  .callback-form textarea { height: 12.5rem; }
}
@media (max-width: 359px) {
  .callback-form textarea { height: 15.5rem; }
}