/* text-styles.css */

/* Typsnitt */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap");

/* Utilityklasser */
.center-text {
  text-align: center;
}

/* Generell textklass */
.text {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-weight: 600;
}

.text-md-semibold-dark {
    color: var(--2-grey-dark-grey-grey-900, #1B242F);

    /* Text md/Semibold */
    font-family: "Source Sans Pro";
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    /* 150% */
}

.text-white {
  color: var(--1-base-black-white-white, #fafafa);

  /* Text lg/Semibold */
  font-family: "Source Sans Pro";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem;
  /* 155.556% */
}

/* TODO Bryta ned textklasser */
.text-xl-semibold-black {
  color: var(--2-grey-dark-grey-grey-900, #1b242f);

  /* Text xl/Semibold */
  font-family: "Source Sans Pro";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem;
  /* 150% */
}

.text-sm-bold-secondary {
  color: var(--4-secondary-purple-blue-500, #756cd7);

  /* Text sm / Bold */
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25rem;
  /* 142.857% */
}

.text-sm-medium-grey {
  color: var(--2-grey-dark-grey-grey-700, #4e555d);

  /* Text sm/Medium */
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem;
  /* 142.857% */
}

.text-sm-regular-light {
  color: var(--2-grey-dark-grey-grey-600, #696e75);

  /* Text sm/Regular */
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  /* 142.857% */
}

/* Stödjande text (lite större) */
.supporting-text {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  font-family: "Source Sans Pro";
  font-size: 1.25rem;
  /* 20px */
  font-weight: 400;
  line-height: 1.875rem;
  /* 150% */
  margin: 0;
}

.supporting-text-light-purple {
  color: var(--4-secondary-purple-blue-200, #c8c4ef);

  /* Text md/Regular */
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  /* 150% */
}

.supporting-text-grey {
  color: var(--2-grey-dark-grey-grey-700, #4e555d);

  /* Text md/Regular */
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  /* 150% */
}

/* Mellanstor rubrik/textblock */
.main-text-title {
  align-self: stretch;
  color: var(--2-grey-dark-grey-grey-900, #1b242f);
  /* Text lg/Medium */
  font-family: "Source Sans Pro";
  font-size: 1.125rem;
  /* 18px */
  font-weight: 600;
  line-height: 1.75rem;
  /* 155.556% */
}

/* Kategoritext */
.category-supporting-text {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  /* 14px */
  font-weight: 400;
  line-height: 1.25rem;
  /* 142.857% */
  align-self: stretch;
}

/* Kursiv */
.italic-text {
  font-style: italic;
}

/* Teammedlem: namn och roll */
.team-member-name {
  color: var(--2-grey-dark-grey-grey-900, #1b242f);
  font-family: "Source Sans Pro";
  font-size: 1.125rem;
  /* 18px */
  font-weight: 600;
  line-height: 1.75rem;
  /* 155.556% */
}

.team-member-role {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  /* 16px */
  font-weight: 400;
  line-height: 1.5rem;
  /* 150% */
}

/* text-styles.css */

/* Stödjande text, storlek XL/Regular */
/****** FINNS EN MED SAMMA NAMN ******/

/* Kombinerad rubrik + stöttande text */
.heading-and-supporting-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
  justify-content: center;
}

.title-and-supporting-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
  justify-content: center;
}

/* Kursiv text */
.italic-text {
  font-style: italic;
}

/* Teammedlem: wrap, info, roll etc. */
.team-member-wrap {
  display: flex;
  width: 17.5rem;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--2-grey-dark-grey-grey-100, #eaeaea);
  background: var(--1-base-black-white-white, #fafafa);
}

.team-member {
  display: flex;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}

.team-member-info {
  display: flex;
  flex-direction: column;
}

.team-member-name {
  color: var(--2-grey-dark-grey-grey-900, #1b242f);
  font-family: "Source Sans Pro";
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-decoration: none;
  /* 155.556% */
}

.team-member-role {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  /* 150% */
}

.timeline-text-lgray {
  color: var(--2-grey-dark-grey-grey-300, #b7b9bc);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  /* 150% */
}

/* Avatars, user reviews m.m. */
.user-reviews-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Links */
.link-lg-gray {
  color: var(--2-grey-dark-grey-grey-600, #696e75);

  /* Button/md */
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem;
  /* 150% */

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}

.link-lg-gray:hover {
  color: var(--2-grey-dark-grey-grey-900, #1b242f);
}

.sub-nav-text {
  color: var(--2-grey-dark-grey-grey-700, #4e555d);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-decoration: none;
  /* 155.556% */
}
.sub-nav-text:hover {
  color: var(--2-grey-dark-grey-grey-900, #1b242f);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-decoration: none;
  transition: ease-in 0.3s;
  /* 155.556% */
}
.text {
  font-family: "Source Sans Pro";
}
.text-size-0-75 {
  font-size: 0.75rem;
}
.text-size-0-875 {
  font-size: 0.875rem;
}
.text-size-1 {
  font-size: 1rem;
}
.text-size-1-125 {
  font-size: 1.125rem;
}
.text-size-1-25 {
  font-size: 1.25rem;
}
.text-size-1-5 {
  font-size: 1.5rem;
}
.text-size-1-875 {
  font-size: 1.875rem;
}
.text-normal {
  font-weight: 400;
}
.text-bold {
  font-weight: 600;
}
.txt-green {
  color: var(--5-success-green-600, #269960);
}
.txt-white {
  color: var(--1-base-black-white-white, #fafafa);
}
.txt-lgray {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
}
.txt-dgray {
  color: var(--2-grey-dark-grey-grey-900, #1b242f);
}
.txt-secondary {
  color: var(--4-secondary-purple-blue-600, #5a4fcf);
}
.txt-lgray-hover {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
}
.txt-lgray-hover:hover {
  color: var(--2-grey-dark-grey-grey-900, #1b242f);
}
.txt-lgray-secondary-hover {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
}
.txt-lgray-secondary-hover:hover {
  color: #5a4fcf;
}
.text-underline {
  text-decoration: underline;
}
.no-text-decor {
  text-decoration: none;
}
.break-word {
  word-break: break-word;
}

@media screen and (max-width: 900px) {
  .link-lg-gray {
    color: var(--2-grey-dark-grey-grey-900, #1b242f);
  }
}

/* Om du vill, .heading-and-supporting-text kan ligga här eller i layout.css */
/**EXTRACT COLOR!**/

.ft-title {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: white;
}

.ft-supporting-text {
  color: var(--2-grey-dark-grey-grey-200, #d0d1d3);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  /* 150% */
}
.small-lgray-text {
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-weight: 400;
  /* 150% */
}

.small-dgray-text-bold {
  color: var(--1-base-black-white-black, #1b242f);

  /* Text sm/Medium */
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}

.faq-title {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: #101828;
}

.contact-link {
  color: var(--4-secondary-purple-blue-600, #5a4fcf);

  /* Text md/Regular */
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.listing-tag-text {
  color: var(--2-grey-dark-grey-grey-600, #696e75);

  /* Text md/Medium */
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}
.listing-desc-text {
  color: var(--1-base-black-white-black, #1b242f);

  /* Text md/Regular */
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.listing-subtitle {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  line-height: 30px; /* 150% */
}

/* Prevent overflow for long company names on mobile */
@media (max-width: 900px) {
  .listing-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* show 2 lines, truncate rest */
    line-clamp: 2; /* show 2 lines, truncate rest */
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

.faq-question-text {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Relaterat till footer */
@media (max-width: 767px) {
  /* Avatars, user reviews m.m. */
  .user-reviews-container {
    display: none;
  }
}