/*      --------------------      GENEREL RULES        --------------------      */
/*
    https://www.linkedin.com/pulse/best-practices-writing-clean-maintainable-code-udara-abeythilake/

    "Naming stuff is hard"
    - Use classes instead of id
    - Use Snake Case for naming stuff (snake_case)
    - Use descriptive names ("calculate_average" instead of "avg")
    - Avoid abbreviations ("photo_section" instead of "pt_sec")
    - No reserved keywords ("if", "else" or "for")

    "Make it skim reading proof, to avoid struggels"
    - Use proper indentation (Indent code properly to make it easier to read and follow, such as where loops and conditional statements begin and end)
    - Use whitespace (separate different sections of code with blank lines to make it easier to distinguish)
    - Use comments (not everywere, but where it makes sense to explain stuff)
*/




/* ------------------------------------------ ABOUT GREWUS ------------------------------------------ */

.filter_search_box {
  padding: 1.5rem;
  background-color: var(--Color_secondary_background);
  border-radius: 5px;
  margin: 4rem;
}
.filter_search_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter_search_section_filters {
  display: flex;
  align-items: center;
}
.filter_button {
  display: flex;
  align-items: center;
  height: 2rem;
  padding-left: .5rem;
  padding-right: .5rem;
  border: 1px solid var(--Color_primary_font);
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  font-size: var(--D_small);
  font-weight: normal;
  color: var(--Color_primary_font);
  margin-right: 2rem;
}
.filter_button:hover {
  background-color: #e6e6e6;
}
.filter_icon {
  width: 2rem;
  height: 2rem;
  margin-right: 1.5rem;
}
.filter_search_section_search {
  display: flex;
  align-items: center;
}
.search_input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  border-right: none;
  width: 200px;
  height: 2rem;
  background-color: white;
}
input[type=search] {
  font-family: 'Calibri';
  font-weight: normal;
  font-size: var(--D_body);
  width: 24rem;
  height: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border: none; /* To remove border, or a black border will appear */
  background-color: white;
  border-radius: .5rem 0 0 .5rem;
}
.search_button {
  background-color: var(--Color_primary);
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  height: 2rem;
  padding: .5rem;
}
.search_button .search_icon {
  width: 1rem;
  height: 1rem;
}

/* Sub filters */
.sub_filters {
  display: none;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
}

#area_sub_filters, #subgroup_sub_filters, #group_sub_filters {
  display: none;
}

.sub_filter_button {
  display: flex;
  align-items: center;
  height: 2rem;
  padding-left: .5rem;
  padding-right: .5rem;
  border: none;
  border-radius: 4px;
  background-color: var(--Color_secondary_background);
  cursor: pointer;
  font-size: var(--D_small);
  font-weight: normal;
  color: var(--Color_primary_font);
  margin-right: 2rem;
}
.sub_filter_button:hover {
  background-color: #e6e6e6;
}
.sub_filter_button_text {
  margin-left: .5rem;
}










/* ------------------------- PRODUCT CARDS --------------------------- */

.products_cards {
  margin: 0 4rem 4rem;
  display: flex;
  gap: var(--D_medium);
  row-gap: 2rem;
  flex-wrap: wrap;
}
.products_card_item {
  position: relative; /* Needed for the ribbon */
  flex: 0 1 calc(25% - 1.5rem);
  box-shadow: 2px 2px 16px 0px rgb(48, 52, 55, 0.25);
  border-radius: var(--D_xsmall);
  overflow: hidden; /* Ensure the ribbon doesn't overflow the card */
  display: flex;
  flex-direction: column;
}
.products_card_item {
  flex: 0 1 calc(25% - 1.5rem);
  box-shadow: 2px 2px 16px 0px rgb(48, 52, 55, .25);
  border-radius: var(--D_xsmall);
}
.products_card_list_item{
  padding: 0.25rem 1rem 0.25rem 1rem;
}
.--dark_products_card_list_item {
  background-color: #eaeaea;
}
.products_card_list_item_extended {
  display: none;
}
.products_card_itemImg {
  padding: 1rem;
}
.products_card_item_text {
  padding-top: var(--D_small);
  padding-bottom: var(--D_small);
}
.products_card_header {
  text-align: center;
  margin-bottom: var(--D_xsmall);
}
.products_card_item_body {
  margin-bottom: var(--D_small);
}
.products_card_list_item {
  list-style-type: none;
  margin: 0.25rem 0;
}
.products_btn {
  display: block;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--Color_primary);
  text-decoration: underline;
  font-weight: bold;
  color: var(--Color_primary_font);
}
.ribbon {
  position: absolute;
  top: 15px;
  left: -38px;
  width: 130px;
  height: 30px;
  background-color: var(--Color_primary);
  color: white;
  font-family: 'calibri';
  text-align: center;
  line-height: 30px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  font-size: 12px;
  font-weight: bold;

}
.products_card_item[data-type="haptisk"] .ribbon {
  background-color: var(--Color_primary_haptic); /* Pink */
}
.products_card_item[data-type="akustisk"] .ribbon {
  background-color: var(--Color_primary_acoustic); /* Blue */
}












