/*
Theme Name: MDSZ DIÁKOLIMMPIA
Template: Divi
Author: MDSZ
Description: DIVI5 alapú template
Version: 1.0
Text Domain: diakolimpia.hu
*/

#igazolasForm h1 {
  margin-top: 20px !important;
}

.btn-primary {
  background-color: var(--gcid-primary-color) !important;

}
.diaksport-wrapper table thead th {
    background-color: #003399 !important;
    color: #fff !important;
}


.sport-item .sport-name,
.doc-name h5{
  font-family: 'Funnel Sans' !important;
}


.doc-name {
  color: #ffffff;
  background-color: #003aa6;
}
.doc-name,
.modal h5 {
  color: #ffffff;
    font-family: 'Funnel Sans' !important;
    font-size: 12px;
    line-height: 1.2;
}

.modal h4 {
  color: var(--gcid-primary-color) !important;
}

.eventList {
  background-color: #d6e0f1;
}

.eventList .list-group-item {
  border-color: #cccccc;
  background-color: transparent;
}

#szamok-carousel .et_pb_group_carousel_container {

    mask-image: linear-gradient(to right,
        transparent 0%,
        black 40%,
        black 60%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 40%,
        black 60%,
        transparent 100%
    );

}

#szamok-carousel .et_pb_group_carousel_arrow_prev {
  left: 1%;

}
#szamok-carousel .et_pb_group_carousel_arrow_next {
  right: 1%;

}


#szamok-carousel .et_pb_column {
  transform: skew(-12deg);
  border-left: 2px solid #ffcc00;
  padding-left: 20px;
}

#szamok-carousel .et_pb_heading {
  transform: skew(12deg);

}

#szamok-carousel .et_pb_heading h3 {
  padding-left: 15px;
  line-height: 0.7 !important;
}
#szamok-carousel .et_pb_heading h1 {
  line-height: 0.85 !important;
}



.et-pb-arrow-prev:before {
    content: "<" !important;
    font-family: 'Funnel Sans' !important;
    font-size: 58px;
    font-weight: 400;
}

.et-pb-arrow-next:before {
    content: ">" !important;
    font-family: 'Funnel Sans' !important;
    font-size: 58px;
    font-weight: 400;
}

.nav-tabs .nav-link.active {
  color: var(--gcid-primary-color) !important;
}

.nav-tabs .nav-link {
  color: #000000 !important;
  background-color: #f2f2f2;
}

/* ÚJ: a #doSportokTabs (a sportok modal fül-navigációja, 5 db lapfül:
   Versenykiírások/Események, Programfüzetek, Eredménylisták, Egyéb
   dokumentumok, Képgaléria) keskeny/álló mobil nézetben nem fért el egy
   sorban, ezért a Bootstrap alapból több sorba törte a füleket, ami
   zsúfolt volt és elvesztette a tab jelleget. Itt egy vízszintesen
   görgethető sávvá alakítjuk: a fülek nem törnek új sorba, hanem
   oldalra húzva/görgetve érhetők el. A desktop nézetet nem érinti. */
@media (max-width: 767px) {
  #doSportokTabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #doSportokTabs .nav-item {
    flex: 0 0 auto;
  }

  #doSportokTabs .nav-link {
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  .et-pb-arrow-prev:before,
  .et-pb-arrow-next:before {

      font-size: 48px;

  }
}



.flickr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.flickr-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}


#subNav .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

#subNav .et_pb_button {
  display: flex !important;
  align-items: center !important;
}

#subNav .et_pb_button h3 {
  padding-bottom: 0px !important;
}

#subNav .row .et_pb_column,
#subNav .row .et_pb_module {

  margin-bottom: 0px !important;
}

#EventSearchForm .et_pb_field_module_checkbox {
  width: 100%;
}
#EventSearchForm .et_pb_contact_field_options_list {
  display: flex;
  justify-content: space-between;
}

#countDownContainer {
    position: relative;
    overflow: hidden;
}

