/*****************************\
* ironsamsongym.hu            *
* Reszponziv reteg            *
*                             *
* A default.css valtozatlan   *
* marad; itt csak felulirunk. *
\*****************************/

/* ------------------------------------------------------------------
   1. Fix pixelszelessegek fluidda tetele.
   Ezek desktopon nem valtoznak (a konteneruk szelesebb, mint a fix ertek),
   csak akkor lepnek eletbe, ha a hely kevesebb.
------------------------------------------------------------------- */

div.rightside table,          /* 658px */
div.pager,                    /* 658px */
.mediaPics,                   /* 661px */
div.params,                   /* 520px */
form input,
form textarea {               /* 300px */
    max-width: 100%;
}

div.rightside iframe {
    max-width: 100%;
}

/* ------------------------------------------------------------------
   2. Header: a "Fooldal" link a logo felett.
   Korabban <map>/<area> volt fix pixel-koordinatakkal (11,28,211,185),
   ami skalazott kepen elcsuszik. Ugyanaz a terulet szazalekban,
   a 920x240-es header.jpg alapjan.
------------------------------------------------------------------- */

.header-img {
    display: block;
    position: relative;
    line-height: 0;   /* ne legyen res a kep alatt */
}
a.header-home {
    position: absolute;
    left: 1.19%;      /* 11/920   */
    top: 11.66%;      /* 28/240   */
    width: 21.74%;    /* 200/920  */
    height: 65.41%;   /* 157/240  */
    z-index: 2;
    display: block;
}
a.header-home span {
    position: absolute;
    left: -9999px;    /* kepernyoolvasonak megmarad, vizualisan nem latszik */
}

/* ------------------------------------------------------------------
   3. Mobil menu (hamburger). Desktopon nem letezik.
------------------------------------------------------------------- */

.mobilenav {
    display: none;
}

/* ------------------------------------------------------------------
   4. Tablet: 768-991px. Az oszlopok mar egymas mellett vannak
   (col-md-*), csak a kisebb helyhez igazitunk.
------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* A ket utolso fomenupont 205px-es almenuje kilogna a kepernyo jobb
       szelen (vizszintes gorgetosav). A default.css-ben van erre szabaly
       (ul.submenu.last), de a markup soha nem teszi ki a "last" osztalyt,
       ezert itt a pozicio jobbra igazitva. 920px felett nincs ra szukseg. */
    nav ul.topnav > li:nth-last-child(1) > ul.submenu,
    nav ul.topnav > li:nth-last-child(2) > ul.submenu {
        left: auto;
        right: 1px;
        border-radius: 2px 0 2px 2px;
    }

    div.rightside {
        padding: 15px;
    }
    div.leftside div.menu a {
        font-size: 11px;
        padding-right: 8px;
    }
    footer {
        padding: 0 10px;
    }
    footer span {
        padding-right: 8px;
    }
}

