/* Alapértelmezett stílusok lenullázása */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 1em;
  padding: 0.5em;
  background: #000;
  color: #ff0;
  z-index: 1000;
}

html {
  font-size: 100%;
  /* 16px default — így 1rem = 16px */
}

/* Test beállítások */
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  /*background-color: #fafafa;*/
  background-image: url('bg_red.svg');
  /* A kép elérési útja */
  background-size: cover;
  /* Kitölti a teljes képernyőt */
  background-repeat: no-repeat;
  /* Ne ismétlődjön */
  background-position: center;
  /* Középre igazítva */
  background-attachment: fixed;
  /* Görgetés közben is fix marad */
}

body.dark-mode {
  background-color: #121212;
  color: #f1f1f1;
}

body.dark-mode .site-footer {
  background-color: #222;
  border-color: #666;
}

body.dark-mode a {
  color: #66ccff;
}

body.dark-mode .navbar {
  background-color: #1f1f1f;
  border-bottom: 1px solid #444;
}

/* Navbar linkek dark módban */
body.dark-mode .nav-links li a {
  color: #f0f0f0;
}

body.dark-mode .nav-links li a.active {
  background-color: #444;
  color: #fff;
}

/* Hírek szekció dark módban */
body.dark-mode .news-item {
  background-color: #2a2a2a;
  border-color: #444;
  color: #f0f0f0;
}

body.dark-mode .news-item h2,
body.dark-mode .news-item p,
body.dark-mode .news-label,
body.dark-mode aside,
body.dark-mode blockquote {
  color: #f0f0f0;
}

body,
.news-item,
.navbar,
.site-footer {
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode .history-section {
  background-color: #1e1e1e;
  border-color: #555;
  color: #f1f1f1;
}

body.dark-mode .history-text p,
body.dark-mode .history-text li,
body.dark-mode .history-text strong,
body.dark-mode .history-text em {
  color: #f1f1f1;
}

body.dark-mode .history-image figcaption {
  color: #ccc;
}

/* Dark mode - Kiegészítések a places.html elemeihez */
body.dark-mode .europe-section {
  background-color: #1e1e1e;
  border-color: #444;
  color: #f1f1f1;
}

body.dark-mode .europe-text h2,
body.dark-mode .europe-text p,
body.dark-mode .europe-bottom h3,
body.dark-mode .europe-bottom p {
  color: #f1f1f1;
}

body.dark-mode .country-name {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

body.dark-mode .mission-table-section {
  background-color: #1e1e1e;
  border-color: #666;
  color: #f1f1f1;
}

body.dark-mode .mission-table thead th,
body.dark-mode .mission-table tbody td {
  background-color: #2a2a2a;
  border-color: #444;
  color: #f1f1f1;
}

body.dark-mode .contact-form-section {
  background-color: #1e1e1e;
  border-color: #666;
  color: #f1f1f1;
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border-color: #555;
}

body.dark-mode .button-group button {
  background-color: #333;
  color: #fff;
  border-color: #555;
}

body.dark-mode .button-group button:hover {
  background-color: #444;
}


p {
  text-align: justify;
}

p,
ul,
ol {
  text-align: left;
}

.site-footer a:link {
  color: #0044cc;
}

.site-footer a:visited {
  color: purple !important;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  /* A 700-as súly a „Bold” */
}

p {
  font-weight: 400;
  /* Alap súly (Regular) */
}

/* NAVBAR */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A logo és a linkek a sáv két oldalán */
  background-color: #fff;
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
  /* Vékony alsó keret */
}

/* Logo beállítások */
.logo-container {
  flex: 0 0 auto;
  /* A logo fix szélességgel jelenik meg, nem nyúlik */
}

.logo {
  width: 60px;
  /* Állítsd tetszés szerint */
  height: auto;
}

/* Linklista */
.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  /* Térköz a menüpontok között */
}

.nav-links li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-links li a:hover {
  background-color: #eee;
}

