/* SmartHus.dk – fælles header og mobilmenu */
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.hdr, .sx-hdr { font-family: 'Figtree', system-ui, sans-serif; color: #0A1A2F; }
.hdr { position: sticky !important; top: 0; z-index: 1000 !important; box-shadow: 0 1px 0 #E2E8F0; }
.nav-btn { display: none; }

@media (max-width: 900px) {
  html { scroll-padding-top: 72px; }
  .hdr, .sx-hdr { position: sticky !important; top: 0; z-index: 1000 !important; margin-inline: 0; }
  .sx-hdr { margin-inline: -16px; }
  .hdr > div, .sx-in { flex-wrap: nowrap !important; padding: 10px 16px !important; gap: 12px !important; }
  .hdr img, .sx-logo img { height: 38px !important; }

  .nav-btn {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 48px; height: 48px; margin-left: auto; flex-shrink: 0;
    border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; cursor: pointer; padding: 0;
  }
  .nav-btn span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #0A1A2F; transition: transform .2s ease, opacity .2s ease; }
  html.nav-open .nav-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  html.nav-open .nav-btn span:nth-child(2) { opacity: 0; }
  html.nav-open .nav-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .mnav, .sx-nav { display: none !important; }
  html.nav-open .mnav, html.nav-open .sx-nav {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important;
    position: fixed; top: var(--hdr-h, 68px); left: 0; right: 0; bottom: 0; z-index: 999;
    background: #FFFFFF; padding: 8px 16px 40px !important; gap: 0 !important; overflow-y: auto; overflow-x: hidden;
    width: auto !important; border-top: 1px solid #E2E8F0;
  }
  html.nav-open { overflow: hidden; }
  html.nav-open .mnav > a, html.nav-open .sx-nav > a {
    padding: 16px 6px !important; font-size: 18px !important; border-bottom: 1px solid #E2E8F0; border-radius: 0 !important; white-space: normal !important;
  }
  html.nav-open .mnav > a:last-child, html.nav-open .sx-nav > a.sx-cta {
    margin: 18px 0 0 !important; justify-content: center; min-height: 54px; border-bottom: 0; border-radius: 999px !important; font-size: 17px !important;
  }
  html.nav-open .dd, html.nav-open .sx-dd { border-bottom: 1px solid #E2E8F0; }
  html.nav-open .dd > summary, html.nav-open .sx-dd > summary { width: 100%; padding: 16px 6px !important; font-size: 18px; justify-content: flex-start; background: none !important; }
  html.nav-open .dd > summary svg:last-child, html.nav-open .sx-dd > summary svg:last-child { margin-left: auto; }
  html.nav-open .ddm, html.nav-open .sx-ddm {
    position: static !important; box-shadow: none !important; border: 0 !important; padding: 0 0 10px 14px !important; min-width: 0 !important; background: transparent !important;
  }
  html.nav-open .ddm a, html.nav-open .sx-ddm a { padding: 12px 6px !important; font-size: 16px; }
}

/* Små telefoner: auto-gitre i én kolonne, så intet stikker ud */
@media (max-width: 440px) {
  [style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="padding: 0 24px"], [style*="24px 24px"], [style*="px 24px;"] { padding-left: 16px !important; padding-right: 16px !important; }
}