#countDownContainer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,51,153,0.75);
    opacity: 0.75;
    transition: opacity 0.6s ease;
    z-index: 1;
}

/* lapozáskor teljes takarás */
#countDownContainer.bg-cover::before {
    opacity: 1;
}

@media (max-width: 980px) {
  #countDownContainer {
      background-size: 100% auto !important;
  }
}


#doSportokModal {
    z-index: 999999 !important;
    position: fixed !important;
}


.modal-backdrop {
    z-index: 999998 !important;
}


/* Divi saját overlay rétegeit lenyomjuk */
.et_pb_section_video_bg,
.et_pb_section_parallax_bg,
.et_pb_slider .et_pb_slide,
.et_pb_fullwidth_header,
.et_pb_section {
    z-index: 1 !important;
}

#pageContent .et_pb_row,
#pageContent .et_pb_section   {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
}

#pageHeadImage .et_pb_image_wrap,
#pageHeadImage .et_pb_image_wrap img {
  width: 100% !important;
  height: 100% !important;
}


/* Divi body wrapper ne legyen a modal fölött */
#et-main-area,
#page-container {
    z-index: 2 !important;
    position: relative;
}


/* Menü elemek alap stílus */
#menu-mainmenu.et-menu > li > a {
    position: relative;
    padding: 0 5px; /* távolság a ferde vonaltól */
    display: inline-block;
}

/* Ferde világoskék elválasztó vonal */
#menu-mainmenu.et-menu > li:not(:last-child) > a::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 50%;
    width: 2px;
    height: 22px;
    background: #0066cc; /* világoskék */
    transform: translateY(-50%) rotate(20deg);
    opacity: 1;
}

/* Mobil menüben NE jelenjen meg */
@media (max-width: 980px) {
    #menu-mainmenu.et-menu > li > a::after {
        display: none;
    }
}


/* ÚJ: a mainSlider és a postCarousel konténerek a Divi builderben üresen
   maradt oszlopok (a tartalmukat JS AJAX tölti be, nem Divi modul), ezért
   a Divi rájuk teszi az "et_pb_column_empty" osztályt. A Divi saját CSS-e
   980px alatt (tablet+mobil) minden üres oszlopot elrejt:
     @media (max-width: 980px) { .et_pb_column.et_pb_column_empty { display: none; } }
   Ez okozta, hogy a slider és a hírkarusszel mobilon/tableten egyáltalán
   nem jelent meg, holott a tartalom valójában betöltődött. Itt nagyobb
   specificitással (ID-alapú szelektor) visszaadjuk a megjelenítést, de
   csak erre a két konkrét konténerre – a Divi globális "rejtsd az üres
   oszlopokat" viselkedését máshol nem érinti. */
#mainSlider.et_pb_column_empty,
[id^="postCarousel"].et_pb_column_empty,
[id^="eventsResults"].et_pb_column_empty {
    display: block !important;
}

/* ÚJ: a mobil hamburger-menü lenyíló listája (ul#mobile_menu1) a Divi
   Theme Builder fejlécében van, ami <header class="et-l et-l--header">
   wrapperbe van csomagolva. Ez a header "position: static", a CSS
   z-index viszont statikusan pozicionált elemeken nem hat – emiatt a
   menün belüli z-index:9999 sosem tudta megelőzni a testvér elemet,
   a #et-main-area-t (position: relative; z-index: 2), ami az oldal fő
   tartalmát (pl. a mainSlider-t) tartalmazza. Ezért a lenyíló menü
   ténylegesen a tartalom MÖGÖTT festődött ki, nem alágördült, csak
   úgy tűnt. A headert itt emeljük valódi, magasabb stacking contextbe,
   hogy a benne lévő minden (a mobil menü és egy esetleges jövőbeli
   desktop lenyíló almenü is) a tartalom fölött jelenjen meg. */
header.et-l.et-l--header {
    position: relative;
    z-index: 9999;
}

.et_mobile_menu .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a {
  color: #000000 !important;
}

