/**************************\
  CSS Reset
\**************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**************************\
  Variables
\**************************/

:root {
  --color-category-economy: #68435f;
  --color-category-agriculture: #70827b;
  --color-category-culture-education: #9d9d9c;
  --color-category-freiraum: #c9c6d4;
  --color-category-mobility-traffic: #525766;

  --color-map-background: #b6ca9b;
  --color-map-background-vorarlberg: #0e4d62;
  --color-map-background-lake: #232952;

  --layout-card-offset: 50px;
  --layout-padding: 12px;
  --layout-border-radius-large: 60px;

  --font-size-categories: 1em;
  --font-size-categories-desktop: 1.2em;
}

/**************************\
  Basic layout & design
\**************************/

body {
  font-family: LeckerliOne-Regular, Leckerli One, serif;
  color: #ffffff;
  background-color: var(--color-map-background);
  /*background-color: var(--color-map-background-vorarlberg);*/
}

/** Top-level elements */
#page {
  display: flex;
  flex-direction: column;
}

#header {
  z-index: 100;
  height: 30%;
  width: 100%;

  display: flex;
  flex-direction: row;

  background-color: var(--color-map-background-lake);
}

#cardContainer {
  z-index: 90;
  height: calc(70% + var(--layout-card-offset));
  overflow: hidden;
  width: 100%;
  margin: calc(var(--layout-card-offset) * (-1)) auto auto auto;
}

#cardContainer svg {
  width: 100%;
  height: auto;
  max-height: 75vh;
}

/** Header elements */

#logo {
  width: 35%;
  height: calc(100% - 1.5em - (4 * var(--layout-padding)));
  padding: var(--layout-padding) 0 0 0;
  margin-top: calc(2 * var(--layout-padding));
  margin-left: var(--layout-padding);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#logo img {
  width: 100%;
  max-width: 220px;
  height: auto;
}

#main-navigation {
  margin-top: 1.7em;
  width: 100%;
}

#main-navigation .main-navigation-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  font-size: var(--font-size-categories);
}

#main-navigation .icon-question-mark {
  margin-right: 1em;
}

#categories {
  right: 1em;
  width: 65%;

  display: flex;
  justify-content: right;
  align-items: flex-start;
}

#categories ul {
  width: 100%;
  margin-right: 1em;
  margin-top: 2em;
}

#categories ul li {
  width: 100%;
  height: 2em;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  cursor: pointer;
}

#about-us-nav-item {
  cursor: pointer;
}

#categories ul li .icon-category {
  margin-left: 1em;
  width: 1em;
}

#categories ul li .icon-category img {
  width: auto;
  height: 1em;
}

#categories .nav-item-category {
  font-size: var(--font-size-categories);
}

#initiatives-list-container {
  z-index: 110;
  position: absolute;
  width: 100%;
  height: calc(70% + 2px);
  bottom: 4px;
}

#about-us {
  display: none;
}

.body-text {
  display: block;
  width: calc(100% - (2 * var(--layout-padding)));
  padding: var(--layout-padding);
  line-height: 1.3;

  font-family: 'Source Code Pro', sans-serif;
  font-size: 1.2em;
  color: var(--color-map-background-lake);
}

.body-text p {
  margin-bottom: 1em;
}

.body-text h2 {
  font-weight: bold;
}

.body-text .action a {
  display: block;
  margin: 1em 0;
  width: calc(100% - (2 * var(--layout-padding)));
  padding: var(--layout-padding);
  color: var(--color-map-background);
  background-color: var(--color-map-background-lake);
  text-align: center;

  font-family: 'Source Code Pro', sans-serif;
  font-size: 1em;
  border-radius: 10px;
}

#initiatives-list {
  overflow: auto;
  height: calc(100% - (2 * var(--layout-padding)) - var(--font-size-categories));
  background-color: #ffffffee;
}

#initiatives-list-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% - (2 * var(--layout-padding)));

  padding: var(--layout-padding);
  font-size: var(--font-size-categories);

  background-color: var(--color-map-background);
  color: var(--color-map-background-lake);
  border-bottom: 2px solid var(--color-map-background-lake);
}

#initiatives-list-header .icon-close {
  width: 1em;
  height: 1em;
  margin-right: 0em;

  cursor: pointer;
}

