/*
Theme Name: dig_mit!
Theme URI: https://digmit.tantemalkah.at
Author: Andrea Ida Malkah Klaura <jackie@tantemalkah.at>
Author URI: https://tantemalkah.at
Description: A mobile-first theme for the dig_mit! project by LEFÖ.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digmit
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* =====================================
            dig_mit! colours
   =====================================

dig_mit mint:     #7BBE95;
dig_mit orange:   #D48028;
dig_mit blue:     #63D2E3;
dig_mit_darkblue: #25569E
dig_mit yellow:   #FCDB67;
dig_mit red:      #F22F57;
dig_mit cheekred: #F0615D;
dig_mit lipsred:  #CB878F;

*/


/* =====================================
                 Fonts
   ===================================== */

@font-face {
  font-family: Orbitron;
  src: url(assets/fonts/Orbitron-Black.otf);
  font-weight: bold;
}

@font-face {
  font-family: Exo2;
  src: url(assets/fonts/Exo2-Regular.otf);
}

@font-face {
  font-family: Exo2;
  src: url(assets/fonts/Exo2-Bold.otf);
  font-weight: bold;
}

@font-face {
  font-family: Exo2;
  src: url(assets/fonts/Exo2-Italic.otf);
  font-style: italic;
}

@font-face {
  font-family: ABeeZee;
  src: url(assets/fonts/ABeeZee-Regular.otf);
}

@font-face {
  font-family: ABeeZee;
  src: url(assets/fonts/ABeeZee-Italic.otf);
  font-style: italic;
}


/* =====================================
           Base color set
   ===================================== */
body {
  color: black;
  background-color: #7BBE95; /* dig_mit_mint */
}

a {
  color: #25569E; /* dig_mit_darkblue */
}
a:hover {
  color: #F0615D; /* dig_mit_cheekred */
}
a:visited {
  color: #63D2E3; /* dig_mit_blue */
}

body > header {
  background-color: white;
}
body > div.header-background-extension {
  height: 12px;
  background-color: #7BBE95;
  background-image:
    linear-gradient(
      white,
      #7BBE95  /* dig_mit mint */
    );
}

body > footer {
  background-color: white;
}
body > div.footer-background-extension {
  height: 12px;
  background-color: #7BBE95;
  background-image:
    linear-gradient(
      #7BBE95,  /* dig_mit mint */
      white
    );
}

/* =====================================
           General Page Layout
   ===================================== */

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'ABeeZee', sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Exo2', sans-serif;
}


body > header > div.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 1em;
}
body > header > div.narrow-header {
  max-width: 325px;
}
body > header > div.wide-header {
  display: none;
}

body > header > div.container > div:last-child {
  flex-grow: 1;
}

body > main {
  padding: 1em 0;
}

body > footer {
  padding-top: 0.5em;
}

.container {
  max-width: 460px;
  margin: auto;
}

@media screen and (min-width: 480px) {
  .container {
    max-width: 450px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 840px) {
  .container {
    max-width: 800px;
    margin: 0 auto;
  }

  body > header > div.wide-header {
    display: flex;
  }
  body > header > div.narrow-header {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}


/* =====================================
                 Header
   ===================================== */

#site-title {
  display: flex;
  justify-content: flex-end;
  padding: 0.33em 0;
}

#site-title h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 34px;
  font-weight: bold;
  margin: 0;
}

#site-title h1 a {
  text-decoration: none;
  color: inherit;
}

#site-title h1 a span.dashicons {
  font-size: 1.5em;
  margin-left: -0.1em;
  margin-right: -0.1em;
  width: auto;
  height: auto;
  color: #D48028; /* dig_mit orange */
  vertical-align: middle;
}

#site-title h1 a span.dashicons:first-child {
  color: #7BBE95; /* dig_mit mint */
}

#site-nav {
  display: flex;
  justify-content: flex-end;
}

/* main site nav buttons and main menu button */
#site-nav > div:first-child > a,
#site-nav > div:first-child > span,
#site-nav > div:first-child > label {
  display: inline-block;
  color: black;
  background: transparent;
  border: 1px dotted black;
  border-radius: 5px;
  padding: 0.25em;
  margin-left: 0.25em;
  margin-top: 0.5em;
  cursor: pointer;
}
#site-nav > div:first-child > a:hover,
#site-nav > div:first-child > span:hover,
#site-nav > div:first-child > label:hover {
	background-color: #7BBE95; /* dig_mit mint */
}


#site-nav > div > a {
  text-decoration: none;
}

/* the nav containing the main menu items */
#main-nav {
  padding-right: 0;
}
#main-nav ul {
  padding-left: 0;
}

/* hide the checkbox for the main menu and search button */
#main-nav-checkbox,
#search-form-checkbox,
#main-nav-checkbox-wide,
#search-form-checkbox-wide {
  display: none;
}

/* main menu items */
#main-nav-items li {
  list-style: none;
}
#main-nav ul ul {
  padding-left: 1em;
}

#main-nav-items li a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-bottom: 1px solid #333;
  font-weight: bold;
  padding: 0.33em;
  text-decoration: none;
  color: black;
}
#main-nav-items li a:hover {
  background-color: #7BBE95; /* dig_mit mint */
}

#main-nav-items li li a {
  font-weight: normal;
  border-bottom: 0;
  text-align: right;
}

#main-nav-items li li li a {
  font-size: 0.9em;
}

/* toggle visibility of the main menu items */
#main-nav-items { display: none; }
#main-nav input:checked ~ #main-nav-items { display: block; }