/* 
     RESZPONZÍV BEÁLLÍTÁS:
     768px alatti képernyőszélességnél a menüpontok 
     függőlegesen rendeződnek egymás alá.
  */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    /* A navbar elemei függőlegesen rendeződnek */
    align-items: flex-start;
    /* Balra igazítás */
  }

  .nav-links {
    flex-direction: column;
    /* A menüpontok egymás alatt lesznek */
    width: 100%;
    margin-top: 10px;
    gap: 10px;
  }

  /* Igény szerint a logót középre is helyezheted: */
  .logo-container {
    margin-bottom: 10px;
  }
}

.nav-links li a.active {
  background-color: #ddd;
  /* Válassz kiemelő színt */
  color: #000;
  /* Tetszés szerinti betűszín */
  border-radius: 20px;
  /* Lekerekített sarkok, mint a példában */
  padding: 8px 12px;
  /* Kicsit nagyobb belső tér */
  font-weight: bold;
  /* Ha szeretnéd kiemelni */
}

/* FOOTER ALAPSTÍLUSOK */
.site-footer {
  border: 1px solid #000;
  /* Vékony keret körülötte, mint a példa képén */
  padding: 20px;
  /* Hézag a láblécen belül */
  margin-top: 40px;
  /* Hézag a lap többi része után */
  background-color: #fff;
  /* Háttérszín */
}

/* Footer tartalmának elrendezése */
.footer-container {
  display: flex;
  justify-content: space-between;
  /* A három oszlopot széthúzza egymástól */
}

/* Footer oszlopok */
.footer-column {
  flex: 1;
  /* Az oszlopok egyenlő szélességgel nyúlnak */
  margin: 0 10px;
  /* Oldalsó margó, hogy ne érjenek össze */
}

/* RESZPONZÍV beállítás kisebb kijelzők esetén (pl. mobil) */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    /* Egymás alá rendeződik a három oszlop */
    align-items: flex-start;
    /* Balra igazítva (vagy center, ha úgy tetszik) */
  }

  .footer-column {
    margin: 10px 0;
    /* Függőleges hézag az oszlopok között */
  }
}

/* A cikkeket körülvevő szekció */
.news-section {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  /* Középre igazítás */
  padding: 20px 0;
  /* Felső-alsó térköz */
}

/* Egyetlen „hírkártya” doboz */
.news-item {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  /* Lekerekített sarkok */
  margin-bottom: 20px;
  /* Hézag a kártyák között */
  padding: 10px;
  /* Belül kis térköz */
  overflow: hidden;
  /* Ha a kép nagyobb, ne lógjon ki */
}

/* A kis „Hír1 / Hír2 / Hír3” címke stílusozása */
.news-label {
  background-color: #eee;
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  /* Kör alakú címke hatás */
  font-size: 0.875rem;
  font-weight: bold;
  color: #333;
}

/* A cikk tartalma (kép + szöveg) flexbox elrendezésben */
.news-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* Képet és szöveget tetejüknél igazítja */
  gap: 10px;
  /* Hézag a kép és a szöveg között */
}

/* A cikkek képe */
.news-image {
  width: 200px;
  /* Tetszés szerint módosíthatod */
  height: auto;
  /* Arányok megtartása */
  border-radius: 5px;
  /* Lekerekítés */
  object-fit: cover;
  /* Ha vágni kell a képből, ne torzuljon */
}

/* A cikk szövegblokkja */
.news-text h2 {
  font-size: 1.125rem;
  margin-bottom: 8px;
}

.news-text p {
  line-height: 1.5;
}

