/* ============================================================
   navbar.css — Het Portaal custom navbar (utility bar + main nav + Merken megamenu)
   Loads AFTER modern.css. Scope: every rule prefixed `body.hetportaal`.
   Classes namespaced `hp-` to avoid colliding with Bootstrap/WooCommerce
   (.nav/.nav-link/.btn/.btn-primary/.container all exist elsewhere).
   Fonts are INHERITED from the existing theme (Raleway / Source Sans Pro).
   ============================================================ */

/* ----------------------------------------------------------------
   TOKENS — white base + brand blue/orange accents
   ---- Spec palette: white nav, brand blue #3F8FD0 (hover/active text),
   ---- brand orange #E8651E (active/hover underline indicator).
   ---- Util bar bg is deepened blue so its white text stays legible.
   ---------------------------------------------------------------- */
body.hetportaal{
  --hp-nav-dark:#1f5c8c;          /* util bar bg → brand blue (deepened for white-text contrast) */
  --hp-nav-accent:#3f8fd0;        /* link hover text + Contact pill → brand blue */
  --hp-nav-accent-strong:#2f74b0; /* Contact button hover */
  --hp-nav-underline:#e8651e;     /* active/hover indicator → brand ORANGE */
  --hp-nav-link:#2b2b2b;          /* nav link text */
  --hp-nav-hover:#eef3f8;         /* nav link hover bg */
  --hp-cream:#f7ecd6;             /* util tag dot */
  --hp-nav-h:78px;
  --hp-util-h:38px;
}

/* ----------------------------------------------------------------
   Neutralise modern.css's sticky-on-#wrapper-navbar; sticky moves to .hp-nav
   ---------------------------------------------------------------- */
body.hetportaal #wrapper-navbar{
  position:static;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  z-index:auto;
}

body.hetportaal .hp-nav-inner,
body.hetportaal .hp-util-inner,
body.hetportaal .hp-mobile-menu{
  max-width:var(--hp-container,1240px);
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
}

/* shared inline icon sizing */
body.hetportaal .hp-ico{ width:16px; height:16px; flex:none; }

/* ----------------------------------------------------------------
   (a) UTILITY BAR (dark)
   ---------------------------------------------------------------- */
body.hetportaal .hp-util{
  background:var(--hp-nav-dark);
  color:rgba(255,255,255,.8);
  font-size:12.5px;
  letter-spacing:.01em;
}
body.hetportaal .hp-util-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:var(--hp-util-h);
  gap:24px;
}
body.hetportaal .hp-util a{ color:rgba(255,255,255,.85); text-decoration:none; }
body.hetportaal .hp-util a:hover{ color:#fff; }
body.hetportaal .hp-util-left,
body.hetportaal .hp-util-right{ display:flex; align-items:center; gap:20px; }
body.hetportaal .hp-util-item{ display:inline-flex; align-items:center; gap:8px; }
body.hetportaal .hp-util-item .hp-ico{ width:13px; height:13px; opacity:.8; }
body.hetportaal .hp-util-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff; font-weight:500; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase;
}
body.hetportaal .hp-util-tag .hp-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--hp-cream);
  box-shadow:0 0 0 3px rgba(247,236,214,.18);
}

/* ----------------------------------------------------------------
   (a2) ADD-TO-CALENDAR popover (on the event tag)
   ---------------------------------------------------------------- */
body.hetportaal .hp-cal{ position:relative; }
body.hetportaal .hp-util-tag.hp-cal-toggle{
  background:transparent; cursor:pointer; font-family:inherit; line-height:1.4;
  transition:background-color .15s ease, border-color .15s ease;
}
body.hetportaal .hp-util-tag.hp-cal-toggle:hover{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35);
}
body.hetportaal .hp-cal-caret{ width:12px; height:12px; opacity:.85; transition:transform .2s ease; }
body.hetportaal .hp-cal.is-open .hp-cal-caret{ transform:rotate(180deg); }

