/* ════════════════════════════════════════════════════════
   kerekparut.css  –  kerekparos.com
   Közös stíluslap: nyitóoldal (index.php) + városoldalak
   ════════════════════════════════════════════════════════ */

/* ── CSS változók (nappali) ─────────────────────────────*/
:root {
  --green-dark:    #1a5c38;
  --green-mid:     #1f7a4a;
  --green-bright:  #2ecc71;
  --green-pale:    #e8f5ee;
  --yellow:        #f5c842;
  --amber:         #f09a2a;
  --bark:          #5c3d1e;
  --bg:            #f7faf8;
  --text:          #1e2e24;
  --text-muted:    #5a7060;
  --border:        #cde3d6;
  --shadow:        0 4px 24px rgba(30,90,56,.10);
  --shadow-lg:     0 8px 40px rgba(30,90,56,.15);
  --radius:        14px;
  --radius-sm:     8px;
  --hero-g1: #0e4027; --hero-g2: #1a7c4d;
  --hero-g3: #2eaa6b; --hero-g4: #4ec98a;
  --star-op: 0;
}

/* ── Éjszakai mód ───────────────────────────────────────*/
body.night {
  --bg:          #0b1710;
  --text:        #cce8d4;
  --text-muted:  #6e9e7a;
  --border:      #162b1e;
  --green-pale:  #0b1e12;
  --green-mid:   #27a362;
  --hero-g1: #020b05; --hero-g2: #060f09;
  --hero-g3: #0a1c10; --hero-g4: #0e2214;
  --star-op: 1;
  --shadow:    0 4px 24px rgba(0,0,0,.50);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.65);
}