/* Reszponzív megoldás: 768px alatt a kép és a szöveg egymás alá kerül */
@media (max-width: 768px) {
  .news-content {
    flex-direction: column;
  }

  .news-image {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* Videós szekció stílusai */
.intro-video {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 30px;
  /* középre igazítás + alsó térköz */
  text-align: center;
  /* opcionális: középre igazítja a címet */
}

/* Az iframe reszponzív megtartása (16:9 arány) */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 képarány */
  height: 0;
  overflow: hidden;
  margin-top: 20px;
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  display: block;
}

/* A fő szekció keretezése és elrendezése */
.history-section {
  width: 90%;
  max-width: 1000px;
  margin: 40px auto;
  /* Középre igazítás és felső/alsó margó */
  padding: 20px;
  background-color: #fff;
  border: 1px solid #000;
  /* Fekete keret */
  border-radius: 5px;
  /* Enyhén lekerekített sarkok */
}

/* Címsor stílus */
.history-section h2 {
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: #000;
  text-align: left;
}

/* A tartalmi rész (kép + szöveg) flexboxban */
.history-content {
  display: flex;
  gap: 20px;
  /* Hézag a kép és a szöveg között */
  align-items: flex-start;
  /* Igazítás felül */
  flex-wrap: wrap;
  /* Ha nem fér ki, új sorba tör */
}

/* A szöveges blokk */
.history-text {
  flex: 1 1 50%;
  line-height: 1.6;
  color: #333;
}

/* A képes blokk */
.history-image {
  flex: 1 1 50%;
  display: flex;
  /* Középre igazításhoz hasznos */
  align-items: center;
  justify-content: center;
}

/* A kép maga */
.history-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: grayscale(100%);
  /* Fekete-fehér (grayscale) hatás */
  border-radius: 5px;
}

/* Reszponzív töréspont: mobil nézetben egymás alá kerül a szöveg és a kép */
@media (max-width: 768px) {
  .history-content {
    flex-direction: column;
  }

  .history-text,
  .history-image {
    flex: 1 1 100%;
  }

  .history-image {
    margin-top: 20px;
    /* Kis térköz a szöveg alatt */
  }
}

/* Az űrlapot körülvevő szekció (cím + keret) */
.contact-form-section {
  width: 90%;
  max-width: 900px;
  margin: 40px auto;
  /* Középre igazítás és függőleges margó */
  padding: 20px;
  background-color: #fff;
  border: 1px solid #000;
  /* Vékony, fekete keret */
  border-radius: 5px;
  /* Enyhén lekerekített sarkok */
}

.contact-form-section h2 {
  margin-bottom: 20px;
  font-size: 1.25rem;
  font-weight: bold;
}

