/* free-internet-tv.cz -- shared stylesheet
 *
 * Replaces the three mod_pagespeed-combined files this mirror shipped with
 * (two per-template variants plus an unminified twin).
 *
 * The site has two templates that were never unified:
 *
 *   box template        .main-box > .top-box + .center-box > .reset-box > .right-box
 *                       > .content-box > (.left, .right, .center > .main-content x2)
 *   container template  #bbody > #container > (#header, .bnnr, #sidebar,
 *                       #adsense, .main-col > .main-content, #footer)
 *
 * Both were percentage-width float layouts with no max-width and no media
 * queries, so on a wide monitor they stretched edge to edge and left most of
 * every text line empty.
 *
 * The fix keeps the page exactly as it was arranged -- a narrow prose column,
 * the content, a narrow links column -- and simply stops it growing:
 *
 *     [ ad rail ]   [ 200px | content | 180px  shell, max 1180px ]   [ ad rail ]
 *
 * The rails are reserved space for ad units. They are fixed to the viewport
 * and outside the shell, so they take no part in the document flow and appear
 * only when the window is wide enough to hold them without squeezing the page
 * (>= 1860px). Dropping an <ins class="adsbygoogle"> into .rail-l / .rail-r
 * needs no layout change.
 *
 * The old markup is left in place. The four nested wrappers of the 2006
 * "holy grail" hack (left:200px / margin-left:-200px / margin-left:-100%)
 * are neutralised below rather than deleted from 17 mirrored pages.
 */

:root {
  --shell: 1180px;
  --col-left: 200px;
  --col-right: 180px;
  --rail: 300px;
  --gap: 1.5rem;

  --teal: #2b8585;          /* was #339999 -- darkened to pass 4.5:1 on white */
  --teal-rule: #74e6e6;     /* the site's own dotted-rule colour, kept */
  --teal-band: #c6dcdc;     /* the exact colour body-bg.gif painted */
  --teal-deep: #a3cfd2;     /* the darkest tone in the old header sweep */
  --ink: #1b2626;
  --ink-soft: #4c5c5c;
}

/* ---------------------------------------------------------------- reset */

dl, li, dt, dd, h1, h2, h3, h5, h6, pre, form, body, html, p,
blockquote, fieldset, input {
  margin: 0;
  padding: 0;
}

a img, :link img, :visited img { border: none; }
address { font-style: normal; }

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------ base type */

body {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;         /* was 90% of the browser default, then 90% again per element */
  line-height: 1.55;
  /* The whole decorative header treatment, in one full-width band.
   *
   * Was two images: body-bg.gif (a 7x129 strip of flat #c6dcdc tiled across
   * the top) and header.jpg (a 713x123 sweep centred on it, which left an
   * empty wing either side). Painting both here instead of on .top-box keeps
   * the band continuous -- a gradient on .top-box would stop at the shell
   * edge and show as a lighter rectangle seamed against the band. */
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 128px;
  background-image:
    radial-gradient(55% 120% at 68% -25%,
      rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(45% 130% at 22% 125%,
      var(--teal-deep) 0%, rgba(163, 207, 210, 0) 62%),
    linear-gradient(var(--teal-band) 0 100%);
  text-align: left;        /* the container template centred the whole document */
  margin: 0;
  padding: 0;
}

h1 {
  color: #392c2c;
  font-size: 1.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.15;
}

h2 {
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: #000;
  text-align: left;
  padding: 3px 0;
  margin: 1.3em 0 0.5em;
  border-top: 2px dotted var(--teal-rule);
  border-bottom: 2px dotted var(--teal-rule);
}

h1, h2, h3 { text-wrap: balance; }

p, dt {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 0.8em;
  font-weight: normal;
}

p.description { font-size: 1rem; margin: 0.3em 0 0; }
.description { margin-bottom: 4px; }

b { line-height: inherit; font-size: inherit; margin: 0; }

a { line-height: inherit; }
a:link, a:visited { color: var(--teal); border-bottom-color: var(--teal); }
a:hover, a:active { color: #000; border-bottom-color: var(--teal); }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

hr {
  border: 0;
  border-top: 1px dotted var(--teal-rule);
  height: 1px;
  background: none;
  margin: 0.9em 0;
  width: 100%;
}

/* Dead rules kept from language.css -- no element on the site carries these
 * classes, but removing them is a separate decision from the layout. */
.lang_en { display: none; }
.lang_cs { display: inline; }
.lang_es { display: none; }

.none { visibility: hidden; display: none; }

/* ------------------------------------------------------------ the shell */

.main-box,
#bbody > #container {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1rem;
  overflow: visible;
  text-align: left;
}

#bbody { width: 100%; background: none; text-align: left; }

/* ------------------------------------------------------------ the header
 *
 * header.jpg / xheader.jpg were 713x123 abstract teal gradients -- no logo, no
 * text, purely decorative -- centred on a full-viewport band, which left an
 * empty wing on each side. Rebuilt here as gradients: same pale sweep through
 * the middle and deeper tone at bottom-centre, at any width, no request.
 *
 * This must stay a block box. The language flags are bare <a> children of
 * .top-box, so any flex or grid display here puts every flag on its own row
 * and overflows the band. */

.top-box,
#header {
  min-height: 128px;
  margin-bottom: var(--gap);
  color: #000;
  background: none;        /* the band is painted on body, full width */
  padding: 0.9rem 0;
  text-align: left;
}

