/* we declare all variables first */
:root {
  --yellow: hsl(60, 100%, 50%);
  --logo-blue: hsl(194, 100%, 43%);
  --black: hsl(0,0%,20%);
  --white: hsl(0,0%,100%);
  --turquoise: hsl(171, 65%, 44%);
  --turquise-dark: hsl(172,100%,26%);
  --red: hsl(354,100%,39%);
  --blue: hsl(202,100%,38%);
  --orange: hsl(21, 84%, 55%);
  --grey: hsl(0,0%,36%);
  --light-grey: hsl(0,0%,98%);
  --border-grey: hsl(0,0%,93%);

  /* Sarah */
  --mullberry: hsl(319,65%,50%);
  --candlelight: hsl(49,100%,60%);
  --puertorico: hsl(171,65%,44%);
  --jaffa: hsl(25,100%,60%);

  /* colour scheme */
  --primary: var(--puertorico);
  --secondary:  var(--yellow);
  --link: var(--puertorico);
  --active: var(--mullberry);

  /* modular scale */
  --ratio: 1.25;
  --s-5: calc(var(--s-4) / var(--ratio)); /* .32768 */
  --s-4: calc(var(--s-3) / var(--ratio)); /* .4096rem */
  --s-3: calc(var(--s-2) / var(--ratio)); /* .512rem */
  --s-2: calc(var(--s-1) / var(--ratio)); /* .64rem */
  --s-1: calc(var(--s0) / var(--ratio)); /* .8rem */
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio)); /* 1.25rem */
  --s2: calc(var(--s1) * var(--ratio)); /* 1.5625rem */
  --s3: calc(var(--s2) * var(--ratio)); /* 1.953125rem */
  --s4: calc(var(--s3) * var(--ratio)); /* 2.44140625rem */
  --s5: calc(var(--s4) * var(--ratio)); /* 3.051757812rem */

  /* fonts */
  /*--sans-serif: Poppins, Helvetica, Arial, sans-serif;
  --serif: Vollkorn, Georgia, "TimesNewRoman", serif;*/
  --sans-serif: var(--nunito);
  --serif: Georgia, serif;
  --raleway: Raleway, sans-serif;
  --montserrat: Montserrat, sans-serif;
  --fabrica: Fabrica, sans-serif;
  --poppins: Poppins, sans-serif;
  --nunito: Nunito, sans-serif;
  --font-headers: var(--sans-serif);
  --font-body: var(--sans-serif);

  /* misc variables */
  --radius: 9px;
}

/* modern css reset
   https://piccalil.li/blog/a-modern-css-reset/" */

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

p {
  margin-bottom: var(--s1);
}

ul {
  padding: 0 var(--s1);
}

img {
  max-width: 100%; /* never scale-up images */
  display: block; /* get rid of weird gap at bottom */
  height: auto; /* to keep aspect ratio */
  border-radius: var(--radius);
}

input,
button,
textarea,
select {
  font: inherit;
}
/* Let Form inputs never have more than 100% width */
.view-filters input {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* end css reset */

/* Fonts */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 125 950;
  font-stretch: 75% 125%;
  src: local(''),
       url('../font/Nunito-VariableFont_wght.woff2') format('woff2-variations'),
       url('../font/Nunito-VariableFont_wght.ttf') format('truetype-variations');
  font-display: swap;
}

/* General Stuff */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body) !important; /* needed to overwrite open social */
  font-size: var(--s0);
  line-height: var(--s2);
  background: var(--white);
  width: 100vw;
}

/* limit body line length sensibly */
.field--name-body {
  max-width: 60rem;
}

.block-views {
  margin-top: var(--s4);
}

/* Headlines */
h1, h2, h3, h4, h5 {
  font-family: var(--font-headers);
  line-height: 1.15;
  margin-bottom: var(--s1);
  clear: both;
}
h1 {
  font-size: var(--s4);
  margin-bottom: var(--s2);
}
h2 {
  font-size: var(--s3);
}
h3 {
  font-size: var(--s2);
}
h4 {
  font-size: var(--s1);
}

