/* ==========================================================
   KarriereGuiden – Erhvervspraktik (CLEAN CSS WITH HEADER IMAGES)
   Date: 2025-08-31
   NOTE: Replace your includes/style.css with this file.
   It keeps your existing look, progress bubble, and job cards,
   and guarantees that the question header image (var(--kg-qimg))
   is visible.
   ========================================================== */

/* Base wrapper */
#kg-quiz.kg-quiz-wrapper{
  --kg-accent: #f39c12;           /* accent til progress-boblen/knapper */
  --kg-header-height: 160px;      /* højde på billed-headeren */
   --kg-extra: 64px;               /* NY: ekstra luft under taleboblen */
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* Progress bar + bubble */
#kg-quiz .kg-progress{ height:10px; background:#eee; border-radius:6px; overflow:visible; margin:10px 0 18px; position:relative; }
#kg-quiz .kg-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,#ff7a00,#ff9a3d); transition:width .35s ease; }
#kg-quiz .kg-progress-bubble{
  position:absolute; top:-38px; left:0%; transform:translateX(-50%);
  background:var(--kg-accent); color:#fff; font-weight:700; font-size:13px; line-height:1;
  padding:6px 8px; border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,.08);
  transition:left .35s ease; pointer-events:none;
}
#kg-quiz .kg-progress-bubble::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;
  border:6px solid transparent; border-top-color:var(--kg-accent);
}

/* Question card */
#kg-quiz fieldset.quiz-question{
  position:relative;
  border:0;
  background:#fff;
  border-radius:16px;
   padding: calc(var(--kg-header-height) + var(--kg-extra)) 24px 18px;
  margin: 0 0 24px 0;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Header image (drives by JS via --kg-qimg) */
#kg-quiz fieldset.quiz-question::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; height:var(--kg-header-height);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,0)),
    var(--kg-qimg, linear-gradient(135deg,#e9ecef,#dfe7ef));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:16px 16px 0 0;
  display:block;                 /* vigtigt: sikrer at pseudo-elementet tegnes */
  pointer-events:none;
  z-index:0;
}

/* Speech bubble with the question */
#kg-quiz fieldset.quiz-question > legend.kg-question-title{
  position:absolute; top: calc(var(--kg-header-height) - 44px);
  left:50%; transform:translateX(-50%);
  display:inline-block; max-width:min(720px, calc(100% - 48px));
  margin:0; padding:10px 14px; font-weight:800;
  font-size: clamp(18px, 2.2vw, 22px); text-align:center; color:#222;
  background:#ffa930; border-radius:14px; box-shadow:0 6px 14px rgba(0,0,0,.10); z-index:1;
}
#kg-quiz fieldset.quiz-question > legend.kg-question-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; border:2px solid transparent; border-top-color:#fff;
}

