/* =====================================================================
   Light Solutions-skin til spot- + ledstrip-guiden.
   Loades KUN på lightsolutions.dk — den delte pakke forbliver brandfri.

   VIGTIGT: guidens egen guide.css scoper HELE paletten (--g-*) til
   #ledguide-root / #spotguide-root — men embed'en monterer i #ledstripguide
   / #spotguide UDEN den wrapper, så variablerne var udefinerede og alt faldt
   tilbage til ustylet (gennemsigtige kort, Arial, sort, firkantet).
   Derfor sætter vi HELE paletten på de FAKTISKE monteringsrødder OG på
   standalone-rødderne, så guiden altid bærer sitets identitet:
   orange #ff6900, varme papirtoner, Helvetica Neue Extended, pill-knapper.
   ===================================================================== */

html #spotguide,
html #ledstripguide,
html #spotguide-root,
html #ledguide-root {
  /* --- brand core --- */
  --g-primary:      #ff6900;
  --g-primary-h:    #e35f00;   /* hover: dybere orange (ikke brun) */
  --g-on-primary:   #ffffff;
  --g-tint:         #fff6ec;   /* varm creme bag valgte rækker/hero */
  --g-tint-br:      #ffe0c9;
  --g-ink:          #2d2a26;
  --g-text:         #2d2a26;
  --g-muted:        #7a746d;
  --g-surface:      #ffffff;
  --g-page:         #faf8f4;   /* meget lys varm papir */
  --g-line:         #e7e1d7;
  --g-card-br:      #e7e1d7;
  --g-ctl-br:       #d3ccbf;
  --g-hover-br:     #ffb98a;   /* kort-hover kant (lys orange) */
  --g-focus:        #ff6900;
  /* --- radii --- */
  --g-radius-s:     8px;
  --g-radius-m:     10px;
  --g-radius-l:     16px;
  --g-radius-pill:  999px;
  --g-btn-radius:   999px;      /* pill som sitet */
  --g-shadow:       0 10px 30px rgba(45, 42, 38, .10);
  /* --- type --- */
  --g-font:         'HelveticaNeueLTStd Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --g-font-body:    'HelveticaNeueLTStd Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* --- status / support --- */
  --g-err:          #b3261e;
  --g-err-bg:       #fdecea;
  --g-err-br:       #f3c2bd;
  --g-warn-ink:     #7a5200;
  --g-warn-bg:      #fff4d6;
  --g-warn-br:      #f2dfa0;
  --g-stock:        #1f7a3d;
  --g-stock-on-tint:#1f7a3d;
  --g-outlet-bg:    #fff6ec;
  --g-outlet-ink:   #b34400;
  --guide-consent-h: 0px;
}

/* Primær-CTA'erne får sitets uppercase/tracked pill-karakter */
html #spotguide .btn-primary,   html #ledstripguide .btn-primary,
html #spotguide .sg-top-cta,    html #ledstripguide .sg-top-cta,
html #spotguide a.hero-start,   html #ledstripguide a.hero-start {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}

/* =====================================================================
   "Hvordan vil du starte?" — gør startpunktet umiskendeligt.
   Kortene er den første handling på siden, så de skal se klikbare ud
   og matche sitet (hvide kort, hårfine kanter, orange accenter).
   ===================================================================== */

html #spotguide .entry-grid,
html #ledstripguide .entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

html #spotguide .entry-card,
html #ledstripguide .entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e7e1d7;
  border-radius: 16px;
  padding: 22px 20px 20px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(45, 42, 38, .05);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
html #spotguide .entry-card:hover,
html #ledstripguide .entry-card:hover,
html #spotguide .entry-card:focus-visible,
html #ledstripguide .entry-card:focus-visible {
  border-color: #ff6900;
  box-shadow: 0 12px 30px rgba(45, 42, 38, .12);
  transform: translateY(-3px);
  outline: none;
}

/* Den anbefalede vej (kortet med .entry-flag) skal poppe */
html #spotguide .entry-card:has(.entry-flag),
html #ledstripguide .entry-card:has(.entry-flag) {
  border-color: #ff6900;
  box-shadow: 0 0 0 3px rgba(255, 105, 0, .14), 0 10px 26px rgba(45, 42, 38, .10);
}

