/* Tomter Vel — the look of the vel's old site over portal's stylesheet.
   Loaded after portal's main.css (site.yaml `stylesheet`), so these
   rules win. The old site was Tachyons on a washed-yellow page
   (#fffceb) with black text, one blue (#1785c2, "vel-blue") for the
   banner and footer, light-yellow (#fbf1a9) link hovers, and a title
   banner set at a slight skew. The recolour rides portal's own custom
   properties; the banner and hover do the rest. */

:root {
  color-scheme: light;

  --accent: #1785c2;
  --accent-soft: rgba(23, 133, 194, 0.14);

  --paper: #fffceb;
  --ink: #111111;
  --ink-dim: #4f4a3a;
  --line: #e6dfbf;

  --card-bg: rgba(255, 255, 255, 0.6);
  --card-bg-opaque: rgba(255, 255, 255, 0.94);
  --card-shadow: rgba(23, 133, 194, 0.12);
  --hero-glow: rgba(255, 252, 235, 0.9);

  --error: #ff4136;

  --sans: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --heading: var(--sans);
}

body {
  background: var(--paper);
  color: var(--ink);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Wordmark above, then the question: stacked, so the skewed banner
   never runs into the wordmark. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.hero-copy .wordmark { order: 0; }
.hero-copy h1 { order: 1; }
.hero-copy p { order: 2; }

/* The page's question sits in a vel-blue banner at the same slight
   skew as the title on the old site. */
.hero-copy h1 {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  padding: 0.35em 0.8em;
  transform: skewY(1.5deg) rotate(-1.5deg);
  transform-origin: top right;
}

/* Links: bold, black, and a light-yellow wash on hover, as on the
   original's nav. */
a {
  font-weight: 700;
  color: var(--ink);
  transition: background-color 160ms;
}
a:hover {
  background-color: #fbf1a9;
}
/* Lenkene som ser ut som knapper (portalens .alt-submit: «Til
   medlemskap», «Meld fra») fikk den gule vasken fra a:hover over den
   blå bakgrunnen, med papirhvit tekst som forsvant i gult. Nå har de
   samme mørkeblå svar som ekte knapper når musa er over, og en pil
   etter teksten: en knapp gjør noe, en lenke går et sted. Pilen gjør
   portal 0.13 selv; regelen for den kan fjernes når vel-et kjører den. */
a.alt-submit:hover {
  background-color: #14699a;
  color: var(--paper);
}
a.alt-submit::after {
  content: "\00a0\2192";
}
.wordmark, .wordmark:hover {
  background: none;
  opacity: 1;
}
.wordmark img {
  height: 2.6rem;
}

/* Card headings in the blue; the alternatives read as the committee
   cards on the old site. */
.alt-card h2 {
  color: var(--accent);
}

/* Buttons in the blue with washed-yellow text, no gradients. */
button, .button, input[type="submit"] {
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-weight: 700;
}
button:hover, .button:hover, input[type="submit"]:hover {
  background: #14699a;
}

/* Example answers in a field read as examples: a warm grey at about
   3:1 against the field, well below the near-black of what a person
   types (18:1). Portal's own rule uses --ink-dim, which on this skin
   is almost as dark as the text. Same selectors as portal's, so the
   rich-text fields match the plain ones. */
::placeholder,
.prosekit-editor .prosekit-placeholder::before,
.prosekit-editor.prosekit-placeholder::before {
  color: #9b9478;
  opacity: 1;
}

/* The still map under a question (`place:`): in the middle with the
   rest of the question, not against the left edge of the screen. */
.question-place {
  width: min(24rem, calc(100% - 2rem));
  margin: 0.8rem auto 0;
  text-align: center;
}

/* Kartet på forsiden går kant i kant: portalens .hero er en smal,
   polstret spalte, så kartet fikk marg over og på sidene. Spalten
   flyttes inn til teksten under, og kartet får hele bredden. */
.hero.hero-module {
  max-width: none;
  padding: 0 0 2.5rem;
}
.hero.hero-module .hero-copy {
  box-sizing: border-box;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* Ordmerket står til venstre, i flukt med innholdet under, og
   innloggingen til høyre på samme linje. */
.hero.hero-module .hero-top {
  justify-content: space-between;
}
.hero.hero-module .hero-top .session {
  position: static;
  transform: none;
}

/* Forsiden: ordmerket og innloggingen øverst, over kartet, og
   spørsmålet i det blå båndet løftet litt opp over kartets nedre
   kant, der kartet allerede glir over i siden. */
.hero.hero-module {
  position: relative;
}
.hero.hero-module .hero-copy .hero-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  box-sizing: border-box;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}
/* En tynn hinne av sidens farge øverst på kartet, så ordmerket og
   «Logg inn» leses over gatene. */
.hero.hero-module .hero-piece::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6rem;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--paper, #fffceb) 15%, transparent);
}
.hero.hero-module .hero-copy h1 {
  position: relative;
  z-index: 2;
  margin-top: -3.5rem;
}