/* From NeruScope.dc.html. Most styling is inline in Views/Home/Index.cshtml, as in the design. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0e0e10; }
@keyframes ns-scrollPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
:root { --ns-bg:#102234; --ns-bg-alt:#0b1a29; --ns-footer:#0a1720; --ns-bg-rgb:16,34,52; --ns-deep-rgb:11,26,41; }
[data-ns-theme="black"] { --ns-bg:#0e0e10; --ns-bg-alt:#161619; --ns-footer:#060607; --ns-bg-rgb:14,14,16; --ns-deep-rgb:8,8,10; }

/* Nav: transparent over the hero, solid once scrolled (site.js toggles .scrolled) */
#ns-nav { background: linear-gradient(to bottom, rgba(var(--ns-bg-rgb),0.95), transparent); border-bottom: 1px solid transparent; }
#ns-nav.scrolled { background: rgba(var(--ns-bg-rgb),0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(68,130,130,0.2); }

/* Hover states (style-hover in the design) */
.h1:hover { color:#5EA692 !important; }
.h2:hover { background:#5EA692 !important; }
.h3:hover { background:#5EA692 !important; border-color:#5EA692 !important; }
.h4:hover { border-color:#fff !important; }
.h5:hover { background:rgba(68,130,130,.14) !important; border-color:#5EA692 !important; }
.h6:hover { border-color:rgba(94,166,146,.4) !important; }
.h7:hover { border-color:rgba(94,166,146,.5) !important; transform:translateY(-6px) !important; }
.h8:hover { background:#448282 !important; border-color:#448282 !important; }
.h9:hover { color:#fff !important; }
.ns-field:focus { border-color:#5EA692 !important; }

/* Click-to-enlarge pictures (Scripts/site.js) */
img[data-zoom] { cursor: zoom-in; }
img[data-zoom]:focus-visible { outline: 2px solid #5EA692; outline-offset: 3px; }
.ns-zoom {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 2rem; box-sizing: border-box; background: rgba(0,0,0,.9); cursor: zoom-out;
    animation: ns-zoom-in .2s ease;
}
.ns-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.ns-zoom-close {
    position: absolute; top: .8rem; right: 1rem; background: none; border: 0; color: #fff;
    font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .75;
}
.ns-zoom-close:hover, .ns-zoom-close:focus-visible { opacity: 1; }
@keyframes ns-zoom-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) { .ns-zoom { padding: .5rem; } }
@media (prefers-reduced-motion: reduce) { .ns-zoom { animation: none; } }

/* Without JavaScript, show the fade-in blocks straight away */
.no-js [data-fade] { opacity: 1 !important; transform: none !important; }

/* Phones and small tablets. Not in the design; inline styles need !important to override. */
@media (max-width: 900px) {
    .ns-root section, .ns-root footer { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .ns-root section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
    #hjem { padding-bottom: 4rem !important; }
    #hjem > div[style*="bottom:2rem"] { display: none !important; }
    #ns-nav { padding: 0 1.25rem !important; }
    #ns-nav > div > a:not(:last-child) { display: none !important; }
    .ns-root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
    .ns-root h1 { font-size: clamp(2.2rem, 10vw, 3.4rem) !important; }
    .ns-root h2 { font-size: clamp(1.7rem, 7.5vw, 2.6rem) !important; }
    #team [style*="align-items:flex-start"] { flex-direction: column; }
}