/* Links */
a {
  color: var(--link);
  font-weight: bold;
  text-decoration: none;
}
a:hover, a.is-active {
  color: var(--active);
  text-decoration: underline;
}
.content a:hover {
  color: var(--active) !important;
  background: none;
}
.node-readmore {
  display: block !important;
  margin-top: var(--s0);
}
.field--name-field-introduction-text :not(.badge):not(.section__title) > a:not(.btn), .field--name-field-featured-items-description :not(.badge):not(.section__title) > a:not(.btn), .field--name-field-featured-description :not(.badge):not(.section__title) > a:not(.btn), .field--name-field-accord-description :not(.badge):not(.section__title) > a:not(.btn), .field--name-field-accord-item-description :not(.badge):not(.section__title) > a:not(.btn), .field--name-field-phase-description :not(.badge):not(.section__title) > a:not(.btn), .quiz-form__text :not(.badge):not(.section__title) > a:not(.btn), .scorm-form--body :not(.badge):not(.section__title) > a:not(.btn), .body-text :not(.badge):not(.section__title) > a:not(.btn), .paragraph--type--image-text .field--name-field-text :not(.badge):not(.section__title) > a:not(.btn), .paragraph--type--text-image .field--name-field-text :not(.badge):not(.section__title) > a:not(.btn), .paragraph--type--text .field--name-field-text :not(.badge):not(.section__title) > a:not(.btn), .course-full .card__body :not(.badge):not(.section__title) > a:not(.btn), .teaser--course :not(.badge):not(.section__title) > a:not(.btn), .block--intro-text .block--intro-text__content :not(.badge):not(.section__title) > a:not(.btn), .block-inline-blockkpi-analytics .field--name-body :not(.badge):not(.section__title) > a:not(.btn), .basic-block .field--name-field-text-block :not(.badge):not(.section__title) > a:not(.btn), .hero--dashboard .field--name-field-text-block :not(.badge):not(.section__title) > a:not(.btn), .certificate-footer .bottom :not(.badge):not(.section__title) > a:not(.btn), .certificate-header .description :not(.badge):not(.section__title) > a:not(.btn) {
  color: var(--link);
}

.btn-flat, .btn-link, .btn-link:hover, .btn-flat:hover, .btn-link:focus, .btn-flat:focus, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > button, .nav-tabs > li.active > button:hover, .nav-tabs > li.active > button:focus, .card__link, .card__link:focus, .card__link:hover, .view--who-liked .views-field-view-user a, .comment__reply-btn, .nav-book .menu-item--active-trail > a {
  color: var(--link);
}

.socialerdfest--sky .card--views__sidebar .card__actionbar .btn:hover, .socialerdfest--sky .card--views__sidebar .card__actionbar .btn:active, .socialerdfest--sky .card--views__sidebar .card__actionbar .btn:focus {
  color: var(--active);
}

/* Button */
.btn {
  font-size: var(--s1);
}
.btn-accent {
  color: var(--white);
  background-color: var(--active);
  border-color: var(--active);
}
.btn-accent:focus, .btn-accent.focus, .btn-accent:hover, .btn-accent:active, .btn-accent.active, .open > .btn-accent.dropdown-toggle, .btn-accent.dropdown-toggle:hover {
  background: var(--active);
  border-color: var(--active);
  color: var(--white);
}

/* disable toolbar and other opensocial stuff for now
#block-socialerdfest-accountheaderblock,
.teaser__tag,
.hero-footer__text,
.socialerdfest--sky.path-group .cover-wrap:not(.cover-wrap--course-statistic) a[data-toggle="popover"].icon-before {
 display: none;
}*/

/* hide Access permissions, Group address */
.socialerdfest--sky .cover-wrap > .hero-footer,
.cover .page-title > span {
  display: none;
}

/* Layout */
.grid {
  display: grid;
  padding: 0 var(--s1);
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "Header"
    "Content"
    "Menu"
    "Footer";
}

