/* Digibis Header Bar — self-contained styles.
   Uses its own --dhb-* custom properties (not the theme's --color-*
   variables) so this plugin renders correctly on any theme, not just
   the Digibis theme. Values match the current digibis.be house style. */
.digibis-header-bar {
  --dhb-primary: #217a4c;
  --dhb-primary-dark: #185c39;
  --dhb-primary-light: #e9f6ee;
  --dhb-dark: #0f1720;
  --dhb-muted: #5b6472;
  --dhb-border: #e4e9e6;
  --dhb-radius: 14px;
  --dhb-shadow: 0 10px 30px -12px rgba(15, 23, 32, 0.15);
  --dhb-container: 1440px;
  --dhb-container-pad: clamp(24px, 4vw, 64px);
  --dhb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--dhb-font);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--dhb-border);
}

/* Row layout. Padding-only by default (no max-width) so the header is
   full-bleed like the hero banner underneath it — logo/phone/email on the
   left and the buttons on the right then line up with full-width page
   elements exactly, with no viewport-width math involved, so nothing
   drifts on resize or browser zoom. Set data-dhb-width="boxed" on the
   <header> (via the plugin's settings page) to instead keep the header
   within the same fixed, centered column as the rest of the site. */
.dhb-container { padding: 0 var(--dhb-container-pad); }
.digibis-header-bar[data-dhb-width="boxed"] .dhb-container {
  max-width: var(--dhb-container);
  margin: 0 auto;
}
.dhb-nav-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  row-gap: 6px;
  padding: 10px 0 14px;
}

.digibis-header-bar .topbar-info { grid-row: 1; display: flex; gap: 16px; font-size: 0.8rem; color: var(--dhb-muted); }
.digibis-header-bar .topbar-info a { color: var(--dhb-muted); font-weight: 600; text-decoration: none; }
.digibis-header-bar .topbar-info a:hover { color: var(--dhb-primary-dark); }

.digibis-header-bar .topbar-social { grid-row: 1; display: flex; gap: 8px; }
.digibis-header-bar .topbar-social a {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--dhb-border);
  border-radius: 6px;
  color: var(--dhb-muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-decoration: none;
}
.digibis-header-bar .topbar-social a:hover { background: var(--dhb-primary-light); border-color: var(--dhb-primary); color: var(--dhb-primary-dark); }

.digibis-header-bar .brand-nav { grid-row: 2; display: flex; align-items: center; gap: var(--dhb-logo-gap, 32px); }
.digibis-header-bar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; color: var(--dhb-dark); flex-shrink: 0; text-decoration: none; }
/* !important here is deliberate: some themes/page-builders (e.g. Elementor's
   global "img { max-width:100%; height:auto; }" reset) ship a same-or-lower
   specificity rule that can otherwise shrink this image regardless of the
   selector specificity math, since load order between plugin and theme CSS
   isn't guaranteed. This guarantees the configured height always wins. */
.digibis-header-bar .brand img.logo { height: var(--dhb-logo-height, 80px) !important; width: auto !important; max-width: none !important; display: block; }

/* Positie van logo + contactgegevens (data-dhb-align, ingesteld via
   Instellingen > Digibis Header). De knoppen (.nav-cta) staan altijd aan
   de andere kant van de rij. */
.digibis-header-bar[data-dhb-align="left"] .topbar-info,
.digibis-header-bar[data-dhb-align="left"] .topbar-social,
.digibis-header-bar[data-dhb-align="left"] .brand-nav { grid-column: 1; justify-self: start; }
.digibis-header-bar[data-dhb-align="left"] .nav-cta { grid-column: 3; justify-self: end; }

.digibis-header-bar[data-dhb-align="center"] .topbar-info,
.digibis-header-bar[data-dhb-align="center"] .topbar-social,
.digibis-header-bar[data-dhb-align="center"] .brand-nav { grid-column: 2; justify-self: center; }
.digibis-header-bar[data-dhb-align="center"] .nav-cta { grid-column: 3; justify-self: end; }

