/* =========================================================
   PESTI ÉRMÉS — Jogi aloldalak (verzio2 brand)
   Sonoma Tölgy · Pergamen Krém · Espresso Mély
   ========================================================= */
:root{
  --oak:        #C9A876;
  --oak-light:  #DCC094;
  --oak-dark:   #A88656;
  --beige:      #9C8460;
  --beige-light:#B89A6F;
  --beige-dark: #7A6647;
  --mokka:      #5D4030;
  --mokka-deep: #4A3525;
  --espresso:   #2B1C10;
  --espresso-2: #3D2817;
  --cream:      #F0E4CE;
  --cream-2:    #E8D8BB;
  --paper:      #FAF1DD;
  --ink:        #1A1410;
  --ink-soft:   #3D332C;
  --rule-ink:   rgba(45, 28, 16, .18);
  --rule-cream: rgba(240, 228, 206, .22);
  --rule-oak:   rgba(201, 168, 118, .25);
  --ease-soft:  cubic-bezier(.2,.8,.2,1);
  --ease-out:   cubic-bezier(.16,.84,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block}
a{
  color: var(--mokka);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-oak);
  transition: color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
a:hover{ color: var(--espresso); border-color: var(--oak) }
::selection{ background: var(--oak); color: var(--espresso) }

.container{ max-width: 920px; margin: 0 auto; padding: 0 32px }

/* ============ Nav (verzio2 stílus) ============ */
.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);
  transition: padding .3s ease, background .3s ease;
}
.nav-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-brand{
  display: flex; align-items: center;
  height: 60px;
  border: 0;
}
.nav-brand img{
  display: block;
  height: 58px; width: auto;
  filter: invert(1) brightness(.97);
}
.nav-brand:hover{ border: 0 }

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

.nav-cta{
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--espresso);
  background: var(--oak);
  padding: 12px 24px;
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
  transition: background .3s ease;
}
.nav-cta:hover{ background: var(--oak-light); color: var(--espresso); border: 0 }

.nav-toggle{
  display: none;
  background: none;
  border: 1px solid var(--oak);
  color: var(--oak-light);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}
.nav-toggle:hover{ background: var(--oak); color: var(--espresso) }

@media (max-width: 720px){
  .nav{ padding: 12px 16px }
  .nav-inner{ gap: 10px; position: relative }
  .nav-brand img{ height: 40px }
  .nav-links{ display: none }
  .nav-toggle{ display: inline-block }
  .nav-cta{
    padding: 9px 14px;
    font-size: 10px;
    letter-spacing: .18em;
    margin-left: auto;
  }
  .nav.open .nav-links{
    display: flex;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column;
    background: var(--espresso);
    border-top: 1px solid var(--rule-oak);
    padding: 18px 22px 22px;
    gap: 14px;
  }
}

/* ============ Hero ============ */
.lg-hero{
  background:
    radial-gradient(ellipse at 28% 32%, rgba(220,192,148,.10) 0%, transparent 55%),
    linear-gradient(170deg, var(--espresso-2) 0%, var(--espresso) 55%, #1F140A 100%);
  color: var(--cream);
  padding: 110px 32px 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-oak);
}
.lg-hero::before{
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgba(240,228,206,.02) 1px, transparent 1px);
  background-size: 4px 4px;
}
.lg-hero .container{ position: relative; z-index: 2 }
.lg-hero .eyebrow{
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--oak-light);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 14px;
}
.lg-hero .eyebrow::before{
  content: ''; width: 34px; height: 1px; background: var(--oak);
}
.lg-hero h1{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 60px);
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lg-hero h1 em{
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-weight: 500;
  color: var(--oak-light);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.08em;
}
.lg-hero .meta{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-cream);
  font-family: 'Manrope', sans-serif;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oak-light);
}

/* ============ Body ============ */
.lg-body{ padding: 80px 0 100px }
.lg-body h2{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--espresso);
  margin: 56px 0 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  scroll-margin-top: 90px;
}
.lg-body h2:first-child{ margin-top: 0 }
.lg-body h2::before{
  content: '⬥';
  display: inline-block;
  margin-right: 14px;
  color: var(--oak);
  font-size: .72em;
  vertical-align: middle;
  transform: translateY(-2px);
}
.lg-body h3{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 30px 0 10px;
}
.lg-body p{
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: 14px;
  max-width: 720px;
}
.lg-body ul,
.lg-body ol{
  margin: 0 0 20px 22px;
  max-width: 720px;
}
.lg-body li{
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.lg-body strong{ color: var(--espresso); font-weight: 600 }
.lg-body em{ font-family: 'Manrope', sans-serif; font-style: italic; color: var(--mokka-deep); font-size: 1.05em }

/* Tables */
.lg-body table{
  width: 100%; max-width: 720px;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 14px;
}
.lg-body table th,
.lg-body table td{
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-ink);
}
.lg-body table th{
  font-family: 'Manrope', sans-serif;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--beige-dark);
  font-weight: 600;
}
.lg-body table td{ color: var(--ink-soft); vertical-align: top }
.lg-body table td:first-child{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mokka-deep);
  width: 38%;
}
@media (max-width: 680px){
  .lg-body table tr{ display: block; border-bottom: 1px solid var(--rule-ink); padding: 12px 0 }
  .lg-body table td{ display: block; padding: 4px 0; border-bottom: 0 }
  .lg-body table td:first-child{ width: auto; font-size: 10.5px; margin-bottom: 4px }
}

/* Note callout */
.lg-body .note{
  background: var(--cream);
  border-left: 3px solid var(--oak);
  padding: 20px 24px;
  margin: 32px 0;
  max-width: 720px;
  border-radius: 0 2px 2px 0;
}
.lg-body .note p{
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-size: 16px;
  color: var(--mokka-deep);
  line-height: 1.65;
}

/* TOC */
.lg-toc{
  background: var(--cream);
  border: 1px solid var(--cream-2);
  padding: 26px 30px;
  margin-bottom: 56px;
  max-width: 720px;
  border-radius: 2px;
}
.lg-toc h4{
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--beige-dark);
  margin-bottom: 14px;
}
.lg-toc ul{ list-style: none; margin: 0; display: grid; gap: 8px }
.lg-toc li{ margin: 0 }
.lg-toc a{
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--espresso);
  border: 0;
  display: inline-flex; align-items: center; gap: 12px;
  padding-bottom: 0;
}
.lg-toc a::before{
  content: '⬥';
  color: var(--oak);
  font-size: 11px;
}
.lg-toc a:hover{ color: var(--mokka); border: 0 }
.lg-toc a:hover::before{ color: var(--oak-dark) }

/* ============ Footer ============ */
footer.lg-foot{
  background: var(--espresso);
  color: var(--oak-light);
  padding: 44px 0 38px;
  border-top: 1px solid var(--rule-oak);
}
.lg-foot .container{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.lg-foot a{
  color: var(--oak-light);
  border: 0;
  padding-bottom: 2px;
  position: relative;
}
.lg-foot a::after{
  content: ''; position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--oak);
  transition: width .35s var(--ease-out);
}
.lg-foot a:hover{ color: var(--cream) }
.lg-foot a:hover::after{ width: 100% }
.lg-foot .legal-nav{ display: flex; gap: 6px 18px; flex-wrap: wrap }
.lg-foot .sep{ color: rgba(240, 228, 206, .25) }

@media (max-width: 680px){
  .container{ padding: 0 22px }
  .lg-hero{ padding: 80px 22px 60px }
  .lg-body{ padding: 60px 0 80px }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001s !important; transition-duration: .001s !important }
}