/* toggle visibility of the search form */
#search-form form { display: none; }
#search-form input:checked ~ #search-form-tag { display: block; }

#search-form {
  padding: 0.5em 0 0.33em 0;
  text-align: center;
}
#s {
  width: 60%;
}
#searchsubmit {
  border: 1px solid #bbb;
  border-left: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 0.5em;
}


/* the nav containing the extra/highlights menu items */
#highlights-nav {
  padding-right: 0;
}
#highlights-nav-items ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

#highlights-nav-items li {
  display: block;
  list-style: none;
}

#highlights-nav-items li a {
  text-decoration: none;
  color: white;
  font-family: 'Exo2', sans-serif;
  font-weight: bold;
  font-size: 0.9em;
  display: block;
  padding: 0.33em 1.5em 0.5em 1.5em;
  border: 1px dotted black;
  background-color: black;
}
#highlights-nav-items li a:hover {
  background-color: #7BBE95;
}
/* TODO: which color should we use for the highlights-nav-items?
dig_mit mint:     #7BBE95;
dig_mit orange:   #D48028;
dig_mit blue:     #63D2E3;
dig_mit_darkblue: #25569E
dig_mit yellow:   #FCDB67;
dig_mit red:      #F22F57;
dig_mit cheekred: #F0615D;
dig_mit lipsred:  #CB878F;
*/

@media screen and (min-width: 840px) {
  body > header > div.wide-header {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 800px;
  }
}
@media screen and (min-width: 1024px) {
  body > header > div.wide-header {
    max-width: 900px;
  }
}
@media screen and (min-width: 1580px) {
  body > header > div.wide-header {
    max-width: 1320px;
  }
}
@media screen and (min-width: 840px) {
  body > header > div.wide-header > div:first-child {
    display: flex;
    align-items: flex-end;
  }
  body > header > div.wide-header > div:last-child {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    padding-bottom: 0.7em;
  }
  #logo,
  #site-title {
    display: inline;
  }
  #site-title h1 {
    width: max-content;
    font-size: 28px;
  }

  #highlights-nav { display: none; }
  #main-nav {
    width: max-content;

  }
  #main-nav-items { display: block; }
  #main-nav-items ul,
  #main-nav-items ul li a { display: inline; }
  #main-nav-items ul li { display: inline-block; }
  #main-nav ul li a {
    border-bottom: 0;
    padding-bottom: 0.33em;
  }

  #main-nav-items ul li ul {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  #main-nav-items ul li:hover ul,
  #main-nav-items ul li:hover ul li {
    display: block;
    padding: 0.33em;
  }
  #main-nav-items ul li:hover ul li ul {
    display: none;
  }
  #main-nav-items ul li:hover ul li:hover ul {
    display: inline-block;
    width: max-content;
  }

  #site-nav {
    padding-left: 0.5em;
  }

  #search-form {
    width: 100%;
  }
  #s {
    width: inherit;
  }
}

/* =====================================
                 Footer
   ===================================== */

#sidebar-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

#sidebar-footer li {
  list-style: none;
  margin: 0.5em;
  min-width: 300px;
}

body > footer div.container {
  padding: 1em;
}

body > footer div.powered-by {
  text-align: center;
  font-size: 0.8em;
  margin-top: 0.5em;
}
body > footer div.powered-by div {
  display: inline-block;
}

#back-to-top-button {
 display: none;
 position: fixed;
 bottom: 0.5em;
 right: 0.5em;
 z-index: 99;
 cursor: pointer;
 padding: 0.5em;
 background-color: lightgray;
 border: 1px dotted darkgray;
 border-radius: 10px;
 opacity: 50%;
 color: black;
}

#back-to-top-button:hover {
 background-color: #555;
}


/* =====================================
              Front Page
   ===================================== */

main.front-page > div.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

main.front-page > div.container > figure img {
  width: 100%;
  max-width: 300px;
}

@media screen and (min-width: 1580px) {
  main.front-page > div.container {
    max-width: 1500px;
  }
}

main.front-page > div.container > figure {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
main.front-page > div.container > figure:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  transition: background 1s;
  background: white;
}
main.front-page > div.container > figure a,
main.front-page > div.container > figure:hover a:hover,
main.front-page > div.container > figure a:visited {
  color: black;
}

/* =====================================
                 Content
   ===================================== */

/* content of posts and pages (except front page) */
article {
  color: black;
  background-color: white;
  margin: 1em;
  padding: 1em;
  border-radius: 3px;
}

/* images in pages and posts */
main figure {
  background-color: #eee;
  border-radius: 5px;
  padding: 0.33em;
  text-align: center;
}

main figure.wp-block-image figcaption {
  color: black;
  font-family: 'Exo2', sans-serif;
  font-size: 1.15em;
  font-weight: bold;
  margin: 0.33em;
}

main figure.wp-block-image figcaption a {
  text-decoration: none;
}

.wp-block-image img {
  height: auto;
}

article div.wp-block-buttons {
  display: block;
}
article div.wp-block-buttons div.wp-block-button {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: .5em;
}
article div.wp-block-buttons div.wp-block-button a.wp-block-button__link {
  width: 80%;
}
@media screen and (min-width: 640px) {
  article div.wp-block-buttons {
    display: flex;
    justify-content: space-around;
  }
  article div.wp-block-buttons div.wp-block-button {
    width: 75%;
  }
}
@media screen and (min-width: 1024px) {
  article div.wp-block-buttons div.wp-block-button {
    width: 60%;
  }
}