#mainSlider .owl-stage {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;


}

#mainSlider .owl-nav {
  position: absolute;
  right: 5vw;
  display: flex;
  flex-direction: column;
  gap: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.postCarousel .owl-nav {
  position: absolute;
  right: 0px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  top: -70px;



}

.postCarousel .owl-nav {

  right: 0px;

}

.postCarousel .owl-dots {

  display: flex;
  position: absolute;
  flex-direction: row;
  margin-top: 30px;

}

.postCarousel .owl-dot {

  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #80c7ff !important;
  margin-right: 10px;

}

.postCarousel .owl-dot.active {

  background-color: #ffffff !important;

}

#postCarousel-nemzetkozi .owl-dot.active {

  background-color: #003399 !important;

}

#postCarousel-nemzetkozi .owl-nav {

  top: -55px !important;

}
#postCarousel-nemzetkozi .owl-nav img {
  background: #003399;
  border-radius: 10px;
  border: 2px solid #003399;
}

/* #mainSlider .owl-nav button {
    padding: 20px !important;
    font-size: 40px !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    height: 60px !important;
    width: 60px !important;
    background-color: #ffffff !important;
    transform: translateY(-3px)  !important;
    border-radius: 10px !important;
}


#mainSlider .owl-nav button span {
    position: relative;
    top: -4px;
    color: var(--gcid-secondary-color) !important;
} */



.mainslider-kep {
  height: 100% !important; /* tetszőleges */
  overflow: hidden;
  margin-left: -10vw;

}

.mainslider-kep img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  clip-path: polygon(
    8% 0,   /* bal felső */
    100% 0, /* jobb felső */
    92% 100%, /* jobb alsó */
    0 100%    /* bal alsó */
  );
}

.mainslider-tartalom {
  background: rgba(255,255,255,0.90);
  padding: 20px;
  margin-bottom: 75px;
  margin-right: -10vw;
  z-index: 100;


}

/* ÚJ: mainSlider mobil (álló) nézet – a desktop verzió a diagonális
   clip-path-es, egymásra csúsztatott (negatív margós) elrendezésre épül,
   ami csak széles, alacsony dobozban működik. Mobilon ehelyett a kép
   kerül felülre (teljes szélességben, vágás nélkül), alá pedig a
   szöveg/leírás – normál, egymás alatti (relatív) elrendezésben. A
   desktop szabályokat (fentebb) ez a blokk nem érinti, csak 767px alatt
   lép érvénybe és felülírja azokat. */
@media (max-width: 767px) {
  /* A Bootstrap .row alapból negatív bal/jobb margót tesz a gutter miatt
     (itt kb. -12px), ami desktopon belesimul a szándékos -10vw
     átfedésbe, de mobilon ettől lógott ki balra a szövegdoboz, ÉS emiatt
     volt kb. 12-24px-nyi szélesebb a .row, mint az owl-item saját
     helye – ez okozta, hogy a következő dia képe belelátszott a jobb
     szélen. Itt nullázzuk ezt a margót, és az owl-item-et is levágjuk
     biztonságból, hogy semmiképp ne csúszhasson át semmi a szomszédos
     diára. */
  #mainSlider .row {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #mainSlider .owl-item {
    overflow: hidden;
  }

  .mainslider-kep {
    order: -1; /* a kép kerüljön vizuálisan a szöveg elé, bár a HTML-ben az után jön */
    width: 100%;
    height: auto !important;
    overflow: visible;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative; /* hogy a rajta lévő nyilak ehhez tudjanak igazodni, ha később kellene */
  }

  .mainslider-kep img {
    width: 100%;
    height: auto !important;
    object-fit: unset;
    clip-path: none; /* mobilon nem kell a diagonális vágás */
  }

  .mainslider-tartalom {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }

  /* Az előző/következő nyilak a képen maradnak, jobbra igazítva,
     egymás alatt (mint desktopon), csak kisebb méretben – ugyanakkora
     méret, mint a postCarousel nyilai (40px). */
  #mainSlider .owl-nav {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    transform: none;
    flex-direction: column;
    gap: 10px;
  }

  #mainSlider .owl-nav img {
    width: 40px;
  }
}