.top-box h1, #header h1,
.top-box p.description, #header p.description { color: #392c2c; }

#header .wrapper { padding: 0; }

/* The language flag row that trails the h1. Inline, one line, wrapping. */
.top-box a { border: 0; display: inline-block; }
.top-box img { vertical-align: middle; }
.top-box .description { margin-bottom: 0.5em; }

/* ------------------------------------------ box template: three columns */

/* Four nested wrappers implementing the negative-margin three-column hack.
 * Made transparent; .content-box below does the same job in one declaration. */
.center-box,
.reset-box,
.right-box {
  position: static;
  width: auto;
  left: auto;
  margin: 0;
}

.content-box {
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
  gap: 0 var(--gap);
  align-items: start;
}

/* grid-row is explicit on all three. The source order is .left, .right,
 * .center, and sparse auto-placement never moves backwards: .right takes
 * column 3, after which .center cannot claim column 2 in the same row and
 * drops to a second row, leaving the middle of the page blank. */

.content-box > .left {
  grid-column: 1;
  grid-row: 1;
  float: none;
  width: auto;
  text-align: left;
}

.content-box > .center {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  text-align: left;       /* was centre-aligned, so channel lists had no left edge */
}

.content-box > .right {
  grid-column: 3;
  grid-row: 1;
  float: none;
  width: auto;
  text-align: left;
}

/* ------------------------------------ container template: two columns */

#bbody > #container {
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 1fr);
  gap: 0 var(--gap);
  align-items: start;
}

#container > #header,
#container > .bnnr,
#container > #footer { grid-column: 1 / -1; }

#container > #sidebar {
  grid-column: 1;
  float: none;
  width: auto;
  padding: 0;
  text-align: left;
}

/* #adsense held a byte-for-byte copy of #sidebar's link list on six of the
 * seven pages, a leftover from when it carried ad markup. Emptied by
 * scripts/regrid-fitv.py; ads live in the fixed rails now, so the empty box
 * would only be dead space. */
#container > #adsense { display: none; }

#container > .main-col { grid-column: 2; }

/* ------------------------------------------------------------- the rails
 *
 * Fixed to the viewport and outboard of the shell, so they never squeeze the
 * page and never enter the flow. 1180/2 = 590, so a rail needs
 * 590 + 40 + 300 = 930px of half-width: both appear from 1860px up. */

.rail-l, .rail-r {
  display: none;
  position: fixed;
  top: 1rem;
  width: var(--rail);
  min-height: 600px;
}

@media (min-width: 1860px) {
  .rail-l, .rail-r { display: block; }
  .rail-l { left: calc(50% - 590px - 40px - var(--rail)); }
  .rail-r { left: calc(50% + 590px + 40px); }
}

