/**
 * @file
 * Global styles.
 */

/* Add Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* stylelint-disable custom-property-empty-line-before */
:root {
  --space-for-fixed-header: var(--sp9);

  --font-sans: 'Poppins', sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-serif: serif;

  /* Override semantic layout variables. */
  --spacing-xxxs: var(--sp0-5);         /* 4px */
  --spacing-xxs: var(--sp);             /* 8px */
  --spacing-xs: var(--sp2-5);           /* 20px */
  --spacing-s: var(--sp4);              /* 32px */
  --spacing-m: var(--sp5);              /* 40px */
  --spacing-l: var(--sp6);              /* 48px */
  --spacing-xl: var(--sp7);             /* 56px */
  --spacing-xxl: var(--sp8);           /* 64 */
  --spacing-xxxl: calc(15 * var(--sp)); /* 120px */
  --spacing-component: var(--spacing-xl);
  --spacing-component-internal: var(--spacing-xl);
  --gap: 1.25rem; /* 20px */
  --gap-large: var(--sp5);

  @media (width > 700px) {
    --spacing-component: var(--spacing-xxl);
    --spacing-component-internal: var(--spacing-xxl);
  }

  /* Override primitive layout variables. */
  --sp: 0.5rem;                     /* 8px */
  --sp0-5: calc(0.5 * var(--sp));   /* 4px */
  --sp1: var(--sp);                 /* 8px */
  --sp1-5: calc(1.5 * var(--sp));   /* 12px */
  --sp2: calc(2 * var(--sp));       /* 16px */
  --sp2-5: calc(2.5 * var(--sp));   /* 20px */
  --sp3: calc(3 * var(--sp));       /* 24px */
  --sp4: calc(4 * var(--sp));       /* 32px */
  --sp5: calc(5 * var(--sp));       /* 40px */
  --sp6: calc(6 * var(--sp));       /* 48px */
  --sp7: calc(7 * var(--sp));       /* 56px */
  --sp8: calc(8 * var(--sp));       /* 64px */
  --sp9: calc(9 * var(--sp));       /* 72px */
  --sp10: calc(10 * var(--sp));     /* 80px */


  /* Set up Innata color variables. */

  /* Greyscale */
  --ib-white: #fff;
  --ib-grey: #BBB;
  --ib-grey-dark: #7F7F7F;
  --ib-black: #222222;

  /* Blues */
  --ib-blue-brand: #00A3C4;
  --ib-blue-sky: #7FD1E1;
  --ib-blue-light: #35CBE9;
  --ib-blue-aqua: #00E5FF;
  --ib-blue-navy: #1F497D;
  --ib-blue-lake: #0491BE;
  --ib-blue-ocean: #004C75;
  --ib-blue-royal: #003F72;
  --ib-blue-midnight: #0C3285;
  --ib-blue-grey: #00849F;
  --ib-blue-med: #39A0CD;

  /* Greens */
  --ib-green-sea: #45B9AD;
  --ib-green-teal: #009299;
  --ib-green-lime: #5BCE64;
  --ib-green-light: #BAE6BD;
  --ib-green-leaf: #18C721;

  /* Purple */
  --ib-purple: #7030A0;
}



/* Set up Innata backround color classes using variables. */
.innata-bg-white {
  background: var(--ib-white);
}

.innata-bg-grey {
  background: var(--ib-grey);
}

.innata-bg-blue-brand {
  background: var(--ib-blue-brand);
}

.innata-bg-blue-sky {
  background: var(--ib-blue-sky);
}

.innata-bg-blue-light {
  background: var(--ib-blue-light);
}

.innata-bg-blue-aqua {
  background: var(--ib-blue-aqua);
}

.innata-bg-blue-navy {
  background: var(--ib-blue-navy);
}

.innata-bg-blue-lake {
  background: var(--ib-blue-lake);
}

.innata-bg-blue-ocean {
  background: var(--ib-blue-ocean);
}

.innata-bg-blue-royal {
  background: var(--ib-blue-royal);
}

.innata-bg-blue-midnight {
  background: var(--ib-blue-midnight);
}

.innata-bg-blue-grey {
  background: var(--ib-blue-grey);
}

.innata-bg-blue-med {
  background-color: var(--ib-blue-med);
}

.innata-bg-green-sea {
  background-color: var(--ib-green-sea);
}

.innata-bg-purple {
  background-color: var(--ib-purple);
}

/* Global element spacing overrides */
.region-content {
  margin-bottom: 0;
}

/* Card style overrides */
/* Card - Adjusts card image behavior */
.card__top {
  border-radius: 0;

  & img {
      aspect-ratio: 1 / 1;
      object-fit: contain;
  }
}

/* Card - Adds top spacing when cards do not have an image */
.card__bottom {
  @container (width <= 912px) {
    .card[class*="theme"] & {
      padding: var(--gap);
    }
  }
}

/* Innata Bio - About page card style overrides */
.innata-cards .card__top {
  max-width: 150px;
  margin: 0 auto;
}

.innata-cards .heading {
  @media (width >= 800px) {
    min-height: 63px;
  }

  @media (width >= 1080px) {
    min-height: inherit;
  }
}

.innata-cards .card__title {
  text-align: center;

  @media (width >= 800px) {
    min-height: 90px;
  }

  @media (width >= 1044px) {
    min-height: 60px;
  }

  @media (width >= 1544px) {
    min-height: inherit;
  }
}

/* Testimonial overrides */
.testimonial__first {
  gap: 8px;
  padding-inline: 0;
}

.testimonial__mobile-image {
  border-radius: 0;
  width: 200px;
  height: 200px;
}

.testimonial__mobile-image img {
  border-radius: 0;
}

.innata-text-justify {
  text-align: justify;
}

/* Accordion overrides */
.accordion-item__content {

  @media (width < 912px) {
    .layout-dynamic__header,
    .layout-dynamic__cell {
      padding: 1em;
    }
  }
}