/* Import IBM Plex Sans font */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400&display=swap');

/**
 * Colour variables
*/
:root {
  --color-raspberry: #9F2571;
  --color-dk-raspberry: #6F2058;
  --color-trans-raspberry: #9f257159;
  --color-yellow: #F5C97B;
  --color-blue: #438fcd;
  --color-lt-blue: #E2EEF7;
  --color-white: #fff;
  --color-grey-10: hsl(213, 15%, 10%);
  --color-grey-30: hsl(213, 15%, 30%);
  --color-grey-48: hsl(214, 3%, 48%);
  --color-grey-88: hsl(213, 15%, 88%);
  --color-grey-98: hsla(0, 0%, 98%, 1);
  --color-lt-grey: var(--color-grey-98);
  --color-black: #000;
  --color-primary: var(--color-magenta);
  --color-primary--foreground: var(--color-white);
  --color-secondary: var(--color-yellow);
  --color-secondary--foreground: var(--color-black);
  --link-color: var(--color-raspberry);
  --link-hover-color: var(--color-black);
  --link-focus-border: 2px solid #40ACFF;
  --nav-link-focus-box-shadow: 0 0 0 .25rem #40ACFF66;
}

/* Typography variables */

:root {
  --font-family-sans: 'IBM Plex Sans', helvetica, arial, sans-serif;
  --font-family-serif: 'IBM Plex Serif', Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
}

body {
  --gin-font-size: .8rem;
  --gin-spacing-s: .7rem;
}

/*
 * Layout variables
 */

:root {
  --max-width: 1240px;
  --max-width-narrow: 1030px;
  --page-margin: calc((100% - var(--max-width)) / 2);
  --responsive-padding: 1.2rem;
  --vertical-padding: 1.5rem;
  --gutter-standard: 1rem;
  --logo-height: 3rem;
  --logo-height-mobile: 2.5rem;
  --sidebar-width: 17rem;
}

/*
 * Alter the padding values depending on the container width
 * Acccommodates the left side Navigation panel which may be collapsed or open
*/
.dialog-off-canvas-main-canvas {
  container: main-canvas / inline-size;
}

@container main-canvas (min-width: 768px) {
  * {
    --responsive-padding: 1rem;
    --vertical-padding: 2rem;
  }

}

/* Narrow max width */

@container main-canvas (min-width: 1050px) {
  * {
    --responsive-padding: 1.5rem;
    --gutter-standard: 1.5rem;
    --vertical-padding: 2.5rem;
  }

  .highlighted,
  main {
    --max-width: var(--max-width-narrow);
    --responsive-padding: 1px;
  }
}

/* Max width is 1280*/

@container main-canvas (min-width: 1280px) {
  * {
    --responsive-padding: 1px;
    --gutter-standard: 3rem;
    --vertical-padding: 3rem;
  }
}