/* ============================================================
   HSDK DELFINEN — page-level chrome (website globalStylesheet)
   Linked on every website page. Each LAYOUT is self-contained
   (its own scoped .layout-<id> styles + tokens), so this file
   only carries page-level concerns: the dark body theme, the
   sticky header wrapper, and the scroll-reveal gate.
   ============================================================ */

html{scroll-behavior:smooth;}

/* The website build inlines `body{ background:#fff; … }` AFTER this linked
   sheet, so we override with higher specificity (body.site-body) to apply
   the deep-ocean theme to the page gaps / overscroll. */
body.site-body{
  margin:0;
  background:var(--abyss);
  color:var(--foam);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* The build wraps nav/footer fragments in <header class="site-header"> /
   <footer class="site-footer">. Make the header sticky over the page. */
.site-header{position:sticky;top:0;z-index:90;}

/* Anchored sections (#verksamhet, #bens, #costs, …) get their id on the
   .km wrapper from the manifest item's `anchor`. Offset deep-link scroll so
   the sticky header doesn't cover the section top. */
.km[id]{scroll-margin-top:84px;}

/* Scroll reveal — gated on `.js` (added by the site-behaviors module) so
   content is always visible without JS. Layouts mark elements with .reveal. */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);}
.js .reveal{opacity:0;transform:translateY(26px);}
.js .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;}}

/* Layout-less fragments (like tank-pressures) render as full-width
   `<section class="fragment fragment-<id>">` — inline-scope them to the
   site's content column and give vertical breathing room so they don't
   butt up against the surrounding KM sections. `--maxw` matches every
   other layout wrap on the site (nav, footer, title-and-content). */
.fragment-tank-pressures {
   max-width: var(--maxw, 1240px);
   margin: clamp(2rem, 5vw, 4rem) auto;
   margin-top: 0;
   padding-inline: clamp(16px, 3vw, 28px);
   box-sizing: border-box;
}
.fragment-tank-pressures .block-module {
   margin: 0;
}