/* Common */
:root {
  --accent-color: #48B3DF;
  --accent-color-light: #BDD016;
  --accent-color-dark: #79AB33;
  --red-color-light: #D33235;
  --text-color: #000000;
  --inverse-text-color: #FFFFFF;
  --muted-text-color: #707070;
  --text-font: "Montserrat";
  --heading-font: "Urbanist";
  --site-width: 1200px;
  --text-width: 800px;
  --large-radius: 0px;
  --small-padding: 5px;
  --medium-padding: 10px;
  --large-padding: 25px;
  --extralarge-padding: 60px; }

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist.woff2") format("woff2-variations"); }

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2-variations");
  font-weight: 400; }

html {
  height: 100%; }

body {
  margin: 0;
  color: var(--text-color);
  font-family: var(--text-font);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 350; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none; }

h1, h2 {
  padding-left: 14px; }

h2 {
  text-transform: uppercase; }

h3 {
  font-weight: 400; }

a {
  color: var(--accent-color-dark); }

p {
  margin-left: var(--large-padding);
  margin-right: var(--large-padding);
  max-width: var(--text-width); }
  @media (max-width: 800px) {
    p {
      margin-left: var(--medium-padding);
      margin-right: var(--medium-padding); } }
li {
  max-width: var(--text-width); }

img {
  max-width: 100%; }

figure {
  margin-left: var(--medium-padding);
  margin-right: var(--medium-padding); }

.bolt-popup img {
  width: 100%;
  display: block; }

.image-float-left {
  max-width: 300px;
  float: left; }

.image-float-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content; }

.image-float-right {
  max-width: 300px;
  float: right; }

ul.pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--medium-padding); }
  ul.pagination li {
    list-style: none;
    font-family: var(--heading-font);
    font-size: 16pt; }
    ul.pagination li:first-child, ul.pagination li:last-child {
      font-family: var(--text-font);
      font-size: unset; }
  ul.pagination a {
    text-decoration-line: none; }
  ul.pagination [disabled] {
    color: var(--muted-text-color); }
  ul.pagination .active {
    font-weight: bold; }
    ul.pagination .active a {
      color: var(--accent-color-light); }

/* Mixins */
/* Header */
header {
  width: 100%;
  max-width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--large-padding);
  box-sizing: border-box;
  padding: 10px 20px;
  margin-bottom: 0;
  background-color: var(--accent-color-dark);
  border-radius: var(--large-radius);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--large-padding);
  align-items: center; }
  header a.homepage {
    background: url("../media/snk_home_logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    height: 55px;
    width: calc(55px * (2481 / 591));
    color: transparent;
    display: inline-block;
    padding-top: 0;
    margin-right: 20px; }
  header #hamburger-toggle, header .hamburger {
    display: none; }

header > nav {
  display: contents; }
  header > nav a {
    display: inline-block;
    padding-top: 5px;
    color: var(--inverse-text-color);
    font-family: var(--heading-font);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 16pt;
    font-weight: 350; }
    header > nav a:hover {
      text-decoration: underline; }
  header > nav .subnav-wrapper {
    position: relative; }
    header > nav .subnav-wrapper nav {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 40px;
      z-index: 10; }
      header > nav .subnav-wrapper nav .inner {
        width: 200px;
        padding: var(--large-padding);
        background-color: var(--accent-color-light); }
    header > nav .subnav-wrapper:hover nav {
      display: initial; }
  header > nav .circle-links {
    margin-left: auto;
    display: flex;
    gap: 15px; }
    header > nav .circle-links a {
      display: inline-block;
      border-radius: 999px;
      width: 30px;
      height: 30px;
      padding-top: 0;
      background-position: center;
      background-repeat: no-repeat;
      color: transparent; }
      header > nav .circle-links a.home-facebook-link {
        background-image: url("../media/facebook-f-brands.svg");
        background-color: var(--accent-color-light);
        background-size: 40%; }
      header > nav .circle-links a.starostka-fb-link {
        background-image: url("../media/facebook-f-brands.svg");
        background-color: var(--red-color-light);
        background-size: 40%; }
      header > nav .circle-links a.home-instagram-link {
        background-image: url("../media/instagram-brands.svg");
        background-color: var(--accent-color-light);
        background-size: 60%; }

