/* ================================================================
   BaltiCo v0.16.3 – alignment, sticky-rail and dynamic-header refinements
   Loaded last so these fixes are authoritative without disturbing the
   established component system.
   ================================================================ */

/* ---------- Shared eyebrow / heading rhythm ---------- */
.about-deck__eyebrow,
.legal-page__header .eyebrow,
.bridge-calculator-page__intro .eyebrow,
.article-kicker,
.content-drawer-article__kicker {
  margin-bottom: 19px !important;
}

/* ---------- Legal pages ---------- */
@media (min-width: 901px) {
  .legal-page__header {
    width: 100%;
    max-width: none;
  }

  .legal-page__header h1 {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(2.8rem, 4.65vw, 4.95rem);
  }
}

@media (max-width: 900px) {
  .legal-page__header h1 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

/* ---------- Leichtbaulösungen local navigation ---------- */
.service-sibling-nav-wrap {
  padding-top: 36px;
}

.service-sibling-nav {
  padding-bottom: 28px;
}

/* The outer edge of the first button now shares the exact page axis with H1. */
.service-sibling-nav li:first-child {
  margin-left: 0 !important;
}

.service-sibling-nav ul {
  gap: 12px 24px;
}

.service-sibling-nav__link {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .service-sibling-nav-wrap {
    padding-top: 28px;
  }

  .service-sibling-nav {
    padding-bottom: 24px;
  }

  .service-sibling-nav ul {
    gap: 8px;
  }

  .service-sibling-nav__link {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 12.5px;
  }
}

/* ---------- About page: restore true sticky rails ---------- */
/* `hidden` on only one overflow axis creates a scrolling ancestor in Safari
   and Chromium and can disable position:sticky. `clip` prevents horizontal
   bleed without becoming the rail's scroll container. */
.baltico-about-gallery-page {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.about-deck,
.about-deck__viewport,
.about-deck__track,
.about-deck__slide,
.about-deck__grid {
  overflow: visible !important;
}

@media (min-width: 901px) {
  .about-deck__rail {
    position: sticky;
    top: calc(var(--header-height) + var(--admin-bar-offset));
    align-self: start;
    height: fit-content;
    min-height: 0;
    padding-bottom: 54px;
  }

  /* Company prose starts exactly at the measured top edge of the keyfacts box.
     about-gallery.js writes --company-content-top from the live layout. */
  .about-deck__slide:first-child .about-deck__content {
    padding-top: var(--company-content-top, 205px);
  }

  /* History content should keep its normal section-top alignment while the
     left title rail remains pinned until this chapter ends. */
  .about-deck__slide:nth-child(2) .about-deck__content {
    padding-top: clamp(64px, 8vh, 98px);
  }
}

/* ---------- Calculator Forminator spacing ---------- */
.vbk-form .baltico-form-slot--calculator .forminator-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
}

.vbk-form .baltico-form-slot--calculator .forminator-col,
.vbk-form .baltico-form-slot--calculator [class*="forminator-col-"] {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
}

.vbk-form .baltico-form-slot--calculator .forminator-textarea {
  height: 112px !important;
  min-height: 112px !important;
  max-height: 190px !important;
}

@media (max-width: 640px) {
  .vbk-form .baltico-form-slot--calculator .forminator-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .vbk-form .baltico-form-slot--calculator .forminator-col,
  .vbk-form .baltico-form-slot--calculator [class*="forminator-col-"] {
    width: 100% !important;
  }
}

/* ---------- Responsive header: natural scroll, fixed burger only ---------- */
@media (max-width: 1100px) {
  /* The physical header is part of the document flow. It therefore returns
     naturally as the user scrolls back to the top instead of snapping into a
     sticky state at an arbitrary position. */
  .site-header {
    position: relative !important;
    top: auto !important;
  }

  /* When the mobile menu is open, restore a fixed full header so the close
     control and navigation always have a stable top edge. */
  body.nav-is-open .site-header {
    position: fixed !important;
    top: var(--admin-bar-offset) !important;
    right: 0;
    left: 0;
    z-index: 130;
    background: rgba(255,255,255,.99) !important;
    border-bottom-color: var(--color-divider) !important;
    box-shadow: 0 1px 0 rgba(6,24,38,.04) !important;
    pointer-events: auto !important;
  }

  body.nav-is-open .site-header .site-logo {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.nav-is-open .site-header .nav-toggle {
    position: static !important;
    width: auto;
    min-width: 44px;
    height: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.nav-is-open .site-header .nav-toggle__label {
    display: inline !important;
  }
}