/* Layout: fluid 978px frame. News + 420px aside side by side from 900px, vertical block titles
   from 1100px, icon navigation collapses behind a menu button under 860px, oddily menu 2x2 under 760px. */
:root {
  --navy: #036;
  /* Header and footer blue */
  --header: #1a3f77;
  --blue: #069;
  --blue-hover: #079;
  --deep: #005280;
  --orange: #f90;
  --red: #e31c24;
  --ink: #333;
  --muted: #555;
  --water: #c5dde5;
  --line: #91a3a9;
  --paper: #fff;
  --bubble: #0071a1;
  /* Everything clickable shares these: resting fill, hover fill and the fill of the chosen item.
     Buttons that do something carry orange text, items you choose between (tabs, pages) white text. */
  /* Photos and their previews share one corner radius. */
  --photo-radius: 6px;
  --control: var(--navy);
  --control-hover: var(--deep);
  --control-on: var(--orange);
  --control-on-ink: #000;
  --font-body: Calibri, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-light: 'TitilliumMaps29L400wt', Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  --font-heavy: 'TitilliumMaps29L800wt', Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  --frame: 978px;
  --gutter: 16px;
  color-scheme: light;
}
@font-face {
  font-family: 'TitilliumMaps29L400wt';
  src: url(/fonts/titillium-400.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TitilliumMaps29L800wt';
  src: url(/fonts/titillium-800.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  /* Safari on iPhone tints the status bar and the overscroll with the body's colour, so the body has the header's blue */
  background: var(--header);
}
/* The light page background (a flat colour) lives on the wrapper, which covers at least the whole screen.
   On a short page the footer grows to fill what is left, so the screen ends in the footer's blue, not in light blue. */
#container { display: flex; flex-direction: column; min-height: 100vh; background: var(--water); }
#container > #footer-frame { flex: 1 0 auto; }
img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
h1, h2, h3, h4, p { margin: 0; padding: 0; }
p { margin-bottom: 15px; }
h1, h2 { font-family: var(--font-light); font-weight: normal; }
h3 { font-family: var(--font-heavy); font-weight: normal; font-size: 20px; line-height: 26px; color: var(--blue); }
a { color: var(--blue); text-decoration: underline; transition: color 300ms ease-in-out; }
/* Visited links keep their colour: the site's lists (plan, directory, chronicle) are clicked through again and again. */
a:hover { color: var(--blue-hover); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
::selection { background: var(--orange); color: #fff; text-shadow: none; }
.clearfix::after { content: ""; display: table; clear: both; }
.frame-content {
  width: min(var(--frame), 100% - 2 * var(--gutter));
  margin-inline: auto;
  position: relative;
}
#content-frame { padding-block: 30px; min-height: 500px; }
#content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 53px; }
#content-header:empty { display: none; }
#content-aside { width: 100%; max-width: 420px; margin-inline: auto; }
.block { padding: 7px; background: var(--paper); border-radius: 6px; }
.block-container { position: relative; }
.block-title { margin: 0 0 6px; text-transform: uppercase; line-height: 1.15; }
h1.block-title { font-size: 34px; color: var(--navy); }
h2.block-title { font-size: 30px; }
.black { color: var(--ink); }
.blue { color: var(--blue); }
.red { color: var(--red); }
.list .item { padding: 3px 0; border-bottom: 1px solid var(--line); }
.list .item:last-child, .list .item:last-of-type { border-bottom: 0; }

@media (min-width: 1100px) {
  h1.block-title { font-size: 36px; }
}

@media (min-width: 900px) {
  #content-header { grid-column: 1 / -1; }
  #content-aside { margin-inline: 0; }
}

@media (max-width: 600px) {
  #content-frame { padding-top: 24px; }
  h1.block-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  a, #nivoslider a { transition: none; }
}

#content-frame { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 30px 29px; }
#content { flex: 1 1 0; min-width: 0; position: relative; }
#content.center-wide, #content.center-and-left { display: block; }
#content-main h1:not(.block-title) { font-size: 36px; line-height: 42px; color: var(--navy); }
#content-main h2:not(.block-title) { margin-top: 30px; font-size: 30px; line-height: 44px; color: var(--blue); }
h4 { font-size: 18px; line-height: 20px; font-weight: bold; color: var(--blue); }
.date { font-family: var(--font-heavy); font-size: 18px; line-height: 24px; color: var(--blue); }
.center-wide #content-header { position: absolute; right: 0; top: 7px; z-index: 1; }
/* == Plan akci: table */
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
td, th { text-align: left; vertical-align: top; padding: 6px 10px; }
th { font-family: var(--font-heavy); font-weight: normal; text-transform: uppercase; }
tr:nth-child(2n+2) { background: #ccc; }
/* Plan akci: same visual language at every width (month groups, highlighted vypravy, no zebra) */
.nw { white-space: nowrap; }

@media (min-width: 760px) and (max-width: 899px) {
  .center-wide #content-header { left: 0; top: 42px; }
}

/* Tabs move under the heading and scroll sideways if they do not fit */
@media (max-width: 899px) {
  td, th { padding: 6px; }
}

@media (max-width: 759px) {
  #content-frame { gap: 16px 12px; }
  #content-main h1:not(.block-title) { font-size: 28px; line-height: 34px; }
  #content-main h2:not(.block-title) { font-size: 26px; line-height: 36px; }
  /* Filter: six chips in a 3x2 grid, all visible without scrolling */
  #content.center-wide { display: flex; flex-direction: column; gap: 0; }
  .center-wide #content-main, .center-wide .list-akce { display: contents; }
  .center-wide #content-header { position: static; margin-bottom: 12px; }
  /* Detail: back button first, article, then calendar buttons and kronika */
  #content { flex-basis: 100%; }
}

iframe { max-width: 100%; }
h1 small { display: block; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--muted); }
.center-wide #content-main > h1 { font-size: 36px; line-height: 42px; color: var(--navy); }
.fltl { float: left; }
.fltr { float: right; }
img.fltl { margin-right: 10px; }
img.fltr { margin-left: 10px; }

@media (min-width: 760px) and (max-width: 899px) {
  .center-wide #content-main > h1 { margin-bottom: 35px; }
}

@media (max-width: 759px) {
  .center-wide #content-main > h1 { order: -1; margin-bottom: 6px; font-size: 28px; }
}

.even-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 38px; }
.even-columns .col { min-width: 0; }
.boxy { display: flex; flex-wrap: wrap; gap: 20px; }
.box { flex: 0 1 138px; min-height: 138px; padding: 5px; text-align: center; background: #dde1e4; border-radius: 5px; color: var(--ink); text-decoration: none; }
.box h3 { margin-top: 10px; font-size: 16px; line-height: 22px; color: var(--ink); }
.box.oddilove-cislo span { display: inline-block; margin-top: 30px; font-family: var(--font-heavy); font-size: 64px; line-height: 1; }

@media (max-width: 759px) {
  .even-columns { grid-template-columns: minmax(0, 1fr); }
  /* Action buttons move to the very end, after vyznamenani and the boxes */
  .even-columns .col-1 { display: contents; }
  .even-columns .col-2 { order: 1; }
  .boxy { gap: 12px; }
  .box { flex: 1 1 138px; }
}