/* Generator Finder — effektvælger.
   ALLE farver er variabler. Vil du ændre udseendet, så ret kun blokken
   herunder — der er ingen hardkodede farver længere nede i filen. */
.gfnd {
  /* --- Grundfarver: ret typisk kun disse fire --- */
  --gfnd-ink: #1A1D1F;              /* baggrund på hele sektionen */
  --gfnd-paper: #F2F0EC;            /* primær tekst (overskrift, kVA-tal, korttitler) */
  --gfnd-accent: #77c46e;           /* skyder, eyebrow, kort-hover, kVA-linjen på kortene */
  --gfnd-line: #34383B;             /* alle rammer */
  --gfnd-slider-track: #34383B;     /* banen bag skyderens knap */

  /* --- Tekstnuancer --- */
  --gfnd-muted: #A8ADB1;            /* "ingen anlæg"-beskeden */
  --gfnd-label: #9AA0A5;            /* små labels: "valgt effekt", "Anbefalet segment" */
  --gfnd-scale: #8B9196;            /* tallene under skyderen */
  --gfnd-body: #C4C8CB;             /* brødtekst i panelerne */

  /* --- Flader --- */
  --gfnd-panel-bg: #222628;         /* VENSTRE panel (segment) */
  --gfnd-panel-cta-bg: #3e4346; /* HØJRE panel (CTA) — står gennemsigtigt som standard,
                                       så sektionens baggrund skinner igennem. Sæt en farve
                                       her hvis den også skal være fyldt. */
  --gfnd-card-bg: #1F2325;          /* produktkort */
  --gfnd-placeholder-a: #26292B;    /* stribet felt hvor der mangler billede */
  --gfnd-placeholder-b: #2C3033;

  /* --- Chips --- */
  --gfnd-chip-border: #3E4346;
  --gfnd-chip-text: #E4E7E9;

  /* --- CTA-knap --- */
  --gfnd-button-bg: var(--gfnd-paper);
  --gfnd-button-text: var(--gfnd-ink);
  --gfnd-button-bg-hover: #ffffff;
  --gfnd-button-text-hover: #77c46e;

  /* --- Typografi 
  --gfnd-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gfnd-font: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
--- */
  background: var(--gfnd-ink);
  color: var(--gfnd-paper);
  font-family: var(--gfnd-font);
}
.gfnd *, .gfnd *::before, .gfnd *::after { box-sizing: border-box; }
.gfnd__inner { max-width: 1240px; margin: 0 auto; padding: 56px clamp(16px, 3vw, 32px); }

.gfnd__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 34px; }
.gfnd__eyebrow { margin: 0 0 12px; font-family: var(--gfnd-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--gfnd-accent); }
.gfnd__heading { margin: 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.025em; font-weight: 600; line-height: 1.1; }
.gfnd__readout { text-align: right; }
.gfnd__kva { display: block; font-family: var(--gfnd-mono); font-size: clamp(30px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.02em; }
.gfnd__kva-label { display: block; margin-top: 6px; font-size: 13px; color: var(--gfnd-label); }

.gfnd__slider-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gfnd__slider { width: 100%; height: 28px; accent-color: var(--gfnd-accent); cursor: pointer; }
.gfnd__scale { display: flex; justify-content: space-between; font-family: var(--gfnd-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--gfnd-scale); margin-bottom: 34px; }

.gfnd__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.gfnd__panel { border: 1px solid var(--gfnd-line); border-radius: 3px; padding: 26px; }
/* Segment-panelet er det første i grid'et — derfor :first-child. */
.gfnd__panel:first-child { background: var(--gfnd-panel-bg); }
.gfnd__panel--cta { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--gfnd-panel-cta-bg); }
.gfnd__panel-label { margin: 0 0 10px; font-size: 13px; color: var(--gfnd-label); }
.gfnd__panel-title { margin: 0 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.gfnd__panel-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gfnd-body); max-width: 52ch; }
.gfnd__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gfnd__chip { font-family: var(--gfnd-mono); font-size: 12px; letter-spacing: 0.05em; padding: 7px 12px; border: 1px solid var(--gfnd-chip-border); border-radius: 2px; color: var(--gfnd-chip-text); }
.gfnd__button { align-self: flex-start; padding: 14px 22px; background: var(--gfnd-button-bg); color: var(--gfnd-button-text); border-radius: 2px; font-size: 15px; font-weight: 500; text-decoration: none; }
.gfnd__button:hover { background: var(--gfnd-button-bg-hover); color: var(--gfnd-button-text-hover); }

