/* 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, .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;
  --rail: 300px;
  --gap: 1.5rem;

  /* Height of the decorative teal band. It is painted on body, so it cannot
   * size itself to the header -- measured, the header runs to 149px at desktop
   * widths and 215px once the flag row wraps, against the 128px the mirror's
   * body-bg.gif was tall, which left the last flag row sitting on the band's
   * edge. Both the band and the header's min-height read this, so they cannot
   * drift apart again. */
  --band-h: 164px;

  --teal: #277676;          /* 5.33:1 on white. #339999 was 3.1:1; the #2b8585
                             * that replaced it was measured at 4.378:1 -- it
                             * missed AA by 0.12 and the old comment claiming
                             * otherwise was wrong. */
  --focus: #0f4a4a;         /* focus ring only: 10:1, so the indicator does not
                             * depend on the link colour clearing AA */
  --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);
  /* Was Arial, Helvetica, sans-serif -- the 2006 mirror's stack. This keeps the
   * same neutral-grotesque proportions, so nothing reflows and the page still
   * reads as itself, but each platform resolves it to its current UI face
   * (SF on Apple, Segoe UI Variable on Windows, the system sans on Linux and
   * Android) instead of a 1982 typeface. No webfont, so no added request on a
   * page whose only other asset is inline SVG. Arial stays as the fallback. */
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 15px;         /* was 90% of the browser default, then 90% again per element */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 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% var(--band-h);
  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(--focus); 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: var(--band-h);
  margin-bottom: var(--gap);
  color: #000;
  background: none;        /* the band is painted on body, full width */
  padding: 0.9rem 0 1.9rem; /* the bottom half keeps the flags off the band edge */
  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, wrapping.
 *
 * The flags are bare <a> children separated only by &nbsp;&nbsp; in the mirror,
 * so a wrapped row had no vertical gap at all and the second row of flags sat
 * flush against the first. inline-flex gives each link a 44px tap target and
 * the margin supplies the row gap; the nbsp pairs stay harmless. */
.top-box a {
  border: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0.15rem 0.25rem 0;
}
.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);
  gap: 0 var(--gap);
  align-items: start;
}

/* grid-column and grid-row are stated explicitly. They now only restate
 * what auto-placement would do, but they were load-bearing while a third
 * .right column sat between .left and .center in source order, and they
 * document the intended slots. */

.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 */
}

/* ------------------------------------ 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;
}

/* The -3px nudge optically seated a baseline-aligned icon in a text run. The
 * channel rows are flex now and centre their own icon, so it must not apply
 * there or the triangle sits low in the row. */
.main-content a:not(.ch) img {
  border: 0;
  text-decoration: none;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: -3px;
}

/* ----------------------------------------------------- the channel rows
 *
 * Was: plain text, then a 14x17 px anchor holding only the play icon, then a
 * <br>. The name was not part of the link, so the obvious tap target did
 * nothing and 33 of 68 links had no accessible name. The whole row is the
 * anchor now -- 44 px tall per WCAG 2.5.8, row text as the accessible name,
 * icon aria-hidden. See scripts/fix-fitv-rows.py. */

/* One block holds all 13 language groups in alphabetical order (see
 * scripts/fix-fitv-grid.py); the columns are a presentation choice made here,
 * so the reading order can no longer restart mid-alphabet the way it did when
 * the split was two floated divs in the markup. */
/* Multi-column, not grid. A grid sizes each row to its tallest item, so the
 * 2-row Arabic group shared a row with the 9-row English one and left a hole
 * the height of seven channels -- and the last group was orphaned on a row of
 * its own. Multicol balances the flow instead, and column-major order means the
 * alphabet reads down each column then across, which is what the original
 * two-column layout did. */
.ch-columns {
  column-width: 260px;
  column-gap: 2rem;
}

.ch-group {
  break-inside: avoid;      /* never split a language across two columns */
  min-width: 0;
}

/* A group landing at the top of a column must not carry the h2's top margin,
 * or the columns start at different heights. The prose column's first heading
 * is zeroed with them so all four columns share one top edge. */
.ch-group > h2,
.content-box > .left > h2:first-child { margin-top: 0; }
.ch-group + .ch-group > h2 { margin-top: 1.3em; }

.ch-list {
  list-style: none;
  margin: 0 0 0.8em;
  padding: 0;
}

.ch-list a.ch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;      /* keeps the name flush with the h2 above it */
  border: 0;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.3;
}

.ch-name { font-weight: 700; }

/* Tinted from the foreground rather than greyed, so it stays at 15.5:1 while
 * still reading as secondary. */
.ch-loc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-right: auto;        /* pushes the icon to the row's right edge */
}

.ch-play { flex: none; opacity: 0.75; }

.ch-list a.ch:hover,
.ch-list a.ch:active {
  background: var(--teal-band);
  color: #000;
}

.ch-list a.ch:hover .ch-play,
.ch-list a.ch:focus-visible .ch-play { opacity: 1; }

/* The row is the target, so the ring belongs to the row, not to a 14px icon. */
.ch-list a.ch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  background: var(--teal-band);
}

/* The only visited state on the site. On a directory of 53 third-party links,
 * "have I already tried this one" is the question the page most needs to
 * answer, and nothing else here answered it. */
.ch-list a.ch:visited .ch-name { color: var(--ink-soft); }
.ch-list a.ch:visited .ch-play { opacity: 0.45; }

.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 */

/* A phone reads header -> channels -> prose. The prose column used to come
 * first, which put the whole 844px opening viewport on an essay about language
 * courses and pushed the first channel roughly 800px down. The channels are
 * what the visitor came for, so they take the fold; the intro, instructions and
 * contact text follow underneath. */

@media (max-width: 680px) {
  .content-box,
  #bbody > #container {
    grid-template-columns: minmax(0, 1fr);
  }
  .content-box > .left,
  .content-box > .center,
  #container > #sidebar,
  #container > .main-col {
    grid-column: 1;
  }
  .content-box > .center { grid-row: 1; margin-top: var(--gap); }
  .content-box > .left {
    grid-row: 2;
    margin-top: var(--gap);
    border-top: 1px dotted var(--teal-rule);
    padding-top: 0.9rem;
  }
  #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); }
  .ch-columns { column-width: auto; column-count: 1; }
  h1 { font-size: 1.5rem; }

  /* The band is a fixed 128px gradient on body, so once the eight flags wrap to
   * a second row the header outgrew it and the band cut through the middle of
   * the flags. Narrow viewports have no shell to bleed past, so the band moves
   * onto .top-box itself, where it is exactly as tall as its content. */
  body { background-image: none; background-color: #fff; }
  .top-box, #header {
    min-height: 0;
    padding: 0.9rem 0.9rem 1.4rem;
    margin: 0 -0.75rem;
    background:
      radial-gradient(120% 150% at 50% 0%,
        var(--teal-deep) 0%, rgba(163, 207, 210, 0) 62%),
      linear-gradient(var(--teal-band) 0 100%);
  }
}