/* ====================================================================
   Bruyst navigatie + mededelingenbalk — assets/bruyst-nav.css
   Iconen = inline SVG (geen Font Awesome, voorkomt conflict met Elementor).
   !important bij kleuren/knop = nodig tegen thema/Elementor-overrides.
   Hoogte pills: --bar-h.
   ==================================================================== */

.bruyst-topbar{position:fixed;top:0;left:0;right:0;z-index:100}

/* ---- ORANJE MEDEDELINGENBALK ---- */
.bruyst-announce{position:relative;background:#cf5a27;color:#fff;text-align:center;font-size:14px;font-weight:500;line-height:1.4;padding:10px 46px;max-height:80px;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.bruyst-announce,.bruyst-announce a{color:#fff !important}
.bruyst-announce a{text-decoration:underline}
.bruyst-announce-close{position:absolute;top:50%;right:14px;transform:translateY(-50%);background:none !important;border:none;color:#fff !important;cursor:pointer;display:inline-flex;padding:4px;opacity:.85;line-height:0;-webkit-appearance:none;appearance:none}
.bruyst-announce-close:hover{opacity:1}
.bruyst-announce-close svg{width:16px;height:16px;fill:currentColor}
.bruyst-announce.is-hidden{display:none}
.bruyst-topbar.scrolled .bruyst-announce{max-height:0;padding-top:0;padding-bottom:0}

/* ---- HEADER ---- */
.bruyst-header{
  --navy:#15143E; --teal:#57aaa2; --teal-light:#72c4c0; --pill:#ffffff; --menu-fs:17px; --accent:#cf5a27;
  --bar-h:56px;
  position:relative;z-index:2;
  padding:26px 20px;background:transparent;
  transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.bruyst-header *{box-sizing:border-box}
.bruyst-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1340px;margin:0 auto}

/* logo */
.bruyst-logo{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:none}
.bruyst-logo .custom-logo-link{display:block;line-height:0}
.bruyst-logo .custom-logo{display:block;height:75px;width:auto;transition:height .25s ease}
.bruyst-logo-fallback{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-decoration:none}
.bruyst-logo svg{width:74px;height:auto;display:block;margin-left:5px;transition:width .25s ease}
.bruyst-logo span{font-size:38px;font-weight:800;color:var(--navy) !important;line-height:.85;letter-spacing:-.5px;transition:font-size .25s ease}

/* menu-pill — items verticaal gecentreerd (volle hoogte li) */
.bruyst-nav{position:relative;display:flex;align-items:center}
.bruyst-menu-wrap{display:flex;align-items:center}
.bruyst-menu{list-style:none;margin:0;padding:0 36px;display:flex;align-items:stretch;gap:28px;background:var(--pill);border-radius:999px;height:var(--bar-h);position:relative;z-index:2;transition:background .25s ease,padding .25s ease}
.bruyst-menu li{position:relative;list-style:none;margin:0 !important;padding:0 !important}
.bruyst-menu > li{display:flex;align-items:center}
.bruyst-menu > li > a{position:relative}
.bruyst-menu a{display:inline-flex;align-items:center;gap:6px;padding:0 !important;line-height:1 !important;text-decoration:none;color:var(--navy) !important;font-weight:600;font-size:var(--menu-fs);white-space:nowrap;transition:color .15s}

/* actieve / geopende item -> gekleurde streep eronder + pijltje omhoog */
.bruyst-menu > li:hover > a::before,
.bruyst-menu > li.current-menu-item > a::before,
.bruyst-menu > li.current-menu-parent > a::before{content:"";position:absolute;left:0;right:0;bottom:-9px;height:3px;border-radius:2px;background:var(--accent)}
.bruyst-menu > li.menu-item-has-children:hover > a::before,
.bruyst-menu > li.menu-item-has-children.current-menu-parent > a::before,
.bruyst-menu > li.menu-item-has-children.current-menu-item > a::before{right:20px}
.bruyst-menu .menu-item-has-children > a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.bruyst-menu > li:hover > a::after{transform:translateY(1px) rotate(-135deg)}

/* dropdown — ruime witte kaart met vette navy items */
.bruyst-menu .sub-menu{list-style:none;margin:0;padding:16px 14px;position:absolute;top:calc(100% + 14px);left:-8px;min-width:258px;display:none;flex-direction:column;gap:2px;background:#fff !important;border-radius:22px;box-shadow:0 24px 56px rgba(21,20,62,.16);z-index:60}
.bruyst-menu .sub-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.bruyst-menu li:hover > .sub-menu{display:flex}
.bruyst-menu .sub-menu li{width:100%}
.bruyst-menu .sub-menu a{display:block;padding:13px 26px;border-radius:12px;font-size:17px;font-weight:700;line-height:1.25 !important;white-space:nowrap;color:var(--navy) !important;transition:background .12s}
.bruyst-menu .sub-menu a:hover{background:#f1f6f4 !important;color:var(--navy) !important}

/* werken-bij + iconen */
.bruyst-actions{position:relative;z-index:1;display:flex;align-items:stretch;height:var(--bar-h);background:var(--teal-light);border-radius:0 999px 999px 0;margin-left:-30px}
.bruyst-cta{display:inline-flex;align-items:center;background:var(--teal);color:#fff !important;font-weight:600;font-size:16px;padding:0 32px 0 40px;border-radius:0 999px 999px 0;text-decoration:none;white-space:nowrap;transition:background .15s}
.bruyst-cta:hover{background:#4a9890}
.bruyst-icons{display:flex;align-items:center;gap:22px;margin-left:auto;padding:0 26px}
.bruyst-icons a{display:inline-flex;align-items:center;color:#fff !important;text-decoration:none;transition:opacity .15s}
.bruyst-icons a:hover{opacity:.75}
.bruyst-icons svg{height:19px;width:auto;display:block;fill:currentColor}
.bruyst-toggle{display:none;border:none;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none}

/* ---- GESCROLLD: witte topbalk ---- */
.bruyst-topbar.scrolled .bruyst-header{background:#fff;box-shadow:0 6px 24px rgba(21,20,62,.08);padding-top:14px;padding-bottom:14px}
.bruyst-topbar.scrolled .bruyst-logo .custom-logo{height:46px}
.bruyst-topbar.scrolled .bruyst-logo span{font-size:30px}
.bruyst-topbar.scrolled .bruyst-logo svg{width:60px}
.bruyst-topbar.scrolled .bruyst-menu{background:transparent;padding:0}
.bruyst-topbar.scrolled .bruyst-actions{margin-left:22px;border-radius:999px}
.bruyst-topbar.scrolled .bruyst-cta{border-radius:999px;padding:0 30px}

/* ---- HAMBURGER + MOBIEL ---- */
@media (max-width:1199px){
  .bruyst-announce{font-size:13px;padding:9px 40px}
  .bruyst-header .bruyst-nav .bruyst-toggle{display:inline-flex !important;align-items:center;justify-content:center;width:48px !important;height:48px !important;min-width:0 !important;flex:none;padding:0 !important;background:#D2694B !important;color:#fff !important;border:none !important;border-radius:14px !important;box-shadow:none !important;line-height:0 !important;transition:background .15s}
  .bruyst-header .bruyst-nav .bruyst-toggle:hover{background:#b9573a !important}
  .bruyst-header .bruyst-nav .bruyst-toggle svg{width:22px !important;height:22px !important;display:block !important;fill:#fff !important;stroke:none !important}
  .bruyst-menu-wrap{display:none;position:absolute;top:calc(100% + 14px);right:0;left:auto;flex-direction:column;align-items:stretch;gap:14px;background:#fff;border-radius:20px;padding:18px;min-width:280px;box-shadow:0 18px 44px rgba(21,20,62,.16);z-index:50}
  .bruyst-header.is-open .bruyst-menu-wrap{display:flex}
  .bruyst-menu{flex-direction:column;align-items:stretch;gap:2px;padding:0;background:transparent;border-radius:0;height:auto}
  .bruyst-menu > li{display:block}
  .bruyst-menu a{display:flex;align-items:center;padding:12px 14px !important;line-height:1.2 !important;border-radius:10px}
  .bruyst-menu a:hover{background:#f1f4f1;color:var(--navy) !important}
  .bruyst-menu > li:hover > a::before,.bruyst-menu > li.current-menu-item > a::before{display:none}
  .bruyst-menu .menu-item-has-children > a::after{margin-left:auto}
  .bruyst-menu > li:hover > a::after{transform:translateY(-2px) rotate(45deg)}
  .bruyst-menu .sub-menu{position:static;display:flex;background:transparent !important;box-shadow:none;border-radius:0;padding:0 0 4px 14px;min-width:0;left:auto;top:auto}
  .bruyst-menu .sub-menu::before{display:none}
  .bruyst-menu .sub-menu a{padding:9px 14px;font-size:15px}
  .bruyst-actions{flex-direction:column;align-items:stretch;margin-left:0;background:transparent;border-radius:0;gap:10px;height:auto}
  .bruyst-cta{justify-content:center;height:52px;padding:0;border-radius:999px;font-size:17px}
  .bruyst-icons{justify-content:center;height:52px;padding:0;gap:34px;background:var(--teal-light);border-radius:999px;margin-left:0}
}


/* ============================================================
   Top Melding balk
   ============================================================ */
.bruyst-top-melding {
    width: 100%;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}

.bruyst-top-melding__label {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0,0,0,0.15);
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.bruyst-top-melding__text {
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 767px) {
    .bruyst-top-melding {
        flex-direction: column;
        gap: 4px;
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ============================================================
   Locaties sectie — [bruyst_locaties] shortcode
   ============================================================ */


.bruyst-locaties__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
}

.bruyst-locaties__title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #15143E !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.bruyst-locaties__sub {
    font-size: 16px !important;
    color: #33403d !important;
    margin: 0 0 28px !important;
    line-height: 1.6 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* Cards wrapper: overflow visible zodat detailkaart erover heen mag */
.bruyst-locaties__cards {
    display: flex !important;
    align-items: flex-start !important;
    position: relative !important;
    overflow: visible !important;
}

/* Linker paarse navigatiekaart — alle 7 items tonen */
.bruyst-locatie-nav {
    background: #9393C2 !important;
    border-radius: 20px !important;
    padding: 16px 0 !important;
    width: 220px !important;
    flex-shrink: 0 !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

.bruyst-locatie-nav__item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: left !important;
    width: 100% !important;
    transition: background 0.15s !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.bruyst-locatie-nav__item:hover {
    background: rgba(255,255,255,0.12) !important;
}

.bruyst-locatie-nav__item.is-active {
    background: rgba(255,255,255,0.18) !important;
}

.bruyst-locatie-nav__item-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.bruyst-locatie-nav__pin {
    width: 10px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
    display: inline-block !important;
}

.bruyst-locatie-nav__chevron {
    width: 7px !important;
    height: 12px !important;
    fill: currentColor !important;
    opacity: 0.7 !important;
    display: inline-block !important;
}

/* Rechter witte detailkaart */
.bruyst-locatie-card {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 28px 32px !important;
    width: 240px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 24px rgba(21,20,62,0.10) !important;
    position: relative !important;
    z-index: 3 !important;
    margin-left: -24px !important;
    margin-top: 20px !important;
    min-height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: auto !important;
}

.bruyst-locatie-card__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 15px !important;
    color: #15143E !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.bruyst-locatie-card__icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    margin-top: 2px !important;
    color: #72C4C0 !important;
}

.bruyst-locatie-card__icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    display: block !important;
}

/* Kaart rechts */
.bruyst-map {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bruyst-map object {
    width: 100% !important;
    max-width: 440px !important;
    height: auto !important;
}

@media (max-width: 1024px) {
    .bruyst-locaties__inner { grid-template-columns: 1fr !important; gap: 32px !important; }
    .bruyst-map { display: none !important; }
}

@media (max-width: 767px) {
    .bruyst-locaties__title { font-size: 28px !important; }
    .bruyst-locatie-nav { width: 180px !important; }
    .bruyst-locatie-card { padding: 20px !important; width: 200px !important; }
    .bruyst-locatie-nav__item { font-size: 14px !important; padding: 10px 16px !important; }
}