@layer global, component, utility;

@layer global {
  /* source-sans-3-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/source-sans-3-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/source-sans-3-v19-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* fonts */
  :root {
    --fs-14: calc(14 / 16 * 1rem);
    --fs-16: calc(16 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-42: calc(42 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);
    --fs-72: calc(72 / 16 * 1rem);

    --font-size-topnav: var(--fs-14);
    --font-size-h1: var(--fs-42);
    --font-size-h2: var(--fs-36);
    --font-size-h3: var(--fs-24);

    @media (width >= calc(600 / 16 * 1rem)) {
      --font-size-topnav: var(--fs-16);
      --font-size-h1: var(--fs-72);
      --font-size-h2: var(--fs-48);
    }
  }
  /*Colours*/
  :root {
    --c-white: hsl(0, 0%, 100%);
    --c-grey-dark: hsl(233, 14%, 25%);
    --c-purple: hsl(232, 58%, 55%);
    --c-teal: hsl(180, 100%, 42%);
    --c-transparent: transparent;
    --c-magenta: hsl(320, 85%, 41%);

    --color-main-bg: var(--c-white);
    --color-text-dark: var(--c-grey-dark);
    --color-text-light: var(--c-white);
    --color-hero-bg: var(--c-purple);
    --color-button-primary-bg: var(--c-teal);
    --color-button-primary-text: var(--c-grey-dark);
    --color-button-secondary-bg: var(--c-transparent);
    --color-button-secondary-border: var(--c-white);
    --color-button-secondary-text: var(--c-white);
    --color-fullwidth-bg: var(--c-magenta);
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }

  body {
    /* Set default font */
    font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
    line-height: 1.3;
    color: var(--color-text-dark);
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  a {
    text-decoration: none;
  }

  img,
  picture,
  svg {
    max-width: 100%;
    display: block;
  }

  .wrapper {
    width: min(calc(100% - 48px), calc(1200 / 16 * 1rem));
    margin-inline: auto;
  }
}

@layer component {
}

@layer utility {
  .visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}