/* =========================================================
   SkoleArk – Patch CSS (header, dropdown, mobil, sticky footer)
   ========================================================= */

/* Undgå layout-hop når scrollbar vises (reserver kun højre kant) */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

/* Undgå vandret scroll/whitespace på venstre kant */
html, body { max-width: 100%; overflow-x: hidden; }

/* Auto Ads only: hide any manual ad containers in case some remain */
.ad-slot, .ad-slot.muted{ display:none !important; }

/* ---------- Header & nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 2000;
  background:#ffffffcc; backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eef2f7;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 0;
}
.brand{ font-weight:800; letter-spacing:.2px; font-size:1.25rem; color:#0f172a; }
.brand span{ color:#2563eb; }

.main-nav{ display:flex; align-items:center; gap:14px; }
.main-nav > a,
.main-nav .parent{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-weight:600; font-size:14px; color:#0f172a; line-height:1;
  padding:10px 12px; border-radius:10px;
}
.main-nav > a.active,
.main-nav > a:hover,
.main-nav .parent:hover{ background:#f1f5f9; }
.main-nav .parent{ display:flex; align-items:center; gap:6px; }
.main-nav .chev{ display:inline-block; }

/* ---------- Dropdown (ingen mellemrum mellem trigger og menu) ---------- */
.nav-has-dropdown{ position:relative; }
.nav-dropdown{
  position:absolute; left:0; top:100%;           /* intet hul = stabil hover */
  display:none; min-width:260px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  padding:8px; z-index: 2200;                    /* over alt indhold */
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown,
.nav-dropdown.open{ display:block; }

.nav-dropdown a{
  display:block; padding:10px 12px; border-radius:10px;
  color:#0f172a; font-weight:600; font-size:14px; white-space:nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus{ background:#f1f5f9; outline: none; }

/* ---------- Top actions & mobil ---------- */
.top-actions{ display:flex; align-items:center; gap:10px; }
.btn.small{ padding:6px 10px; font-size:.875rem; border-radius:10px; }

.menu-toggle{
  display:none; position:relative; width:36px; height:32px; border:0;
  background:transparent; padding:0; cursor:pointer;
}
.menu-toggle span{
  position:absolute; left:6px; right:6px; height:2px; background:#0f172a;
}
.menu-toggle span:nth-child(1){ top:9px; }
.menu-toggle span:nth-child(2){ top:15px; }
.menu-toggle span:nth-child(3){ top:21px; }

.mobile-nav{
  display:none; flex-direction:column; gap:6px;
  padding:10px 0 14px; border-top:1px solid #eef2f7;
}
.mobile-nav.open{ display:flex; }
.mobile-nav > a{
  padding:10px 6px; border-radius:10px; margin:0 4px;
  font-weight:600; color:#0f172a;
}
.mobile-nav > a.active, .mobile-nav > a:hover{ background:#f1f5f9; }
.mobile-dd{ margin:0 4px; padding:4px 0; }
.mobile-dd > summary{
  list-style:none; cursor:pointer; padding:10px 6px; border-radius:10px;
  font-weight:700; color:#0f172a;
}
.mobile-dd[open] > summary, .mobile-dd > summary:hover{ background:#f1f5f9; }
.mobile-dd a{
  display:block; padding:8px 12px; margin:2px 0 0 8px; border-radius:10px;
  color:#0f172a; font-weight:500;
}
.mobile-dd a:hover{ background:#f8fafc; }

@media (max-width:980px){
  .main-nav{ display:none; }
  .menu-toggle{ display:inline-block; }
}

/* ---------- Sticky footer layout (robust mod margin-collapsing) ---------- */
html, body { height: 100%; }
body{
  min-height: 100vh;           /* desktop */
  min-height: 100svh;          /* mobil – dynamisk viewport */
  display:flex;
  flex-direction:column;
}
.site-header{ flex:0 0 auto; }
main, #main, .page{
  flex:1 0 auto;
  min-height: 1px;             /* forhindrer margin-collapsing på korte sider */
  display: block;
}
.site-footer{ flex:0 0 auto; margin-top:auto; }

/* ---------- Footer look ---------- */
.site-footer{
  background:#fff; border-top:1px solid #eef2f7;
  padding:24px 0; color:#475569;
}
.footer-inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; }
.footer-col h4{ margin:0 0 8px; font-weight:700; color:#0f172a; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:6px 0; }
.footer-links a{ color:#0f172a; font-weight:600; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }
.brand-col .brand{ font-weight:800; font-size:1.1rem; color:#0f172a; display:inline-block; margin-bottom:6px; }
.brand-col .brand span{ color:#2563eb; }
.copy{ margin-top:10px; font-size:.9rem; color:#64748b; }
.linklike{
  background:none; border:0; padding:0; margin:0;
  color:#0f172a; font-weight:600; cursor:pointer;
}
.linklike:hover{ text-decoration: underline; }

@media (max-width: 900px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* ---------- Print ---------- */
@media print{
  .site-header, .mobile-nav{ display:none !important; }
}

/* ---------- Mindre UX tweaks ---------- */
:focus-visible{ outline: 2px solid #2563eb; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}
/* Forside: Nye værktøjer */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:8px; }
.section-head h2 { margin:0; }
.section-head .muted { color:#64748b; }

.feature-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:1100px){ .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .feature-grid { grid-template-columns:1fr; } }

.feature {
  display:flex; align-items:center; gap:12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,.06); }
.feature-icon {
  flex:0 0 40px; height:40px; width:40px;
  display:grid; place-items:center;
  border-radius:10px;
  background:#f1f5f9; color:#0f172a;
}
.feature-body h3 { margin:0 0 4px; font-size:1rem; }
.feature-body p { margin:0; }
.feature-cta { margin-left:auto; color:#0f172a; font-weight:600; opacity:.5; }
.feature:hover .feature-cta { opacity:.9; }