/* ==========================================================================
   Layout — container, sektioner, baggrundsbånd, navigation
   ========================================================================== */

/* --- Html/body: overscroll-farve + nav-padding -------------------------- */

html {
  background-color: hsl(var(--section-blue));
}

body {
  padding-top: var(--nav-h);
}

/* WP admin bar: 32px på desktop, 46px på ≤782px */
.admin-bar .site-nav {
  top: 32px;
}
.admin-bar body {
  padding-top: calc(var(--nav-h) + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .site-nav {
    top: 46px;
  }
  .admin-bar body {
    padding-top: calc(var(--nav-h) + 46px);
  }
}

/* --- Skjul Hello Elementors standard sidetitel på Elementor-sider ------- */

.elementor-page .page-header {
  display: none;
}

/* --- Container ---------------------------------------------------------- */

.container-editorial {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

/* --- Sektioner ---------------------------------------------------------- */

.section {
  padding: var(--space-section) 0;
}

/* Mørk sektion (lilla baggrund) */
.section-dark {
  background: hsl(var(--navy));
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark blockquote {
  color: hsl(var(--white) / 0.92);
}
.section-dark p,
.section-dark cite,
.section-dark span,
.section-dark li {
  color: hsl(var(--white) / 0.65);
}

/* Stille sektion (cream baggrund) */
.section-quiet {
  background: hsl(var(--off-white));
}

/* Sektionsbånd — alternerer blå/cream på tværs af sider */
.section-band-blue  { background: hsl(var(--section-blue)); }
.section-band-cream { background: hsl(var(--section-cream)); }

/* --- Navigation --------------------------------------------------------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: hsl(var(--section-blue));
  transition:
    height 400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 300ms ease,
    backdrop-filter 300ms ease;
}

.site-nav.scrolled {
  background: hsl(var(--section-blue) / 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border-light) / 0.5);
}

.nav-logo {
  height: 115px;
  width: auto;
  transition: height 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Mobil/tablet — samme breakpoint som hamburger-menuen (se _nav.css) */
@media (max-width: 1023px) {
  .nav-logo {
    height: 60px;
  }
}

.nav-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--navy-text));
  text-decoration: none;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  opacity: 0.7;
  transition: opacity 200ms ease;
}
.nav-link:hover,
.nav-link--active {
  opacity: 1;
}
.nav-link--active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: hsl(var(--navy-text));
}

/* --- Divider ------------------------------------------------------------ */

.divider {
  height: 1px;
  background: hsl(var(--border-light));
  border: none;
}

/* --- Mobile-accent-linje ------------------------------------------------ */

.mobile-accent-line {
  display: none; /* vises kun på mobil via _animations.css media query */
  width: 48px;
  height: 3px;
  margin-bottom: 24px;
}
.mobile-accent-line--blue   { background: hsl(var(--constellation-blue)); }
.mobile-accent-line--orange { background: hsl(var(--constellation-orange)); }
.mobile-accent-line--lime   { background: hsl(var(--constellation-lime)); }
.mobile-accent-line--purple { background: hsl(var(--constellation-purple)); }

@media (max-width: 767px) {
  .mobile-accent-line { display: block; }
}
@media (min-width: 768px) {
  .mobile-accent-line { display: none; }
}