#initiatives-list-container.closed {
  display: none;
}

#initiatives-list .initiative-list-item {
  width: 100%;
  border-bottom: 2px solid var(--color-map-background-lake);
  border-collapse: collapse;
}

#initiatives-list .initiative-list-item .initiative-list-item-header {
  width: calc(100% - (2 * var(--layout-padding)));
  padding: var(--layout-padding);

  font-family: 'Source Code Pro', sans-serif;
  font-size: 1.2em;
  line-height: 1.2;
  color: var(--color-map-background-lake);

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  cursor: pointer;
}

#initiatives-list .initiative-list-item .initiative-list-item-header h2 {
  width: 80%;
}

#initiatives-list .initiative-list-item .initiative-list-item-body {
  width: calc(100% - (2 * var(--layout-padding)));
  padding: var(--layout-padding);
  line-height: 1.3;

  font-family: 'Source Code Pro', sans-serif;
  font-size: 1em;
  color: var(--color-map-background-lake);
}

#initiatives-list .initiative-list-item .initiative-list-item-actions {
  width: calc(100% - (2 * var(--layout-padding)));
  padding: var(--layout-padding);
  display: flex;
  justify-content: flex-end;
}

#initiatives-list .initiative-list-item .initiative-list-item-actions a {
  width: 50%;
  padding: var(--layout-padding);
  color: var(--color-map-background);
  background-color: var(--color-map-background-lake);
  text-align: center;

  font-family: 'Source Code Pro', sans-serif;
  font-size: 1em;
  border-radius: 10px;
}

#initiatives-list .initiative-list-item.closed .initiative-list-item-body,
#initiatives-list .initiative-list-item.closed .initiative-list-item-actions {
  display: none;
}

.icon-caret:before {
  content: "";
  display: block;
  width: 1em;
  height: 1.2em;
  background-size: 0.5em auto;
  background-position: center;
  background-repeat: no-repeat;
}

.icon-close:before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-size: 1em auto;
  background-image: url("../img/icons/close.png");
  background-repeat: no-repeat;
}

.icon-question-mark:before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-size: 1em auto;
  background-image: url("../img/icons/question-mark.png");
  background-repeat: no-repeat;
}

#initiatives-list .initiative-list-item.closed .icon-caret:before {
  background-image: url("../img/icons/caret-right.png");
}

#initiatives-list .initiative-list-item .icon-caret:before {
  background-image: url("../img/icons/caret-down.png");
}

/**************************\
  SVG tweaks
\**************************/

#card .cls-25,
#card .cls-26,
#card .cls-27,
#card .cls-28,
#card .cls-29 {
  display: none;
}

#card [class$="initiative"]:hover {
  fill: red;
  cursor: pointer;
}

#card .active {
  fill: red;
}

a {
  text-decoration: none;
}

/**************************\
  Desktop / Tablet landscape
\**************************/

@media all and (min-width: 1100px) {
  #page {
    flex-direction: row;
  }

  #header {
    width: 40%;
    height: 14em;
    border-bottom-right-radius: var(--layout-border-radius-large);
  }

  #cardContainer {
    width: 60%;
    height: calc(100vh + var(--layout-card-offset));
  }

  #cardContainer svg {
    width: auto;
    height: 100%;
    max-height: 100%;
  }

  #initiatives-list-container {
    width: calc(40% - 2px - var(--layout-border-radius-large));
    height: calc(100vh - 14em - 4px);
    bottom: calc(4px);

    border-right: 4px solid var(--color-map-background-lake);
  }

  #initiatives-list {
    height: calc(100% - (5 * var(--layout-padding)) - var(--font-size-categories));
  }

  #initiatives-list-header {
    border-bottom: 0;
    font-size: 2em;
    padding: calc(2 * var(--layout-padding)) var(--layout-padding);
  }

  #categories {
    margin-right: calc(var(--layout-border-radius-large) / 2);
  }

  #main-navigation .main-navigation-item {
    font-size: var(--font-size-categories-desktop);
  }
}

/** Experiment: Scrollbars */
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-map-background-lake) var(--color-map-background);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 24px;
}

*::-webkit-scrollbar-track {
  background: var(--color-map-background);

}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-map-background-lake);
  border-radius: 20px;
  border: 3px solid var(--color-map-background);
}