/* "Anbefalet"-badge: orange pill øverst til højre */
html #spotguide .entry-flag,
html #ledstripguide .entry-flag {
  position: absolute;
  top: -11px;
  right: 16px;
  background: #ff6900;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(255, 105, 0, .30);
}

/* A / B / C — tydelige trin-markører i orange cirkel */
html #spotguide .entry-letter,
html #ledstripguide .entry-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff6ec;
  color: #ff6900;
  border: 1.5px solid #ffd8b8;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}
html #spotguide .entry-card:hover .entry-letter,
html #ledstripguide .entry-card:hover .entry-letter,
html #spotguide .entry-card:has(.entry-flag) .entry-letter,
html #ledstripguide .entry-card:has(.entry-flag) .entry-letter {
  background: #ff6900;
  color: #fff;
  border-color: #ff6900;
}

html #spotguide .entry-title,
html #ledstripguide .entry-title {
  font-family: 'HelveticaNeueLTStd Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 16.5px;
  color: #2d2a26;
  line-height: 1.25;
}
html #spotguide .entry-desc,
html #ledstripguide .entry-desc {
  color: #7a746d;
  font-size: 13.5px;
  line-height: 1.5;
}

/* "Start her →" — fyldt orange pill med hvid tekst (base gør den orange;
   vi sikrer bare læsbar hvid tekst + sitets uppercase/tracked karakter) */
html #spotguide .entry-go,
html #ledstripguide .entry-go {
  margin-top: 6px;
  align-self: stretch;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 999px;
}
html #spotguide .entry-go,   html #ledstripguide .entry-go,
html #spotguide .entry-go *, html #ledstripguide .entry-go * {
  color: #ffffff !important;
}
html #spotguide .entry-arrow,  html #ledstripguide .entry-arrow {
  transition: transform .16s ease;
}
html #spotguide .entry-card:hover .entry-arrow,
html #ledstripguide .entry-card:hover .entry-arrow {
  transform: translateX(4px);
}

/* Sektionsoverskriften "Hvordan vil du starte?" — giv den luft + vægt */
html #spotguide .entry-grid,
html #ledstripguide .entry-grid { scroll-margin-top: 90px; }

/* =====================================================================
   Forhandler-laget (privat/erhverv-vælger + deep-links) → samme palet
   ===================================================================== */
html .sg-forh-bar        { background:#fff6ec; border-color:#e7e1d7; }
html .sg-forh-bar-lab    { color:#b34400; }
html .sg-forh-seg        { border-color:#e2c3ab; }
html .sg-forh-seg-b      { color:#5a534b; }
html .sg-forh-seg-b.on   { background:#ff6900; color:#fff; }
html .sg-forh-seg-b + .sg-forh-seg-b { border-left-color:#e2c3ab; }
html .sg-forh-link       { border-color:#e7e1d7; color:#2d2a26; }
html .sg-forh-link:hover { border-color:#ffb98a; background:#fff6ec; }
html .sg-forh-lab        { color:#7a746d; }

/* =====================================================================
   Native indlejring: undgå dubletter mod WP-siden.
   - Skjul guidens DELTE SEO/FAQ (unik SEO skrives i selve WP-siden).
   - Skjul guidens egen hero (dobbelt-H1 + mørkt heltebillede) — WP leverer
     H1 + intro, og værktøjet starter rent på "Hvordan vil du starte?".
   ===================================================================== */
html #sg-seo,
html #sg-faq,
html #spotguide .sg-disclaimer,
html #spotguide-root .sg-disclaimer,
html #ledstripguide .sg-disclaimer,
html #ledguide-root .sg-disclaimer,
html #spotguide .info-section,
html #ledstripguide .info-section,
html #spotguide-root .info-section,
html #ledguide-root .info-section { display:none !important; }

html #spotguide .sg-landing,
html #spotguide-root .sg-landing,
html #spotguide .sg-hero,
html #spotguide-root .sg-hero,
html #spotguide .guide-hero,
html #ledstripguide .guide-hero,
html #ledguide-root .guide-hero { display:none !important; }