/* ---------------------------------------------------------- the content */

/* Both templates float .main-content at a fixed percentage (47% in the box
 * template, 27.5% or an inline 55% in the container one). !important is here
 * to beat the inline style="float: right" / style="width: 55%" attributes
 * baked into the mirrored HTML, which are not worth 17 edits to remove. */
.center,
.main-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  text-align: left;
}

.main-content,
.main-content-full {
  float: none !important;
  width: auto !important;
  overflow: visible;
  text-align: left;
  margin: 0;
  padding: 0;
}

/* max-width caps the measure on the single-column container pages, where the
 * content track is ~950px and prose would otherwise run past 120 characters.
 * Harmless in the box template, whose channel columns are far narrower. */
.main-content p {
  line-height: 1.55;
  font-size: 1rem;
  margin: 0 0 0.8em;
  max-width: 72ch;
}

.main-content a img {
  border: 0;
  text-decoration: none;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: -3px;
}

.bit { display: none; }

.lis, .lis:link, .lis:visited, .lis:hover, .lis:active {
  color: #000;
  border-bottom-color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* -------------------------------------------------------------- banners */

.bnnr { clear: both; margin: 0 0 var(--gap); padding: 0; }
.bnnr a, .bnnr a:link, .bnnr a:visited, .bnnr a:hover, .bnnr a:active {
  border: 0; margin: 0; padding: 0;
}
.bnnr a img { border: 0; margin: 0; padding: 0; max-width: 100%; height: auto; }

/* ------------------------------------------------- most-popular channels */

.mostpopulartab { font-size: 0.95rem; }
.mostpopulartab a { color: #333; text-decoration: none; }
.mostpopulartab .channelName { font-weight: bold; text-align: left; }
.mostpopulartab .streamtype { text-align: center; }
.mostpopulartab .br {
  width: 3em;
  text-decoration: none;
  background-color: #c6dcdc;
  padding: 0 2px;
  color: #333;
  border: 1px solid;
  border-color: #b7b7b7 #000 #000 #b7b7b7;
  line-height: 17px;
  margin: 0 2px 0 0;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

/* --------------------------------------------------------------- footer */

.footer-box,
#footer {
  clear: both;
  margin: 2.25rem 0 1rem;
  padding-top: 1.1rem;
  border-top: 1px dotted var(--teal-rule);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: left;
}
.footer-box p, #footer p { margin: 0 0 0.3em; }

/* ---------------------------------------------------------- legacy hooks */

/* .clearfix / .heightfix were float containment for the old layout. Grid
 * contains its own items, so they are inert -- kept because the class names
 * are still on the elements. */
.clearfix::after { content: none; }
.heightfix::before { content: none; }

/* --------------------------------------------------------------- narrow */

/* The links column folds under the content first, then the prose column,
 * so a phone reads header -> prose -> channels -> links. */

@media (max-width: 900px) {
  .content-box {
    grid-template-columns: var(--col-left) minmax(0, 1fr);
  }
  .content-box > .right {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--gap);
    border-top: 1px dotted var(--teal-rule);
    padding-top: 0.9rem;
  }
}

@media (max-width: 680px) {
  .content-box,
  #bbody > #container {
    grid-template-columns: minmax(0, 1fr);
  }
  .content-box > .left,
  .content-box > .center,
  .content-box > .right,
  #container > #sidebar,
  #container > .main-col {
    grid-column: 1;
  }
  .content-box > .left   { grid-row: 1; margin-bottom: var(--gap); }
  .content-box > .center { grid-row: 2; }
  .content-box > .right  { grid-row: 3; }
  #container > #sidebar {
    order: 2;
    margin-top: var(--gap);
    border-top: 1px dotted var(--teal-rule);
    padding-top: 0.9rem;
  }
  .main-box, #bbody > #container { padding: 0 0.75rem; }
  .center, .main-col { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 1.5rem; }
  .top-box, #header { min-height: 0; padding: 0.9rem; }
}