/*
 * base.css
 * Reset, CSS-variabler og fælles styles der bruges på ALLE sider
 *
 * Indhold:
 * 1. Reset og grundlæggende
 * 2. CSS-variabler (farver, størrelser)
 * 3. Typografi og links
 * 4. Layout helpers (section, section-inner)
 * 5. Badges og tags
 * 6. Breadcrumb
 * 7. USP strip
 * 8. FAQ
 * 9. Breakpoints (991px tablet, 479px mobil)
 */


/* ─────────────────────────────────────────────
   1. RESET OG GRUNDLÆGGENDE
   ───────────────────────────────────────────── */

/* Tvinger scrollbar til altid at være synlig – forhindrer layout-hop */
html { overflow-y: scroll; }

/* Nulstil margin, padding og box-model på alle elementer */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────
   2. CSS-VARIABLER
   Skift farver ét sted – virker på hele sitet
   ───────────────────────────────────────────── */

:root {
  /* Elaftale – blå */
  --el:           #185FA5;
  --el-light:     #EFF6FF;
  --el-border:    #BFDBFE;

  /* Ladeaftale – grøn */
  --la:           #3B6D11;
  --la-light:     #F0FDF4;
  --la-border:    #BBF7D0;

  /* Gasaftale – amber */
  --ga:           #854F0B;
  --ga-light:     #FFF7ED;
  --ga-border:    #FED7AA;

  /* Tekstfarver */
  --text:         #0F172A;   /* Primær tekst – næsten sort */
  --text-2:       #475569;   /* Sekundær tekst – grå */
  --text-muted:   #94A3B8;   /* Nedtonet tekst – lys grå */

  /* Baggrund og kanter */
  --bg:           #F8F9FA;   /* Sidens baggrund – lys grå */
  --white:        #ffffff;
  --border:       #E2E8F0;   /* Kanter og skillelinjer */
}


/* ─────────────────────────────────────────────
   3. TYPOGRAFI OG LINKS
   ───────────────────────────────────────────── */

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* Skarpere tekst på Mac */
}

/* Fjern understregning fra alle links som standard */
a { text-decoration: none; color: inherit; }

/* Billeder fylder aldrig mere end deres container */
img { max-width: 100%; }


/* ─────────────────────────────────────────────
   4. LAYOUT HELPERS
   Bruges på alle sektioner på alle sider
   ───────────────────────────────────────────── */

/* Standard afstand over og under en sektion */
.section { padding: 56px 24px; }

/* Sektioner med hvid baggrund (alternerende) */
.section-alt { background: var(--white); }

/* Begrænser indholdsbredden og centrerer det */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Lille label over sektionstitler fx "Kategorier" */
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Sektionstitler */
.section-title {
  font-size: clamp(20px, 2.8vw, 26px); /* Skalerer med skærmbredde */
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 28px;
}


/* ─────────────────────────────────────────────
   5. BADGES OG TAGS
   Bruges til at markere aftaletype, binding osv.
   ───────────────────────────────────────────── */

/* Badge – større, bruges i tabeller og kort */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-el    { background: var(--el-light); color: var(--el); }
.badge-la    { background: var(--la-light); color: var(--la); }
.badge-ga    { background: var(--ga-light); color: var(--ga); }
.badge-green { background: #DCFCE7; color: #166534; }

/* Tag – mindre, bruges på aftalekort */
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
}
.tag-blue  { background: var(--el-light); color: var(--el); }
.tag-green { background: #DCFCE7; color: #166534; }
.tag-gray  { background: #F1F5F9; color: var(--text-2); }


/* ─────────────────────────────────────────────
   6. BREADCRUMB
   Navigationssti fx "Forside › Elaftale › Guide"
   ───────────────────────────────────────────── */

.breadcrumb {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.breadcrumb a { color: rgba(255,255,255,0.45); }
.breadcrumb a:hover { color: rgba(255,255,255,0.75); }


/* ─────────────────────────────────────────────
   7. USP STRIP
   Den mørke bjælke med 4 fordele
   ───────────────────────────────────────────── */

.usp-strip { background: #0F172A; padding: 48px 24px; }
.usp-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.usp { display: flex; align-items: flex-start; gap: 14px; }
.usp-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.usp h4 { font-size: 13px; font-weight: 600; color: white; margin-bottom: 4px; }
.usp p  { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.55; }


/* ─────────────────────────────────────────────
   8. FAQ
   Bruges på elaftale/index.php og guide.php
   ───────────────────────────────────────────── */

.faq-item {
  background: var(--white);
  border-radius: 9px;
  border: 1px solid var(--border);
  margin-bottom: 7px;
  overflow: hidden;
}
.faq-question {
  padding: 15px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-question svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--text-muted);
}
/* Roter pil når FAQ er åben */
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  display: none;
  padding: 12px 18px 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
  border-top: 1px solid #F1F5F9;
}
.faq-item.open .faq-answer { display: block; }


/* ─────────────────────────────────────────────
   9. BREAKPOINTS
   991px = tablet, 479px = mobil
   ───────────────────────────────────────────── */

/* ── TABLET (max 991px) ── */
@media (max-width: 991px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ── MOBIL (max 479px) ── */
@media (max-width: 479px) {
  .section { padding: 40px 20px; }
  .usp-grid { grid-template-columns: 1fr; }
  .breadcrumb { display: none; } /* Skjul breadcrumb på mobil – for smal */
}