.gfnd__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 28px; }
.gfnd__results[data-loading="1"] { opacity: 0.45; transition: opacity 0.15s ease; }
.gfnd__card { display: flex; flex-direction: column; border: 1px solid var(--gfnd-line); border-radius: 3px; overflow: hidden; text-decoration: none; color: inherit; background: var(--gfnd-card-bg); }
.gfnd__card:hover { border-color: var(--gfnd-accent); }
.gfnd__card-media { display: block; aspect-ratio: 3 / 2; background: repeating-linear-gradient(135deg, var(--gfnd-placeholder-a) 0 8px, var(--gfnd-placeholder-b) 8px 16px); }
.gfnd__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfnd__card-body { display: block; padding: 16px 18px 18px; }
.gfnd__card-title { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.gfnd__card-meta { display: block; font-family: var(--gfnd-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--gfnd-accent); }
.gfnd__empty { margin: 0; font-size: 15px; color: var(--gfnd-muted); }

/* =============================================================
 *  TEMA-RESET
 *  Temaer og sidebyggere styrer typisk links, overskrifter og
 *  input-felter med selektorer som .entry-content a (0,1,1) eller
 *  .elementor-widget-container h2 — de slår en enkelt klasse (0,1,0).
 *  Reglerne herunder gentager klassen (.gfnd .gfnd__x = 0,2,0), så de
 *  vinder uden brug af !important. Farverne er stadig kun variabler.
 * ============================================================= */
.gfnd .gfnd__heading,
.gfnd .gfnd__panel-title,
.gfnd .gfnd__kva { color: var(--gfnd-paper); }

.gfnd .gfnd__card,
.gfnd .gfnd__card:link,
.gfnd .gfnd__card:visited,
.gfnd .gfnd__card:hover,
.gfnd .gfnd__card:focus { color: var(--gfnd-paper); text-decoration: none; box-shadow: none; }
.gfnd .gfnd__card:hover { border-color: var(--gfnd-accent); }
.gfnd .gfnd__card-title { color: var(--gfnd-paper); }
.gfnd .gfnd__card-meta { color: var(--gfnd-accent); }

.gfnd .gfnd__button,
.gfnd .gfnd__button:link,
.gfnd .gfnd__button:visited,
.gfnd .gfnd__button:focus { background: var(--gfnd-button-bg); color: var(--gfnd-button-text); text-decoration: none; border: 0; box-shadow: none; }
.gfnd .gfnd__button:hover { background: var(--gfnd-button-bg-hover); color: var(--gfnd-button-text-hover); }

/* Range-input.
   accent-color alene er ikke nok: så snart temaet eller Elementor sætter
   -webkit-appearance: none på input, ignoreres den, og skyderen beholder
   temaets farve. Derfor tegnes track og thumb eksplicit herunder — stadig
   ud fra --gfnd-accent, så du kun retter variablen. */
.gfnd .gfnd__panel--cta { background: var(--gfnd-panel-cta-bg); }

.gfnd .gfnd__slider {
  accent-color: var(--gfnd-accent);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0; padding: 0; box-shadow: none; max-width: none;
}
.gfnd .gfnd__slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; border: 0;
  background: var(--gfnd-slider-track);
}
.gfnd .gfnd__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; border: 0;
  background: var(--gfnd-accent);
  cursor: pointer;
}
.gfnd .gfnd__slider::-moz-range-track {
  height: 4px; border-radius: 2px; border: 0;
  background: var(--gfnd-slider-track);
}
.gfnd .gfnd__slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: var(--gfnd-accent);
  cursor: pointer;
}
.gfnd .gfnd__slider:focus-visible { outline: 2px solid var(--gfnd-accent); outline-offset: 4px; }

.gfnd .gfnd__eyebrow { color: var(--gfnd-accent); }
.gfnd .gfnd__panel-body { color: var(--gfnd-body); }
.gfnd .gfnd__panel-label,
.gfnd .gfnd__kva-label { color: var(--gfnd-label); }


.gfnd {
  --gfnd-ink: #F2F0EC;
  --gfnd-paper: #1A1D1F;
  --gfnd-accent: #77c46e;
  --gfnd-line: #D8D4CD;
  --gfnd-slider-track: #D8D4CD;
  --gfnd-panel-cta-bg: #ffffff;
  --gfnd-muted: #6B7075;
  --gfnd-label: #6B7075;
  --gfnd-scale: #7C8186;
  --gfnd-body: #3A3F43;
  --gfnd-panel-bg: #FFFFFF;
  --gfnd-card-bg: #FFFFFF;
  --gfnd-placeholder-a: #E8E5DF;
  --gfnd-placeholder-b: #DFDBD4;
  --gfnd-chip-border: #CFCAC2;
  --gfnd-chip-text: #2A2E31;
  --gfnd-button-bg: #1A1D1F;
  --gfnd-button-text: #F2F0EC;
  --gfnd-button-bg-hover: #77c46e;
  --gfnd-button-text-hover: #FFFFFF;
}