.digibis-header-bar[data-dhb-align="right"] .topbar-info,
.digibis-header-bar[data-dhb-align="right"] .topbar-social,
.digibis-header-bar[data-dhb-align="right"] .brand-nav { grid-column: 3; justify-self: end; }
.digibis-header-bar[data-dhb-align="right"] .nav-cta { grid-column: 1; justify-self: start; }

/* Fijnafstemming in exacte pixels, bovenop de gekozen positie hierboven
   (--dhb-logo-offset / --dhb-cta-offset, ingesteld via Instellingen >
   Digibis Header > Pixel-exacte opmaak). 0px = geen effect. */
.digibis-header-bar .topbar-info,
.digibis-header-bar .topbar-social,
.digibis-header-bar .brand-nav { position: relative; left: var(--dhb-logo-offset, 0px); }
.digibis-header-bar .nav-cta { position: relative; left: var(--dhb-cta-offset, 0px); }

.digibis-header-bar nav.main-nav { display: flex; align-items: center; gap: 6px; }
.digibis-header-bar nav.main-nav > ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.digibis-header-bar nav.main-nav > ul > li { position: relative; }
.digibis-header-bar nav.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dhb-dark);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.digibis-header-bar nav.main-nav > ul > li > a:hover,
.digibis-header-bar nav.main-nav > ul > li > a.active { background: var(--dhb-primary-light); color: var(--dhb-primary-dark); }

.digibis-header-bar .menu-item-has-children { position: relative; }
.digibis-header-bar .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff;
  border: 1px solid var(--dhb-border); border-radius: var(--dhb-radius); box-shadow: var(--dhb-shadow);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .15s ease;
  list-style: none; margin: 0;
}
.digibis-header-bar .menu-item-has-children:hover > .sub-menu,
.digibis-header-bar .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.digibis-header-bar .sub-menu a { display: block; padding: 10px 12px; border-radius: 10px; font-size: .93rem; font-weight: 600; color: var(--dhb-dark); text-decoration: none; }
.digibis-header-bar .sub-menu a:hover { background: var(--dhb-primary-light); color: var(--dhb-primary-dark); }

.digibis-header-bar .nav-cta { grid-row: 1 / 3; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.digibis-header-bar .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.digibis-header-bar .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--dhb-dark); margin: 5px 0; }

/* Buttons — scoped to the header so this plugin doesn't depend on the
   theme's own .btn class (though the classes/markup match, so an existing
   Digibis-style theme will render identically). */
.digibis-header-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.digibis-header-bar .btn-primary { background: var(--dhb-primary); color: #fff; }
.digibis-header-bar .btn-primary:hover { background: var(--dhb-primary-dark); transform: translateY(-2px); box-shadow: var(--dhb-shadow); }
.digibis-header-bar .btn-outline { border-color: var(--dhb-border); color: var(--dhb-dark); background: #fff; }
.digibis-header-bar .btn-outline:hover { border-color: var(--dhb-primary); color: var(--dhb-primary); transform: translateY(-2px); }

@media (max-width: 720px) {
  .dhb-nav-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .digibis-header-bar .topbar-social { order: 1; flex: 0 0 100%; justify-content: flex-start; margin-bottom: 6px; }
  .digibis-header-bar .topbar-info { order: 2; flex: 0 0 100%; justify-content: center; margin-bottom: 6px; }
  .digibis-header-bar .brand-nav { order: 3; gap: 0; margin-left: calc(12px + 1cm); }
  .digibis-header-bar .nav-cta { order: 4; }
  .digibis-header-bar nav.main-nav {
    position: fixed; inset: 64px 16px auto 16px; background: #fff;
    border: 1px solid var(--dhb-border); border-radius: var(--dhb-radius); box-shadow: var(--dhb-shadow);
    padding: 14px; flex-direction: column; align-items: stretch; display: none;
  }
  .digibis-header-bar nav.main-nav.open { display: flex; }
  .digibis-header-bar nav.main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .digibis-header-bar .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: none; padding-left: 12px; }
  .digibis-header-bar .menu-item-has-children.open > .sub-menu { display: block; }
  .digibis-header-bar .nav-toggle { display: block; }
  .digibis-header-bar .nav-cta .btn-outline { display: none; }
}