@media (max-width: 1200px) {
  header {
    height: 64px; }
    header a.homepage {
      max-height: 100%; }
    header .hamburger {
      display: initial;
      margin-left: auto;
      width: 32px;
      height: 28px;
      background-image: url("../media/bars-solid.svg");
      background-size: cover;
      background-repeat: no-repeat; }
    header > nav {
      display: none; }
    header #hamburger-toggle:checked + nav {
      position: absolute;
      top: 64px;
      right: 0;
      z-index: 20;
      display: flex;
      gap: var(--medium-padding);
      flex-direction: column;
      width: 250px;
      padding: var(--large-padding);
      background-color: var(--accent-color-dark); }
      header #hamburger-toggle:checked + nav .circle-links {
        margin-left: 0;
        margin-top: var(--medium-padding); }
      header #hamburger-toggle:checked + nav .subnav-wrapper nav {
        display: flex;
        flex-direction: column;
        position: initial;
        padding-top: 0; }
        header #hamburger-toggle:checked + nav .subnav-wrapper nav .inner {
          width: initial;
          margin-top: 5px;
          padding-top: 6px;
          padding-bottom: 8px; } }

/* Content */
main {
  width: 100%;
  max-width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--large-padding);
  box-sizing: border-box;
  flex-grow: 1;
  height: 100%; }

