/*
 * Purpose: Main stylesheet for Zoffice web application.
 * Author:  Magnus Johansson <ma@arachne.se>
 * Created: July 2022
 *
 * Dependencies: Most of these rules are assumed to work on their own, but
 * have been developed on top of the (minimal) Pure CSS framework
 * (https://purecss.io)/, which includes Normalize.css
 * http://necolas.github.io/normalize.css/.
 *
 * Originally derived from a Pure CSS example:
 * https://github.com/pure-css/pure/blob/master/site/static/layouts/marketing/styles.css
 *
 * Note that the rules may be overridden for larger devices in the final
 * sections of this file.
 */

/*
 * -- BASE STYLES --
 */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

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

body {
  line-height: 1.5;
  font-size: 15px;
  font-family: 'AsapRegular', 'Helvetica Neue', Helvetica, sans-serif;
  /* some alternatives to Asap: AzeriSansRegular, UacariLegacyRegular */
  font-weight: normal;
  font-style: normal;
}

address {font-style: normal; display: inline;}

/*
 * -- LAYOUT STYLES --
 * Rules for basic formatting and shapes.
 */
.auto-margin {
  margin-left: auto;
  margin-right: auto;
}

.is-center {text-align: center;}
.is-left   {text-align: left;}
.is-right  {text-align: right;}

.border-blue   {border: 2px dashed blue;}
.border-gray   {border: 2px dashed gray;}
.border-green  {border: 2px dashed green;}
.border-red    {border: 2px dashed red;}
.border-yellow {border: 2px dashed yellow;}

/*
  .border-soft {border: 2px solid rgba(0,50,0,0.1);}
 */

.shadow {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1),
              0 3px 5px 0 rgba(0, 0, 0, 0.1);
}

.shadow-lrg {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
              0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.l-box {padding: 1em;}
.l-box.rounded, img.rounded {border-radius: 8px;}

.l-box.irregular-1, img.irregular-1 {
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  /* this may prevent background images getting outside the irregular box */
  background-origin: content-box;
}

.l-box.irregular-2, img.irregular-2 {
  border-radius: 25px 150px 205px 155px / 150px 55px 35px 45px;
  background-origin: content-box;
}

.l-box.irregular-3, img.irregular-3 {
  border-radius: 25px 255px 25px 200px / 255px 25px 205px 30px;
  background-origin: content-box;
}

.l-box.irregular-4, img.irregular-4 {
  border-radius: 215px 25px 175px 20px / 25px 205px 20px 245px;
  background-origin: content-box;
}

.l-ellipse {
  padding: 10%;
  text-align: center;
}

.l-ellipse.w50 {
  border-radius: 80% 30% 50% 50% / 50%;
  width: 50%;
  margin: 3em auto;
}

.l-ellipse.w60 {
  border-radius: 50% 50% 50% 70% / 50% 50% 70% 60%;
  width: 60%;
  margin: 2em auto;
}

.l-ellipse.w70 {
  border-radius: 40% 40% 50% 40% / 30% 50% 50% 50%;
  width: 70%;
  margin: 5em auto;
}

.l-ellipse.w100 {
  border-radius: 50%;
  width: 100%;
  margin: 1em -3em;
}

.l-ellipse.sitemap-container {
  border-radius: 40% 50% 50% 40% / 40% 40% 30% 50%;
  width: 70%;
  margin: 5em auto;
  padding: 1%;
}


/*
 * -- LINK STYLES --
 */
a {font-weight: bold;}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline dotted 3px;}


/*
 * -- PURE BUTTON STYLES --
 */
.pure-button {
  padding: 0.5em 2em;
  border-radius: 5px;
}

a.pure-button-primary {
  border-radius: 5px;
  font-size: 120%;
  text-decoration: none;
}


/*
 * -- BACKGROUND AND BORDER IMAGES --
 */
.bg-img {
  background-repeat: no-repeat;
}

.bg-img.bg-apple {
  background-image: url('/images/undraw_handcrafts_apple_branch.svg');
  background-size: 20px;
}

.bg-img.bg-tree {
  background-image: url('/images/undraw_handcrafts_small_tree.svg');
  background-size: 8px;
}

.bg-img.bg-leaf {
  background-image: url('/images/undraw_handcrafts_leaf.svg');
  background-size: 20px;
}

