/* The Green Log: startsektion. Alle klasser starter med .glq / .gl- så de ikke rammer temaet. */

/* ---------- Grøn sektion (statisk) ---------- */
/* --fullbleed-bg er temaets egen grønne (defineret i style.css's .fullbleed-
   regel); vi genbruger den værdi i stedet for at definere vores egen grønne,
   med samme hex som fallback for det tilfælde, blokken ikke ligger i en
   .fullbleed-sektion (variablen er så ikke sat). */
.gl-start {
  background: var(--fullbleed-bg, #2E5438);
  min-height: 100svh; /* fallback, hvis blokken nogensinde ligger uden for en .fullbleed-sektion */
  -webkit-font-smoothing: antialiased;
}
/* Hvis sektionen lægges i en .fullbleed Layout Builder-sektion (temaets
   kant-til-kant-klasse, se style.css), genbruger vi dens farve-bleed-trick
   OG dens fulde-vindue-højde (min-height: 100svh) uændret — det giver en
   stabil sidelayout, hvor trin med mere/mindre indhold ikke rykker alt
   under sektionen op og ned. Vi ændrer kun lodret centrering til
   top-justering, så titlen og kortets top altid sidder samme sted, uanset
   hvor højt det aktive trin i spørgeskemaet er. */
.fullbleed:has(.gl-start) {
  align-items: flex-start;
}
.gl-start *, .gl-start *::before, .gl-start *::after { box-sizing: border-box; }
.gl-start-inner {
  /* Intet eget max-width: .gl-start fylder allerede sitets egen .container-
     bredde (via fullbleed-tricket ovenfor), så indholdet her flugter med
     modulerne/kortene i andre sektioner i stedet for at blive smallere
     centreret inden i den. */
  padding: 64px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px;
  align-items: start;
}
/* .trumpet (temaets "manchet"-klasse) sætter font-size/font-weight;
   vi tilføjer kun farve og margin oven på den, se nederst i filen. */
.gl-start-kicker.trumpet { color: #E3DC4E; margin-bottom: 12px; }
.gl-start-title {
  /* font-size/weight kommer fra temaets generiske h2-skala (se typography.css) */
  line-height: 1.15;
  margin: 0 0 16px; color: #FFFFFF; text-wrap: pretty;
}
.gl-start-text {
  font-size: 15.5px; line-height: 1.65; color: #DCE5D8;
  margin: 0 0 28px; max-width: 26em;
}

/* ---------- Hvid boks (spørgeskemaet) ---------- */
.glq {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  overflow: hidden;
  color: #2C4157;
}
.glq button { font-family: inherit; }
.glq-wrap { overflow: hidden; transition: height .4s cubic-bezier(.65,0,.35,1); }
.glq-track {
  display: flex; width: 500%; align-items: flex-start;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.glq-slide {
  width: 20%;
  padding: 30px 30px 28px;
  height: 0; overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .45s;
}
.glq-slide.is-active { height: auto; visibility: visible; transition: none; }

.glq-kicker.trumpet { color: #7E721A; margin-bottom: 10px; }
.glq-h {
  /* font-size/weight kommer fra temaets generiske h3-skala (se typography.css) */
  line-height: 1.2; margin: 0 0 6px; color: #2C4157;
}
.glq-h--start { margin-bottom: 12px; text-wrap: pretty; }
.glq-h--rec { margin-bottom: 10px; }
.glq-sub { font-size: 14px; line-height: 1.55; color: #5A655E; margin: 0 0 20px; }
.glq-sub--rec { color: #4A564E; margin-bottom: 16px; }
.glq-count { color: #2C4157; }

/* Svarmuligheder */
.glq-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.glq-list { display: grid; gap: 10px; }
.glq-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.glq-opt {
  cursor: pointer; text-align: left;
  background: #FFFFFF; color: #2C4157;
  border: 1px solid #C5CCC4; border-radius: 2px;
  font-weight: 600;
  transition: background .15s ease;
}
.glq-opt.is-on { background: var(--fullbleed-bg, #2E5438); color: #FFFFFF; border-color: var(--fullbleed-bg, #2E5438); }
.glq-opt--radio { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; }
.glq-opt--chip { padding: 8px 12px; font-size: 13px; line-height: 1.35; }
.glq-opt.is-full { opacity: .4; cursor: not-allowed; }
.glq-opt-label { flex: 1; }
.glq-mark {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #AEB8AF; background: transparent;
}
.glq-opt.is-on .glq-mark { border-color: #E3DC4E; background: #E3DC4E; }

/* Anbefaling */
.glq-recs { display: grid; gap: 14px; margin: 0 0 14px; }
.glq-rec { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.glq-tile {
  flex: none; width: 112px; aspect-ratio: 224 / 256; position: relative;
  background: #FFFFFF; border: 1px solid #D6D9D6; border-radius: 4px;
  box-shadow: 2px 3px 6px rgba(0,0,0,.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 8px;
}
.glq-tile-dot {
  position: absolute; top: 8px; right: 8px;
  width: 13px; height: 13px; border-radius: 50%; background: #E1E8E0;
}
.glq-tile-icon { width: 46%; max-width: 64px; height: auto; display: block; }
.glq-tile-title {
  font-size: 13.5px; line-height: 1.3; text-align: center;
  color: #8F3639; hyphens: manual;
}
.glq-rec-text {
  flex: 1 1 auto; min-width: 0; padding-top: 4px;
  font-size: 13.5px; line-height: 1.55; color: #2F4859;
}

.glq-more {
  position: relative; margin: 0 0 22px; overflow: hidden;
  border: 1px dashed #C5CCC4; border-radius: 2px;
}
.glq-more-blur {
  display: grid; gap: 8px; padding: 12px 14px;
  filter: blur(3.5px); opacity: .55; user-select: none;
  font-size: 14px; font-weight: 700; color: #2C4157;
}
.glq-more-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #2C4157;
}
.glq-pill {
  display: inline-block; white-space: nowrap; line-height: 1.35;
  background: #FFFFFF; padding: 5px 12px;
  border-radius: 999px; border: 1px solid #C5CCC4;
}

.glq-cta, .glq-cta:link, .glq-cta:visited {
  display: inline-flex;
  background: #E3DC4E; color: #2C3A1E;
  padding: 13px 26px; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  text-decoration: none;
}
.glq-cta:hover, .glq-cta:focus { background: #D6CF3F; color: #2C3A1E; text-decoration: none; }
.glq-trial { font-size: 12.5px; color: #6B756E; margin-top: 10px; }

/* Bundlinje */
.glq-bar {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 0 30px 26px; min-height: 67px;
}
.glq-bar [hidden] { display: none !important; }
.glq-back {
  cursor: pointer; background: none;
  border: 1.5px solid #9AA59C; color: #3E4A44;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
}
.glq-next {
  cursor: pointer; border: none;
  background: #E3DC4E; color: #2C3A1E;
  padding: 11px 24px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.glq-next:disabled { background: #E5E9E2; color: #8A948C; cursor: not-allowed; }
.glq-restart {
  cursor: pointer; background: none; border: none; padding: 0;
  color: #5A655E; font-size: 13px; font-weight: 600;
  text-decoration: underline; white-space: nowrap;
}
.glq-prog {
  margin-left: auto; flex: 0 1 140px; min-width: 80px; height: 10px;
  border-radius: 999px; background: #DCE0DA; overflow: hidden;
}
.glq-prog-fill {
  height: 100%; width: 0; border-radius: 999px; background: var(--fullbleed-bg, #2E5438);
  transition: width .45s cubic-bezier(.65,0,.35,1);
}


.glq-tile-title { overflow-wrap: anywhere; max-width: 100%; }
.glq-rec-title { display: none; }

/* ---------- Mobil: ét fast design i 375px, som skaleres til telefonens bredde ---------- */
@media (max-width: 599px) {
  .gl-start { overflow: hidden; }
  .gl-start-inner {
    width: 375px; max-width: none; margin: 0;
    padding: 48px 20px 52px;
    grid-template-columns: 1fr; gap: 28px;
    transform-origin: 0 0;
  }
  .gl-start-kicker { margin-bottom: 12px; }
  .gl-start-title { margin-bottom: 14px; }
  .gl-start-text { font-size: 15.5px; margin: 0; max-width: none; }

  .glq-slide { padding: 24px 20px 22px; }
  .glq-sub { font-size: 14px; }
  .glq-opt--radio { font-size: 15px; }
  .glq-opt--chip { font-size: 13px; }

  .glq-bar { padding: 0 20px 22px; flex-wrap: wrap; row-gap: 16px; }
  .glq-prog { order: -1; flex: 1 1 100%; margin-left: 0; height: 6px; }

  /* Anbefalinger på mobil: lille ikonkort + titel på én linje, teksten i fuld bredde under */
  .glq-recs { gap: 0; margin-bottom: 18px; }
  .glq-rec {
    display: grid; grid-template-columns: 56px 1fr;
    column-gap: 14px; row-gap: 10px; align-items: center;
    padding: 16px 0; border-bottom: 1px solid #E3E8E0;
  }
  .glq-rec:first-child { padding-top: 4px; }
  .glq-tile { width: 56px; aspect-ratio: 1; padding: 0; gap: 0; border-radius: 4px; box-shadow: 1px 2px 4px rgba(0,0,0,.18); }
  .glq-tile-title { display: none; }
  .glq-tile-icon { width: 28px; max-width: 28px; }
  .glq-tile-dot { width: 8px; height: 8px; top: 5px; right: 5px; }
  .glq-rec-title {
    display: block;
    font-weight: 700;
    font-size: 17px; line-height: 1.25; color: #2C4157;
  }
  .glq-rec-text { grid-column: 1 / -1; padding-top: 0; font-size: 14px; line-height: 1.6; }
}