/* Maga a form kétoszlopos elrendezésben nagyobb kijelzőn */
.contact-form {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

/* Bal és jobb oszlop beállításai */
.form-left,
.form-right {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

/* Címkék (label) */
.form-left label,
.form-right label {
  margin-bottom: 5px;
  font-weight: bold;
}

/* Szövegdobozok és inputok */
.form-left input[type="email"],
.form-left input[type="text"],
.form-right textarea {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.875rem;
}

/* A checkbox/radio csoportban levő label-ek */
.checkbox-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: normal;
}

/* Hírlevél-feliratkozás p és label */
.form-right p {
  font-weight: bold;
  margin-bottom: 8px;
}

/* Gombok csoportja */
.button-group {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Küldés és törlés gombok */
button[type="submit"],
button[type="reset"] {
  padding: 8px 16px;
  border: 1px solid #000;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 0.875rem;
}

/* Hover effekt a gombokra */
button[type="submit"]:hover,
button[type="reset"]:hover {
  background-color: #e0e0e0;
}

/* Reszponzív beállítások kisebb kijelzőkre */
@media (max-width: 768px) {
  .contact-form {
    flex-direction: column;
  }

  .form-left,
  .form-right {
    flex: 1 1 100%;
  }
}

/* A szekció, amely a táblázatot és a címsort tartalmazza */
.mission-table-section {
  width: 90%;
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
  background-color: #fff;
  border: 2px solid #000;
  /* Külső, fekete keret */
  border-radius: 5px;
}

.mission-table-section h2 {
  margin-bottom: 15px;
  font-size: 1.25rem;
  font-weight: bold;
}

/* A táblázat maga */
.mission-table {
  width: 100%;
  border-collapse: collapse;
  /* Szomszédos cellák közti dupla vonalak eltüntetése */
}

/* Fejlécsor */
.mission-table thead th {
  background-color: #ccc;
  /* Szürke háttér a fejlécnek */
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

/* Adat sorok, cellák */
.mission-table tbody td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

/* Zebra csíkozás: minden páros sorszámú sor (2., 4., 6., stb.) */
.mission-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.table-wrapper {
  overflow-x: auto;                 /* engedi a vízszintes görgetést */
  -webkit-overflow-scrolling: touch; /* sima scroll iOS-en */
  margin: 0 -1rem;                   /* ha kell kitolod a konténert az oldal széle felé */
  padding: 0 1rem;                   /* és visszapótolod a belső margót */
}
/* a táblázat marad 100%-os, de minimum szélessége garantált */
.table-wrapper .mission-table {
  width: 100%;
  min-width: 600px; /* vagy amennyi oszlopodnak kell */
  border-collapse: collapse;
}

/* A szekció környezete */
.europe-section {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  /* Középre igazítás és függőleges margó */
  padding: 20px;
  background-color: #fff;
  border: 1px solid #000;
  /* Fekete keret */
  border-radius: 5px;
  /* Lekerekített sarkok */
}

/* Felső rész: képek és szöveg egymás mellett */
.europe-top {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Bal oldali kép-kollázs */
.europe-images {
  /*flex: 1 1 40%;                 /* Bal oldalon, kb. 40% szélesség */
  /*display: block;                /* Nem kell grid */
  flex: 0 0 300px;
  /* fix 300px széles képblokk */
  max-width: 100%;
  /* ne nyúljon túl */
}


.europe-images img {
  width: 100%;
  /* Kép kitölti a rendelkezésre álló helyet */
  height: auto;
  /* Megőrzi az arányokat */
  object-fit: cover;
  /* Vágja, ha kell */
  border-radius: 4px;
  border: 1px solid #ccc;
}


/* Jobb oldali szöveg */
.europe-text {
  flex: 1 1 60%;
  /* Arány: kb. 60% szélesség */
}

.europe-text h2 {
  margin-bottom: 10px;
  font-size: 1.5rem;
  color: #000;
}

.europe-text p {
  margin-bottom: 10px;
  line-height: 1.6;
  color: #333;
}

/* Alsó rész: „Itt segítünk” országlista */
.europe-bottom {
  text-align: center;
}

.europe-bottom h3 {
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: bold;
}

.europe-bottom p {
  margin-bottom: 20px;
  color: #333;
}

/* Országok listája (kisebb képek sorban) */
.country-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Középre igazítja a kártyákat */
  gap: 30px;
  /* Hézag a kártyák között */
}

.country-item {
  width: 220px;
  position: relative;
}

.country-image-wrapper {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.country-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  display: block;
  transition: filter 0.3s ease;
}

.country-image-wrapper:hover img {
  filter: brightness(1);
}

.country-name {
  position: absolute;
  bottom: 8px;
  left: 10px;
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  font-size: 0.875rem;
}

summary {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}

/*
.footer-column a {
    text-decoration: underline;

a:not(.nav-links a):link {
  color: #0066cc;           /* Kontrasztos, élénk kék 
  text-decoration: underline;
}
a:not(.nav-links a):visited {
  color: #004499;           /* Kicsit sötétebb, de még megfelelő kontraszt 
  text-decoration: underline;
}
a:not(.nav-links a):hover,
a:not(.nav-links a):focus {
  text-decoration: none;
  outline: 2px dashed #ff0;
}
} */
/* 1. alap (mobil): egymás alatti elrendezés */
.history-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.history-text,
.history-image {
  width: 100%;
}

/* 2. tablet (600px fölött): két hasáb, egyenlő arány */
@media (min-width: 600px) {
  .history-content {
    flex-direction: row;
    align-items: flex-start;
  }
  .history-text {
    flex: 1 1 50%;
  }
  .history-image {
    flex: 1 1 50%;
  }
}

/* 3. desktop (1024px fölött): finomhangolt arányok és nagyobb hézag */
@media (min-width: 1024px) {
  .history-content {
    gap: 2.5rem;
  }
  .history-text {
    flex: 0 0 60%;   /* a szöveg kap 60%-ot */
  }
  .history-image {
    flex: 0 0 40%;   /* a kép kap 40%-ot */
  }
  .history-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
  }
}



@media (max-width: 768px) {
  .europe-top {
    flex-direction: column;
  }

  .europe-images,
  .europe-text {
    flex: 1 1 100%;
  }
}