@layer reset {

/* ---------------------------------------------------------------------------
CSS RESET
Objective: Reduce browser inconsistencies across the entire website
Version: v2023.09.23
Based on https://piccalil.li/blog/a-more-modern-css-reset/
--------------------------------------------------------------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-block-size: 100vh;
  line-height: 1.6;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-inline-size: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
}

@layer root {

/* ---------------------------------------------------------------------------
CSS ROOT VARIABLES
Objective: Variables declared here are reusable throughout the entire website
Version: v20260602
Made by i-media
--------------------------------------------------------------------------- */

:root {

/* Grayscale Colors */

--color-black: #000000;
--color-gray-900: rgb(33, 37, 41);
--color-gray-800: rgb(52, 58, 64);
--color-gray-700: rgb(102, 102, 102);
--color-gray-300: rgb(233, 234, 236);
--color-gray-200: rgb(248, 249, 250);
--color-gray-100: rgb(248, 249, 250);
--color-white: #ffffff;

/* Primary Colors */

--color-blue: rgb(0, 130, 202);       /* Base color blue #0082ca */
--color-orange: rgb(255, 131, 0);     /* Base color orange #ff8300 */

/* Secondary Colors */

--color-blue-900: rgb(23, 45, 84);
--color-blue-800: rgb(0, 52, 89);
--color-blue-700: rgb(11, 60, 128);
--color-blue-400: rgb(0, 102, 204);
--color-blue-300: rgb(0, 166, 252);
--color-blue-200: rgb(204,237,255);
--color-blue-100: rgb(233,239,251);

/* Typography  */

--font-primary: 'Roboto Condensed', Helvetica, Arial, sans-serif;
--font-secondary: 'Barlow Condensed', Helvetica, Arial, sans-serif; /* Used for headings and buttons */

/* Font Sizes  */

--font-size-900: 3.125rem;      /* 50px */
--font-size-800: 2.625rem;      /* 42px */
--font-size-700: 2.250rem;      /* 36px */
--font-size-600: 1.875rem;      /* 30px */
--font-size-500: 1.500rem;      /* 24px */
--font-size-400: 1.250rem;      /* 20px */
--font-size-300: 1.125rem;      /* 18px */
--font-size-200: 1.000rem;      /* 16px */
--font-size-100: 0.875rem;      /* 14px */

  @media (width > 1024px) {
    --font-size-900: 4.375rem;  /* 70px */  
    --font-size-800: 3.125rem;  /* 50px */
    --font-size-700: 2.625rem;  /* 42px */
    --font-size-600: 2.250rem;  /* 36px */
    --font-size-500: 1.875rem;  /* 30px */
    --font-size-400: 1.625rem;  /* 26px */
    --font-size-300: 1.250rem;  /* 20px */
  }

/* Border Radius */

--border-radius-500: 5rem;
--border-radius-400: 2rem;
--border-radius-300: 0.75rem;
--border-radius-200: 0.50rem;
--border-radius-100: 0.25rem;

}
}

@layer base {

/* ---------------------------------------------------------------------------
CSS BASE for i-media.eu
Objective: Basic styling elements throughout the entire website
Version: v20260602 
Made by i-media 
--------------------------------------------------------------------------- */

html {
  font-family: var(--font-primary);
  scroll-behavior: smooth; /* For smooth scrolling */
  }

body {
  font-size: var(--font-size-300);
  font-weight: 300;
  color: var(--color-gray-900);
  background-color: var(--color-white);
  }

.flow > * + * { /* Creates a space above every element, except the first element */ 
  margin-top: 1em;
  }

.button + .hyperlink {
  margin-left: 1em;
  }

.text-center {
  text-align: center;
  }

h1, h2, h3, h4 {
  font-family: var(--font-secondary);
  font-weight: 400;
  }

}

@layer layout {

/* ---------------------------------------------------------------------------
CSS LAYOUT for i-media.eu
Objective: Reusable, recurring building blocks for the basic layout of the site
Version: v20260602 
Made by i-media 
--------------------------------------------------------------------------- */ 

/* WRAPPERS */

.wrapper {
  max-width: calc(1168px + 4rem);
  margin-inline: auto; /* same as margin: 0 auto; */
  padding-inline: 2rem; /* same as padding: 0 2rem; */
  }

.wrapper--full {
  max-width: 100vw;
  }

.wrapper--wide {
  max-width: calc(1260 + 4rem);
  }
  
.wrapper--content {
  max-width: calc(1260 + 4rem);
  padding-block: 6rem;
  }

.wrapper--narrow {
  max-width: calc(950px + 4rem);
  }

/* SECTIONS */

.section {
  padding-block: 2rem;      /* this controls the vertical spacing between different sections */

  @media (width > 1024px) {
    padding-block: 3rem;
  }

}

/* GRIDS */

.grid--equal {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  gap: 3rem;

  @media (width > 1024px) {
    grid-auto-flow: column;
  }
  }

/* TYPOGRAPHY */

h1 {
  font-size: var(--font-size-800);
  color: var(--color-blue-800);
  text-align: center;
  line-height: 3.5rem;
  margin-bottom: 1rem;
  }

h2 {
  font-size: var(--font-size-500);
  text-align: center;
  line-height: 2.5rem;
  }

p {
  font-size: var(--font-size-300);
  text-align: center;
  }

a { 
  outline: none;
  }

p a,
.hyperlink {
  color: var(--color-black);
  text-decoration: none;
  background-color: var(--color-blue-100);
  border-bottom: 1px solid var(--color-blue);
  padding: 3px;
}

/* LISTS */

ul {
  list-style-type: none;
}

/* IMAGES */

img, svg {
  max-width: 100%;
  height: auto;
}
  
hr.spacer { /* Vertical spacer */
  border: 0;
  padding: 0;
  height: 50px;
  width: 3px;
  background: var(--color-orange);
  margin-block: 3rem;
}

@layer components {

/* ---------------------------------------------------------------------------
CSS COMPONENTS
Objective: Styling of individual, non-recurring components throughout the site
Version: v20260602
Made by i-media
--------------------------------------------------------------------------- */

/* SITE HEADER */

.header {
  background: var(--color-white);
  padding-top: 6rem;
}

.header-inner {
  background: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.client-logo {
  background: var(--color-white);
  width: 400px;
  max-width: 60vw;
  
  img {
    margin: 0 auto;
  }
  
  }

/* SITE FOOTER */

.copyrightfooter {
  background-color: var(--color-white);
  padding-bottom: 3rem;
}

.copyrightfooter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  font-size: var(--font-size-100);
}

.copyright-navigation {
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 0;

  a {
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--color-white);
    transition: all 300ms ease-in-out;
  }
  
  a:hover {
    border-bottom: 1px solid var(--color-blue);
  }
}

}

@layer utilities {

/* ---------------------------------------------------------------------------
CSS UTILITIES
Objective: Helpful style elements, necessary for usability and readability
Version: v20250602
Made by i-media
--------------------------------------------------------------------------- */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

::selection, ::-moz-selection {
  background-color: rgba(0, 114, 173, .6);
  color: var(--color-white);
}

}