/*
  styles.css
  Enkel og kommenteret stylesheet til en lille undervisnings-hjemmeside
  Farverne er neutrale og designet er enkelt for at gøre det nemt at forstå.
*/

/* Farve-variabler for let vedligehold */
:root {
  --bg: #ffffff;       /* lys beige baggrund */
  --card: #e5f1f6;     /* hvid til kort/containere */
  --text: #222222;     /* næsten sort til tekst */
  --muted: #8B8782;    /* lys grå/beige tekst til hjælp */
  --accent: #CFC6B9;   /* diskret støvet beige accent */
  --border: #010000;   /* svag skillelinje */
}

/* Baseline: gør siden læsbar og med god luft */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* Central container: begræns bredden for god læsbarhed */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  /* Sørg for at indhold ligger ovenpå de dekorative sidebilleder */
  position: relative;
  z-index: 2;
}

/* Dekorative sidebilleder: neutrale og dæmpede
   Nu: to kolonner (venstre/højre), hver med flere dekorative billeder.
   - Billeder er placeret fixed og ligger delvist uden for skærmens kant.
   - pointer-events:none + aria-hidden så de ikke forstyrrer interaktion eller skærmlæsere.
*/
.side-column{ position: absolute; top: 20px; bottom: auto; width: 160px; display:block; pointer-events:none; z-index:1; overflow: visible; }
.side-column.left{ left: 0; transform: none; }
.side-column.right{ right: 0; transform: none; }
.side-column .side-image{ position:absolute; left:12px; width: 120px; max-width: 12vw; opacity: 1; filter: none; }
.side-column.right .side-image{ left:auto; right:12px; }
/* Faste offsets så hvert billede forbliver i viewport når der scrolles */
.side-column.left .side-image:nth-child(1){ top: 36px; }
.side-column.left .side-image:nth-child(2){ top: 136px; }
.side-column.left .side-image:nth-child(3){ top: 236px; }
.side-column.left .side-image:nth-child(4){ top: 336px; }
.side-column.left .side-image:nth-child(5){ top: 436px; }
.side-column.left .side-image:nth-child(6){ top: 536px; }
.side-column.left .side-image:nth-child(7){ top: 636px; }
.side-column.left .side-image:nth-child(8){ top: 736px; }
.side-column.left .side-image:nth-child(9){ top: 836px; }
.side-column.left .side-image:nth-child(10){ top: 936px; }
.side-column.left .side-image:nth-child(11){ top: 1036px; }
.side-column.left .side-image:nth-child(12){ top: 1136px; }
.side-column.left .side-image:nth-child(13){ top: 1236px; }
.side-column.left .side-image:nth-child(14){ top: 1336px; }
.side-column.left .side-image:nth-child(15){ top: 1436px; }
.side-column.left .side-image:nth-child(16){ top: 1536px; }
.side-column.left .side-image:nth-child(17){ top: 1636px; }
.side-column.left .side-image:nth-child(18){ top: 1736px; }
.side-column.left .side-image:nth-child(19){ top: 1836px; }
.side-column.left .side-image:nth-child(20){ top: 1936px; }

.side-column.right .side-image:nth-child(1){ top: 36px; }
.side-column.right .side-image:nth-child(2){ top: 136px; }
.side-column.right .side-image:nth-child(3){ top: 236px; }
.side-column.right .side-image:nth-child(4){ top: 336px; }
.side-column.right .side-image:nth-child(5){ top: 436px; }
.side-column.right .side-image:nth-child(6){ top: 536px; }
.side-column.right .side-image:nth-child(7){ top: 636px; }
.side-column.right .side-image:nth-child(8){ top: 736px; }
.side-column.right .side-image:nth-child(9){ top: 836px; }
.side-column.right .side-image:nth-child(10){ top: 936px; }
.side-column.right .side-image:nth-child(11){ top: 1036px; }
.side-column.right .side-image:nth-child(12){ top: 1136px; }
.side-column.right .side-image:nth-child(13){ top: 1236px; }
.side-column.right .side-image:nth-child(14){ top: 1336px; }
.side-column.right .side-image:nth-child(15){ top: 1436px; }
.side-column.right .side-image:nth-child(16){ top: 1536px; }
.side-column.right .side-image:nth-child(17){ top: 1636px; }
.side-column.right .side-image:nth-child(18){ top: 1736px; }
.side-column.right .side-image:nth-child(19){ top: 1836px; }
.side-column.right .side-image:nth-child(20){ top: 1936px; }
.side-column .side-image img{ display:block; width:100%; height:auto; }

/* Fjern alle dekorative sidebilleder på alle skærmstørrelser */
.side-column { display: none !important; }