body.hetportaal .hp-cal-pop{
  position:absolute; top:calc(100% + 9px); left:0;
  width:300px; max-width:calc(100vw - 32px);
  background:#fff; color:#2b2b2b; text-align:left;
  border:1px solid var(--hp-border,rgba(20,24,31,.08));
  border-radius:14px; box-shadow:0 24px 48px -18px rgba(20,24,31,.30);
  padding:16px; z-index:1200;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
body.hetportaal .hp-cal.is-open .hp-cal-pop{ opacity:1; visibility:visible; transform:translateY(0); }
body.hetportaal .hp-cal-head{ margin-bottom:13px; }
body.hetportaal .hp-cal-title{ font-size:15px; font-weight:700; color:#1f2730; text-transform:none; letter-spacing:0; }
body.hetportaal .hp-cal-meta{ font-size:12px; color:#5b6471; margin-top:3px; text-transform:none; letter-spacing:0; font-weight:400; }

body.hetportaal .hp-cal-days{ display:flex; gap:6px; margin-bottom:12px; }
body.hetportaal .hp-cal-day{
  flex:1; cursor:pointer; padding:7px 4px; border-radius:8px;
  border:1px solid var(--hp-border,rgba(20,24,31,.14)); background:#fff;
  font-size:12px; font-weight:600; color:#5b6471; font-family:inherit;
  white-space:nowrap; transition:all .15s ease;
}
body.hetportaal .hp-cal-day:hover{ border-color:#b8d0e3; color:#1f5c8c; }
body.hetportaal .hp-cal-day.is-active{ background:#3f8fd0; border-color:#3f8fd0; color:#fff; }

body.hetportaal .hp-cal-svcs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
body.hetportaal .hp-cal-svc{
  cursor:pointer; padding:9px 10px; border-radius:9px;
  border:1px solid var(--hp-border,rgba(20,24,31,.14)); background:#fff;
  font-size:12.5px; font-weight:600; color:#2c333d; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  transition:all .15s ease;
}
body.hetportaal .hp-cal-svc:hover{
  border-color:#b8d0e3; color:#1f5c8c; background:#eef3f8; transform:translateY(-1px);
}
body.hetportaal .hp-cal-hint{ font-size:11px; color:#7a8290; margin-top:11px; line-height:1.45; }

@media (max-width:600px){
  body.hetportaal .hp-cal-pop{ left:auto; right:0; }
}

/* ----------------------------------------------------------------
   (b) MAIN NAV (sticky + frosted)
   ---------------------------------------------------------------- */
body.hetportaal .hp-nav{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hp-border,rgba(20,24,31,.08));
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.hetportaal .hp-nav{ background:#fff; }
}
body.hetportaal .hp-nav-inner{
  display:flex; align-items:center; gap:40px;
  min-height:var(--hp-nav-h);
}

/* logo */
body.hetportaal .hp-brand{ display:flex; align-items:center; flex-shrink:0; }
body.hetportaal .hp-brand img{ height:40px; width:auto; display:block; }

/* desktop menu */
body.hetportaal .hp-menu{ display:flex; align-items:center; gap:4px; flex:1; }
body.hetportaal .hp-item{ position:relative; }
body.hetportaal .hp-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px;
  font-size:14.5px; font-weight:600;
  color:var(--hp-nav-link); text-decoration:none;
  background:transparent; border:0; cursor:pointer;
  border-radius:var(--hp-radius-md,10px);
  transition:color .15s ease, background-color .15s ease;
  white-space:nowrap; font-family:inherit;
}
body.hetportaal .hp-link:hover,
body.hetportaal .hp-link:focus{ color:var(--hp-nav-accent); background:var(--hp-nav-hover); }
body.hetportaal .hp-link.active{ color:var(--hp-nav-accent-strong); }
body.hetportaal .hp-link.active::after,
body.hetportaal .hp-item:hover > .hp-link::after,
body.hetportaal .hp-link:hover::after,
body.hetportaal .hp-link:focus::after{
  content:''; position:absolute; left:14px; right:14px; bottom:-1px;
  height:2px; background:var(--hp-nav-underline);
}
body.hetportaal .hp-link .hp-chevron{ width:14px; height:14px; opacity:.7; transition:transform .2s ease; }

/* right actions */
body.hetportaal .hp-nav-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
body.hetportaal .hp-icon-btn{
  width:38px; height:38px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:transparent;
  border:1px solid var(--hp-border,rgba(20,24,31,.08));
  color:var(--hp-nav-link); cursor:pointer;
  transition:all .15s ease;
}
body.hetportaal .hp-icon-btn:hover{ background:var(--hp-nav-hover); border-color:#b8d0e3; color:var(--hp-nav-accent); }

/* Contact pill */
body.hetportaal .hp-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; font-size:14px; font-weight:600;
  border-radius:999px; border:0; text-decoration:none; white-space:nowrap;
  transition:all .2s ease; font-family:inherit; cursor:pointer;
}
body.hetportaal .hp-btn-primary{
  background:var(--hp-nav-accent); color:#fff;
  box-shadow:0 1px 2px rgba(20,24,31,.08), inset 0 1px 0 rgba(255,255,255,.14);
}
body.hetportaal .hp-btn-primary:hover{
  background:var(--hp-nav-accent-strong); color:#fff; transform:translateY(-1px);
  box-shadow:0 8px 18px -8px rgba(31,69,112,.6);
}
body.hetportaal .hp-btn .hp-ico{ width:15px; height:15px; }

/* ----------------------------------------------------------------
   (c) SEARCH POP
   ---------------------------------------------------------------- */
body.hetportaal .hp-search{ position:relative; }
body.hetportaal .hp-search-pop{
  position:absolute; top:calc(100% + 10px); right:0;
  background:#fff; border:1px solid var(--hp-border,rgba(20,24,31,.08));
  border-radius:var(--hp-radius-md,10px); box-shadow:var(--hp-shadow-lg,0 24px 48px -18px rgba(20,24,31,.18));
  padding:12px; width:300px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
body.hetportaal .hp-search.is-open .hp-search-pop{ opacity:1; visibility:visible; transform:translateY(0); }
body.hetportaal .hp-search-pop .search-form,
body.hetportaal .hp-search-pop form{ display:flex; gap:8px; margin:0; }
body.hetportaal .hp-search-pop input[type="search"],
body.hetportaal .hp-search-pop .search-field{ flex:1; min-width:0; }

/* ----------------------------------------------------------------
   (d) MERKEN MEGAMENU
   ---------------------------------------------------------------- */
body.hetportaal .hp-megamenu{
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid var(--hp-border,rgba(20,24,31,.08));
  border-radius:var(--hp-radius-xl,28px); box-shadow:var(--hp-shadow-lg,0 24px 48px -18px rgba(20,24,31,.18));
  padding:28px; width:820px; max-width:calc(100vw - 40px);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
/* open on hover/focus (desktop) or via JS .is-open (touch/click) */
body.hetportaal .hp-has-menu:hover .hp-megamenu,
body.hetportaal .hp-has-menu:focus-within .hp-megamenu,
body.hetportaal .hp-has-menu.is-open .hp-megamenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
body.hetportaal .hp-has-menu.is-open .hp-chevron,
body.hetportaal .hp-has-menu:hover .hp-chevron{ transform:rotate(180deg); }

body.hetportaal .hp-mm-grid{ display:grid; grid-template-columns:1.1fr 2.4fr; gap:28px; }

/* feature card */
body.hetportaal .hp-mm-feature{
  background:linear-gradient(160deg, #1f5c8c, #3f8fd0);
  color:#fff; border-radius:var(--hp-radius-lg,18px); padding:22px;
  position:relative; overflow:hidden;
}
body.hetportaal .hp-mm-feature::after{
  content:''; position:absolute; right:-40px; top:-40px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(247,236,214,.25), transparent 70%);
}
body.hetportaal .hp-mm-eyebrow{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); font-weight:700;
}
body.hetportaal .hp-mm-feature-title{
  font-weight:600; font-size:22px; line-height:1.15;
  margin:10px 0 8px; color:#fff;
}
body.hetportaal .hp-mm-feature p{ font-size:13px; color:rgba(255,255,255,.8); margin:0 0 16px; line-height:1.5; }
body.hetportaal .hp-mm-cta{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--hp-cream); font-size:13px; font-weight:600; text-decoration:none;
}
body.hetportaal .hp-mm-cta:hover{ color:#fff; }
body.hetportaal .hp-mm-cta .hp-ico{ width:14px; height:14px; }

/* UITGELICHT — magazine covers in de feature-kaart */
body.hetportaal .hp-mm-mags{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 16px; }
body.hetportaal .hp-mm-mag{ display:block; text-decoration:none; color:#fff; }
body.hetportaal .hp-mm-mag-cover{
  display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:-6px 8px 18px -8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  transition:transform var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-mm-mag:hover .hp-mm-mag-cover{ transform:translateY(-3px) rotate(-1deg); }
body.hetportaal .hp-mm-mag-name{ display:block; margin-top:8px; font-size:12.5px; font-weight:700; line-height:1.2; }
body.hetportaal .hp-mm-mag-issue{ display:block; font-size:11px; color:rgba(255,255,255,.75); }

/* lists */
body.hetportaal .hp-mm-lists{ display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; align-content:start; }
body.hetportaal .hp-mm-list-title{
  grid-column:1 / -1;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#7a8290; font-weight:700;
  padding:4px 12px 8px; border-bottom:1px dashed var(--hp-border,rgba(20,24,31,.08));
  margin:6px 0;
}
body.hetportaal .hp-mm-list-title:first-child{ margin-top:0; }
body.hetportaal .hp-mm-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; border-radius:var(--hp-radius-md,10px);
  text-decoration:none; transition:background-color .15s ease;
}
body.hetportaal .hp-mm-item:hover{ background:var(--hp-nav-hover); }
/* empty icon placeholder — user drops an <img> in later */
body.hetportaal .hp-mm-icon{
  width:32px; height:32px; flex:none;
  border-radius:8px; background:#f3efe7;
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
}
body.hetportaal .hp-mm-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
body.hetportaal .hp-mm-text{ display:flex; flex-direction:column; min-width:0; }
body.hetportaal .hp-mm-name{ font-size:14px; font-weight:600; color:#14181f; }
body.hetportaal .hp-mm-desc{ font-size:12px; color:#5b6471; line-height:1.35; }

/* ----------------------------------------------------------------
   (d2) EVENTS DROPDOWN (compact megamenu variant)
   ---------------------------------------------------------------- */
body.hetportaal .hp-megamenu.hp-dropdown{ width:360px; padding:14px; }
body.hetportaal .hp-dd-list{ display:flex; flex-direction:column; gap:6px; }
/* each event = wordmark banner, then a link row + inline "Agenda" add-to-calendar */
body.hetportaal .hp-dd-event{
  position:relative;
  border-radius:var(--hp-radius-md,10px);
  padding:8px 4px 4px;
}
body.hetportaal .hp-dd-event + .hp-dd-event{ border-top:1px dashed var(--hp-border,rgba(20,24,31,.08)); }
body.hetportaal .hp-dd-logo{
  display:block; height:auto; width:auto;
  max-height:32px; max-width:170px;
  margin:0 0 6px 6px;
}
body.hetportaal .hp-dd-row{ display:flex; align-items:center; gap:6px; }
body.hetportaal .hp-dd-row .hp-mm-item{ flex:1 1 auto; min-width:0; padding:6px 8px; }
body.hetportaal .hp-dd-agenda{
  flex:none; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 10px; border-radius:999px;
  border:1px solid var(--hp-border,rgba(20,24,31,.14)); background:#fff;
  color:#2c333d; font-size:12px; font-weight:600; white-space:nowrap;
  transition:all .15s ease;
}
body.hetportaal .hp-dd-agenda:hover{ border-color:#b8d0e3; color:#1f5c8c; background:#eef3f8; }
body.hetportaal .hp-dd-agenda .hp-ico{ width:14px; height:14px; }
body.hetportaal .hp-dd-agenda .hp-cal-caret{ width:12px; height:12px; opacity:.8; transition:transform .2s ease; }
body.hetportaal .hp-dd-event.hp-cal.is-open .hp-cal-caret{ transform:rotate(180deg); }
/* agenda popover flies out to the LEFT of the dropdown (Events sits right of centre; desktop-only menu) */
body.hetportaal .hp-dropdown .hp-cal-pop{ top:0; left:auto; right:calc(100% + 14px); }

/* NextGen CTA band */
body.hetportaal .hp-dd-cta{
  display:block; position:relative; overflow:hidden;
  margin-top:12px; padding:14px 44px 14px 16px;
  background:linear-gradient(160deg, #1f5c8c, #3f8fd0);
  color:#fff; border-radius:var(--hp-radius-lg,18px); text-decoration:none;
  transition:filter .15s ease;
}
body.hetportaal .hp-dd-cta:hover{ filter:brightness(1.06); }
body.hetportaal .hp-dd-cta-eyebrow{
  display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.75); font-weight:700;
}
body.hetportaal .hp-dd-cta-title{ display:block; margin-top:3px; font-size:14px; font-weight:600; line-height:1.25; color:#fff; }
body.hetportaal .hp-dd-cta .hp-ico{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; }

/* ----------------------------------------------------------------
   (e) MOBILE
   ---------------------------------------------------------------- */
body.hetportaal .hp-mobile-toggle{ display:none; }
body.hetportaal .hp-mobile-toggle .hp-ico-close{ display:none; }
body.hetportaal .hp-nav.is-open .hp-mobile-toggle .hp-ico-open{ display:none; }
body.hetportaal .hp-nav.is-open .hp-mobile-toggle .hp-ico-close{ display:block; }
body.hetportaal .hp-mobile-menu{ display:none; }

@media (max-width:991px){
  body.hetportaal .hp-menu{ display:none; }
  body.hetportaal .hp-nav-inner{ gap:14px; }
  body.hetportaal .hp-nav-right{ gap:6px; flex:none; }
  body.hetportaal .hp-brand{ flex:0 1 auto; min-width:0; }
  body.hetportaal .hp-brand img{ max-width:140px; }
  body.hetportaal .hp-mobile-toggle{ display:inline-flex; }
  body.hetportaal .hp-nav.is-open .hp-mobile-menu{
    display:flex; flex-direction:column; gap:2px;
    padding-top:10px; padding-bottom:16px;
    border-top:1px solid var(--hp-border,rgba(20,24,31,.08));
  }
  body.hetportaal .hp-mobile-menu a{
    padding:12px 4px; font-size:16px; font-weight:600;
    color:var(--hp-nav-link); text-decoration:none;
    border-radius:var(--hp-radius-md,10px);
  }
  body.hetportaal .hp-mobile-menu a:hover{ background:var(--hp-nav-hover); color:var(--hp-nav-accent); }
  /* keep nav frosted but solid on mobile to avoid orange bleed */
  body.hetportaal .hp-nav{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

@media (max-width:600px){
  body.hetportaal .hp-util-right{ display:none; }   /* phone/mail too wide on small screens */
  body.hetportaal .hp-util-inner{ justify-content:center; }
  /* Contact is duplicated in the hamburger menu — drop the pill so search + toggle fit */
  body.hetportaal .hp-nav-right .hp-btn-primary{ display:none; }
}