/* MeerPakkers Header Component v1
   Centrale desktop-header styling.
   Mobile blijft gelockt en wordt hier niet aangepast.
*/

/* Desktop header is hidden by default so the locked mobile home/header stays untouched. */
.mp-desktop-header{
  display:none;
}

@media (min-width: 769px){
  .mp-desktop-header{
    min-height:96px;
    height:auto;
    padding:0 48px;
    display:grid;
    grid-template-columns:360px minmax(520px,1fr) minmax(250px,.9fr);
    gap:18px;
    align-items:center;
    background:rgba(251,246,237,.96);
    border-bottom:1px solid rgba(222,208,185,.82);
    box-shadow:0 16px 38px rgba(6,72,61,.055);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .mp-desktop-brand{
    display:flex;
    align-items:center;
    width:360px;
    height:78px;
    min-width:0;
    color:var(--green);
    text-decoration:none;
    background-image:url('/assets/brand/mpplus-desktop-lockup-v1.png');
    background-repeat:no-repeat;
    background-position:left center;
    background-size:contain;
  }

  .mp-desktop-logo,
  .mp-desktop-brand-copy{
    display:none!important;
  }

  .mp-desktop-brand-copy strong,
  .mp-desktop-brand-copy small{
    display:none!important;
  }

  .mp-desktop-nav{
    display:flex;
    align-items:center;
    justify-self:start;
    justify-content:flex-start;
    gap:6px;
    padding:6px;
    border:1px solid rgba(222,208,185,.76);
    border-radius:999px;
    background:rgba(255,253,248,.76);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .mp-desktop-nav::-webkit-scrollbar{
    display:none;
  }

  .mp-desktop-nav a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:999px;
    color:var(--green);
    text-decoration:none;
    transition:background .18s ease, color .18s ease, transform .18s ease;
  }

  .mp-desktop-nav a:hover,
  .mp-desktop-nav a:focus-visible{
    color:#fffdf8;
    background:var(--green);
    transform:translateY(-1px);
    outline:none;
  }

  .mp-desktop-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
  }

  .mp-desktop-actions input{
    width:min(300px, 100%);
    height:44px;
    border:1px solid rgba(222,208,185,.9);
    border-radius:999px;
    padding:0 16px;
    background:#fffdf8;
    color:var(--green);
    font-weight:750;
    box-shadow:0 10px 22px rgba(6,72,61,.045);
  }

  .mp-desktop-actions input::placeholder{
    color:rgba(116,107,97,.78);
  }

  .mp-desktop-actions input:focus{
    outline:2px solid rgba(201,149,45,.25);
    border-color:rgba(201,149,45,.72);
  }

  .mp-desktop-actions .mp-saved-desktop-link-v50,
  .mp-desktop-actions button{
    min-height:44px;
    border-radius:999px;
  }
}

@media (min-width: 769px) and (max-width: 1180px){
  .mp-desktop-header{
    grid-template-columns:1fr;
    justify-items:stretch;
    gap:12px;
  }

  .mp-desktop-brand{
    justify-self:center;
    width:300px;
    height:70px;
  }

  .mp-desktop-actions{
    justify-content:center;
  }
}