.bg-img.bg-flower {
  background-image: url('/images/undraw_handcrafts_flower.svg');
  background-size: 20px;
}

.bg-img.bg-bird {
  background-image: url('/images/undraw_handcrafts_bird.svg');
  background-size: 50px;
}

.sitemap-container .bg-img {
  margin: 5em 3em;
  background-image: url('/images/zof-background3.svg');
  background-position: center 50%;
  background-repeat: repeat-y, no-repeat;
  background-size: contain;
}

.news-container.border-news {
  border: solid transparent;
  border-image: url('/images/zof-background2.svg');
  border-image-slice: 0% 45% 0% 60%;
  border-image-repeat: round;
  border-width: 20px 40px 20px 40px;
}

.bg-pos-lt  {background-position: left top;}
.bg-pos-lct {background-position: 25% top;}
.bg-pos-ct  {background-position: center top;}
.bg-pos-rct {background-position: 75% top;}
.bg-pos-rt  {background-position: right top;}
.bg-pos-lc  {background-position: left center;}
.bg-pos-cc  {background-position: center center;}
.bg-pos-rc  {background-position: right center;}
.bg-pos-lb  {background-position: left bottom;}
.bg-pos-lcb {background-position: 25% bottom;}
.bg-pos-cb  {background-position: center bottom;}
.bg-pos-rcb {background-position: 75% bottom;}
.bg-pos-rb  {background-position: right bottom;}


/*
 * -- COMMON PAGE COMPONENT STYLES --
 */
.main-menu {
  border-radius: 0 0 8px 8px;
  box-shadow: 0 1px 1px 0px rgba(0,0,0,0.15);
  margin-bottom: 2px;
  font-size: smaller;
}

.main-menu li a:focus {background: none;}

.main-menu li a:hover {
  background: none;
  border: none;
}

/*
  .main-menu .pure-menu-disabled a {color: #6FBE93;}
 */

.main-menu .pure-menu-disabled a:hover,
.main-menu .pure-menu-disabled a:focus {
  text-decoration: none;
}

main>footer {
  padding: 5px 2em;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 1px 1px 2px rgba(0,0,0,0.15);
  line-height: 1.2;
  font-size: smaller;
}

main>footer ul {
  list-style-type: none;
  padding: 0;
}

footer p.pippi {padding-right: 60px;}

.logo {
  margin: 1em auto;
  text-align: center;
}


/*
 * -- MAIN CONTENT STYLES --
 */
.main-container {
  /* padding-top: 2em; */
}

.content {
  margin: 0 2em;
}

.article-container {
  margin: 1em;
  padding: 1em;
}

article>footer, section>footer {
  line-height: 0.8;
  font-size: smaller;
  border: 3px #999;
  border-top-style: double;
}

article>footer {
  margin: 2em 2em 3em;
}

section>footer {
  margin: 1em;
}

article>footer>ul, section>footer>ul {
  list-style-type: none;
  margin: 0;
  padding: 0 1em;
}

article>footer>ul>li, section>footer>ul>li {
  display: inline;
}

article h1.bg-img {
  padding: 0.5em 36px;
}

article .main-content {
  margin: 0 auto;
  max-width: 40em;
}

.news-container {
  margin: 3em 1em;
  padding: 1em 1em 2em;
}

.news-container section.card {
  margin-top: 2em;
  margin-bottom: 2em;
}

.sitemap-container {
  margin: 3em 3em;
  padding: 3em 1em;
}

.card {
  margin: 1em 0.5em;
}

.card .card-title {
  display: inline;
  padding: 2px 4px;
  margin-left: 3em;
  border-radius: 5px;
  font-size: smaller;
  text-transform: uppercase;
}


/*
 * -- SLIDESHOW STYLES --
 */
.slide-container {
  /* center content */
  /*
    display: flex;
    justify-content: center;
    align-items: center;
   */

  /* the "scroll-over" effect */
  position: fixed !important;
  top: 4vh;
  left: 0;
  width: 100%;
  height: 88vh;
  overflow: hidden;
  /*  z-index: 1; */
}

ul.slide-list {
  /* center content */
  /*
    display: flex;
    align-items: center;
    justify-content: center;
   */

  list-style-type: none;
  margin: 0;
  padding: 0;
}

