/*
 Theme Name: TMI (TurkMagyarIzi) Theme
 Theme URI: https://example.com/
 Author: Anaga Software Kft.
 Version: 0.1.1
 Description: Minimal, accessible, map-first theme for Magyar emlékhelyek Törökországban.
*/

:root{
  --brand:#b4002d;        /* bordó akcentus */
  --ink:#1d1d1f;          /* fő szöveg */
  --muted:#6b7280;        /* másodlagos szöveg */
  --bg:#ffffff;           /* háttér */
  --card:#f7f7f8;         /* kártya */
  --ring:#0a84ff;         /* fókusz szín */
  --radius:14px;

  /* archive layout helpers */
  --tmi-radius: 12px;
  --tmi-gap: 18px;
  --tmi-border: 1px solid rgba(0,0,0,.08);
  --tmi-primary: var(--brand);
  --tmi-bg-soft: color-mix(in oklab, Canvas 94%, var(--tmi-primary) 3%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* === TYPOGRAPHY ===
   Headings: Krona One (400)
   Body text: Instrument Serif (400)
*/
body{
  margin:0;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family: "Krona One", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 400; letter-spacing:.2px;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

.container{width:min(1100px, 100% - 2rem); margin-inline:auto; padding-block:1.25rem}
header.site-header{position:sticky; top:0; background:#fff; z-index:50; border-bottom:1px solid #eee}
.site-header .inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.75rem}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px; }
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--brand); display:inline-block}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem; flex-wrap:wrap}
nav a{padding:.4rem .6rem; border-radius:8px}
nav a:focus, nav a:hover{background:rgba(180,0,45,.08)}

main .lead{font-size:1.1rem; color:var(--muted)}
.grid{display:grid; gap:1.25rem}
@media (min-width: 900px){ .grid{grid-template-columns: 1.2fr .8fr} }

.button{
  display:inline-block; background:var(--brand); color:#fff; padding:.6rem .9rem; border-radius:10px; font-weight:600;
}
.button:hover{filter:brightness(0.95); text-decoration:none}

.grid.cards{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  margin-block:1rem 2rem;
}
.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid #ececec;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card a{color:inherit; text-decoration:none; display:block; height:100%}
.card img{aspect-ratio:16/10; object-fit:cover}
.card h3{font-size:1.05rem; line-height:1.3; margin:.75rem .9rem .25rem}
.card p{color:var(--muted); margin:0 .9rem .9rem}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.06)}

.map-wrap{margin-block:1rem 1.25rem}
#map, #map-archive{border-radius:var(--radius); border:1px solid #e9e9e9}

footer.site-footer{margin-top:2rem; padding:1.25rem 0; color:var(--muted); border-top:1px solid #eee}

/* WCAG fókusz és skip link */
:focus{outline: 3px solid var(--ring); outline-offset:2px}
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.4rem .6rem; border-radius:8px}

/* Leaflet pin (svg divIcon) */
.tmz-pin svg{fill:var(--brand); filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); transition:transform .1s ease}
.tmz-pin svg:hover{transform:scale(1.06)}
.leaflet-popup-content{margin:8px 10px}
.leaflet-popup-content img{border-radius:10px}

/* H1-H2 spacing */
h1{font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin:.25rem 0 .5rem}
h2{font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin:1rem 0 .5rem}

/* Simple util */
.badge{display:inline-block; background:#fff; border:1px solid #e6e6e6; border-radius:999px; padding:.2rem .6rem; font-size:.85rem; color:#333}
.meta{display:flex; flex-wrap:wrap; gap:.4rem}

/* Archive hero & toolbar */
.archive-hero{margin-block:.25rem 1rem}
.archive-toolbar{position:relative; margin:.25rem 0 1rem}
.chips-scroll{display:flex; gap:1rem; overflow:auto; padding:.25rem 0}
.chip-group{display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap}
.chip-label{font-weight:600; color:var(--muted)}
.chip{
  display:inline-block; white-space:nowrap; background:#fff; border:1px solid #e6e6e6;
  border-radius:999px; padding:.35rem .7rem; font-size:.9rem; color:#333;
}
.chip:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}

