/**
 * @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;

  /* Blues */
  --ib-blue-brand: #00A3C4;
  --ib-blue-sky: #7FD1E1;
  --ib-blue-midnight: #0C3285;

  /* Greens */
  --ib-green-sea: #45B9AD;
}

/* Set up Innata 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-midnight {
  background: var(--ib-blue-midnight);
}

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

/* 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 and image */
.card__bottom {
  @container (width <= 600px) {
    .card[class*="theme"] & {
      padding: var(--gap);
    }
  }
}

/* Innata Bio - Homepage overrides */
/* Card style overrides */
.innata-cards .card__body {
  text-align: justify;
}

/* Innata Bio - About page  overrides */
.innata-about {
  .card__top {
    max-width: 150px;
  }
}

/* Testimonial overrides */
.testimonial__first {
  gap: 8px;
}

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

  img {
    border-radius: 0;
  }
}