/* Footer */
footer {
  width: 100%;
  max-width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--large-padding);
  margin-top: var(--large-padding);
  margin-bottom: 0;
  padding-top: var(--large-padding);
  padding-bottom: var(--large-padding);
  box-sizing: border-box;
  padding-left: var(--large-padding);
  padding-right: var(--large-padding);
  color: #FFF;
  background-color: #666;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }
  footer .left a {
    display: block;
    color: #FFF; }
    footer .left a.logo {
      background: url("../media/snk_home_logo.svg");
      background-size: contain;
      background-repeat: no-repeat;
      height: 55px;
      width: calc(55px * (2481 / 591));
      color: transparent; }
    footer .left a.email {
      margin-left: 10px; }
  footer .search {
    margin-bottom: var(--small-padding); }
    footer .search h4 {
      margin: 0;
      display: inline-block; }
    footer .search input {
      border: none;
      border-bottom: 1px solid #FFF;
      border-radius: 0;
      background-color: inherit;
      color: inherit; }
    footer .search button {
      border: 1px solid #FFF;
      background: none;
      border-radius: 3px;
      color: inherit; }
  footer .credit {
    margin: 0;
    font-size: 9pt; }
    footer .credit a {
      color: inherit; }
  footer .right {
    text-align: right;
    padding-left: 10px; }
    @media (max-width: 800px) {
      footer .right {
        text-align: left; } }
/* Generic page */
.generic-record img {
  max-height: 600px; }

.generic-listing {
  margin-left: var(--medium-padding); }
  .generic-listing p {
    margin-left: var(--medium-padding); }

main .page {
  margin-left: var(--medium-padding);
  margin-right: var(--medium-padding); }
  main .page h1 {
    margin-bottom: var(--small-padding); }
  main .page .published-at {
    color: var(--muted-text-color);
    font-size: 10pt;
    padding-left: calc(var(--large-padding) + 3px); }
  main .page > img {
    margin-top: var(--large-padding); }

/* HOme page */
main > .homepage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "cover             cover" "content           sidebar" "linkboxes         sidebar" "news              sidebar" "news-archive-link sidebar" "instagram         sidebar" "people            people"; }
  main > .homepage .banner-wrapper {
    position: relative; }
    main > .homepage .banner-wrapper .banner {
      position: absolute;
      top: var(--large-padding);
      right: var(--large-padding);
      background-color: var(--accent-color-light);
      padding: var(--medium-padding);
      border-radius: var(--large-radius);
      font-family: var(--heading-font);
      font-weight: 400;
      font-size: 15pt; }
  main > .homepage .cover {
    grid-area: cover; }
    main > .homepage .cover .cover-photos img {
      width: 100%; }
      main > .homepage .cover .cover-photos img.narrow {
        display: none; }
      @media (max-width: 600px) {
        main > .homepage .cover .cover-photos img.wide {
          display: none; }
        main > .homepage .cover .cover-photos img.narrow {
          display: initial; } }
  main > .homepage .linkboxes {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: var(--medium-padding);
    margin: var(--medium-padding); }
    main > .homepage .linkboxes a {
      display: block;
      box-sizing: border-box;
      font-family: var(--heading-font);
      font-size: 26pt;
      padding: var(--large-padding) var(--small-padding);
      width: 100%;
      color: white;
      text-decoration-line: none;
      text-align: center;
      text-transform: uppercase; }
      main > .homepage .linkboxes a.vize {
        background-color: rebeccapurple; }
      main > .homepage .linkboxes a.plan {
        background-color: #2FC2E8; }
      main > .homepage .linkboxes a.program {
        background-color: #FF4D3F; }
      main > .homepage .linkboxes a.kandidati, main > .homepage .linkboxes a.koalicni-smlouva {
        background-color: var(--accent-color-dark); }
  main > .homepage h2 {
    margin-top: var(--large-padding);
    margin-bottom: var(--small-padding);
    padding-left: var(--large-padding);
    font-weight: 600;
    font-size: 16pt; }
  main > .homepage .content {
    grid-area: content; }
  main > .homepage .instagram {
    grid-area: instagram; }
  main > .homepage .news {
    grid-area: news;
    align-self: start; }
  main > .homepage .news-archive-link {
    grid-area: news-archive-link;
    margin-left: var(--large-padding); }
  main > .homepage .sidebar {
    grid-area: sidebar;
    align-content: start;
    display: grid;
    grid-template-columns: auto; }
    main > .homepage .sidebar h2 {
      margin: 0; }
    main > .homepage .sidebar .events, main > .homepage .sidebar .fb-posts {
      display: block;
      background-color: var(--accent-color-light);
      border-radius: var(--large-radius);
      padding: var(--medium-padding);
      margin: var(--medium-padding);
      background-color: #dddddd;
      border-radius: var(--large-radius); }
    main > .homepage .sidebar .events h2 {
      margin-bottom: var(--medium-padding); }
    main > .homepage .sidebar .fb-archive-link {
      margin-left: var(--medium-padding);
      margin-bottom: var(--medium-padding); }
  main > .homepage .people {
    grid-area: people; }

.homepage .ig-posts-listing {
  display: flex;
  flex-direction: row; }
  .homepage .ig-posts-listing article {
    display: block;
    background-color: var(--accent-color-light);
    border-radius: var(--large-radius);
    padding: var(--medium-padding);
    margin: var(--medium-padding);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "title" "content" "date" "photo";
    align-content: start;
    flex-basis: 50%;
    background-color: #ecf5a2; }
    .homepage .ig-posts-listing article h3 {
      grid-area: title;
      margin: 0;
      margin-bottom: var(--small-padding);
      font-size: 16pt;
      font-weight: 500; }
      .homepage .ig-posts-listing article h3 a {
        color: var(--text-color);
        text-decoration-line: none; }
    .homepage .ig-posts-listing article p, .homepage .ig-posts-listing article .content {
      grid-area: content;
      margin: 0;
      margin-top: var(--small-padding);
      color: var(--text-color);
      text-decoration: none;
      word-break: break-word; }
    .homepage .ig-posts-listing article img {
      grid-area: photo;
      margin-top: 10px;
      align-self: end; }
    .homepage .ig-posts-listing article .published-at {
      grid-area: date;
      color: var(--muted-text-color);
      font-size: 10pt;
      padding-left: 1px; }
  @media (max-width: 600px) {
    .homepage .ig-posts-listing {
      flex-wrap: wrap; }
      .homepage .ig-posts-listing article {
        flex-basis: initial; } }
.homepage .news-listing {
  display: grid;
  grid-template-columns: 1fr 1fr; }
  .homepage .news-listing article {
    display: block;
    background-color: var(--accent-color-light);
    border-radius: var(--large-radius);
    padding: var(--medium-padding);
    margin: var(--medium-padding);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "title" "content" "date" "photo";
    align-content: start;
    background-color: #ecf5a2; }
    .homepage .news-listing article h3 {
      grid-area: title;
      margin: 0;
      margin-bottom: var(--small-padding);
      font-size: 16pt;
      font-weight: 500; }
      .homepage .news-listing article h3 a {
        color: var(--text-color);
        text-decoration-line: none; }
    .homepage .news-listing article p, .homepage .news-listing article .content {
      grid-area: content;
      margin: 0;
      margin-top: var(--small-padding);
      color: var(--text-color);
      text-decoration: none;
      word-break: break-word; }
    .homepage .news-listing article img {
      grid-area: photo;
      margin-top: 10px;
      align-self: end; }
    .homepage .news-listing article .published-at {
      grid-area: date;
      color: var(--muted-text-color);
      font-size: 10pt;
      padding-left: 1px; }

.homepage .people-listing {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; }
  .homepage .people-listing .person {
    display: block;
    background-color: var(--accent-color-light);
    border-radius: var(--large-radius);
    padding: var(--medium-padding);
    margin: var(--medium-padding);
    color: var(--text-color);
    background-color: #dddddd;
    text-decoration-line: none; }
    .homepage .people-listing .person h3 {
      margin: 0;
      margin-bottom: var(--small-padding);
      font-size: 16pt; }
    .homepage .people-listing .person a.bolt-popup, .homepage .people-listing .person img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
      border-radius: var(--large-radius); }
    .homepage .people-listing .person p {
      margin: 0;
      margin-top: var(--small-padding); }

.homepage .events-listing {
  display: flex;
  flex-direction: column;
  gap: 20px; }
  .homepage .events-listing .event {
    display: grid;
    grid-template-columns: 80px 1fr;
    color: var(--text-color);
    text-decoration-line: none; }
    .homepage .events-listing .event .date, .homepage .events-listing .event .time {
      font-weight: bold;
      font-size: 18pt; }
    .homepage .events-listing .event .date {
      grid-area: 1 / 1; }
    .homepage .events-listing .event .time {
      grid-area: 2 / 1; }
    .homepage .events-listing .event .name {
      grid-area: 1/2 / 3/2;
      font-size: 14pt;
      align-self: center; }

.homepage .fb-posts-listing article {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "title" "content" "date" "photo";
  align-content: start;
  margin-top: var(--large-padding); }
  .homepage .fb-posts-listing article h3 {
    grid-area: title;
    margin: 0;
    margin-bottom: var(--small-padding);
    font-size: 16pt;
    font-weight: 500; }
    .homepage .fb-posts-listing article h3 a {
      color: var(--text-color);
      text-decoration-line: none; }
  .homepage .fb-posts-listing article p, .homepage .fb-posts-listing article .content {
    grid-area: content;
    margin: 0;
    margin-top: var(--small-padding);
    color: var(--text-color);
    text-decoration: none;
    word-break: break-word; }
  .homepage .fb-posts-listing article img {
    grid-area: photo;
    margin-top: 10px;
    align-self: end; }
  .homepage .fb-posts-listing article .published-at {
    grid-area: date;
    color: var(--muted-text-color);
    font-size: 10pt;
    padding-left: 1px; }

@media (max-width: 1200px) {
  main > .homepage {
    grid-template-columns: auto;
    grid-template-areas: "cover" "content" "linkboxes" "sidebar" "news" "instagram" "news-archive-link" "people"; }
    main > .homepage .sidebar {
      grid-template-columns: auto auto; } }

@media (max-width: 600px) {
  main > .homepage .news-listing {
    grid-template-columns: auto; }
    main > .homepage .news-listing .news-column {
      display: contents; }
    main > .homepage .news-listing .news-column:nth-child(1) .newsitem:nth-child(1) {
      grid-area: 1/1; }
    main > .homepage .news-listing .news-column:nth-child(2) .newsitem:nth-child(1) {
      grid-area: 2/1; }
    main > .homepage .news-listing .news-column:nth-child(1) .newsitem:nth-child(2) {
      grid-area: 3/1; }
    main > .homepage .news-listing .news-column:nth-child(2) .newsitem:nth-child(2) {
      grid-area: 4/1; }
  main > .homepage .sidebar {
    grid-template-columns: auto; }
  main > .homepage .linkboxes {
    grid-template-rows: 1fr;
    grid-template-columns: initial; }
  .people-listing {
    grid-template-columns: 1fr 1fr; } }

@media (max-width: 400px) {
  .homepage .people-listing {
    grid-template-columns: auto;
    justify-content: center;
    gap: var(--large-padding); }
    .homepage .people-listing .person img {
      max-height: 50vh; } }

/* Program 2018 */
[slug=program-2018] .percent {
  font-size: 20pt;
  font-family: var(--heading-font);
  font-weight: 500; }

@media (min-width: 800px) {
  [slug=program-2018] ul {
    margin-left: var(--medium-padding); } }

[slug=program-2018] li.ano, [slug=program-2018] li.asi, [slug=program-2018] li.ne {
  text-indent: -34px; }
  [slug=program-2018] li.ano *, [slug=program-2018] li.asi *, [slug=program-2018] li.ne * {
    text-indent: initial; }
  [slug=program-2018] li.ano::marker, [slug=program-2018] li.asi::marker, [slug=program-2018] li.ne::marker {
    content: ""; }
  [slug=program-2018] li.ano::before, [slug=program-2018] li.asi::before, [slug=program-2018] li.ne::before {
    padding-right: 10px;
    vertical-align: middle;
    position: relative;
    bottom: -5px; }

[slug=program-2018] li.ano::before {
  content: url("../media/CheckYes.svg"); }

[slug=program-2018] li.asi::before {
  content: url("../media/CheckNotyet.svg"); }

[slug=program-2018] li.ne::before {
  content: url("../media/CheckNo.svg"); }

/* Program 2022 */
[slug=program-2022] .hotovo {
  --highlight: #719F30; }

[slug=program-2022] .rozpracovano {
  --highlight: #FF4D3F; }

[slug=program-2022] .planovano {
  --highlight: #269EB9; }

[slug=program-2022] h1, [slug=program-2022] h2 {
  color: var(--highlight); }

[slug=program-2022] h2 {
  margin-bottom: 0; }

[slug=program-2022] h2 + p, [slug=program-2022] h2 + ul {
  margin-top: 5px; }

/* Standalone people listing */
main > .people-listing {
  margin-top: var(--large-padding); }

/* Standalone person page */
main > .person {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "name     name" "photo    long-desc" "desc     long-desc"; }
  main > .person h1 {
    grid-area: name; }
  main > .person img {
    grid-area: photo; }
  main > .person .description {
    grid-area: desc; }
  main > .person .long-description {
    grid-area: long-desc; }
  @media (max-width: 800px) {
    main > .person {
      grid-template-columns: auto;
      grid-template-areas: "name" "photo" "desc" "long-desc"; } }
/* Standalone news listing */
main > .news-listing {
  margin-left: var(--medium-padding);
  margin-right: var(--medium-padding); }
  main > .news-listing h1 {
    margin-bottom: var(--medium-padding); }
  main > .news-listing .published-at {
    color: var(--muted-text-color);
    font-size: 10pt;
    padding-left: calc(var(--large-padding) + 3px); }
  main > .news-listing p {
    margin-left: var(--medium-padding); }
  main > .news-listing img {
    width: 600px;
    max-height: 400px;
    object-fit: contain; }
  main > .news-listing article {
    margin-top: var(--extralarge-padding); }
    main > .news-listing article > img {
      margin-top: var(--large-padding); }

/* Standalone Facebook/Instagram listings */
main > .fb-posts-listing .list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
  justify-content: center; }
  main > .fb-posts-listing .list article {
    display: block;
    background-color: var(--accent-color-light);
    border-radius: var(--large-radius);
    padding: var(--medium-padding);
    margin: var(--medium-padding);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "title" "content" "date" "photo";
    align-content: start;
    background-color: #dddddd;
    width: 450px;
    justify-items: center; }
    main > .fb-posts-listing .list article h3 {
      grid-area: title;
      margin: 0;
      margin-bottom: var(--small-padding);
      font-size: 16pt;
      font-weight: 500; }
      main > .fb-posts-listing .list article h3 a {
        color: var(--text-color);
        text-decoration-line: none; }
    main > .fb-posts-listing .list article p, main > .fb-posts-listing .list article .content {
      grid-area: content;
      margin: 0;
      margin-top: var(--small-padding);
      color: var(--text-color);
      text-decoration: none;
      word-break: break-word; }
    main > .fb-posts-listing .list article img {
      grid-area: photo;
      margin-top: 10px;
      align-self: end; }
    main > .fb-posts-listing .list article .published-at {
      grid-area: date;
      color: var(--muted-text-color);
      font-size: 10pt;
      padding-left: 1px; }
    main > .fb-posts-listing .list article img {
      max-height: 400px; }
    main > .fb-posts-listing .list article .published-at {
      justify-self: left; }
    @media (max-width: 500px) {
      main > .fb-posts-listing .list article {
        width: 100%; } }
/* Search results */
main > .search-listing {
  margin-left: var(--medium-padding);
  margin-right: var(--medium-padding); }
  main > .search-listing p {
    margin-left: var(--medium-padding);
    margin-right: var(--medium-padding); }

/* Excerpt expanding in news posts */
details.excerpt-details > summary::marker {
  content: ""; }

details.excerpt-details > summary > .show-more {
  margin-top: 10px;
  color: #555;
  cursor: pointer; }

details.excerpt-details[open] > summary {
  display: none; }