/* Pagination */
.pagination{display:flex; justify-content:center; margin:1rem 0 2rem}
.pagination .nav-links{display:flex; gap:.5rem; flex-wrap:wrap}
.pagination a, .pagination span{
  display:inline-block; padding:.4rem .7rem; border:1px solid #e6e6e6; border-radius:8px;
}
.pagination .current{background:var(--brand); color:#fff; border-color:var(--brand)}

/* Leaflet konténer fixek: legyen mindig mérete, nehogy 0px-ről induljon */
#map, #map-archive, #tmz_picker { min-height: 320px; width: 100%; }
.leaflet-container { font: inherit; }

/* Homepage hero */
.homepage-hero{margin:.5rem 0 1rem}
.homepage-hero h1{margin:0}
.home-content{margin:1rem 0 2rem}
.home-content p{max-width:75ch}

/* === Emlékhely archív – layout & theme-friendly styling (checkbox panel) === */
.tmi-archive {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 3fr; /* ~1/4 vs 3/4 */
  gap: var(--tmi-gap);
  margin-top: var(--tmi-gap);
}
.filters-panel {
  background: var(--tmi-bg-soft);
  border: var(--tmi-border);
  border-radius: var(--tmi-radius);
  padding: 14px;
  position: relative;
}
.filters-panel .filter-block { margin-bottom: 14px; }
.filters-panel .filter-label,
.filters-panel legend.filter-label { display:block; font-weight:600; margin-bottom:8px; }
.filters-panel input[type="search"]{
  width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background:#fff;
}
.filters-panel .filters-scroll{
  max-height: calc(100vh - 260px);
  overflow:auto; padding: 6px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:10px;
}
.filters-panel .check{ display:flex; align-items:center; gap:8px; padding:6px 4px; border-radius:8px; }
.filters-panel .check:hover{ background:rgba(0,0,0,.04); }
.filters-panel input[type="checkbox"]{ accent-color: var(--brand); }
.filters-panel .filter-actions{ display:flex; gap:8px; margin-top:10px; }
.filters-panel .btn{ padding:8px 12px; border-radius:10px; cursor:pointer; border:1px solid rgba(0,0,0,.12); background:#fff; }
.filters-panel .btn-primary{ color:#fff; background: var(--brand); border-color: var(--brand); }
.filters-panel .btn-ghost{ background: transparent; }

/* Lista kártyák */
.emlekhely-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--tmi-gap); }
.emlekhely-card{ background:#fff; border: var(--tmi-border); border-radius: var(--tmi-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.emlekhely-card .thumb img{ width:100%; height:auto; display:block; }
.emlekhely-card .body{ padding:12px 14px; }
.emlekhely-card .title{ margin:0 0 6px; font-size:18px; }
.emlekhely-card .excerpt{ color:rgba(0,0,0,.68); font-size:14px; margin:0 0 8px; }
.emlekhely-card .more{ font-size:13px; color: var(--brand); }

/* Pagination (másik nézethez is) */
.pagination{ margin-top:16px; text-align:center; }
.pagination ul{ list-style:none; display:inline-flex; gap:8px; padding:0; margin:0; }
.pagination a, .pagination span{ display:inline-block; padding:6px 10px; border: var(--tmi-border); border-radius:10px; }
.pagination .current{ background: var(--brand); color:#fff; border-color: var(--brand); }

/* Térkép popup link */
.tmi-popup .tmi-link{ font-size:13px; color: var(--brand); }

/* Single két hasáb */
.tmz-flex { display:flex; flex-wrap:wrap; gap:20px; }
.tmz-flex>div { width:48%; flex:0 0 48%; box-sizing:border-box; }
@media (max-width: 768px) { .tmz-flex>div { width:100%; flex:0 0 100%; } }

body {
	overflow-x: hidden;
}

#footer a {
	color: #fff;
}

/* Header kereső – ugyanaz a stílus, mint a lenti (filters-panel) kereső */
.tmi-header-search{
  display:flex;
  align-items:center;
  gap:8px;
}

.tmi-header-search input[type="search"]{
  width: 260px;
  max-width: 45vw;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
}

.tmi-header-search .tmi-hdr-btn{
  height: 42px;
  width: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--brand);
  background: var(--brand);
  color:#fff;
  cursor:pointer;
}

.tmi-header-search .tmi-hdr-btn:hover{
  filter: brightness(0.95);
}