/* === Tilmelding – “crème de la crème” ===
   Farver fra sitet:
   Brun: #5F5144; Rød: #C27854; Grøn: #CBE2D6; Grå: #E8E6DF; Baggrund: knækket hvid
*/
:root{
  --col-brun:#5F5144;
  --col-rod:#C27854;
  --col-gron:#CBE2D6;
  --col-gra:#E8E6DF;
  --bg:#F7F6F2;
  --ink:#2B2A28;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

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

.tilm-main{
  padding: clamp(16px, 2.5vw, 32px);
  display:grid;
  gap:24px;
}

.tilm-hero{
  text-align:center;
  background:linear-gradient(180deg, var(--col-gron), #fff);
  border:1px solid var(--col-gra);
  border-radius:var(--radius);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow);
}
.tilm-hero h1{
  margin:0 0 6px;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  color: var(--col-brun);
  letter-spacing:.2px;
}
.tilm-sub{
  margin:0;
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color:#574e45;
}

.form-card{
  width:min(950px, 92vw);
  margin-inline:auto;
  background:#fff;
  border:1px solid var(--col-gra);
  border-radius:var(--radius);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow);
}

.tilm-fieldset{
  border:none;
  padding:0;
  margin:0 0 18px;
}
.tilm-fieldset > legend{
  font-weight:700;
  color:var(--col-brun);
  margin-bottom:10px;
  padding-bottom:4px;
  border-bottom:2px solid var(--col-gra);
}

.grid{
  display:grid;
  gap:14px 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .col-span-2{ grid-column: span 2; }
}

.form-control{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-control label{
  font-weight:600;
}
.form-control .hint{
  font-weight:400;
  color:#6a6a6a;
  margin-left:.3ch;
  font-size:.9em;
}

input[type="text"],
input[type="email"],
select,
textarea{
  appearance:none;
  border:1px solid #d7d5cf;
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  font-size:1rem;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{ resize:vertical; }

input:focus,
select:focus,
textarea:focus{
  border-color: var(--col-rod);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-rod) 20%, transparent);
}

/* HTML5 fejltilstande */
input:required:invalid,
select:required:invalid{
  background: #fff7f6;
  border-color: #e8b1a3;
}

/* Checkbox stil */
.consent{
  padding:12px 0 6px;
}
.checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.35;
}
.checkbox input{
  width:18px; height:18px;
  margin-top:3px;
  accent-color: var(--col-rod);
}

/* Knapper */
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border .15s ease;
  text-decoration:none;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--col-rod);
  color:#fff;
  box-shadow: 0 6px 18px rgba(194,120,84,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }

.btn-ghost{
  background:#fff;
  color: var(--col-brun);
  border-color: var(--col-gra);
}
.btn-ghost:hover{
  background: var(--col-gron);
  border-color: color-mix(in srgb, var(--col-brun) 25%, var(--col-gra));
}

/* Note under knapper */
.form-note{
  margin-top:4px;
  color:#6a6a6a;
  font-size:.95rem;
}

/* Små tweaks til menu/footer afstande hvis nødvendigt */
#menu-container + .tilm-main{ margin-top: clamp(8px, 1.5vw, 14px); }

/* === Stabil header uanset andre sider === */

/* Lås basis typografi, så andre css-filer ikke skruer på rem/line-height */
.site-header {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;          /* fast base for headeren */
  line-height: 1.3;         /* stabil højdeværdi */
}

/* Undgå 1px “ryk” når .scrolled slår til: samme border-højde hele tiden */
.site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--gra) 70%, transparent);
}
.site-header.scrolled {
  border-bottom-color: color-mix(in srgb, var(--gra) 90%, transparent);
}

/* Sørg for at dekorationslinjer/understreger ikke påvirker højde */
.site-header .nav-link::after { pointer-events: none; }

/* Globalt: hold layout stabilt når scrollbars dukker op/forsvinder */
html { scrollbar-gutter: stable both-edges; }




/* === Køn-select: samme look som inputs === */
.form-card select,
.form-card select#kon{
  /* match inputs */
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #F7F6F2 !important;
  border: .8px solid var(--col-rod) !important;
  border-radius: 16px !important;
  padding: 12px 40px 12px 14px !important; /* ekstra plads til pilen */
  font: inherit !important;
  font-size: .75rem !important;
  line-height: 1.0 !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease !important;

  /* sikkerhed mod “mikro/prik”-tekst */
  -webkit-text-fill-color: #222 !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  font-feature-settings: normal !important;
  -webkit-text-security: none !important;

  /* højde som dine andre felter */
  min-height: 38px;
}

/* fokus/fejl-stil – samme som inputs */
.form-card select:focus{
  border-color: var(--col-rod) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-rod) 20%, transparent) !important;
}
.form-card select:required:invalid{
  background:#fff7f6 !important;
  border-color:#e8b1a3 !important;
}

/* pil (chevron) uden ekstra HTML */
.form-card select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--col-brun) 50%),
    linear-gradient(135deg, var(--col-brun) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 2.4rem) 0;
  background-size: 6px 6px, 6px 6px, 1.9rem 100%;
  background-repeat: no-repeat;
}
.form-card select::-ms-expand{ display:none; } /* gammel IE/Edge */

/* option-tekst også normal */
.form-card select option{
  font: inherit !important;
  color: #222 !important;
}