/* Options */
#kg-quiz .kg-options{ display:grid; grid-template-columns: 1fr; gap:8px 10px; }
@media (min-width:768px){ #kg-quiz .kg-options{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
#kg-quiz .kg-option{ display:flex; align-items:center; gap:8px; padding:8px; border:2px solid #d8e0b8; border-radius:10px; background:#f2f5e6; }
#kg-quiz .kg-option input{ transform:scale(1.15); }

/* Nav buttons */
#kg-quiz .kg-btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; }
#kg-quiz .kg-btn{ display:inline-block; width:100%; padding:12px 16px; border:none; border-radius:14px; cursor:pointer; font-weight:700; text-align:center; background:#7fa5ad; color:#fff; }
#kg-quiz .kg-btn.kg-prev{ background:#8f7f81; }
#kg-quiz .kg-btn.kg-show-results{ background:#ff7a00; }

/* Results title */
#kg-results{ margin-top:8px; }
#kg-results .kg-results-title{ font-size:32px; font-weight:900; margin:32px 0 14px; text-align:center; line-height:1.04; }
#kg-results .kg-results-title span{ display:block; line-height:1.04; }
#kg-results .kg-results-title br{ display:none; }

/* Location box */
#kg-quiz .kg-location-box{ background:#f2eee6; border:1px solid #e0d9cc; border-radius:12px; padding:16px; margin-bottom:18px; }
#kg-quiz .kg-location-title, #kg-quiz .kg-location-expl, #kg-quiz .kg-postnr-label{ text-align:center; }
#kg-quiz .kg-location-expl{ line-height:1.25; max-width:720px; margin:4px auto 10px; }
#kg-quiz .kg-location-actions{ display:flex; justify-content:center; }
#kg-quiz .kg-location-box .kg-btn, #kg-quiz .kg-postnr-row .kg-btn{ width:auto !important; }
#kg-quiz .kg-btn-geo{ background:#56b31d; }
#kg-quiz .kg-postnr{ text-align:center; }
#kg-quiz .kg-postnr-row{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:6px; }
#kg-quiz .kg-postnr-input{ height:28px; line-height:20px; padding:4px 8px; border:1px solid #bbb; border-radius:8px; text-align:center; width:8ch; max-width:120px; }

/* Jobs list */
#kg-jobs-list{ margin-left:12px; }
#kg-jobs-list .kg-job{ background:#fff; border:1px solid #ddd; border-radius:12px; padding:14px; margin:16px 0 20px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
#kg-jobs-list .kg-job h3{ font-size:22px; margin:0 0 6px; display:flex; align-items:center; gap:8px; }
#kg-jobs-list .kg-job h3:before{ content:"\27A4"; color:#56b31d; }
#kg-jobs-list .kg-job .kg-meta{ color:#666; margin-bottom:8px; }
#kg-jobs-list .kg-job h4{ margin:10px 0 6px; font-size:16px; }
#kg-jobs-list .kg-job ul{ margin:0 0 6px 18px; }

/* Link buttons */
#kg-jobs-list .kg-links{ margin-top:10px; margin-bottom:6px; display:flex; flex-wrap:wrap; gap:10px; }
#kg-jobs-list .kg-link-btn{ display:inline-block; padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none; color:#fff; background:#d65b8a; }

/* Se flere jobs */
#kg-more-jobs{ display:inline-block; margin:12px 0 26px; padding:10px 14px; border-radius:999px; text-decoration:none; background:#ff7a00; color:#fff; font-weight:700; margin-left:26px; }

/* Responsive */
@media (max-width:720px){
  #kg-quiz{ --kg-header-height: 130px; }
  #kg-quiz fieldset.quiz-question > legend.kg-question-title{ top: calc(var(--kg-header-height) - 44px); }
}
@media (max-width:600px){
  #kg-quiz .kg-ready-title{ margin-top:24px; }
}
@media (max-width:480px){
  #kg-results .kg-results-title{ font-size:28px; }
  #kg-jobs-list .kg-job h3{ font-size:20px; }
}

/* Ensure plugin styles win over theme resets */
#kg-quiz .kg-btn, #kg-quiz .kg-link-btn, #kg-quiz #kg-more-jobs{
  text-transform:none; letter-spacing:normal;
}
/* Guard: sørg for at det er denne padding-top der vinder */
#kg-quiz.kg-quiz-wrapper fieldset.quiz-question{
  padding-top: calc(var(--kg-header-height) + var(--kg-extra)) !important;
}
.kg-related{ font-size:.9rem; margin:.25rem 0 .5rem; opacity:.8 }

/* === RESULTS: layout grid på desktop === */
@media (min-width: 900px){
  #kg-jobs-list{
    display:grid; 
    grid-template-columns: repeat(2, minmax(340px, 1fr));
    gap: 18px 18px;
    margin-left: 0;          /* fjern venstre indryk */
  }
  #kg-jobs-list .kg-job{ margin:0; } /* kort hører til grid’et */
}

/* === RESULTS: job card polish === */
#kg-jobs-list .kg-job{
  background: linear-gradient(180deg, #fff, #fff), 
              radial-gradient(1200px 400px at 120% -20%, rgba(0,0,0,.03), transparent 60%);
  background-clip: padding-box;
  border:1px solid #e8e8e8;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* Titel-ikon (behold pilen på mobil) */
@media (min-width: 900px){
  #kg-jobs-list .kg-job h3:before{ content:""; width:0; } /* fjern ➤, vi viser watermark i stedet (se option B) */
}

/* === RESULTS: list styling uden bullets === */
#kg-jobs-list .kg-job ul{
  list-style: none;
  margin: 6px 0 6px 0;
  padding-left: 0;
}
#kg-jobs-list .kg-job li{
  margin: 4px 0;
  line-height: 1.35;
}

/* === RESULTS: meta som “chips” (uden at ændre HTML) === */
#kg-jobs-list .kg-job .kg-meta{
  display:flex; flex-wrap:wrap; gap:6px 8px;
}
#kg-jobs-list .kg-job .kg-meta{
  /* split via kommaer visuelt: lav faux chips */
}
#kg-jobs-list .kg-job .kg-meta::before{content:"";} /* guard */
#kg-jobs-list .kg-job .kg-meta{
  /* style hele linjen som chip-bånd */
  padding: 2px 0;
}
#kg-jobs-list .kg-job .kg-meta em, 
#kg-jobs-list .kg-job .kg-meta strong, 
#kg-jobs-list .kg-job .kg-meta span{
  background:#f4f0ea; 
  border:1px solid #e3ddd3; 
  border-radius:999px; 
  padding:3px 10px; 
  font-style:normal;
}
/* === 1) Knapper i bunden og fuld bredde, én pr. række === */
#kg-jobs-list .kg-job{
  display: flex;               /* gør kortet til en kolonne */
  flex-direction: column;
}
#kg-jobs-list .kg-job .kg-links{
  margin-top: auto;            /* skub knap-rækken ned i bunden af kortet */
  display: flex;
  flex-direction: column;      /* 3 rækker */
  gap: 14px;
  align-items: stretch;
}
#kg-jobs-list .kg-links .kg-link-btn{
  width: 100%;                 /* fuld bredde */
  min-height: 48px;            /* samme højde, også ved 2 linjers tekst */
  border-radius: 999px;        /* samme “pille”-form som din nederste */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* === 2) Mail-knap (den lille chip ved jobtitel) === */