/* make all grid elements flex */
.grid > * {
  display: flex;
  flex-direction: column;
}
#content {
  font-family: var(--sans-serif);
  font-size: var(--s1);
  grid-area: Content;
  align-items: normal;
  overflow: auto;
  min-width: 0;
  min-height: 0;
}

/* event override bullshit formatting */
.page-node-type-event #content {
  padding: 0;
  margin: 0;
}

@media (min-width: 1200px) {
  .page-node-type-event #content {
    padding: 0 calc(var(--s5) * 2);
  }
  .socialerdfest--sky .hero__banner--static {
    /*margin: 0 calc((-100vw + (1200px - 3rem)) / 2);*/
    margin: 0;
  }
}

.left--sidebar {
  grid-area: Menu;
  align-items: normal;
}
footer, .site-footer {
  grid-area: Footer;
  align-items: normal;
  align-self: end;
  background: var(--white);
}
#hero {
  margin: 0;
}
.layout--with-complementary {
  margin: 0 var(--s5);
}

#block-social-media-icons,
#block-socialmediafooter {
  display: flex;
  justify-content: center;
}

/* Responsive mobile mmenu */

.responsive-menu-toggle-icon span.label {
  color: var(--link);
}

.responsive-menu-toggle-icon::before,
.responsive-menu-toggle-icon::after,
.responsive-menu-toggle-icon span.icon {
  background: var(--link);
}

.responsive-menu-toggle-wrapper {
  grid-area: menu;
  align-self: center;
  margin-left: auto;
}

.responsive-menu-toggle-icon span.label {
  right: 40px;
  left: unset;
}

@media (max-width: 768px) {
  .region-content,
  .socialerdfest--sky .view-group-information .card {
    padding: 0;
  }
  .main-container {
    padding-bottom: 0;
  }
  /* hide menus on mobile */
  .navigation, .menu--footer {
    display: none;
  }
  #block-social-media-icons,
  #block-socialmediafooter {
    display: flex;
    justify-content: center;
    margin-bottom: var(--s5);
    padding-bottom: var(--s5);
  }

  /* remove margin on mobile */
  .layout--with-complementary {
    margin: 0;
  }
}

@media (min-width: 769px) {
  .block-system-main-block,
  .views-element-container {
    max-width: 120rem;
  }
  body {
    font-size: var(--s1);
    line-height: var(--s3);
  }
  /* override social font-sizes */
  h4.section-title {
    font-size: var(--s3);
  }
  .card__title {
    font-size: var(--s2);
  }
  .control-label {
    font-size: var(--s1);
  }
  .help-block {
    font-size: var(--s0);
  }
  /* user and profile pages need this for backtotop-button */
  .mm-page {
    margin-bottom: calc(var(--s4)*2);
  }
  .grid {
    height: 100vh;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "Header Header" 
      "Menu Content"
      "Footer Content";
    position: relative;
  }
  header.branding {
    grid-area: Header;
    z-index: 100;
  /*  border-bottom: 1px solid black;*/
  }
  #navigation {
    grid-area: Menu;
  }
  .menu-main,
  .main-container {
    margin-top: var(--s5);
  }
  #content {
    font-size: var(--s1) !important;
    color: var(--black);
    align-items: normal;
    overflow: auto;
    padding: 0;
    font-family: var(--sans-serif);
    font-size: var(--s0);
    /*border-left: 1px solid #000;*/
    min-width: 0;
    min-height: 0;
  }
  .site-footer {
    grid-area: Footer;
    background: #fff !important;
  }
  .socialgrid > .site-footer {
    justify-content: flex-end;
    align-items: flex-end;
    grid-area: Footer;
  }
  /* remove margin on mobile */
  .layout--with-complementary {
    margin: 0 var(--s5);
  }
}