/* Mellemskærme: reducer størrelse */
@media (max-width: 1100px){ .side-column{ width: 120px; } .side-column .side-image{ width: 96px; opacity:0.9; filter: none; } }

/* Print: skjul dekorative billeder (ikke relevante ved print) */
@media print{ .side-column{ display:none; } }

/* Topbar / Header (slim variant) */
.topbar { background: var(--card); border-bottom: 1px solid var(--border); padding: 8px 0; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 0 8px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
/* Vis en tynd separator ved brand på desktop for at skabe skarp struktur */
@media (min-width: 721px) {
  .brand { padding-right:12px; border-right:1px solid var(--border); margin-right:12px; }
}
.site-title { font-weight:700; font-size:1.05rem; letter-spacing:0.2px; }

/* Mobile menu animation: brug max-height + opacity for smooth open/close */
.top-nav { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 280ms ease, opacity 200ms ease; }
.top-nav.open { max-height: 420px; opacity: 1; }

/* Back to top button */
.back-to-top { position: fixed; right: 16px; bottom: 16px; background: var(--card); color: var(--text); border:1px solid var(--border); padding:8px 10px; border-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,0.06); display:none; cursor:pointer; z-index:999; }
.back-to-top.show { display:block; }

/* Typografi finpudsning */
body { line-height: 1.6; }
h2{ font-size:1.35rem; margin:0 0 10px 0; }
.card{ padding:20px; }

/* CTAs i topbar */
.nav-ctas{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* En samlet styling så alle topbar-knapper ligner hinanden */
.btn, .btn-section {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-weight:600;
  font-size:0.95rem;
  transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease, opacity 160ms ease;
}

.btn:hover, .btn-section:hover {
  transform: translateY(-2px);
  opacity: 0.98;
}

/* Primærknap nu følger standardknapstil (ens for alle knapper) */
.btn-primary{ background:transparent; border:1px solid var(--border); color:var(--text); box-shadow:none; }

/* Aktiv/markeret tilstand for alle topbar-knapper */
.btn.active-section, .btn-section.active-section, .btn-primary.active-section {
  color:var(--text); border-color:var(--accent); background: rgba(207,198,185,0.14); box-shadow:0 6px 12px rgba(0,0,0,0.04);
} 

/* Aktiv/markeret tilstand for sektion-knapper */
.btn-section.active-section{ color:var(--text); border-color:var(--accent); background: rgba(207,198,185,0.14); box-shadow:0 6px 12px rgba(0,0,0,0.04); }

/* Skjul CTA-knapper i topbar på små skærme (links findes i menuen) */
@media (max-width:720px) {
  .nav-ctas{ display:none; }
} 

/* Subtle hover on links and cards */
.top-nav a:hover { background: var(--accent); transform: translateY(-1px); transition: all 160ms ease; }
.card:hover{ transform:translateY(-6px); box-shadow:0 10px 20px rgba(0,0,0,0.06); }

@media (max-width:720px) {
  .top-nav { position:absolute; left:0; right:0; top:56px; background:var(--card); border-top:1px solid var(--border); padding-bottom:8px; }
  .top-nav.open { display:block; }
  .top-nav ul { flex-direction:column; padding:12px; gap:8px; }
  .top-nav a { padding:10px 12px; display:block; }
  /* Skjul CTA-knapper i topbar på små skærme (links findes i menuen) */
  .nav-ctas{ display:none; }
}  

/* Skjul den gamle .site-header styling hvis den findes */
.site-header { display:none; }

/* Navigation */
.nav-toggle { background: transparent; border: none; font-size:1.1rem; cursor:pointer; color:var(--text); }
.nav-toggle:focus { outline:2px solid var(--border); }

.top-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:16px; align-items:center; }
.top-nav a { text-decoration:none; color:var(--text); padding:8px 12px; border-radius:8px; font-weight:600; }
.top-nav a:hover { background: var(--accent); }
.top-nav a.active, .top-nav a.active-section, .nav-ctas a.btn-section.active-section, .nav-ctas a.btn.active-section, .nav-ctas a.btn-primary.active-section {
  /* Ensartet aktivt udseende for både liste-links og topbar-knapper */
  background: rgba(207,198,185,0.14);
  color: var(--text);
  border-color: var(--accent);
  box-shadow:0 6px 12px rgba(0,0,0,0.04);
}

/* Mobil: skjul nav, vis knap */
@media (max-width: 720px) {
  .top-nav { position:absolute; left:0; right:0; top:56px; background:var(--card); display:none; border-top:1px solid var(--border); padding-bottom:8px; }
  .top-nav.open { display:block; }
  .top-nav ul { flex-direction:column; padding:12px; gap:8px; }
  .top-nav a { padding:10px 12px; display:block; }
}