.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  margin: 0;
  border-radius: 10px;
  /* padding: 1em; */
  /* border: 2px solid rgba(0,50,0,0.1); */
  text-align: center;

  opacity: 0;
  animation: xfade 30s linear infinite 0s;
}

.slide-list li:nth-child(1) {
  animation-delay: 0.5s;
}
.slide-list li:nth-child(2) {
  animation-delay: 10.5s;
}
.slide-list li:nth-child(3) {
  animation-delay: 20.5s;
}

/* Slideshow concept derived from: https://codepen.io/arrive/pen/EOGyzK */
@keyframes xfade {
  0%   {opacity: 0; animation-timing-function: ease-in;}
  8%   {opacity: 1; animation-timing-function: ease-out;}
  29%  {opacity: 1}
  40%  {opacity: 0}
  100% {opacity: 0}
}

.slide img {
  border-radius: 10px;
  /* keep img scaled within .slide-container - may need more adjustments
   * for different screen sizes */
  max-height: 70vh;
  max-width: 90vw;
}

.slide .caption {
  margin: 0.5em auto;
  font-size: 0.8em;
  line-height: 0.9;
}

.slide .caption .title {
  font-style: italic;
}

.slide .numbertext {
  position: absolute;
  bottom: 0;
  padding: 0 1em;
  font-size: 0.8em;
}


/*
 * -- TRANSFORMATIONS AND ANIMATIONS --
 *
 */
.shake:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;
  /* When the animation is finished, start again */
  animation-iteration-count: 1;
}

@keyframes shake {
  0%   {transform: translate(1px, 1px) rotate(0deg);}
  10%  {transform: translate(-1px, -2px) rotate(-1deg);}
  20%  {transform: translate(-3px, 0px) rotate(1deg);}
  30%  {transform: translate(3px, 2px) rotate(0deg);}
  40%  {transform: translate(1px, -1px) rotate(1deg);}
  50%  {transform: translate(-1px, 2px) rotate(-1deg);}
  60%  {transform: translate(-3px, 1px) rotate(0deg);}
  70%  {transform: translate(3px, 1px) rotate(-1deg);}
  80%  {transform: translate(-1px, -1px) rotate(1deg);}
  90%  {transform: translate(1px, 2px) rotate(0deg);}
  100% {transform: translate(1px, -2px) rotate(-1deg);}
}

.zoom:hover {transform:scale(1.03);}


/*
 * -- COMMON COLORS --
 * See app-theme-*.css for theme specific colors. Note that the rules below
 * need to be loaded after theme-*.css to override w3-theme !important
 * color rules (when the w3-theme is used for background color).
 */
.color-theme-gray-l5 {color:#f7f8f8 !important;}
.color-theme-gray-l4 {color:#e6e8e8 !important;}
.color-theme-gray-l3 {color:#ccd2d2 !important;}
.color-theme-gray-l2 {color:#b3bbbb !important;}
.color-theme-gray-l1 {color:#99a4a5 !important;}
.color-theme-gray    {color:#7f8c8d !important;}
.color-theme-gray-d1 {color:#728081 !important;}
.color-theme-gray-d2 {color:#667273 !important;}
.color-theme-gray-d3 {color:#596464 !important;}
.color-theme-gray-d4 {color:#4c5556 !important;}
.color-theme-gray-d5 {color:#404748 !important;}

/*
  .bg-theme-gray {
    / * background-color:#7f8c8d !important; * /
    background-color:#e6e8e8  !important;
  }
 */


/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * Adjustments for medium and large sized devices.
 */
@media (min-width: 48em) {
  /* Increase the body font size */
  body {font-size: 18px;}
}

@media (min-width: 62em) {
  main>footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .main-container {padding-bottom: 6em;}

  .news-container {margin-left: 2em;}
}


/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * Adjustments for large sized devices.
 */
@media (min-width: 78em) {
  .article-container {
    padding: 1em 2em;
  }

  .sitemap-container {
    margin: 3em 5em;
  }
} 


/*
 * -- ORIENTATION ORIENTED MEDIA QUERIES --
 * Adjustments for screen orientation.
@media only screen and (orientation: portrait) { }
 */