/* Menus */
.navbar-nav.main,
.navbar-nav.navbar-right {
  padding: 0;
  margin: 0 !important;
  flex-direction: column;
}
.navbar-nav li {
  margin: 0 !important;
}
.navbar-nav li a:hover {
  color: var(--active) !important;
}
.menu-main .navbar-nav li a {
  font-size: var(--s2);
  color: var(--black);
  text-decoration: none;
  display: block;
  padding: var(--s-1) var(--s2);
  font-weight: normal;
}

/* Footer Menu */

.menu--footer {
  margin: var(--s1) 0;
}

.menu--footer li {
  font-size: var(--s1);
}

.menu--footer li a {
  font-size: var(--s1);
  color: var(--black);
  font-weight: normal;
  padding: calc(var(--s1)/2) var(--s2);
}

/* dangerous!: trying to tweak submenu */
ul.menu .menu {
  margin-top: var(--s-1);
  padding-left: var(--s1);
}

/*---------------------------
  Social Icons
----------------------------*/

.social-icons {
  text-align: right;
  margin: .5rem 1rem .5rem 0;
  display: inline-block;
}

.social-icons ul {
  margin: 0;
}

.social-icons li {
  display: inline-block;
  margin-left: 1rem;
}

.social-icons li a {
  width: 30px;
  color: var(--black);
  padding: 5px 6px;
  display: block;
  overflow: hidden;
  /*background: var(--light-grey);*/
  /*border-radius: 3px;*/
  /*border: 1px solid var(--border-grey);*/
  line-height: 100%;
  text-align: center;
}

.social-icons li a:hover {
  /*background: var(--white);*/
  color: var(--active);
}

/* Social Menu */
.socialerdfest--sky .navbar-secondary {
  background: var(--white);
}
.socialerdfest--sky .navbar-secondary .nav li a {
  color: var(--link);
  font-size: var(--s0);
  font-family: var(--sans-serif);
} 
.socialerdfest--sky .navbar-secondary .nav li.active a {
  color: var(--black);
}
.socialerdfest--sky .navbar-secondary .navbar-nav .caret {
  border-top-color: var(--link);
}

.socialerdfest--sky.path-user .layout--with-complementary .navbar-secondary,
.socialerdfest--sky.path-group .layout--with-complementary .navbar-secondary {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* reset bootstrap */
.site-footer .container > *,
.socialerdfest--sky .site-footer,
.site-footer .container {
  padding: 0;
}

.container, .region--content-top, .region--content-bottom, .region--hero, .region--secondary-navigation {
  max-width: fit-content;
  /*padding: 0 1rem;*/
}

/* Branding Header  */
.branding .navbar-brand {
  display: block;
  max-width: 80%;
  height: auto;
  line-height: 1;
}
.navbar-brand > img {
    display: block;
    max-height: none;
    max-width: none;
    width: 250px;
    padding: var(--s1);
  }
.region--branding {
  display: grid;
  grid-template-areas:
    "account user"
    "logo menu"
    "slogan slogan";
}
@media screen and (min-width: 768px) {
  .region--branding {
    display: grid;
    grid-template-areas:
      "logo slogan user"
      "logo slogan account";
  }
}
#block-slogan-2 {
  font-size: var(--s0);
  padding: var(--s1);

  grid-area: slogan;
/*  border: 7px dotted var(--mullberry);
  border-top: 0;
  border-radius: 13px;*/
}

.block-system-branding-block {
  grid-area: logo;
}

#block-socialerdfest-accountheaderblock {
  grid-area: account;
}

.block--user-menu {
  grid-area: user;
  margin-left: auto;
  align-self: center;
}

.navbar-user li {
  font-size: var(--s1);
}

.navbar-user li a {
  text-decoration: none;
  display: block;
  padding: var(--s-1) var(--s2);
  font-weight: normal;
}

.navbar-user li a:hover {
  color: var(--active);
}

.slogan {
  line-height: var(--s1);
  margin: 0;
}

/* Erdfest Formular */

.socialerdfest--sky #block-socialerdfest-pagetitleblock-content {
  display: none;
}


/* Group Site */

