/* css styles */
.button {
  width: 15%;
  font-style: bold 14px Arial;
  text-decoration: none;
  background-color:  #08312a;
  color: #00E47C;
  margin: 5px;
  padding: 10px 14px;
  border-top: 1px solid #002b36;
  border-right: 2px solid #002b36;
  border-bottom: 2px solid #002b36;
  border-left: 1px solid #002b36;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .button {
    font-size: calc(2vw);
  }
}

/* adjust other subpages of davinci accordingly */
body {
  color: #08312A;
  background-color: #E5E3DE;
}

/* ##### general style modifications ##### */
p {
  margin: 0;
}

a {
  color: #08312A; /* default: blue */
}

a:hover {
  font-weight: bold;
}

.navbar a:hover {
  font-weight: normal;
}



/* ##### modifcation of TOC ##### */

/* active: selected topic */
#TOC a:hover, #TOC a.active {
  color: #08312A !important;
}

#TOC a.active {
  /* thin border on left side of topic */
  border-left: 1px solid #08312A !important;
  font-weight: bold;
}



/* ##### grid layout ##### */

/* grid for general packages */
.generalgrid {
  /* 1fr: all columns same width, 400px at minimum */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* grid for modules */
.modulegrid {
  /* auto-fill: "empty" columns have same width as columns with content */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.generalgrid, .modulegrid {
  display: grid;
  gap: 45px 15px; /* between rows, columns */
}



/* ##### textmodule layout for general davinci packages ##### */

/* module size depends on the amount of text displayed */
.textmodule {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* actual content below header */
.textcard {
  border-radius: 10px;
  background-color: white;
  color: #08312A;
  padding: 10px; /* top right bottom left */
  font-size: 16px;
  flex: 1;
  text-align: justify;
  hyphens: auto;
  line-height: 140%;
  border: 2px solid #08312A; /* border in BI color */
}



/* ##### module layout ##### */

/* module contains header (heading, subheading) and card (card-front [img, usecase], card-back) */
.module {
  height: 360px;
  width: 100%;
}

.header{
  height: 70px;
  width: 100%;
  text-align: center;
}

/* adjust height of card */
.card, .card-inner, .card-front, .card-back {
  height: 290px;
  width: 100%;
}



/* ##### header ##### */

.heading {
  font-size: 1.35rem; /* ~ h4 */
  font-weight: bold;
}
.subheading {
  font-size: 1.15rem; /* ~ h5 */
}



/* ##### card ##### */
/* source: https://prismic.io/blog/css-hover-effects (6. Double-sided card) */

.card {
  perspective: 1600px; /* flat turn of card (lower values) vs. "3D-ish" turn (higher values)  */
  border: none;  /* without this command the card has a thin border on the canvas (visible while card is turning) */
}

.card-inner {
  position: relative;
  transition: transform 0.75s /* time until tile has fully turned */
  cubic-bezier(0.4, 0, 0.2, 1); /* changes in acceleration while turning */
  transform-style: preserve-3d ;
}

/* card turns when hovering over .usecase or .card-back */
.card:has(.usecase:hover) .card-inner,
.card:has(.card-back:hover) .card-inner {
transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute; /* front and back exactly on top of each other */
  backface-visibility: hidden; /* hide opposite side of card */
  overflow: hidden; /* hide parts of image that do not fit parent */
  background-color: white; /* necessary so all image seem like they fit */
  border-radius: 10px;  /* higher values: rounder corners */
  border: 2px solid #08312A; /* border in BI color */
}

.card-front img {
  width: 100%;
  height: 210px !important;
  object-fit: contain; /* contain: image is not cut off if it does not object-fit (opposite: cover) */
  display: block; /* no margin below picture */
  cursor: zoom-in; /* Cursor changes by hovering over the tiles */
}

.usecase {
  position: relative;
  height: 80px;
  padding-top: 15px !important;
}

.card-back {
  transform: rotateY(180deg); /* as in documentation */
  text-align: justify;
  hyphens: auto;
  overflow-y: auto; /* shows scrollbar only when text is longer than card */
}

/* text formatting of usecase and card-back */
.usecase, .card-back {
  font-size: 16px;
  color: #00E47C;
  background-color: #08312A;
  cursor: pointer;
  line-height: 140%;
  padding: 10px;
}



/* ##### carousel ##### */

.carousel-indicators {
  bottom: -20px; /* moves carousel indicators lower */
  margin-bottom: 0;
}

.carousel-dark .carousel-indicators [data-bs-target] {
background-color: #F6F5F3;
}



/* ##### use case filter buttons ##### */

/* button size depends on word length */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 35px;
}

.tag {
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  background: #08312A;
  color: #00E47C;
  cursor: pointer;
  white-space: nowrap;
  font-size: 15.5px;
}

.tag:hover, .tag:active {
  background: #00E47C;
  color: #08312A;
  font-weight: bold;
}