html {
  font-size: 16px;
  font-family: 'Prompt', sans-serif;
  --maxwidth: 1200px;
  --white: white;
  --light-gray: #c3c3c3;
  --dark-gray: #7d7d7d;
  --red: #913832;
  --color-good: darkgreen;
  --color-bad: darkred;
  --background: #f2f2f2;
  --shadow-basic: 0px 1rem 1rem rgba(0, 0, 0, 0.03);
  --shadow-pressed: 0px 0.5rem 0.5rem rgba(0, 0, 0, 0.05);
}

/* chrome button does not inherit font family from html, cool */
button {
  font-family: 'Prompt', sans-serif;
}

/* media queries */

/* up to XS breakpoint - mobile screen */
@media screen and (max-width: 576px)  {
  /* small mobile header */
  header {
    height: 5rem !important;
  }
  /* single column apartment list */
  .apartments-list {
    grid-template: auto / auto;
  }
  /* single column filters controls */
  .filters-controls-container {
    grid-template: auto / auto;
  }
  /* single column footer links */
  .footer-nav {
    flex-direction: column;
  }
}

/* up to S breakpoint - mobile and tablet screen */
@media screen and (max-width: 768px)  {
  /* hamburger navigation */
  .nav-desktop {
    display: none !important;
  }
  .nav-toggle {
    display: block !important;
  }
  /* single column display for details  */
  .details-grid {
    grid-template-areas: 
      'header'
      'image'
      'description'
      'form'
      'button';
  }
  /* single column display for details placeholder (no form) */
  .details-placeholder-grid {
    grid-template-areas: 
      'header'
      'image'
      'description'
      'button';
  }
  /* hack to fix overlapping image with cover */
  .details-description {
    margin-top: 1rem;
  }
}

/* over XS breakpoint - tablet and desktop screens */
@media screen and (min-width: 576.01px) {
  /* filter controls in 2 columns */
  .filters-controls-container {
    grid-template: auto / auto auto;
  }
}

/* over S breakpoint - tablet and desktop screens */
@media screen and (min-width: 768.01px) {
  /* 2 column details */
  .details-grid {
    grid-template-columns: 1.3fr 1.3fr 0.8fr 0.8fr 0.8fr;
    grid-template-areas: 
      'header header image image image'
      'description description image image image'
      'form form image image image'
      'button button image image image';
  }
  /* 2 column details placeholder (no form) */
  .details-placeholder-grid {
    grid-template-columns: 1.3fr 1.3fr 0.8fr 0.8fr 0.8fr;
    grid-template-areas: 
      'header header image image image'
      'description description image image image'
      'button button image image image';
  }
  /* two columns apartments list */
  .apartments-list {
    grid-template: auto / 1fr 1fr;
  }
}

/* over L breakpoints - large screens */
@media screen and (min-width: 1080.01px) {
  /* three columns apartments list */
  .apartments-list {
    grid-template: auto / 1fr 1fr 1fr;
  }
}

/* generic element styling */

p {
  margin: 0;
  padding: 0;
}


hr {
  border: none;
}

body {
  margin: 0;
  background-color: var(--background);
}

a {
  color: black;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.5s ease;
}

a:hover {
  color: var(--red)
}

/* image background for main section */