/* ------------------------------------------------------------------
   5. Mobil: 767px alatt. Itt valt a bootstrap grid is (col-md-* -> 100%).
------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    /* -- a nagy hatterkep felesleges mobilon (316 KB) -- */
    body {
        background-image: none;
    }

    /* -- header logosav: az atlathato overlay helyett a kep alatt, racsban --
       (42px magas savban 8 logo mobilon olvashatatlan lenne)                */
    header div {
        position: static;
        height: auto;
        flex-wrap: wrap;
        background-color: #000;
        padding: 5px 0;
    }
    header div span {
        flex: 0 0 25%;
        height: 38px;
    }

    /* ==== MOBIL MENU ====================================================
       A desktop menuk (nav, .leftside) eltunnek; helyettuk egy hamburger
       gomb a jobb felso sarokban, es egy teljes kepernyos fiok a header
       alatt. A fiokban a menupontok sajat, EGYSEGES kinezetet kapnak
       (nem a desktop gradiens gombokat), mert 20+ link egymas alatt
       gombkent nezve zajos lenne.
    ==================================================================== */

    nav,
    div.leftside {
        display: none;
    }

    /* A hamburger nem takarja a fejlec kepet: a kep annyival keskenyebb,
       hogy a gomb elferjen MELLETTE a jobb szelen. */
    section {
        position: relative;
    }
    .header-img {    /* a kep keskenyebb: 54px marad a gombnak a jobb szelen */
        width: calc(100% - 54px);
    }
    .mobilenav {
        display: block;
    }

    .mobilenav-toggle {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 300;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 1px solid #3a3a3a;
        border-radius: 3px;
        cursor: pointer;
        background: rgba(0, 0, 0, .65);
    }
    .mobilenav-toggle .bars {
        display: block;
        width: 22px;
    }
    .mobilenav-toggle .bars span {
        display: block;
        height: 2px;
        margin: 4px 0;
        background: #ffd100;
        transition: transform .2s, opacity .2s;
    }
    /* nyitott allapotban X */
    .mobilenav.open .mobilenav-toggle .bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .mobilenav.open .mobilenav-toggle .bars span:nth-child(2) {
        opacity: 0;
    }
    .mobilenav.open .mobilenav-toggle .bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* A fiok: a header alatt kezdodik (a 'top' erteket a functions.js
       allitja be a header tenyleges magassagara), es a kepernyo aljaig tart.
       Sajat maga gorgetheto; a body gorgetese kozben zarolva van
       (lasd body.menu-open). */
    .mobilenav-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 250;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #000;
    }
    .mobilenav.open .mobilenav-panel {
        display: block;
    }
    /* Nyitott menu alatt a hatter nem gorgetheto.
       iOS Safariban az overflow:hidden onmagaban nem eleg -> position:fixed.
       (A menu nyitasakor a lap tetejere ugrunk, igy nincs elveszett scroll-pozicio.)

       Az !important azert kell, mert a Clearbox betoltodeskor inline
       "position: static"-ot rak a <body>-ra, ami kulonben legyozne ezt a szabalyt. */
    body.menu-open {
        overflow: hidden;
        position: fixed !important;
        width: 100%;
    }

    /* -- egyseges menupont-stilus a fiokon belul -- */
    .mobilenav-panel ul,
    .mobilenav-panel li,
    .mobilenav-panel div.menu {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        position: static;
        list-style: none;
        background: none;
    }
    .mobilenav-panel a {
        display: flex;
        align-items: center;
        width: auto;
        min-height: 50px;
        margin: 0;
        padding: 12px 16px;
        background: #111;
        background-image: none;
        border: 0;
        border-bottom: 1px solid #262626;
        border-radius: 0;
        box-shadow: none;
        color: #ffd100;
        font: bold 13px/18px Arial;
        text-align: left;
        text-transform: uppercase;
        text-decoration: none;
    }
    .mobilenav-panel a:hover,
    .mobilenav-panel a:active {
        background: #1f1f1f;
        color: #fff;
    }
    .mobilenav-panel a br {
        display: none;   /* "Krav Maga<br>Global" egy sorban */
    }

    /* almenuvel rendelkezo pont: +/- jelzes */
    .mobilenav-panel a.main.sub:after {
        content: '+';
        margin-left: auto;
        padding-left: 10px;
        color: #fff;
        font-size: 18px;
        line-height: 18px;
    }
    .mobilenav-panel a.main.sub.hov:after {
        content: '\2013';   /* en dash */
    }

    /* almenu: behuzva, halvanyabb hatterrel */
    .mobilenav-panel ul.submenu {
        display: none;
    }
    .mobilenav-panel ul.submenu a {
        padding-left: 32px;
        background: #000;
        color: #fff;
        font-weight: normal;
        text-transform: none;
    }
    .mobilenav-panel ul.submenu a:hover {
        color: #ffd100;
    }

    /* a ket menu kozott valaszto */
    .mobilenav-panel div.menu {
        border-top: 3px solid #ffd100;
    }

    /* -- tartalom elore, kapcsolat blokk moge --
       (kulonben ~450px sidebart kell atgorgetni minden aloldalon)  */
    div.content div.row {
        flex-direction: column;
    }
    div.content div.row > .col-md-3 {
        order: 2;
    }
    div.content div.row > .col-md-9 {
        order: 1;
    }
    div.left_bottom {
        margin: 3px;
    }

    /* -- tipografia: olvashato meret erintokepernyon -- */
    /* A default.css szerint width:100% + float:left, es a margo ehhez MEG
       hozzaadodik -> 100% + 3px + 3px = 3px vizszintes tulcsordulas.
       (Nem latszik sok, de a mobil bongeszo vizszintes gorgetosavot ad tole.)
       width:auto + float:none -> a margok belefernek a 100%-ba. */
    div.rightside {
        min-height: 0;
        width: auto;
        float: none;
        padding: 15px;
        margin: 0 3px;
        border-radius: 2px;
    }

    /* ugyanez a minta: width:100% + margin-right:5px */
    div.box {
        width: auto;
        float: none;
        margin-right: 0;
    }
    div.rightside p,
    div.rightside a,
    div.rightside table td,
    div.rightside table th,
    div.rightside ul li,
    div.rightside ol li {
        font-size: 15px;
        line-height: 22px !important;
    }
    div.rightside h1 {
        font-size: 18px;
        line-height: 26px !important;
    }

    /* -- CMS-bol jovo tablazatok: a szerkesztobol fix szelessegek (width=658,
          td width=154 stb.) jonnek, amiket nem tudunk kontrollalni.
          Megoldas: a tabla sajat magan belul gorget, nem az oldalt tolja szet.
          A cellak min-width-je dont: keves oszlop -> beferunk gorgetes nelkul,
          sok oszlop -> a tabla vizszintesen gorgetheto lesz.               -- */
    div.rightside table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    div.rightside table td,
    div.rightside table th {
        min-width: 90px;
    }

    /* A fullcalendar sajat, belso tablazatokbol epul (a rendes tabla-layoutra
       tamaszkodva szamol szelesseget) -> a fenti szabalyok nem vonatkozhatnak ra. */
    #calendar table {
        display: table;
        width: 100%;
        overflow: visible;
    }
    #calendar td,
    #calendar th {
        min-width: 0;
    }

    /* A heti nezet 7 napja 345px-en olvashatatlan lenne (39-72px-es oszlopok),
       ezert a naptar megtartja a hasznalhato szelesseget, es a kontenerben
       vizszintesen gorgetheto. */
    .calendar-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #calendar {
        min-width: 640px;
    }

    /* -- hirek/programok lista: a szoveg a bukk ala kerul -- */
    div.params {
        float: none;
        width: auto;
    }
    span.date {
        float: none;
        display: block;
        margin-bottom: 5px;
    }

    /* -- galeria: a bukkeprek toltsek ki a helyet -- */
    .mediaPics {
        float: none;
        width: 100%;
    }

    /* -- urlap: cimke a mezo folott, teljes szelessegu mezok -- */
    form label {
        display: block;   /* inline elemre a width nem hat */
        float: none;
        width: 100%;
        text-align: left;
        padding-right: 0;
    }
    form input,
    form textarea {
        float: none;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;   /* 16px alatt az iOS ranagyit fokuszkor */
        height: auto;
        min-height: 40px;
        padding: 8px;
    }
    form textarea {
        min-height: 140px;
    }
    form button {
        float: none;
        width: 100%;
        min-height: 46px;
        margin-left: 0;
        font-size: 15px;
    }

    /* -- lablec: nem fer ki egy 53px-es sorban -- */
    footer {
        float: none;
        height: auto;
        line-height: 20px !important;
        padding: 15px;
        text-align: center;
    }
    footer span {
        display: block;
        padding-right: 0;
        margin-bottom: 5px;
    }
    a.d2c {
        float: none;
        display: block;
        margin: 10px 0 0 0;
    }

    /* -- lapozo: nagyobb erintheto felulet -- */
    div.pager a,
    div.pager a.active {
        width: 28px;
        height: 28px;
        line-height: 28px !important;
    }
}