/* ==========================================================================
   chrome.css – Wärme mit System
   Header, off-canvas, footer, CTA band, mobile bar (PROJECT_PLAN §9.5).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

#header .header-main {
  background-color: var(--ws-white);
}

/* A hairline appears only once the header is stuck, so the resting header
   sits flush against the hero. */
#header .header-main {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

#header.stuck .header-main {
  border-bottom-color: var(--ws-line);
  box-shadow: none;
}

/* Logo: 44px tall on desktop, 36px on mobile. */
#logo img {
  max-height: 44px;
  width: auto;
}

@media (max-width: 849px) {
  #logo img { max-height: 36px; }
}

/* Navigation */
.header-nav-main .nav-top-link {
  font-family: var(--ws-font-body);
  font-weight: 600;
  color: var(--ws-body);
  text-transform: none;
  letter-spacing: 0;
}

.header-nav-main .nav-top-link:hover { color: var(--ws-ink); }

/* Active item: ink text with a 2px underline, not a colour change
   (PROJECT_PLAN §9.5). Flatsome's own underline effect is replaced. */
/* The underline rides on the text, not on the full-height <a>, so it sits
   right under the label instead of at the bottom of the header. */
.header-nav-main > li.current-menu-item > a,
.header-nav-main > li.current_page_item > a,
.header-nav-main > li.current-menu-ancestor > a,
.header-nav-main > li.current_page_ancestor > a {
  color: var(--ws-ink);
  text-decoration: underline;
  text-decoration-color: var(--ws-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.header-nav-main > li > a::before,
.header-nav-main > li > a::after {
  display: none;
}

/* Phone link in the header */
.ws-header-contact {
  border: 0;
}

.ws-header-contact li { border: 0; }

.ws-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--ws-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ws-ink);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.ws-phone-link:hover { color: var(--ws-indigo); }

.ws-phone-link i { color: currentColor; }

/* The header CTA is the small variant of the primary button. */
.header-button-1 .button.primary {
  min-height: 44px;
  padding: 0.6em 1.15em 0.6em 1.35em;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Off-canvas (mobile menu)
   -------------------------------------------------------------------------- */

.ws-offcanvas-contact {
  padding: var(--ws-space-5) 0 0;
  border-top: 1px solid var(--ws-line);
}

.ws-offcanvas-contact p { margin: 0 0 var(--ws-space-1); }

.ws-offcanvas-contact .p-small {
  margin-top: var(--ws-space-4);
  color: var(--ws-muted);
}

.ws-offcanvas-contact a:not(.button) {
  font-family: var(--ws-font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ws-ink);
  text-decoration: none;
}

.ws-offcanvas-contact .button.primary {
  margin-top: var(--ws-space-5);
  width: 100%;
  justify-content: center;
}

.mobile-sidebar .nav-sidebar > li > a {
  font-family: var(--ws-font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ws-ink);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.ws-cta-band .p-small,
.ws-footer .p-small {
  color: rgba(255, 255, 255, 0.72);
}

.ws-cta-band .p-small a,
.ws-footer .p-small a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ws-footer h4 {
  /* Sentence case, no all-caps labels (PROJECT_PLAN §5.1.5). */
  margin-bottom: var(--ws-space-4);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}

.ws-footer p { color: rgba(255, 255, 255, 0.82); }

.ws-footer-logo img { max-width: 220px; }

/* Flatsome indents list items inside a column with
   `li { margin-left: 1.3em !important }`. The footer link lists are
   navigation, not prose, so the indent goes – !important is the only way to
   beat it without editing the parent theme. */
.ws-footer ul.ws-footer-links {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.ws-footer ul.ws-footer-links > li {
  margin-left: 0 !important;
}

.ws-footer-links li {
  margin: 0 0 var(--ws-space-2);
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
}

.ws-footer-links a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.ws-footer-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.ws-footer-address { color: rgba(255, 255, 255, 0.62) !important; }

.ws-footer-bottom {
  padding-top: var(--ws-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ws-footer-bottom p { margin: 0; }

@media (min-width: 850px) {
  .ws-footer-jobs { text-align: right; }
}

/* Flatsome's own footer wrappers are unused when a footer block is assigned,
   but the absolute footer can still print an empty bar. */
.footer-wrapper .absolute-footer { display: none; }

/* --------------------------------------------------------------------------
   Mobile bar – two halves, fixed, safe-area aware (content doc §1.3).
   -------------------------------------------------------------------------- */

.ws-mobile-bar { display: none; }

@media (max-width: 849px) {
  .ws-mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 999;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ws-ink);
    box-shadow: 0 -8px 24px -16px rgba(14, 23, 49, 0.6);
  }

  .ws-mobile-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 var(--ws-space-3);
    font-family: var(--ws-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }

  .ws-mobile-bar__call {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .ws-mobile-bar__cta {
    background: var(--ws-indigo);
  }

  .ws-mobile-bar__item:focus-visible {
    outline: 3px solid var(--ws-focus);
    outline-offset: -3px;
  }
}

/* The UX Block wrapper must not add spacing of its own. */
.ws-mobile-bar-wrapper,
.ws-mobile-bar + .ux-html { margin: 0; }