/* =========================================================
   PESTI ÉRMÉS — közös fejléc + lábléc (a főoldal verziója)
   Felülírja a legal.css / webshop.css helyi szabályait.
   ========================================================= */

:root{
  --pe-oak:        #C9A876;
  --pe-oak-light:  #DCC094;
  --pe-espresso:   #2B1C10;
  --pe-cream:      #F0E4CE;
  --pe-rule-oak:   rgba(201, 168, 118, .25);
}

/* ============ NAV (kanonikus) ============ */
.nav{
  position: sticky; top: 0; z-index: 50;
  padding: 18px 32px;
  background: rgba(43, 28, 16, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-oak, var(--pe-rule-oak));
  transition: padding .3s ease, background .3s ease;
}
.nav.compact{ padding: 12px 32px; background: rgba(31, 20, 10, .92); }
.nav-inner{
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.nav-brand{
  display: flex; align-items: center;
  height: 60px;
  margin-left: 64px;
  border: 0;
}
.nav-brand img{
  display: block; height: 58px; width: auto;
  filter: invert(1) brightness(.97);
  transition: height .3s ease;
}
.nav.compact .nav-brand img{ height: 46px; }
.nav-brand:hover{ border: 0; }

.nav-links{
  display: flex; gap: 32px; list-style: none;
  margin: 0; padding: 0;
}
.nav-links li{ margin: 0; }
.nav-links a{
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(240, 228, 206, .85);
  position: relative;
  padding: 10px 0;
  border: 0;
  transition: color .3s ease;
}
.nav-links a::after{
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--oak, var(--pe-oak));
  transition: width .35s ease;
}
.nav-links a:hover{ color: var(--oak-light, var(--pe-oak-light)); }
.nav-links a:hover::after{ width: 100%; }
.nav-links a.is-current{ color: var(--oak-light, var(--pe-oak-light)); }
.nav-links a.is-current::after{ width: 100%; }

.nav-cta{
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--espresso, var(--pe-espresso));
  background: var(--oak, var(--pe-oak));
  padding: 14px 28px;
  border: 0;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
}
.nav-cta:hover{
  background: var(--oak-light, var(--pe-oak-light));
  color: var(--espresso, var(--pe-espresso));
  border: 0;
}
.nav-links + .nav-cta{ margin-left: auto; }
.nav-cta__count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--espresso, var(--pe-espresso));
  color: var(--oak-light, var(--pe-oak-light));
  border-radius: 99px;
  font-size: 10px; font-weight: 700;
  margin-left: 6px;
}
.nav-toggle{
  display: none;
  background: none;
  border: 1px solid var(--oak, var(--pe-oak));
  color: var(--oak-light, var(--pe-oak-light));
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
}
.nav-toggle:hover{
  background: var(--oak, var(--pe-oak));
  color: var(--espresso, var(--pe-espresso));
}

@media (max-width: 860px){
  .nav{ padding: 12px 16px; }
  .nav.compact{ padding: 10px 16px; }
  .nav-inner{
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .nav-brand{ margin-left: 0; order: 1; }
  .nav-brand img{ height: 40px; }
  .nav.compact .nav-brand img{ height: 40px; }
  .nav-toggle{ display: inline-flex; align-items: center; order: 2; margin-left: auto; }
  .nav-links{ display: none; }
  .nav-inner > .nav-cta{ display: none; }

  /* Nyitott állapot — linkek és CTA-k a logó+toggle sor alá kerülnek. */
  .nav.open .nav-links{
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    order: 3;
    margin: 6px 0 0;
    padding: 14px 4px 6px;
    gap: 14px;
    border-top: 1px solid var(--rule-oak, var(--pe-rule-oak));
  }
  .nav.open .nav-links a{
    font-size: 13px;
    letter-spacing: .26em;
    padding: 4px 0;
  }
  .nav.open .nav-inner > .nav-cta{
    display: inline-flex;
    flex-basis: 100%;
    order: 4;
    padding: 14px 18px;
    font-size: 12px;
    letter-spacing: .2em;
    margin: 0;
  }
  .nav.open .nav-inner > .nav-cta + .nav-cta{ margin-top: 8px; }
}

/* ============ FOOTER (kanonikus) ============ */
footer{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--espresso, var(--pe-espresso));
  color: var(--cream, var(--pe-cream));
  padding: 88px 72px 60px;
  text-align: center;
  border-top: 1px solid var(--rule-oak, var(--pe-rule-oak));
}
footer::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='320'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.7' numOctaves='3' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='480'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.04' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat, repeat;
  background-size: 480px 320px, 320px 480px, 200px 200px;
  opacity: .55;
  mix-blend-mode: soft-light;
  z-index: 0;
}
footer > *{ position: relative; z-index: 1; }

.foot-logo img{
  height: 96px; width: auto;
  margin: 0 auto;
  filter: invert(1) brightness(.97);
  opacity: .92;
}
.foot-coins{
  display: flex; justify-content: center; align-items: center;
  gap: 22px;
  margin: 32px 0 28px;
  color: var(--oak, var(--pe-oak));
}
.foot-coins svg{
  display: block; width: 26px; height: 26px;
  fill: none; stroke: currentColor;
}
.foot-coins .coin-mid{ width: 32px; height: 32px; }
.foot-coins .coin-sep{
  width: 32px; height: 1px;
  background: rgba(201, 168, 118, .35);
}
.foot-colophon{
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-size: 17px;
  color: rgba(240, 228, 206, .72);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.55;
}
.foot-meta{
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .38em;
  color: var(--oak-light, var(--pe-oak-light));
  text-transform: uppercase;
  margin-bottom: 24px;
}
.foot-legal{
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(240, 228, 206, .58);
  margin-bottom: 18px;
}
.foot-legal a{
  color: rgba(240, 228, 206, .7);
  transition: color .2s ease;
  border: 0;
}
.foot-legal a:hover{ color: var(--oak-light, var(--pe-oak-light)); }
.foot-legal .sep{ color: var(--oak, var(--pe-oak)); }
.foot-credit{
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(240, 228, 206, .45);
  text-transform: uppercase;
}
.foot-credit a{
  color: var(--oak-light, var(--pe-oak-light));
  border-bottom: 1px solid rgba(201, 168, 118, .25);
  padding-bottom: 2px;
  margin-left: 8px;
}
.foot-credit a:hover{ color: var(--cream, var(--pe-cream)); }

@media (max-width: 720px){
  footer{ padding: 56px 22px 40px; }
  .foot-logo img{ height: 72px; }
  .foot-coins{ gap: 14px; margin: 22px 0 22px; }
  .foot-coins svg{ width: 22px; height: 22px; }
  .foot-coins .coin-mid{ width: 28px; height: 28px; }
  .foot-coins .coin-sep{ width: 20px; }
  .foot-colophon{ font-size: 16px; margin-bottom: 24px; }
  .foot-meta{ font-size: 10px; letter-spacing: .28em; }
  .foot-legal{ font-size: 11px; gap: 10px; }
}