/* Header – Potato-e */
:root{
  --pe-green:#133225;
  --pe-orange:#df6a3e;
  --pe-beige:#f9eee2;
  --pe-white:#ffffff;
}

.pe-skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.pe-skip:focus{ position:static; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; z-index:9999; }

.pe-header{ position:sticky; top:0; z-index:1000; backdrop-filter:saturate(1.2); transition: box-shadow .2s ease, background-color .2s ease; overflow-x:hidden; }
.pe-header--white{ background:var(--pe-white); }
.pe-header--beige{ background:var(--pe-beige); }
.pe-header--green{ background:var(--pe-green); }

.pe-header.is-scrolled{ box-shadow:0 8px 28px rgba(0,0,0,.08); }

.pe-topbar{ font-size:.9rem; background:rgb(19 50 37); color:white; }
.pe-topbar .pe-wrap{ display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:8px 20px; max-width:1200px; margin:0 auto; }
.pe-topbar__link{     color: inherit; text-decoration: none; display: flex; flex-wrap: wrap; align-items: center; margin-right: 10px; }
.pe-topbar__link:first-child{ margin-right:0; }
.pe-topbar__link svg { margin-right: 5px; }
.pe-nav .pe-wrap{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:grid; grid-template-columns: 1fr auto auto; gap:18px; align-items:center;
}

.pe-brand__img{ display:block; max-height:64px; width:auto; }
.pe-brand__text{ color:var(--pe-green); font-weight:800; font-size:1.2rem; }

.pe-toggle{
  display:none; width:44px; height:44px; border:1px solid rgba(19,50,37,.18);
  border-radius:10px; background:transparent; cursor:pointer;
  position:relative;
}
.pe-toggle__bar{ position:absolute; left:10px; right:10px; height:2px; background:var(--pe-green); transition: transform .2s ease, opacity .2s ease; }
.pe-toggle__bar:nth-child(1){ top:13px; }
.pe-toggle__bar:nth-child(2){ top:21px; }
.pe-toggle__bar:nth-child(3){ top:29px; }
.pe-toggle__label{ position:absolute; left:-9999px; }

.pe-menu{ display:flex; gap:20px; }
.pe-menu__list{ display:flex; gap:18px; list-style:none; padding:0; margin:0; }
.pe-menu__list > li > a{
  display:inline-flex; align-items:center; padding:10px 8px; text-decoration:none;
  color:var(--pe-green); font-weight:600; border-radius:10px;
}
.pe-menu__list > li > a:hover{ background:rgba(19,50,37,.06); }

.pe-actions{ margin-left:10px; }
.pe-btn{
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  padding:10px 16px; font-weight:700; text-decoration:none;
}
.pe-btn--cta{ background:var(--pe-orange); color:#fff; box-shadow:0 8px 20px rgba(223,106,62,.20); }
.pe-btn--cta:hover{ box-shadow:0 12px 24px rgba(223,106,62,.28); transform: translateY(-1px); }
.pe-btn--cta:active{ transform:none; }

@media (max-width: 980px){
  .pe-toggle{ display:inline-flex; grid-column:3; justify-self:end; z-index: 9999999;}

  /* Slide-in paneel */
  .pe-menu{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(220px, 88vw);
    background-color: #fff;    /* expliciet, niet alleen 'background' */
    z-index: 2000;
    display: flex; flex-direction: column; gap: 16px;
    padding: 90px 20px 20px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pe-header--green .pe-menu{ background:var(--pe-green); }
  .pe-menu__list{ flex-direction:column; gap:2px; }
  .pe-menu__list > li > a{ padding:12px; border-radius:12px; }
  html.menu-open .pe-header { backdrop-filter: none; }
  html.menu-open .pe-menu{ transform: translateX(0); }

  /* Dim overlay achter het paneel */
  .pe-overlay{
    position:fixed; inset:0; z-index:1100;
    background: rgba(19,50,37,.35);
    opacity:0; pointer-events:none; transition: opacity .2s ease;
  }
  html.menu-open .pe-overlay{ opacity:1; pointer-events:auto; }

  /* Body lock */
  html.menu-open body{ overflow:hidden; }
}

/* Hamburger → kruisje */
.pe-toggle[aria-expanded="true"] .pe-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.pe-toggle[aria-expanded="true"] .pe-toggle__bar:nth-child(2){ opacity:0; }
.pe-toggle[aria-expanded="true"] .pe-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }


@media (prefers-reduced-motion: reduce){
  .pe-btn--cta:hover{ transform:none; }
}