@use './variables.scss' as *;
@use './utils.scss';
@use './animations.scss';

// SASS variables are imported without namespace, but try to always use native
// CSS variables when possible so they can be overrwritten by custom styles

html {
  background-color: var(--prj-bg);
  color: var(--prj-text);

  /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
  font-size: calc(15px + 0.390625vw);
}

body > main {
  max-width: 95vw; /* leave some space in the end by default */
  margin: auto;
  padding: 15px 0;
}

section:not(.clean) {
  /* outline: 1px solid var(--prj-accent-bg); */
  padding: var(--prj-spacing-3);
  background-color: var(--prj-surface-1);
  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
  border-radius: var(--prj-border-radius);
}

section:not(:first-of-type) {
  margin-top: var(--prj-spacing-4);
}

h1,
.fs-1 {
  font-size: 3rem !important;
  margin-top: 0;
  margin-bottom: var(--prj-spacing-3);
}
h2,
.fs-2 {
  font-size: 2.5rem !important;
  margin-bottom: var(--prj-spacing-3);
}
h3,
.fs-3 {
  font-size: 2rem !important;
  margin-bottom: var(--prj-spacing-2);
}
h4,
.fs-4 {
  font-size: 1.5rem !important;
  margin-bottom: var(--prj-spacing-2);
}
h5,
.fs-5 {
  font-size: 1.25rem !important;
  margin-bottom: var(--prj-spacing-1);
}
h6,
.fs-6 {
  font-size: 1rem !important;
  margin-bottom: var(--prj-spacing-1);
}

p {
  margin-bottom: var(--prj-spacing-2);
}

p:last-child {
  margin-bottom: 0;
}

.container {
  max-width: 100%;
}

/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
@each $name, $size in $screen-sizes {
  @media screen and (min-width: $size) {
    body > main {
      max-width: $size;
    }

    .container {
      margin: auto;
      max-width: $size;
    }
  }
}

a {
  color: var(--prj-link-text);
}

ul {
  /* Make the marker position is inside the container */
  list-style-position: inside;
  margin: 0;

  ul {
    margin-left: var(--prj-spacing-3);
  }
}

.list-unstyle {
  list-style: none;
}

img,
video {
  max-width: 100%;
  height: auto;
}

img.respect-width,
video.respect-width {
  max-width: 100%;
  height: auto;
}

img.respect-height,
video.respect-height {
  max-height: 100%;
  width: auto;
}

li:not(:last-child) {
  margin-bottom: var(--prj-spacing-1);
}

.btn {
  padding: var(--prj-spacing-1);
}

.btn-primary {
  background-color: var(--prj--primary-bg);
  color: var(--prj--primary-text);
}

/* Lightgallery iframe fix */
.lg-has-iframe {
  position: absolute;
  top: 0;
  left: 0;
  .lg-object {
    width: 100% !important;
    height: 100% !important;
  }
}

.bg-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    var(--bg-image);
  background-position: center;
  background-size: cover;
  color: var(--prj-text);

  padding: var(--prj-spacing-3);

  .text {
    padding: var(--prj-spacing-2);
    background-color: var(--prj-bg-transparent);

    border-radius: var(--prj-border-radius);
  }
}

a {
  transition: text-shadow 0.2s;
  --anim-shadow-color: var(--prj-accent-bg);

  &:not(.clean):hover {
    text-shadow: 1px 1px 8px var(--anim-shadow-color);
  }
}