/* Theo Gottwald: Zahlen verstecken */

.block-group-statistic-block .card__counter,
.block-profile-statistic-block .card__counter {
  display: none;
}

/* Anmeldeblock verschönern */
.socialerdfest--sky .block-profile-statistic-block, .socialerdfest--sky .block-group-statistic-block {
  background: var(--white);
}

.card__actionbar {
  margin-top: -1rem;
}

/* Themenblock verstecken */
#block-socialerdfest-views-block-latest-topics-group-topics-block,
#block-socialerdfest-views-block-topics-block-user-topics {
  display: none;
}
.view-gruppengallerie .field__items {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.view-gruppengallerie .field--item {
  max-width: 372px;
}

.group .teaser__tag {
  display: none !important;
}
.hero__bgimage-overlay {
  /*background: none !important;*/
  background: linear-gradient(rgba(0,0,0,0.1) 0%,rgba(39,185,163,0.7) 100%);
}

/* no border around content column */
.view-group-information .card {
  box-shadow: none;
}
/* Account Header Menu */
#block-socialerdfest-accountheaderblock .navbar-nav {
  justify-content: flex-end;
}
.navbar-nav li {
  margin: 0 !important;
}
.navbar-user > li > a, .navbar-user > li > button, .navbar-user .navbar-nav > li > a, .navbar-user .navbar-nav > li > button {
  padding: 13px 10px 8px;
  height: 50px;
}
.navbar-nav__icon {
  fill: var(--primary);
}
.navbar-nav__icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  pointer-events: none;
}
.navbar-nav > li > a, .navbar-nav > li > button {
  line-height: 24px;
}
[role="button"] {
  cursor: pointer;
}

/* Edit-Button not overlapping contextual links */
.hero-action-button {
  top: 2rem;
  right: 2rem;
}

/* fix weird position while absolutely referencing the icon as a workaround */
.hero-action-button .btn {
  display: inline-flex;
}

.socialerdfest--sky.path-group .cover-wrap:not(.cover-wrap--course-statistic) h1 {
  font-size: var(--s5);
  line-height: 1.25;
  margin-bottom: var(--s5);
}
.socialerdfest--sky.path-user .cover-wrap, .socialerdfest--sky.path-group .cover-wrap {
  max-width: 1450px;
  justify-content: end;
}

/* Lightbox Gallerie on group pages */
.blazy--slick-lightbox .field--label {
  display: none;
}

.blazy__slick-lightbox {
  display: flex;
  justify-content: center;
}

.blazy__caption {
  max-width: 372px;
  margin: 0 auto;
  margin: calc(-1 * var(--s1)) 9px var(--s1) 9px;
  font-size: var(--s0);
}

.blazy__caption p {
  line-height: 1.2;
  margin: var(--s-1) 0;
}

/* margin-bottom without caption */
.media--blazy {
  margin-bottom: var(--s3);
}

/* User Registration / Login */
#auth_box {
  width: 50%;
  min-width: 320px;
}

#auth_box .help-block {
  font-size: var(--s1);
}

/* Private Message Site */
.path-private-messages .region--content {
  max-width: 100%;
  flex: 0 0 100%;
}

.path-private-messages .region--complementary {
  display: none;
}

/* Wartungsmodus - might affect other things quickfix */
.maintenance-page .navbar-default {
  background: #fff;
}
.maintenance-page .logo {
  display: flex;
  justify-content: center;
}
.maintenance-page img {
  width: 50%;
}

/* temporarily disable group functions */

.path-group .navbar-secondary {
  display: none;
}


/* In Webseite enthaltenes Stil-Dokument #16 | https://erdfest.org/de/group/7/about */

#block-socialerdfest-group-statistic-block {
  display: none;
}

#block-socialerdfest-views-block-upcoming-events-upcoming-events-group {
  display: none;
}

#block-socialerdfest-views-block-group-members-block-newest-members {
  display: none;
}

.region--complementary-bottom .block-views {
  margin-top: 0;
}