/*
 * HARK Baseline — entrypoint. Alle Theme Studio-blokken + shell staan in het gedeelde stylesheet.
 * @see /assets/site-themes/_shared/lte-theme-canonical.css
 */
/* Bootstrap 5.3+ layout/utility alignment via gedeeld canonical bestand. */
@import url("/assets/site-themes/_shared/lte-theme-canonical.css?v=20260425-12");

/*
 * HARK Creative — platform-shell: donkere vaste sitekop, robuuste voettekst, Bootstrap-layout.
 * (Tokens in theme.json vullen --theme-* via <style data-theme-tokens> — hier alleen vaste-merk “defaults”.)
 */
body.theme-hark-baseline {
  --hc-shell: var(--theme-secondary, #0a0a0a);
  --hc-shell-contrast: var(--theme-section-bg, #fafafa);
  --hc-shell-muted: var(--theme-muted, #a1a1aa);
}

/* Sticky foot: main groeit, footer blijft onderaan op korte pagina’s */
body.theme-hark-baseline.lte-ts-public {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.theme-hark-baseline.lte-ts-public > main,
body.theme-hark-baseline.lte-ts-public > #page.site {
  flex: 1 0 auto;
}

/* Donkere balk: volle breedte achter de navbar (live + editor-canvas) */
body.theme-hark-baseline :is(
  header[role="banner"] .lte-header-fullwidth-bg,
  #ltePublicRuntimeCanvas header[role="banner"] .lte-header-fullwidth-bg,
  #liveThemeEditor #ltePreviewCanvas header[role="banner"] .lte-header-fullwidth-bg
) {
  background: var(--theme-header-bg, var(--hc-shell));
}

body.theme-hark-baseline :is(
  #masthead.lte-header-preview,
  .lte-header-preview#masthead
) {
  color: var(--theme-header-text, var(--hc-shell-contrast));
  background: transparent;
}

body.theme-hark-baseline :is(
  .theme-header-nav a,
  .hc-menu-root a
) {
  color: var(--theme-header-link, var(--hc-shell-muted));
  text-decoration: none;
}
body.theme-hark-baseline :is(
  .theme-header-nav a:hover,
  .hc-menu-root a:hover
) {
  color: var(--theme-header-link-hover, var(--theme-header-text, var(--hc-shell-contrast)));
}

/* V2-builder compatible hoofdmenu: dezelfde markup moet in canvas en live site netjes werken. */
body.theme-hark-baseline .lte-header-preview {
  min-height: 72px;
  gap: clamp(12px, 2vw, 28px);
}
body.theme-hark-baseline .lte-header-brand-link {
  color: var(--theme-header-brand, var(--theme-header-text, var(--hc-shell-contrast)));
}
body.theme-hark-baseline .lte-logo-placeholder {
  color: var(--theme-header-brand, var(--theme-header-text, var(--hc-shell-contrast)));
  border-color: color-mix(in srgb, var(--theme-header-brand, var(--theme-header-text, var(--hc-shell-contrast))) 28%, transparent);
}
body.theme-hark-baseline .lte-header-nav {
  min-width: 0;
}
body.theme-hark-baseline .hc-menu-root {
  align-items: center;
  gap: 6px 14px;
}
body.theme-hark-baseline .hc-menu-root > .hc-menu-item {
  position: relative;
}
body.theme-hark-baseline .hc-menu-root > .hc-menu-item > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.2;
  white-space: nowrap;
}
body.theme-hark-baseline .hc-menu-root > .hc-menu-item > a:hover,
body.theme-hark-baseline .hc-menu-root > .hc-menu-item.is-open > a {
  background: color-mix(in srgb, var(--theme-header-text, var(--hc-shell-contrast)) 10%, transparent);
}
body.theme-hark-baseline .hc-menu-root .hc-menu-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: none;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}
body.theme-hark-baseline .hc-menu-root .hc-menu-item:hover > .hc-menu-submenu,
body.theme-hark-baseline .hc-menu-root .hc-menu-item.is-open > .hc-menu-submenu,
body.theme-hark-baseline .hc-menu-root .hc-menu-item:focus-within > .hc-menu-submenu {
  display: block;
}
body.theme-hark-baseline .hc-menu-root .hc-menu-submenu .hc-menu-item {
  position: relative;
}
body.theme-hark-baseline .hc-menu-root .hc-menu-submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  color: #475569;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
}
body.theme-hark-baseline .hc-menu-root .hc-menu-submenu a:hover,
body.theme-hark-baseline .hc-menu-root .hc-menu-submenu .hc-menu-item.is-open > a {
  color: #0f172a;
  background: #f1f5f9;
}
body.theme-hark-baseline .hc-menu-root .hc-menu-submenu .hc-menu-submenu {
  top: -8px;
  left: calc(100% + 8px);
}
body.theme-hark-baseline .hc-menu-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 31;
  display: none;
  width: min(860px, 90vw);
  transform: translateX(-50%);
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}
body.theme-hark-baseline .hc-menu-root .hc-menu-item:hover > .hc-menu-mega,
body.theme-hark-baseline .hc-menu-root .hc-menu-item.is-open > .hc-menu-mega,
body.theme-hark-baseline .hc-menu-root .hc-menu-item:focus-within > .hc-menu-mega {
  display: block;
}
body.theme-hark-baseline .hc-menu-mega a {
  color: #475569;
}
body.theme-hark-baseline .hc-menu-mega a:hover {
  color: #0f172a;
}
body.theme-hark-baseline .theme-header-cta {
  white-space: nowrap;
}
@media (max-width: 860px) {
  body.theme-hark-baseline .hc-menu-root {
    display: block;
  }
  body.theme-hark-baseline .hc-menu-root > .hc-menu-item > a,
  body.theme-hark-baseline .hc-menu-root .hc-menu-submenu a {
    min-height: 44px;
    width: 100%;
    white-space: normal;
  }
  body.theme-hark-baseline .hc-menu-root .hc-menu-submenu,
  body.theme-hark-baseline .hc-menu-mega {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    margin: 4px 0 8px 12px;
    transform: none;
    box-shadow: none;
  }
  body.theme-hark-baseline .hc-menu-root .hc-menu-item.is-open > .hc-menu-submenu,
  body.theme-hark-baseline .hc-menu-root .hc-menu-item.is-open > .hc-menu-mega,
  body.theme-hark-baseline .hc-menu-root .hc-menu-item:focus-within > .hc-menu-submenu,
  body.theme-hark-baseline .hc-menu-root .hc-menu-item:focus-within > .hc-menu-mega {
    display: block;
  }
}

/* Voet: donkere band (vullende / fullwidth varianten) */
body.theme-hark-baseline :is(
  .lte-footer-preview,
  .lte-footer-bg
) {
  background: var(--theme-footer-bg, var(--hc-shell));
  color: var(--theme-footer-text, var(--hc-shell-contrast));
}
body.theme-hark-baseline .lte-footer-preview a {
  color: var(--theme-footer-link, var(--hc-shell-muted));
}
body.theme-hark-baseline .lte-footer-preview a:hover {
  color: var(--theme-footer-link-hover, var(--theme-footer-text, var(--hc-shell-contrast)));
}