/* --- Kártya konténer: minden kártya azonos magasságú --- */


/* Az Owl belső stage-e legyen flex-sor */
.postCarousel .owl-stage-outer {
    display: flex;
    height: 100%;
}

.postCarousel .owl-stage {
    display: flex;
    height: 100%;
}

/* Az egyes itemek nyúljanak a sor magasságára */
.postCarousel .owl-item {
    display: flex;
}

/* A kártya maga töltse ki az owl-itemet */
.postCarousel .postcarousel-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.postcarousel-item {
    background: #ffffff;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- Kép konténer fix magassággal --- */
.postcarousel-kep {
    width: 100%;
    height: 220px; /* állítható */
    overflow: hidden;
}

/* --- A kép cover módon tölti ki a területet --- */
.postcarousel-kep img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Tartalom rész fehér háttérrel + padding --- */
.postcarousel-tartalom {
    background: #ffffff;
    padding: 20px;
    flex-grow: 1;              /* kitölti a maradék helyet */
    display: flex;
    flex-direction: column;    /* cím → excerpt → gomb */

}

/* --- Cím --- */
.postcarousel-cim {
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 10px 0;
    text-align: center;
}

/* --- Excerpt: nőhet, de nem tolja le a gombot --- */
.postcarousel-excerpt {
    flex-grow: 1;              /* ez tolja le a gombot az aljára */
    margin-bottom: 15px;
}

/* --- Gomb: mindig a kártya alján lesz --- */
.postcarousel-gomb {
    display: inline-block;
    padding: 10px 18px;
    background: var(--gcid-primary-color) !important;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    align-self: center !important;
    margin-top: auto;          /* ez fixálja a bottomra */
}

.pagination a,
a.more-link {
    display: inline-block !important;
    padding: 10px 18px;
    background: var(--gcid-primary-color) !important;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-top: auto;          /* ez fixálja a bottomra */
    align-self: flex-start;
    width: auto;
}

.wpcf7-field-group-add,
.wpcf7-field-group-remove {
  margin: 20px 0px 20px 0px !important;
  padding: 10px 18px;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  margin-top: auto;          /* ez fixálja a bottomra */
  align-self: flex-start;
  width: auto;
}


/* egyéb */


@media screen and (min-width: 757px) {

  .para-btn {
    transform: skew(-12deg);
  }

  .para-btn-inv {
    transform: skew(12deg);
  }

  .para-btn h1,
  .para-btn h2,
  .para-btn h3,
  .para-btn h4 {
    transform: skew(12deg);
    display: inline-block;
  }
}

#map-tagszervezetek {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: all;
	cursor: pointer;
	margin-bottom: 25px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#map-tagszervezetek > path {
	fill: #024da0;
	transition: all 200ms ease;
}

#map-tagszervezetek > path:hover {
	fill: #076cdd;
}

#map-tagszervezetek > path.selected {
	fill: #e7903d;
}

#map-regionalis {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: all;
	cursor: pointer;
	margin-bottom: 25px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#map-regionalis > path {
	fill: #024da0;
	transition: all 200ms ease;
}

#map-regionalis path:hover {
	fill: #076cdd;
}

#map-regionalis > path.selected {
	fill: #e7903d;
}

#tagszervezet-info .map-info:not(.selected) {
	display: none;
}

#regionalis-info .map-info:not(.selected) {
	display: none;
}

#tagszervezet-info, #regionalis-info {
	width: 100%;
	display: flex;
	flex-flow: row;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: nowrap;
}

#tagszervezet-info .map-info, #regionalis-info .map-info {
	width: 100%;
	display: flex;
	flex-flow: row;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: nowrap;
	max-width: 800px;
}

.map-title {
    width: 100%;
    height: 40px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #024da1;
    font-size: 18px;
}