/* Rammer hvis linket indeholder mail/mailto – ellers giv linket klassen .kg-link-mail */
#kg-jobs-list .kg-job h3 a[href^="mailto:"],
#kg-jobs-list .kg-job h3 a[href*="mail"],
#kg-jobs-list .kg-job h3 a.kg-link-mail{
  background: #c9fcdd !important;
  color: #073b1a !important;
  border: 1px solid #a8edc2 !important;
  border-radius: 999px;
  padding: 6px 12px;           /* gør chippen lidt mere tydelig */
  text-decoration: none;
}

/* === 3) Bundlink: “send alle jobs til mail” === */
#kg-results a[href^="mailto:"],
#kg-results a[href*="mail"],
#kg-results a.kg-link-mail{
  background: #c9fcdd !important;
  color: #073b1a !important;
  border: 1px solid #a8edc2 !important;
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
}
#kg-results a[href^="mailto:"]:hover,
#kg-results a[href*="mail"]:hover,
#kg-results a.kg-link-mail:hover{
  filter: brightness(.98);
}
/* === Mail-chip ved jobtitel (i h3) === */
/* Rammer et link ELLER knap som ligger direkte i h3 */
#kg-jobs-list .kg-job h3 > a,
#kg-jobs-list .kg-job h3 > button{
  background: #c9fcdd !important;
  color: #073b1a !important;
  border: 1px solid #a8edc2 !important;
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Små hover/focus-tilstande */
#kg-jobs-list .kg-job h3 > a:hover,
#kg-jobs-list .kg-job h3 > button:hover,
#kg-jobs-list .kg-job h3 > a:focus-visible,
#kg-jobs-list .kg-job h3 > button:focus-visible{
  filter: brightness(.98);
  outline: 2px solid rgba(0,0,0,.06);
  outline-offset: 2px;
}

/* === Bundlink: “Send hele resultatet til mig” === */
/* Ligger som et link efter #kg-more-jobs – gør det til en chip ligesom ovenfor */
#kg-more-jobs + a{
  background: #c9fcdd !important;
  color: #073b1a !important;
  border: 1px solid #a8edc2 !important;
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 700;
  margin-left: 10px;          /* lille afstand fra den orange knap */
  display: inline-block;
  line-height: 1.1;
}
#kg-more-jobs + a:hover,
#kg-more-jobs + a:focus-visible{
  filter: brightness(.98);
}
/* Mail-chip ved jobtitel (bred og stærk selector) */
#kg-jobs-list .kg-job h3 a,
#kg-jobs-list .kg-job h3 button,
#kg-jobs-list .kg-job h3 [href^="mailto:"],
#kg-jobs-list .kg-job h3 .kg-link-mail{
  background: #c9fcdd !important;
  color: #073b1a !important;
  border: 1px solid #a8edc2 !important;
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bundlink: “Send hele resultatet til mig” – match ethvert <a> senere i samme container */
#kg-results #kg-more-jobs ~ a,
#kg-results a.kg-link-mail{
  background: #c9fcdd !important;
  color: #073b1a !important;
  border: 1px solid #a8edc2 !important;
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  line-height: 1.1;
  margin-left: 10px; /* lille afstand fra den orange knap */
}

#kg-results #kg-more-jobs ~ a:hover,
#kg-results a.kg-link-mail:hover,
#kg-results #kg-more-jobs ~ a:focus-visible,
#kg-results a.kg-link-mail:focus-visible{
  filter: brightness(.98);
}
/* Mail-chip ved titel */
#kg-jobs-list .kg-job h3 .kg-link-mail{
  background:#c9fcdd !important;
  color:#073b1a !important;
  border:1px solid #a8edc2 !important;
  border-radius:999px;
  padding:6px 12px;
  text-decoration:none;
  font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}

/* Bundlink – samme look */
#kg-results .kg-link-mail{
  background:#c9fcdd !important;
  color:#073b1a !important;
  border:1px solid #a8edc2 !important;
  border-radius:999px;
  padding:10px 14px;
  text-decoration:none;
  font-weight:700;
  display:inline-block; line-height:1.1;
}
#kg-results .kg-link-mail:hover,
#kg-results .kg-link-mail:focus-visible{ filter:brightness(.98); }
}
/* Kun de to nederste knapper skal have ens højde */
#kg-more-jobs,
#kg-more-jobs + a.kg-link-mail,
#kg-more-jobs ~ a.kg-link-mail,
#kg-more-jobs + button.kg-link-mail,
#kg-more-jobs ~ button.kg-link-mail{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

/* (valgfri sikkerheds-reset) små mail-chips ved titlen forbliver små */
#kg-jobs-list .kg-job h3 .kg-link-mail{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  min-height: unset; /* ingen tvangshøjde */
  line-height:1;
}