/* ============================================================
   1956 · Nemzetközi emlékezete — globális stílusok
   A Claude Design kanvász <style> blokkjából portolva.
   Az elemek túlnyomó része inline stílust visz (a kanvász így
   adta), itt csak az van, ami nem fér inline-ba: pszeudo-elem,
   keyframe, attribútum-szelektor, hover.
   ============================================================ */


:root{
  /* A levagas merete. Gombonkent felulirhato: style={{ "--nc": "9px" }} –
     kis vezerlon (chip, ful) a 13px aranytalanul nagy. */
  --nc:13px;
}
/* A --notch NEM mehet a :root-ra: a custom property-ben levo var() a
   deklaracio helyen, computed-value idoben oldodik fel, tehat :root-on
   beegne a 13px, es a gombonkenti --nc feluliras hatastalan lenne.
   Ezert a hasznalat helyen deklaraljuk ujra. */
[data-btn],[data-btn-outline]{
  /* A belso lap levagasa 0.6px-szel kisebb. Ket parhuzamos 45 fokos el, amit
     (1px,1px)-szel eltolunk, 1.41px-re kerul egymastol; 0.6px korrekcioval az
     atlo is 1px lesz, mint az egyenes elek. Ez is ide kell, nem a :root-ra:
     kulonben a var(--nc) ott oldodna fel, es beegne a 13px. */
  --nc-in:calc(var(--nc) - 0.6px);
  --notch:polygon(0 0,calc(100% - var(--nc)) 0,100% var(--nc),100% 100%,var(--nc) 100%,0 calc(100% - var(--nc)));
  /* A lap: 1px-szel beljebb, kisebb levagassal. */
  --notch-face:polygon(1px 1px,calc(100% - 1px - var(--nc-in)) 1px,calc(100% - 1px) calc(1px + var(--nc-in)),calc(100% - 1px) calc(100% - 1px),calc(1px + var(--nc-in)) calc(100% - 1px),1px calc(100% - 1px - var(--nc-in)));
  /* A keret mint GYURU: kulso alakzat minusz a lap alakzata, evenodd-dal.
     Igy a lap lehet transparent (pl. fotora ultetett gomb) anelkul, hogy a
     keret szine atutne az egesz gombon. */
  --notch-ring:polygon(evenodd,0 0,calc(100% - var(--nc)) 0,100% var(--nc),100% 100%,var(--nc) 100%,0 calc(100% - var(--nc)),1px 1px,calc(100% - 1px - var(--nc-in)) 1px,calc(100% - 1px) calc(1px + var(--nc-in)),calc(100% - 1px) calc(100% - 1px),calc(1px + var(--nc-in)) calc(100% - 1px),1px calc(100% - 1px - var(--nc-in)));
}
*{box-sizing:border-box}
body{margin:0;background:#EDEFEE;color:#16191A;font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.15;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
:focus-visible{outline:3px solid #16191A;outline-offset:2px;box-shadow:inset 0 0 0 2px #9E7F27}
a{color:#6F5F55}
a:hover{color:#A22B3B}
button{font-family:inherit;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
input,textarea,select{font-family:inherit}
@keyframes ribbonDrift{from{transform:translateX(0)}to{transform:translateX(-600px)}}
[data-ribbon]{animation:ribbonDrift 40s linear infinite}
[data-btn]{position:relative;clip-path:var(--notch)}
[data-btn]:hover{transform:translateY(-1px)}
[data-btn]:active{transform:translateY(0)}
[data-btn] [data-arrow]{display:inline-block;transition:transform .18s ease}
[data-btn]:hover [data-arrow]{transform:translateX(4px)}
[data-chip][aria-pressed="true"]{background:#16191A;color:#EDEFEE;border-color:#16191A}
[data-lang][aria-pressed="true"]{background:#EDEFEE!important;color:#16191A!important}
[data-step][data-on="1"]{background:#16191A}
[data-tab]{border-bottom-color:transparent}
[data-tab]:hover{color:#16191A !important}
[data-tab][data-on="1"]{color:#16191A !important;border-bottom-color:#A22B3B !important}
[data-card]{transition:border-color .2s ease}
[data-card]:hover{border-color:#16191A}
[data-card] h3 button{transition:color .16s ease}
[data-card]:hover h3 button{color:#A22B3B}
[data-zoom]{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
[data-card]:hover [data-zoom]{transform:scale(1.045)}
[data-link]{position:relative;text-decoration:none}
[data-link]::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:#A22B3B;transition:right .28s cubic-bezier(.2,.6,.2,1)}
[data-link]:hover::after{right:0}
[data-navlink][data-on="1"] [data-link]::after{right:0}
image-slot{background:#DDE0DF}
[data-spread]{display:block}
[data-essay]{display:grid;grid-template-columns:1fr;gap:26px}
[data-plates]{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.5vw,30px)}
[data-close]{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px)}
[data-row]{display:grid;grid-template-columns:1fr}
[data-mapscreen]{display:grid;grid-template-columns:1fr;align-items:stretch}
[data-mapfield]{position:relative;min-height:60vh;background:#DCE3E1}
@media (min-width:900px){
[data-mapscreen]{grid-template-columns:minmax(320px,400px) minmax(0,1fr);align-items:start}
[data-mapfield]{min-height:0;height:calc(100dvh - var(--hdr,120px));position:sticky;top:var(--hdr,120px)}
}
[data-row]:last-child{border-bottom:0}
[data-row]:hover [data-zoom]{transform:scale(1.03)}
[data-nums]{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,40px)}
[data-charts]{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px)}
[data-plate]{transition:border-color .2s ease}
[data-plate]:hover{border-color:#16191A}
[data-plate]:hover [data-zoom]{transform:scale(1.04)}
[data-bar]{transition:background .2s ease}
@media (min-width:900px){
[data-essay]{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,60px)}
[data-plates]{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-close]{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:start}
[data-row]{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,230px)}
[data-charts]{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
@media (min-width:920px){[data-feat]>article:first-child{grid-column:span 2}[data-feat]>article:first-child>div:first-child{height:340px}[data-feat]>article:first-child h3{font-size:33px}}
@media (prefers-reduced-motion: reduce){[data-ribbon]{animation:none}[data-zoom],[data-btn],[data-link]::after{transition:none}}


/* --- hover-állapotok ---
   A kanvász style-hover attribútumait váltják ki.
   Használat: className="hv3" a megfelelő elemen. --- */
.hv1:hover{border-color:#16191A;background:#DDE0DF}
.hv2:hover{border-color:#16191A}
.hv3:hover{background:#16191A;border-color:#16191A}
.hv4:hover{background:#EDEFEE;color:#16191A;border-color:#EDEFEE}
.hv5:hover{background:#EDEFEE;color:#16191A}
.hv6:hover{background:#A22B3B;border-color:#A22B3B}
.hv7:hover{color:#A22B3B;border-color:#A22B3B}
.hv8:hover{color:#A22B3B}
.hv9:hover{border-color:#EDEFEE}
.hv10:hover{background:#B7BCBA}
.hv11:hover{background:#A22B3B}
.hv12:hover{border-color:#A22B3B;background:#E6E8E7}
.hv13:hover{border-color:#3B6350;background:#E6E8E7}
.hv14:hover{border-color:#6F5F55;background:#E6E8E7}
.hv15:hover{background:#DDE0DF}
.hv16:hover{background:#E6E8E7}
.hv17:hover{background:#16191A;color:#EDEFEE}

/* --- térkép-panel: sötét alap (felhasználói kérés) ---
   A panel `#16191A`-ra került, ezért három globális szabályt felül kell írni.
   Csak a `[data-mappanel]` scope-on belül – az adatbázis-képernyő ugyanezeket
   az elemeket világos alapon használja, azt nem szabad elrontani. */

/* A globális fókuszgyűrű hordozója `#16191A`, ami itt eltűnne. Sötéten a
   világos tónus a hordozó; a sárgaréz belső jegy változatlan. */
[data-mappanel] :focus-visible{outline-color:#EDEFEE}

/* Az aktív chip globálisan sötétre invertál – itt beleolvadna a panelbe.
   Nem világosra invertálunk (az kioltaná a megemelt ikontónusokat), hanem
   kiemelt háttér + világos keret jelzi az aktív szűrőt. */
[data-mappanel] [data-chip][aria-pressed="true"]{background:#3F4644;color:#EDEFEE;border-color:#EDEFEE}
/* A keretes mechanizmusban a gomb `background`-ja a KERET, a lapot a `::before`
   adja – ezért az aktív chipnél a kettőt szét kell szedni. */
[data-mappanel] [data-chip][data-btn-outline][aria-pressed="true"]{color:#EDEFEE}
[data-mappanel] [data-chip][data-btn-outline][aria-pressed="true"]::before{background:#3F4644}
[data-mappanel] [data-chip][data-btn-outline][aria-pressed="true"]::after{background:#EDEFEE}

/* A lista dobozainak hover-állapota (a világos `hv10` párja sötéten). */
.hv18:hover{background:#242829;border-color:#7E8583}

/* --- keretes gomb levágott sarokkal (felhasználói kérés) ---
   A piros `[data-btn]` levágását a keretes gombok is megkapják. Egy sima
   `border` nem járható: a `clip-path` a keretet is elvágná a két rézsútos
   élen. Ezért a keretet a gomb SAJÁT háttere adja, a gomb lapját pedig egy
   1 px-rel beljebb húzott `::before` – így a levágás a kereten is átmegy.
   A `::before` `z-index:-1`-gyel a háttér fölé, de a szöveg alá kerül.

   Hangolható változók gombonként:
   --edge / --edge-hover  a keret színe
   --face / --face-hover  a lap színe
   --ink  / --ink-hover   a felirat színe                                  */
/* `isolation:isolate` NEM elhagyhato: a ::before/::after z-index:-1-gyel megy,
   es sajat stacking context nelkul nem a gomb, hanem a legkozelebbi os
   hattere moge kerulnenek – vagyis a kartya/foto elnyelne oket. */
[data-btn-outline]{position:relative;isolation:isolate;border:0;background:transparent;color:var(--ink,#16191A);transition:color .16s ease,transform .16s ease}
/* ::before = a lap, ::after = az 1px-es keretgyuru. A gomb sajat hattere
   vegig atlatszo, ezert a --face:transparent is mukodik. */
[data-btn-outline]::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--face,#EDEFEE);clip-path:var(--notch-face);transition:background .16s ease}
[data-btn-outline]::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--edge,#16191A);clip-path:var(--notch-ring);transition:background .16s ease}
[data-btn-outline]:hover{color:var(--ink-hover,#EDEFEE);transform:translateY(-1px)}
[data-btn-outline]:hover::before{background:var(--face-hover,#16191A)}
[data-btn-outline]:hover::after{background:var(--edge-hover,var(--edge,#16191A))}
[data-btn-outline]:active{transform:translateY(0)}
[data-btn-outline] [data-arrow]{display:inline-block;transition:transform .18s ease}
[data-btn-outline]:hover [data-arrow]{transform:translateX(4px)}

/* --- fókusz a levágott sarkú gombokon ---
   FIGYELEM: a `clip-path` az `outline`-t ÉS a `box-shadow`-t is levágja, tehát
   a globális fókuszgyűrűnk ezeken a gombokon nem látszik. (Ez a kanvászon is
   így volt: a piros gombnak eddig egyáltalán nem volt látható fókuszjegye.)
   A `filter` viszont a vágás UTÁN fut, ezért a drop-shadow követi a levágott
   alakot. Négy irányba tolt, elmosás nélküli árnyék = 2 px-es körbefutó él. */
[data-btn]:focus-visible,[data-btn-outline]:focus-visible{
  outline:none;
  filter:drop-shadow(2px 0 0 #16191A) drop-shadow(-2px 0 0 #16191A) drop-shadow(0 2px 0 #16191A) drop-shadow(0 -2px 0 #16191A);
}
/* A belső sárgaréz jegy: keretes gombon a keret vált, tömör gombon egy
   beljebb húzott gyűrű. Ugyanaz a kéttónusú logika, mint máshol. */
[data-btn-outline]:focus-visible::after{background:#9E7F27}
[data-btn]:focus-visible::before{content:'';position:absolute;inset:2px;clip-path:var(--notch);box-shadow:inset 0 0 0 2px #9E7F27;pointer-events:none}
/* Sötét panelen a tinta él eltűnne – ott világos viszi a fókuszt. */
[data-mappanel] [data-btn]:focus-visible,[data-mappanel] [data-btn-outline]:focus-visible{
  filter:drop-shadow(2px 0 0 #EDEFEE) drop-shadow(-2px 0 0 #EDEFEE) drop-shadow(0 2px 0 #EDEFEE) drop-shadow(0 -2px 0 #EDEFEE);
}

/* A notch-os chip aktiv allapota: a `background` mostantol a keret, ezert a
   toltest a ::before-on kell valtani. */
[data-chip][data-btn-outline][aria-pressed="true"]{color:#EDEFEE}
[data-chip][data-btn-outline][aria-pressed="true"]::before{background:#16191A}
[data-chip][data-btn-outline][aria-pressed="true"]::after{background:#16191A}