/* ------------------------------------------------------------------
   tscieker-2014 :: mobile.css
   Additive mobile layer, loaded after style.css.

   SAFETY PROPERTY: every rule in this file lives inside a
   max-width media query. Viewports above 900px never match, so the
   desktop rendering is byte-identical to before this file existed.
   Rollback = delete this file + remove its enqueue in functions.php.
   ------------------------------------------------------------------ */

/* The one rule outside a media query. It targets .tsc-burger, a class that
   exists nowhere in the original markup — the element is injected by
   mobile.js — so it cannot alter the rendering of any pre-existing element
   at any width. Without it the injected button would be visible on desktop. */
.tsc-burger { display: none; }

@media (max-width: 900px) {

  /* --- kill the fixed 960px grid ---------------------------------- */
  .container,
  .container.padded,
  .header ul,
  .header ul.padded {
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 1em;
    padding-right: 1em;
  }

  .container .span6, .container .span4, .container .span3,
  .container.padded .span6, .container.padded .span4, .container.padded .span3,
  .container .padded.span6, .container .padded.span4, .container .padded.span3,
  .container .padded .span6, .container .padded .span4, .container .padded .span3,
  .header ul .span6, .header ul .span4, .header ul .span3 {
    width: 100% !important;
    float: none !important;
  }

  img { max-width: 100%; height: auto; }

  /* --- header ----------------------------------------------------- */
  /* contacts: three stacked rows ate ~190px of a 844px screen before the
     visitor saw anything. One wrapping row instead. */
  .header .contacts-wrapper {
    height: auto;
    line-height: 1.6;
    padding: .4em 0;
    font-size: 11px;
  }
  .header .contacts-wrapper .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25em .9em;
  }
  .header .contacts-wrapper .email,
  .header .contacts-wrapper .phone { display: inline-block; margin: 0; }
  .header .contacts-wrapper .facebook { float: none; margin: 0; top: 0; }

  .header .logo-wrapper { height: auto; padding-bottom: 0; }
  .header .logo-wrapper .logo {
    width: auto; float: left; margin: .75em 0; max-width: 70%;
  }
  .header .logo-wrapper .logo img { max-width: 210px; }
  .header .logo-wrapper nav { float: none; width: auto; margin: 0; clear: both; }

  /* --- hamburger --------------------------------------------------- */
  /* Injected by mobile.js. Hidden unless JS ran, so a no-JS visitor
     still gets the plain stacked list rather than no navigation. */
  .tsc-burger {
    display: block;
    float: right;
    margin: 1.1em 0 0;
    width: 44px; height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid #333;
    cursor: pointer;
  }
  .tsc-burger span,
  .tsc-burger span::before,
  .tsc-burger span::after {
    display: block; position: relative;
    width: 22px; height: 2px;
    margin: 0 auto;
    background: #faff02;
    content: '';
  }
  .tsc-burger span::before { position: absolute; top: -7px; }
  .tsc-burger span::after  { position: absolute; top: 7px; }
  .tsc-burger[aria-expanded="true"] { border-color: #faff02; }

  /* main nav: stacked, full-width tap targets */
  .header .logo-wrapper nav ul { float: none; width: 100%; }
  .header .logo-wrapper nav ul li {
    float: none; display: block; margin: 0;
    border-top: 1px solid #191919;
  }
  .header .logo-wrapper nav ul li a { display: block; padding: .9em 0; }

  /* collapsed by default, but only once JS has confirmed it can open it */
  .tsc-js .header .logo-wrapper nav { display: none; }
  .tsc-js .header .logo-wrapper nav.tsc-open { display: block; padding-bottom: .5em; }

  /* --- course filter ------------------------------------------------ */
  /* Cities: a compact scrollable chip row.
     Age categories: an accordion, collapsed until tapped.
     (Both were hover-driven, so unusable on touch.) */
  .header .filter-wrapper { line-height: 1.5; }
  .header .filter-wrapper .city-level,
  .header .filter-wrapper .age-level { height: auto; }

  .header .filter-wrapper .city-level ul {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-top: .4em; padding-bottom: .4em;
  }
  .header .filter-wrapper .city-level ul li {
    float: none; display: inline-block; margin: 0 .4em 0 0; flex: 0 0 auto;
  }
  .header .filter-wrapper .city-level ul li a {
    display: block; padding: .5em .9em;
    border: 1px solid #333; font-size: 13px;
  }
  .header .filter-wrapper .city-level ul li a.selected {
    border-color: #faff02;
  }

  .header .filter-wrapper .age-level ul li {
    float: none; display: block; margin: 0;
    border-top: 1px solid #191919;
  }
  .header .filter-wrapper .age-level ul li > a {
    display: block; padding: .9em 0; padding-right: 2em;
    position: relative;
  }
  .header .filter-wrapper .age-level ul li .arrow { display: none; }

  /* chevron, rotated when the section is open */
  .tsc-js .header .filter-wrapper .age-level ul li > a::after {
    content: ''; position: absolute; right: .5em; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid #faff02;
    border-bottom: 2px solid #faff02;
    transform: rotate(45deg);
  }
  .tsc-js .header .filter-wrapper .age-level ul li.tsc-expanded > a::after {
    transform: rotate(-135deg); margin-top: -2px;
  }

  .header .filter-wrapper .age-level ul li .submenu {
    display: block;
    position: static;
    width: auto;
    border-top: 0;
    background: #0a0a0a;
  }
  .header .filter-wrapper .age-level ul li .submenu li a {
    padding: .75em 0 .75em 1.5em;
    font-size: 13px;
  }
  /* collapsed by default once JS is available to expand it */
  .tsc-js .header .filter-wrapper .age-level ul li .submenu { display: none; }
  .tsc-js .header .filter-wrapper .age-level ul li.tsc-expanded .submenu { display: block; }

  /* --- hero ------------------------------------------------------- */
  .slider-wrapper { padding: 1em 0; }
  .slider-wrapper #slider { width: 100%; height: auto; }
  .slider-wrapper #slider img { display: block; width: 100%; height: auto; }

  /* --- content ---------------------------------------------------- */
  article.post { width: 100%; float: none; }
  .kurzy-image { float: none; margin: 1em 0; text-align: center; }
  .kurzy-image img { width: 100%; max-width: 320px; }

  /* schedule table scrolls inside its own box instead of blowing out
     the page width (which is what put `prihlásiť` out of reach) */
  .kurzy-table-scroll {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kurzy-table { font-size: 13px; }
  .kurzy-table tr td, .kurzy-table thead th { padding: .75em .5em; }
  .kurzy-table a.reg {
    display: inline-block;
    padding: .5em .9em;
    border: 1px solid #faff02;
    color: #faff02;
    white-space: nowrap;
  }

  .recommended-list .rc-item { float: none; margin: 0 0 1em; }
  .recommended-list img { width: 100%; }

  .members, .partners { padding: 2em 0; }
  .members a, .partners a { margin: .75em 1em; }

  .footer { text-align: center; margin-top: 2em; }

  /* --- the order modal -------------------------------------------- */
  /* Was hard-coded 600x360 and position:fixed -> clipped on both sides
     with no way to scroll to the clipped parts. */
  #simplemodal-container {
    width: 94vw !important;
    max-width: 600px;
    height: auto !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    box-sizing: border-box;
    top: 6vh !important;
    left: 3vw !important;
    padding: 1em !important;
  }
  #simplemodal-container .simplemodal-data { padding: 0; }
  /* close button was hung outside the box; overflow now clips it */
  #simplemodal-container a.modalCloseImg { top: 4px !important; right: 4px !important; }

  /* form: table layout -> stacked, full-width fields */
  .reg-form table, .reg-form tbody, .reg-form tr, .reg-form td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .reg-form table tr { margin: 0 0 .75em; }
  .reg-form table tr td { padding: 0; }
  .reg-form table tr td:first-child { color: #eee; margin: 0 0 .25em; }

  .reg-form input,
  .reg-form textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;          /* below 16px iOS zooms on focus */
    padding: .6em;
  }
  .reg-form textarea { height: 80px; }
  .reg-form input[type=checkbox] {
    width: 22px !important; height: 22px;
    display: inline-block; vertical-align: middle;
    margin: 0 .5em 0 0;
  }
  .reg-form input[type=checkbox] + label {
    display: inline-block;
    width: calc(100% - 2.2em);
    vertical-align: middle;
    font-size: 14px; line-height: 1.4;
  }
  .reg-form button {
    width: 100%; padding: .9em;
    font-size: 16px; font-weight: 700;
  }
  .reg-form h2 { font-size: 18px; }

  /* validation feedback: a red border alone is invisible on a phone */
  .reg-form .reg-error-summary {
    display: none;
    background: #4a0000;
    border: 1px solid red;
    color: #fff;
    padding: .6em;
    margin: 0 0 .75em;
    font-size: 14px;
  }
  .reg-form .reg-error-summary.visible { display: block; }
}

@media (max-width: 600px) {
  .header .logo-wrapper .logo img { max-width: 200px; }
  #simplemodal-container {
    width: 96vw !important;
    left: 2vw !important;
    top: 3vh !important;
    max-height: 94vh !important;
  }
}