/* ── Reset ──────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background .7s, color .5s;
}
a { color: var(--green-mid); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════════════
   NAVIGÁCIÓ
════════════════════════════════════════════════════════ */
.kr-nav {
  background: var(--green-dark);
  padding: .6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .95rem;
  letter-spacing: .03em;
  flex-wrap: wrap;
  transition: background .5s;
}
body.night .kr-nav { background: #030a05; }
.kr-nav a          { color: rgba(255,255,255,.82); }
.kr-nav a:hover    { color: #fff; text-decoration: none; }
.kr-nav__sep       { color: rgba(255,255,255,.28); font-size: .8rem; }
.kr-nav__logo      { color: #fff; font-weight: 800; font-size: 1.1rem; margin-right: .3rem; }
.kr-night-badge {
  margin-left: auto;
  font-size: .75rem;
  background: rgba(120,80,200,.25);
  border: 1px solid rgba(160,120,255,.3);
  color: #c8b0ff;
  padding: .15em .8em;
  border-radius: 12px;
  letter-spacing: .06em;
  display: none;
}
body.night .kr-night-badge { display: inline-block; }

/* ════════════════════════════════════════════════════════
   HERO HEADER
════════════════════════════════════════════════════════ */
.kr-hero {
  position: relative;
  min-height: 290px;
  background: linear-gradient(160deg,
    var(--hero-g1) 0%, var(--hero-g2) 45%,
    var(--hero-g3) 80%, var(--hero-g4) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 1.2s;
}

/* Csillagok */
.kr-stars {
  position: absolute; inset: 0;
  opacity: var(--star-op);
  transition: opacity 2s;
  pointer-events: none; z-index: 1;
}
.kr-star {
  position: absolute; background: #fff; border-radius: 50%;
  animation: kr-twinkle var(--d,3s) ease-in-out infinite var(--dl,0s);
}
@keyframes kr-twinkle {
  0%,100% { opacity:.95; transform:scale(1); }
  50%     { opacity:.15; transform:scale(.5); }
}

/* Nap / Hold */
.kr-sky-body {
  position: absolute; top: 20px; right: 88px;
  width: 66px; height: 66px; border-radius: 50%;
  z-index: 2; transition: all 1.5s;
}
.kr-sky-body.sun {
  background: radial-gradient(circle,#fff9c4 25%,#f5c842 55%,#f09a2a 100%);
  box-shadow: 0 0 0 10px rgba(245,200,66,.2),0 0 0 22px rgba(245,200,66,.08);
  animation: sun-pulse 4s ease-in-out infinite;
}
@keyframes sun-pulse {
  0%,100%{box-shadow:0 0 0 10px rgba(245,200,66,.2),0 0 0 22px rgba(245,200,66,.08)}
  50%    {box-shadow:0 0 0 16px rgba(245,200,66,.25),0 0 0 36px rgba(245,200,66,.06)}
}
.kr-sky-body.moon {
  background: radial-gradient(circle at 38% 35%,#fff8d0 0%,#d4c870 55%,#908030 100%);
  box-shadow: 0 0 30px 8px rgba(200,180,70,.15),0 0 60px 15px rgba(200,180,70,.06);
  animation: moon-glow 5s ease-in-out infinite;
}
@keyframes moon-glow {
  0%,100%{box-shadow:0 0 30px 8px rgba(200,180,70,.15),0 0 60px 15px rgba(200,180,70,.06)}
  50%    {box-shadow:0 0 40px 12px rgba(200,180,70,.22),0 0 80px 22px rgba(200,180,70,.08)}
}

/* SVG háttér */
.kr-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.kr-hero__landscape { position: absolute; bottom: 0; left: 0; width: 100%; height: 62%; }

/* Kerékpáros animáció */
.kr-cyclist-group { animation: kr-ride 14s linear infinite; }
@keyframes kr-ride { from{transform:translateX(-120px)} to{transform:translateX(1560px)} }

/* Éjjeli lámpák */
.lamp-front,.lamp-rear,.lamp-dot,.lamp-rear-dot { opacity:0; transition:opacity 1.4s; }
body.night .lamp-front, body.night .lamp-dot     { opacity:1; }
body.night .lamp-rear,  body.night .lamp-rear-dot{ opacity:1; }

/* Hero szöveg */
.kr-hero__content {
  position: relative; z-index: 3;
  padding: 2.5rem 2rem 1.2rem;
  max-width: 1200px; margin: 0 auto; width: 100%;
  animation: fadeUp .7s ease both;
}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none}
}
.kr-hero__badge {
  display: inline-block;
  background: rgba(245,200,66,.22);
  border: 1px solid rgba(245,200,66,.4);
  color: #f5e07a;
  font-family: 'Barlow Condensed',sans-serif;
  font-size: .85rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .2em .9em; border-radius: 20px; margin-bottom: .7rem;
}
.kr-hero__title {
  font-family: 'Barlow Condensed',sans-serif;
  font-weight: 800; line-height: 1.05; color: #fff;
}
.kr-hero__city {
  display: block;
  font-size: clamp(2.8rem,7vw,5rem);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  letter-spacing: -.01em;
}
.kr-hero__sub {
  display: block;
  font-size: clamp(1.4rem,3.5vw,2.2rem);
  color: var(--yellow); letter-spacing: .04em; font-weight: 600;
}
.kr-hero__desc { font-size: .9rem; color: rgba(255,255,255,.7); margin-top: .5rem; }
.kr-hero__wave { position: relative; z-index: 3; line-height: 0; }
.kr-hero__wave svg { display: block; width: 100%; }

/* ════════════════════════════════════════════════════════
   MAIN LAYOUT
════════════════════════════════════════════════════════ */
.kr-main { padding: 0 0 3rem; }
.kr-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Szekció cím */
.kr-section-title {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 1.7rem; font-weight: 700;
  color: var(--green-dark);
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.4rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--yellow);
  letter-spacing: .02em;
}
body.night .kr-section-title { color: #3ec87a; }

/* ════════════════════════════════════════════════════════
   HIRDETÉSEK
════════════════════════════════════════════════════════ */
.kr-ad-strip {
  text-align: center;
  margin: 1.4rem 0;
}
.kr-ad-between {
  margin: 2rem 0;
  padding: 1rem;
  background: var(--green-pale);
  border-radius: var(--radius);
  transition: background .5s;
}
body.night .kr-ad-between { background: #0a180e; }
.kr-ad-bottom-wrap {
  margin: 2rem 0 1rem;
  padding: 1.2rem;
  background: var(--green-pale);
  border-radius: var(--radius);
  transition: background .5s;
}
body.night .kr-ad-bottom-wrap { background: #0a180e; }

/* ════════════════════════════════════════════════════════
   INTRO SZÖVEG BLOKK
════════════════════════════════════════════════════════ */
.kr-intro-block {
  margin: 0 0 2rem;
  padding: 1.2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  border-left: 5px solid var(--green-bright);
  box-shadow: var(--shadow);
  transition: background .5s, border-color .5s;
}
body.night .kr-intro-block { background: #0c1c11; border-left-color: var(--green-mid); }
.kr-lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.78;
}

/* ════════════════════════════════════════════════════════
   TÉRKÉPEK – EGYMÁS ALATT (full width)
════════════════════════════════════════════════════════ */
.kr-maps { margin-bottom: 1.5rem; }

.kr-map-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow .25s, background .5s, border-color .5s;
}
body.night .kr-map-card { background: #0c1c11; border-color: #162b1e; }
.kr-map-card--full {
  width: 100%;
  margin-bottom: 0; /* a közti hirdetés adja a térközt */
}
.kr-map-card:hover { box-shadow: var(--shadow-lg); }

.kr-map-card__header {
  padding: 1rem 1.4rem .9rem;
  background: var(--green-pale);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  transition: background .5s;
}
body.night .kr-map-card__header { background: #0a1a0f; }
.kr-map-card__header h3 {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--green-dark);
}
body.night .kr-map-card__header h3 { color: #3ec87a; }
.kr-map-card__header p {
  font-size: .83rem; color: var(--text-muted);
  margin-left: auto;
}

.kr-map-badge {
  display: inline-block;
  font-family: 'Barlow Condensed',sans-serif;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .18em .8em; border-radius: 4px;
  flex-shrink: 0;
}
.kr-map-badge--cycl { background: #1f7a4a; color: #fff; }
.kr-map-badge--osm  { background: #2196a6; color: #fff; }

.kr-map-card__frame { line-height: 0; overflow: hidden; }
/* Leaflet div */
.kr-map-card__frame > div[id] { width: 100%; height: 560px; display: block; }
/* iframe */
.kr-map-card__frame iframe    { display: block; width: 100%; height: 560px; border: none; }

@media (max-width: 768px) {
  .kr-map-card__frame > div[id] { height: 340px; }
  .kr-map-card__frame iframe     { height: 340px; }
  .kr-map-card__header           { flex-direction: column; gap: .3rem; }
  .kr-map-card__header p         { margin-left: 0; }
}

.kr-map-card__tip {
  padding: .7rem 1.4rem;
  font-size: .85rem;
  color: var(--bark);
  background: #fffbe6;
  border-top: 1px solid #f0e8c0;
  transition: background .5s, color .5s;
}
body.night .kr-map-card__tip {
  background: #11200e;
  color: #b8d4a0;
  border-top-color: #1e3d28;
}
.kr-map-card__tip a { color: var(--bark); font-weight: 600; }
body.night .kr-map-card__tip a { color: #8ec87a; }

/* ════════════════════════════════════════════════════════
   NYITÓOLDALI LINKDOBOZOK (index.php)
════════════════════════════════════════════════════════ */
.kr-link-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
  margin-bottom: 3rem;
}
.kr-link-box {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .2s, background .5s;
}
body.night .kr-link-box { background: #0c1c11; border-color: #162b1e; }
.kr-link-box:hover { box-shadow: var(--shadow-lg); }

.kr-link-box__head {
  background: var(--green-pale);
  border-bottom: 1px solid var(--border);
  padding: .8rem 1.2rem;
  display: flex; align-items: center; gap: .5rem;
  transition: background .5s;
}
body.night .kr-link-box__head { background: #0a1a0f; }
.kr-link-box__head h3 {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--green-dark); letter-spacing: .02em;
}
body.night .kr-link-box__head h3 { color: #3ec87a; }
.kr-link-box__head .kr-section-icon { font-size: 1.1rem; }
.kr-link-box__body { padding: .6rem .4rem .8rem; }

/* Link listák */
.kr-linklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-linklist li a {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem; border-radius: var(--radius-sm);
  font-size: .9rem; color: var(--text); text-decoration: none;
  transition: background .15s, color .15s;
}
.kr-linklist li a::before { content:'›'; color:var(--green-mid); font-weight:700; font-size:1rem; flex-shrink:0; }
.kr-linklist li a:hover { background:var(--green-pale); color:var(--green-dark); text-decoration:none; }
body.night .kr-linklist li a { color:var(--text); }
body.night .kr-linklist li a:hover { background:#122616; color:#3ec87a; }

/* Városok pill grid */
.kr-varos-grid { padding:.5rem .6rem .6rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.kr-varos-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--green-pale); border: 1px solid var(--border);
  border-radius: 20px; padding: .28em .85em;
  font-size: .85rem; color: var(--text); font-weight: 500;
  text-decoration: none; transition: all .18s;
}
.kr-varos-pill:hover { background:var(--green-mid); border-color:var(--green-mid); color:#fff; text-decoration:none; }
body.night .kr-varos-pill { background:#102216; border-color:#1e3d28; }
body.night .kr-varos-pill:hover { background:var(--green-mid); color:#fff; }

/* Kép a linkdobozban */
.kr-link-box__img { display:block; text-align:center; padding:.6rem 1.2rem 1rem; }
.kr-link-box__img img { border-radius:var(--radius-sm); max-width:100%; height:auto; }

/* ════════════════════════════════════════════════════════
   ESEMÉNYEK
════════════════════════════════════════════════════════ */
.kr-events { margin-bottom: 2.5rem; }
.kr-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px,1fr));
  gap: 1.2rem;
}
.kr-event-card {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.1rem 1.2rem;
  display: flex; gap: 1rem; align-items: flex-start;
  box-shadow: var(--shadow);
  transition: transform .2s, background .5s, border-color .5s;
}
body.night .kr-event-card { background: #0c1c11; border-color: #162b1e; }
.kr-event-card:hover { transform: translateY(-2px); }
.kr-event-card__date {
  flex: 0 0 52px; background: var(--green-mid); color: #fff;
  border-radius: var(--radius-sm); text-align: center; padding: .3rem .2rem;
  font-family: 'Barlow Condensed',sans-serif; line-height: 1.2;
}
.kr-event-card__day   { display:block; font-size:1.6rem; font-weight:800; }
.kr-event-card__month { display:block; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.kr-event-card__body h4 { font-size:1rem; font-weight:700; color:var(--green-dark); margin-bottom:.2rem; }
body.night .kr-event-card__body h4 { color:#3ec87a; }
.kr-event-card__body p  { font-size:.85rem; color:var(--text-muted); }
.kr-event-card__loc { font-size:.78rem; color:var(--amber); font-weight:600; display:flex; align-items:center; gap:.25rem; margin-top:.3rem; }

/* ════════════════════════════════════════════════════════
   VÁROSOK LISTA
════════════════════════════════════════════════════════ */
.kr-cities { margin-bottom: 2.5rem; }
.kr-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: .7rem;
}
.kr-city-link {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .55rem .9rem; font-size: .92rem;
  color: var(--text); font-weight: 500;
  transition: all .18s; text-decoration: none;
}
body.night .kr-city-link { background:#0c1c11; border-color:#162b1e; }
.kr-city-link:hover { background:var(--green-pale); border-color:var(--green-bright); color:var(--green-dark); text-decoration:none; transform:translateX(2px); }
body.night .kr-city-link:hover { background:#122616; color:#3ec87a; }
.kr-city-link--active { background:var(--green-mid); border-color:var(--green-mid); color:#fff; font-weight:700; pointer-events:none; }

/* ════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
.kr-footer {
  background: var(--green-dark);
  color: rgba(255,255,255,.7);
  padding: 1.8rem 1.5rem; text-align: center; font-size: .85rem;
  transition: background .5s;
}
body.night .kr-footer { background: #030a05; }
.kr-footer a { color: var(--yellow); }
.kr-footer__logo { font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:.4rem; }

/* ════════════════════════════════════════════════════════
   NYITÓOLDALI TÉRKÉP (map-fooldal)
════════════════════════════════════════════════════════ */
.kr-main-map { margin-bottom: 2.5rem; }
.kr-main-map__frame {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
#map-fooldal { width:100%; height:560px; display:block; }
@media (max-width:768px) { #map-fooldal { height:340px; } }