/* Hjemmet's look, from the design manual in ai-backend: the logo red
   (#e20612), the "always in Hjemmet" navy, blue and badge yellow, Figtree
   for Hjemmet's Vito, Roboto Condensed for its condensed headlines, Oswald
   for the badge and Caveat for the handwriting. Large type (20px and up),
   large targets and hints in plain view: most readers are well over 60 and on
   a phone. */

@font-face { font-family: "Figtree"; src: url(/fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(/fonts/roboto-condensed.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Oswald"; src: url(/fonts/oswald.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(/fonts/caveat.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --red: #e20612;
  --red-dark: #b0040d;
  --navy: #1b2c6c;
  --blue: #2399d0;
  --yellow: #fbdb3b;
  --ink: #1f1d1b;
  --muted: #5d5853;
  --line: #8d8780;
  --soft-line: #e6dfd5;
  --paper: #f5efe6;
  --card: #fff;
}

* { box-sizing: border-box; }
html { font-size: 125%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 42rem; margin: 0 auto; padding: 16px 16px 40px; }
[hidden] { display: none !important; }
a { color: var(--navy); text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

.card {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  padding: 24px 20px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgb(70 45 20 / .08), 0 6px 18px rgb(70 45 20 / .06);
}
.card:first-child { margin-top: 0; }

h1, h2 { font-family: "Roboto Condensed", Figtree, sans-serif; font-weight: 800; color: var(--navy); line-height: 1.1; }
h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); margin: 0 0 .6em; }
h2 { font-size: 1.3rem; margin: 0 0 18px; }
p { margin: 0 0 .8em; }

/* The magazine's logo with the anniversary written under its right end */
.masthead { text-align: center; padding: 22px 20px 34px; }
.logo { position: relative; display: inline-block; width: min(100%, 400px); }
.logo img { display: block; width: 100%; height: auto; }
.years {
  position: absolute;
  right: -2%;
  bottom: -30%;
  font: 600 clamp(1.7rem, 8.5vw, 2.6rem)/1 Caveat, cursive;
  color: #111;
  transform: rotate(-5deg);
  white-space: nowrap;
}

.intro { border-top: 8px solid var(--red); padding-top: 28px; }
.intro h1 { padding-right: 92px; }
.deadline { font-weight: 700; margin-top: 1.2em; }
.required-note { color: var(--muted); font-size: .9rem; margin: 1.2em 0 0; }
.req { color: var(--red); font-weight: 700; }

/* Hjemmet's yellow bomb with black words */
.badge {
  position: absolute;
  top: -26px;
  right: -6px;
  width: 104px;
  height: 104px;
  font-size: 16px;
  border-radius: 50%;
  background: var(--yellow);
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Oswald, "Roboto Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  transform: rotate(9deg);
  box-shadow: 0 4px 12px rgb(0 0 0 / .18);
}
.badge small { font-size: 13px; letter-spacing: .05em; margin-bottom: 3px; }
.badge strong { font-weight: 600; font-size: 21px; }

.field { margin-top: 22px; }
h2 + .field, h2 + .row .field { margin-top: 0; }
label { display: block; font-weight: 700; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: .9rem; margin: -2px 0 8px; }
.how { font-weight: 600; background: var(--paper); border-radius: 10px; padding: 12px 14px; margin: 1.2em 0 0; }

input[type="text"], input[type="email"], input[type="tel"] {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 10px;
  appearance: none;
}
input.short { max-width: 8rem; }
input:focus { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--navy); }
input[aria-invalid="true"] { border-color: var(--red); background: #fff5f5; }

.error { color: var(--red-dark); font-weight: 700; margin: 8px 0 0; }
.form-error { margin: 20px 0 0; }
.error:empty { display: none; }
.error::before { content: "! "; }

.row { display: flex; gap: 12px; margin-top: 22px; }
.row .field { margin-top: 0; }
.row .postnr { flex: 0 0 7.4rem; }
.row .sted { flex: 1 1 auto; min-width: 0; }

/* Checkboxes as big tick boxes, the whole row a target */
.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 14px;
  border: 2px solid var(--soft-line);
  border-radius: 12px;
  font-weight: 500;
  cursor: pointer;
}
.check input {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
  appearance: none;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 7px;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.check input::after {
  content: "";
  width: 17px;
  height: 9px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: translateY(-2px) rotate(-45deg);
  opacity: 0;
}
.check input:checked { background: var(--navy); border-color: var(--navy); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.check input[aria-invalid="true"] { border-color: var(--red); }
.check span { padding-top: 3px; }
/* Ticked is navy: red is kept for what is wrong */
.check:has(input:checked) { border-color: var(--navy); }
.gift { background: #fffae0; border-color: #f2d23a; }
.consent { margin: 24px 0 0; }
.consent + .field { margin-top: 12px; }

.submit {
  display: block;
  width: 100%;
  min-height: 62px;
  margin-top: 24px;
  padding: 0 40px;
  font: 800 1.4rem/1 "Roboto Condensed", Figtree, sans-serif;
  letter-spacing: .02em;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--red-dark);
  cursor: pointer;
}
.submit:hover { background: #cc0510; }
.submit:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-dark); }
.submit:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.submit:disabled { opacity: .75; cursor: progress; }

.trap, .sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.footer { margin-top: 28px; text-align: center; font-size: .85rem; color: var(--muted); }

.thanks .script { font: 600 3.2rem/1 Caveat, cursive; color: var(--red); margin: 0 0 .15em; transform: rotate(-3deg); transform-origin: left; }
.thanks h1 { padding-right: 0; }

@media (min-width: 640px) {
  main { padding-top: 32px; }
  .card { padding: 32px 36px; }
  .intro { padding-top: 36px; }
  .intro h1 { padding-right: 96px; }
  .badge { top: -34px; right: -24px; width: 120px; height: 120px; }
  .badge small { font-size: 15px; }
  .badge strong { font-size: 24px; }
  .submit { width: auto; }
}