.pidi-header{
  position: fixed;             
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--accent);
  z-index: 1000;
  overflow: visible;           
}

body{
  padding-top: var(--header-h);
}

.pidi-header__inner{
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr; 
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--edge);
  position: relative;                   
  box-sizing: border-box;
}

.pidi-menu{
  background:none; border:none; cursor:pointer;
  height:40px; padding:8px 10px 8px 0;
  display:inline-flex; align-items:center; justify-content:flex-start;
}
.pidi-menu__bars{
  position:relative; width:24px; height:16px; display:block;
}
.pidi-menu__bars::before,
.pidi-menu__bars::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--accent);
}
.pidi-menu__bars::before{ top:0; }
.pidi-menu__bars::after { bottom:0; }

.pidi-motto{
  font-family:'Great Vibes', cursive;
  font-size:28px;
  color:var(--accent);
  text-align:center;
  white-space:nowrap;
  font-style: italic;
}

.pidi-logo-link{
  justify-self:end; display:flex; align-items:center; height:100%; margin-right:0;
}
.pidi-logo-bg{
  width:140px; height:140px;
  border-radius:50%; overflow:hidden;
  background-image:url('../img/logo.png');
  background-repeat:no-repeat; background-position:center;
  background-size:170%;
  margin-top:    calc((140px - var(--header-h)) / -2);
  margin-bottom: calc((140px - var(--header-h)) / -2);
}

.pidi-drawer{
  position:absolute; left:var(--edge); top:var(--header-h);
  background:var(--bg); border:1px solid var(--accent); border-radius:10px;
  padding:4px 0; width:max-content; min-width:180px; max-width:90vw;
  box-shadow:0 10px 24px rgba(0,0,0,.08); z-index:1002; display:none;
}
.pidi-drawer.open{ display:block; }
.pidi-drawer ul{ list-style:none; margin:0; padding:0; }
.pidi-drawer a{
  display:block; padding:10px 14px; font-family:'Raleway',sans-serif; color:var(--accent);
  text-decoration:none; white-space:nowrap;
}
.pidi-drawer a:hover,
.pidi-drawer a:focus-visible,
.pidi-drawer a.is-hover{
  background:rgba(140,110,68,.12); outline:none;
}

@media (max-width: 1024px){
  .pidi-motto{ font-size:22px; }
}

@media (max-width: 768px){
  .pidi-motto{ font-size:20px; }
  .pidi-logo-bg{
    width:125px; height:125px; background-size:170%;
    margin-top:    calc((125px - var(--header-h)) / -2);
    margin-bottom: calc((125px - var(--header-h)) / -2);
  }
}

@media (max-width: 480px){
  .pidi-motto{ font-size:18px; }
  .pidi-header__inner{
    display:flex; align-items:center; justify-content:space-between; padding:0 var(--edge);
  }
  .pidi-motto{
    position:absolute; left:50%; transform:translateX(-50%); pointer-events:none; white-space:nowrap;
  }
  .pidi-logo-bg{
    width:84px; height:84px; background-size:170%;
    margin-top:    calc((84px - var(--header-h)) / -2);
    margin-bottom: calc((84px - var(--header-h)) / -2);
  }
}

@media (min-width: 1025px){
  .pidi-motto{ letter-spacing: .5em; }
  .pidi-logo-bg{
    width:125px; height:125px;
    background-size:165%;
    margin-top:    calc((125px - var(--header-h)) / -2);
    margin-bottom: calc((125px - var(--header-h)) / -2);
  }
}
.pidi-home,
.pidi-section,
.pidi-galerie,
.pidi-ozvete {
  scroll-margin-top: var(--header-h);
}
.pidi-home,
.pidi-section,
.pidi-galerie,
.pidi-ozvete {
  scroll-margin-top: var(--header-h);
}