/* ========== top-footer.css (unified @900px) ========== */
:root{
  --bp-desktop: 900px;
  --page-max: 1200px;

  --topbar-h-desktop: 70px;
  --topbar-h-mobile: 54px;

  --footer-h-desktop: 64px;
  --footer-bg: #0f172a;
  --footer-fg: #e6eefb;
}

html, body{
  margin:0; padding:0;
  font-family:'Inter',sans-serif;
  font-size:16px; line-height:1.6;
}

/* ---- Topbar ---- */
.topbar-outer{
  position:fixed; left:0; top:0; width:100%;
  background:#fff; z-index:2000; box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.topbar{
  display:flex; justify-content:flex-start; align-items:center;
  max-width:var(--page-max); margin:0 auto; padding:0 15px;
  position:relative; z-index:1000 !important;
}
.sun-logo{
  position:absolute; left:-22px; top:0; height:100px; width:auto;
  pointer-events:none; z-index:13100 !important;
}
.logo-text{
  color:#246fe5; text-decoration:none; font-weight:600; letter-spacing:.06em;
  font-size:1.2em; margin-left:70px; white-space:nowrap; position:relative; z-index:1011; display:inline-block;
}
.logo-text:visited,.logo-text:hover,.logo-text:focus{ color:#246fe5; text-decoration:none; }

/* ---- Scroll to top ---- */
#scrollToTopBtn{
  position:fixed; bottom:68px; right:24px; width:48px; height:48px;
  background:#1b5e20; border-style:solid; border-color:#fff; border-radius:50%;
  box-shadow:0 2px 12px rgba(36,111,229,.15);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; z-index:3000; transition:opacity .2s, transform .2s;
}
#scrollToTopBtn svg{ display:block; }
#scrollToTopBtn:hover{ background:#66bb6a; transform:translateY(-4px) scale(1.07); }
#scrollToTopBtn.active{ opacity:1; pointer-events:all; }

/* ---- Footer ---- */
.footer-outer, .footer-outer *{ box-sizing:border-box; }
.footer-outer{
  width:100%; overflow-x:hidden; max-width:100%;
  background:var(--footer-bg); color:var(--footer-fg); z-index:1200;
  padding:10px 16px;
}
.footer-rail{
  display:grid; grid-template-columns:1fr minmax(0,var(--page-max)) 1fr;
  align-items:center; width:100%;
}
.footer-center{
  grid-column:2; width:100%; max-width:var(--page-max); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:center;
}
.footer-center>*{ min-width:0; }
.footer-center .mid-item,.footer-center .mid-item2{
  display:flex; align-items:center; justify-content:center;
  min-height:40px; padding:4px 8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.footer-center .mid-item2{ font-size:.75rem; }
.cc-footer-link{ text-decoration:none; color:inherit; }

/* ---- Desktop (≥900px) ---- */
@media (min-width: 900px){
  .topbar-outer{ height:var(--topbar-h-desktop); }
  .topbar{ min-height:var(--topbar-h-desktop); align-items:center; padding-top:0; }
  .sun-logo{ height:100px; top:2px; left:-22px; }
  .logo-text{ margin-left:70px; font-size:1.2em; }

  /* sideoffset under topbar */
  .page, main{ padding-top:var(--topbar-h-desktop) !important; }

  /* fixed footer + reserver plads i main (inkl. ekstra 10px) */
  .footer-outer{
    position:fixed; left:0; right:0; bottom:0; height:var(--footer-h-desktop);
    padding-top:0; padding-bottom:0; display:flex; align-items:center;
  }
  main, .page-content, .content, .wrap{
    padding-bottom: calc(var(--footer-h-desktop) + 10px) !important;
    display: flow-root;
  }
}

/* ---- Mobil/Tablet (<900px) ---- */
@media (max-width: 899px){
  .topbar-outer{ height:var(--topbar-h-mobile); }
  .topbar{ min-height:var(--topbar-h-mobile); align-items:flex-start; padding-top:2px; }
  .sun-logo{ height:68px !important; top:0 !important; left:-9px; }
  .logo-text{ font-size:.95em; margin-left:58px; margin-top:6px; }

  .page, main{ padding-top:var(--topbar-h-mobile) !important; }

  .footer-outer{
    position:static !important; min-height:auto;
    padding:10px 12px; border-top:1px solid transparent; margin-top:0;
  }
  .footer-rail{ grid-template-columns:0 1fr 0; }
  .footer-center{ grid-template-columns:1fr; gap:8px; }

  #scrollToTopBtn{ right:14px; width:42px; height:42px; bottom:58px; }
}

/* ---- Anti margin-collapse i indhold ---- */
.content{ display: flow-root; }
.page > *:first-child,
.content-wrapper > *:first-child,
.content > *:first-child,
main > *:first-child,
section > *:first-child{ margin-top:0 !important; }
h1:first-child, h2:first-child, .hero:first-child{ margin-top:0 !important; }