/* Screen Sizes https://tailwindcss.com/docs/responsive-design
xs	25rem (400px)	@media (width >= 40rem) { ... }
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }
*/
/* 
only for stuff which is easier to write in sass than tailwind

@include lg() {}

*/
:root {
  --height-navbar: 64px;
  --height-navbar-sticky: 48px;
  --footer-border-width: 110px;
  --footer-border-slice: 110;
}
@media (width >= 48rem) {
  :root {
    --height-navbar: 80px;
    --height-navbar-sticky: 64px;
  }
}
@media (width >= 80rem) {
  :root {
    --height-navbar: 100px;
    --height-navbar-sticky: 80px;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.site-footer {
  border-top: var(--footer-border-width) solid;
  border-image-slice: var(--footer-border-slice) fill;
  border-image-width: var(--footer-border-width);
  border-image-source: url(../gfx/footer-blob-top.svg);
  margin-top: calc(var(--footer-border-width) * -1);
}

main .layout-section:last-child {
  margin-bottom: 0;
}
main .layout-section:last-child .layout {
  margin-bottom: var(--footer-border-width);
}

.cover-backdrop {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  object-fit: cover;
  filter: blur(8px);
}

h1 u, h2 u, h3 u, h4 u,
.text-style-h1 u, .text-style-h2 u, .text-style-h3 u, .text-style-h4 u {
  text-decoration: none;
  box-shadow: inset 0 -0.3em var(--color-secondary);
}

.bg-secondary h1 u, .bg-secondary h2 u, .bg-secondary h3 u, .bg-secondary h4 u,
.bg-secondary .text-style-h1 u, .bg-secondary .text-style-h2 u, .bg-secondary .text-style-h3 u, .bg-secondary .text-style-h4 u {
  box-shadow: inset 0 -0.3em var(--color-primary);
}

.bg-left-center {
  background-position: left center;
}

#home-hero {
  background-position: center bottom 1rem;
}
@media (width >= 48rem) {
  #home-hero {
    background-position: left -5vw center;
    background-size: auto 90%;
  }
}
@media (width < 48rem) {
  #home-hero .layout {
    gap: 0;
  }
}
#home-hero .hero-image {
  position: relative;
  z-index: 10;
}
@media (width < 48rem) {
  #home-hero .hero-image {
    margin-bottom: -2rem;
  }
}
#home-hero .hero-image picture {
  max-width: 70%;
}
@media (width >= 64rem) {
  #home-hero .hero-image picture {
    max-width: 60%;
  }
}

.site-footer .footer-menu-row {
  background-image: url(../gfx/blob-footer.svg);
  background-size: 150%;
  background-position: top center;
  background-repeat: no-repeat;
}
@media (width >= 48rem) {
  .site-footer .footer-menu-row {
    background-size: 200%;
  }
}
.site-footer .footer-menu-row .footer-menu .btn {
  font-size: 0.85em;
  font-family: var(--font-theme);
  font-weight: bold;
  letter-spacing: 0;
  text-decoration: underline;
  color: white;
  background-color: var(--color-secondary);
  padding: 0.5rem 1rem;
}
.site-footer .footer-menu-row .footer-menu .btn:hover {
  color: var(--color-primary);
}