/* --------------------------------------------- HAPTIC --------------------------------------------- */




/* -------------------------------------------- ACOUSTIC --------------------------------------------- */




/* --------------------------------------------- CONTACT --------------------------------------------- */

.contact_information_section {
  display: flex;
  margin: 4rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.contact_information_section_content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact_information_section_image {
  max-width: 2rem;
  max-height: 2rem;
  margin-bottom: 1rem;
}
.contact_information_section_arrow {
  width: 2rem;
  margin-bottom: .5rem;
}



.employees_contact_section_image {
  background-image: url(images/blurredTeam.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 12rem;
  align-content: center;
  margin-bottom: 4rem;
  margin-top: 4rem;
}
.employees_contact_section_image_text {
  display: flex;
  justify-content: center;
  font-size: var(--D_header);
  color: var(--Color_secondary_font);
}

.employees_contact_section_content {
  margin: 4rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.employees_contact_section_employee {
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 10rem;
  margin: 2rem;
}
.employees_contact_section_employee_image {
  border-radius: 50%;
  display: flex;
  justify-content: center;
}
.employees_contact_section_employee_name {
  display: flex;
  justify-content: center;
  font-weight: bold;
}
.employees_contact_section_employee_title {
  display: flex;
  justify-content: center;
}
.employees_contact_section_employee_phone {
  display: flex;
  justify-content: center;
}



/* --------------------------------------------- PRODUCTS --------------------------------------------- */




/* ---------------------------------------- PRODUCT: INDIVIDUAL ---------------------------------------- */

.video_section {
  background: var(--Color_header_gradient);
  padding-left: 4rem;
  padding-right: 4rem;
  padding-top: 4rem;
  /* padding: 4rem; */

  display: flex;
  justify-content: center;
}
.video_section_video {
  width: 100%;
}

.learn_more_section {
  margin: 4rem;
  display: flex;
  justify-items: center;
  flex-direction: column;
  align-items: center
}
.learn_more_contact {
  display: flex;
  flex-direction: row;
  gap: .25rem;
}
.learn_more_contact_link {
  color: var(--Color_primary_font);
  font-weight: bold;
  text-decoration: underline;
}



/* -------------------------------------    RESPONSIVE    ---------------------------------- */

@media only screen and (max-width: 768px) {

  .filter_search_box {
    background-color: var(--Color_secondary_background);
    margin: 1.5rem;
  }
  .filter_search_section {
    display: flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 1rem;
  }
  .filter_icon {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
  }
  .filter_button {
    display: flex;
    align-items: center;
    height: 2rem;
    padding-left: .5rem;
    padding-right: .5rem;
    border: 1px solid var(--Color_primary_font);
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    font-size: var(--D_small);
    font-weight: normal;
    color: var(--Color_primary_font);
    margin-right: 1rem;
  }
  .filter_search_section_search {
    display: flex;
    align-items: center;
    max-width: 100%;
  }





  .products_cards {
    margin: 0 1.5rem 1.5rem;
    display: flex;
    gap: var(--D_small);
    row-gap: var(--D_small);
    flex-wrap: wrap;
    justify-content: center;
  }
  .products_card_item {
    flex: 0 1 calc(100%);
    box-shadow: 2px 2px 16px 0px rgb(48, 52, 55, .25);
    border-radius: var(--D_xsmall);
  }
  .products_card_itemImg {
    max-width: 75%;
    padding-top: 1rem;
    align-self: center;
  }




  .header_section_info_header {
    font-size: var(--M_subheader);
    margin-right: 0;
  }
  .header_section_info_text {
    color: var(--Color_primary_font);
    grid-column-start: 1;
    grid-row-start: 2;
    margin-right: 1.5rem;
    margin-right: 0;
  }


  .video_section {
    background: var(--Color_header_gradient);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    display: flex;
    justify-content: center;
  }



  .contact_information_section {
    display: flex;
    margin: 1.5rem;
    margin-bottom: 2rem;
    flex-direction: column;
    gap: 1rem;
  }
  .contact_information_section_arrow {
    display: none;
  }
  .contact_information_section_content {
    display: grid;
    grid-template-columns: 3fr 5fr;
    align-items: center;
  }
  .contact_information_section_image {
    /* justify-content: end; */
    justify-self: end;
    margin-right: 1.5rem;
    margin-bottom: 0;
    max-width: 10%;
  }
  .contact_information_section_text {
    grid-column-start: 2;
  }

  .employees_contact_section_image_text {
    margin: 1.5rem;
  }
  .employees_contact_section_content {
    margin: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  

}