/* Desktop: vis nav horisontalt */
@media (min-width: 721px) {
  .nav-toggle { display:none; }
}

/* Små helper-klasser */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Kommentar: tilpas farverne i :root (fx --bg, --card, --text, --muted, --accent, --border) */

/* Simpel navigation */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
}
.main-nav a {
  text-decoration: none;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.95rem;
}
.main-nav a:hover { background: var(--accent); }
.main-nav a.active { background: var(--muted); color: var(--card); }

/* Hero / intro */
.hero {
  background: var(--card);
  padding: 20px;
  margin-top: 18px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Callout: kort & fangende boks på forsiden */
.callout {
  text-align: center;
  padding: 28px;
}
.callout .lead {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--muted);
}
.callout-list {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.callout-list li {
  background: transparent;
  padding: 0; /* padding is applied on the anchor so the whole chip is clickable */
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight:600;
}
.callout-list a.callout-link {
  display:block;
  padding: 6px 10px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}
.callout-list a.callout-link:hover,
.callout-list a.callout-link:focus {
  background: rgba(207,198,185,0.12);
  outline: none;
}
.callout-ctas { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
@media (max-width:720px){
  .callout-list { flex-direction:column; align-items:center; gap:8px; }
  .callout { padding:18px; }
}

/* Topic images row: to billeder pr. emne, responsive */
.image-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px; align-items:start; }
.image-row figure{ margin:0; }
.topic-image{ width:100%; height:160px; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; }
.image-row figcaption{ margin-top:6px; font-size:0.9rem; color:var(--muted); text-align:center; }
@media (max-width:720px){ .image-row{ grid-template-columns:1fr; } .topic-image{ height:220px; } }

/* Hero grid: profilbillede + tekst */
.hero-grid{ display:grid; grid-template-columns: 120px 1fr; gap:18px; align-items:center; }
.hero-img{ display:flex; justify-content:center; }
.profile-img{ width:100px; height:100px; border-radius:12px; object-fit:cover; border:1px solid var(--border); }

/* TEST: tydelig ramme om profilbillede for at bekræfte at img loader */
.profile-img.test-outline{ outline: 3px solid rgba(0,0,0,0.12); }

/* Kompetencer & Projekter fjernet efter brugerønske - relaterede styles er udkommenteret */
/*
.skill-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:12px; }
.skill{ display:flex; gap:12px; align-items:center; }
.skill-icon{ width:48px; height:48px; flex-shrink:0; }

.projects-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:12px; }
.project-card{ background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px; display:flex; gap:10px; align-items:center; }
.project-img{ width:110px; height:70px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }
*/

/* Overskrifter og luft */
h2{ font-size:1.25rem; margin:0 0 8px 0; }
.container{ padding:28px; }
.card{ padding:20px; }
.card:hover{ transform:translateY(-4px); box-shadow:0 6px 12px rgba(0,0,0,0.04); transition:all 160ms ease; }

@media (max-width:720px){ .hero-grid{ grid-template-columns: 1fr; text-align:left; } .profile-img{ width:86px; height:86px; } .about-grid{ display:block; } }

/* About grid: profil + tekst */
.about-grid{ display:flex; gap:16px; align-items:center; }
.about-grid figure{ margin:0; }
.about-grid .profile-img{ width:110px; height:110px; }

.skill p, .project-card p{ margin:0; font-size:0.95rem; }
.project-card p{ color:var(--text); }

/* Kort-lignende sektioner til indhold (nemt at skimme) */
.card {
  background: var(--card);
  padding: 18px;
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
} 

/* Kontaktformular styling: enkel og læsbar */
.contact-form {
  display: grid;
  gap: 10px;
  max-width: 600px;
}
.contact-form label { font-weight: 600; font-size: 0.95rem; }
.contact-form input,
.contact-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  font-size: 0.95rem;
} 
.contact-form button {
  background: var(--text);
  color: var(--card);
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: opacity 0.15s ease;
}
.contact-form button:hover { opacity: 0.9; }

/* Footer */
.site-footer {
  margin-top: 28px;
  padding: 12px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Responsivt: mindre skærme */
@media (max-width: 600px) {
  .site-header .container { flex-direction: column; align-items: flex-start; }
  .main-nav ul { flex-direction: column; width: 100%; }
  .main-nav a { display: block; width: 100%; }
  .container { padding: 16px; }
}

/* Kommentar: tilpas farverne i :root (fx --bg, --card, --text, --muted, --accent) for at ændre stemningen på siden */