main {
  background-image: url('/img/background.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #f2f2f2;
}

/* header styling */

header {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 6rem;
  margin: 0;
  background-color: var(--white);
  box-shadow: var(--shadow-basic);
}

.header-container {
  margin: auto;
  height: 100%;
  max-width: 1100px;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-text {
  margin-right: 2rem;
}

.company-name {
  font-size: 1.8rem;
  font-weight: 300;
}

.company-name > strong {
  font-weight: 700;
}

.nav-desktop {
  font-size: 1.2rem;
  width: 100%;
  max-width: 24rem;
  display: flex;
  justify-content: space-between;
}

.nav-toggle {
  display: none;
  height: 2rem;
  width: 2rem;
  border: none;
  background: none;
  cursor: pointer;
}

.nav-toggle > img {
  position: relative;
  height: 2rem;
  width: 2rem;
  transition: opacity 0.5s;
}

.nav-close-icon {
  top: -2.1rem;
}

.nav-mini {
  position: fixed;
  background-color: var(--white);
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 1.8rem;
  padding-top: 1rem;
}

.nav-mini > a {
  margin: 1rem 0;
  display: block;
}

/* app styling */

.apartments-list {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: grid;
  column-gap: 2rem;
  padding: 2rem;
  box-sizing: border-box;
}

.list-item {
  box-sizing: border-box;
  border-radius: 1rem;
  background: var(--white);
  margin: 1rem 0;
  padding: 1.5rem 2rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.list-item > i {
  font-size: 2rem;
}

.available {
  color: var(--color-good)
}

.not-available {
  color: var(--color-bad)
}

.list-item-header {
  font-size: 1.2rem;
}

.list-item-type {
  color: var(--light-gray);
}

.list-item-icons {
  font-size: 0.8rem;
  color: var(--light-gray);
}

.list-item-icons > * {
  margin-right: 0.5rem;
}

/* input elements styling */

/* range styling made easier by slightly outdated
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

input[type="range"] {
  appearance: none;
  width: 100%;
  background: transparent;
  -webkit-appearance: none;
}

/* input[type=range]::-webkit-slider-thumb {
  appearance: none;
} */

/* GENERAL */
input[type=range]:focus {
  outline: none;
}

/* FIREFOX */

input[type=range]::-moz-range-thumb {
  border: 1px solid #000000;
  height: 1rem;
  width: 1rem;
  border-radius: 100%;
  background: white;
  cursor: pointer;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  background: black;
  cursor: pointer;
}

/* CHROME */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 1rem;
  width: 1rem;
  border-radius: 100%;
  background: white;
  cursor: pointer;
  margin-top: -0.5rem;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  background: black;
  cursor: pointer;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: black;
  width: 100%;
  height: 1px;
  background: black;
  cursor: pointer;
}

/* EDGY CHROMIUM */

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
  height: 1px;
  background: black;
  cursor: pointer;
}

/* checkbox styling, modified bootstrap 5 approach
thank mr botstrop, but still praying to css deities for real svg support */

input[type="checkbox"] {
  width: 2.5rem;
  height: 1.25rem;
  vertical-align: top;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='none' stroke='%23000' stroke-width='0.5' /%3e%3c/svg%3e");
  background-size: contain;
  transition: background-position .15s ease-in-out;
  border: 1px solid black;
  border-radius: 1.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-position: left center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000' stroke='%23000' stroke-width='0.5' /%3e%3c/svg%3e");
}

/* filters */

.filters {
  display: block;
  width: 100%;
  background-color: var(--white);
  position: absolute;
  box-shadow: var(--shadow-basic);
}

.filters-controls-container {
  margin: auto;
  max-width: 576px;
  display: grid;
  column-gap: 3rem;
  row-gap: 1.5rem;
  padding: 1.25rem 2rem 2rem 3rem;
}

.filter-range-container > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.filter-range-container > input {
  width: 100%;
}

.filter-checks-container > div {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}

.filter-checks-container > div > * {
  display: block;
}

.filters-header {
  background-color: var(--white);
  width: 100%;
  padding: 1rem 0;
}

.filters-header > div {
  margin: auto;
  width: 18rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filters-header > div > i {
  color: black;
  font-size: 1.5rem;
}

.filters-count {
  border: 1px solid black;
  padding: 0.25rem 2rem;
  border-radius: 2rem;
  text-align: center;
  width: 8rem;
}

/* vue transition animation classes */

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

/* chevron button rotation */

.rotateable {
  transition: transform 0.5s ease;
}

.rotated {
  transform: rotate(180deg);
}

/* apartment details section styling */

/* grid placement of details items */
.details-grid-header {
  grid-area: header;
}
.details-grid-description {
  grid-area: description;
}
.details-grid-form {
  grid-area: form;
}
.details-grid-button {
  grid-area: button;
}
.details-grid-image {
  grid-area: image;
}

.responsive-grid {
  display: grid;
  gap: 0 4rem;
}

.details {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
}

/* .details > * {
  box-sizing: border-box;
} */

.details > div {
  margin-bottom: 1.5rem;
}

.details-header {
  margin-bottom: 1rem;
}

.details-header-text {
  font-weight: 400;
  font-size: 2rem;
  margin: 0;
}

.details-subheader-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--dark-gray);
}

.details-subheader-icons {
  font-size: 1rem;
}

.details-subheader-icons > i {
  margin-left: 0.5rem;
}

.details-image {
  width: 100%;
  height: 100%;
  margin-bottom: 1rem;
}

.details-image-main {
  width: 100%;
  height: 100%;
  background-size: cover;
  object-fit: cover;
  border-radius: 1rem;
  min-height: 20rem;
}

.details-description {
  font-size: 1rem;
  text-align: justify;
}

.details-form {
  margin-top: 1rem;
  font-size: 1.2rem;
}

.separator {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
}

.separator > hr {
  width: 80%;
  height: 1px;
  background-color: var(--light-gray);
}

.separator-wide {
  width: 100%;
  height: 1px;
  background-color: black;
}

.details-form > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.details-form > div > p:last-child {
  text-align: right;
  width: 10rem;
}

.details-button {
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}

.details-button > button {
  position: relative;
  border: none;
  background: var(--white);
  font-size: 1.2rem;
  padding: 0 3rem;
  height: 3em;
  border-radius: 3rem;
}

/* footer styling */

footer {
  font-weight: 400;
  width: 100%;
  background-color: var(--white);
  margin: 2rem auto 0 auto;
  padding: 2.5rem 0;
}

.footer-container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.footer-nav {
  max-width: 768px;
  margin: auto;
  font-size: 1rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.footer-nav > a{
  margin: 0.5rem 0;
  display: block;
}

.footer-text {
  max-width: 576px;
  margin: auto;
  text-align: center;
}

/* animation helper classes */

.hidden {
  display: none !important;
}

.no-overflow {
  overflow-y: hidden;
}

.invisible {
  opacity: 0;
}

.visible {
  opacity: 1;
}

.toggle-visibility {
  transition: opacity 0.5s ease;
}

.toggle-display {
  transition: opacity 0.5s;
}

/* general helpers */

.button-primary {
  transition: outline 0.5s ease, box-shadow 0.5s ease;
  outline: solid 1px white;
  box-shadow: var(--shadow-basic);
}

.hoverable {
  cursor: pointer;
}

.hoverable:hover {
  /* outline: solid 1px #ddd; */
  outline: solid 1px #dfd2d1;
  box-shadow: var(--shadow-pressed);
}

.click {
  cursor: pointer;
}