/* ********************************* */
/* VARIABLES                         */
/* ********************************* */

/* Placed in reusable.css, and the root block to make sure that they are globally available */
:root {
  /* CONSTANT VARIABLES */

  /* TYPOGRAPHY */
  /* Font: Lato */

  /* Font Size System */
  /* The font size system is not placed into variables, as the font sizes change frequently. 
     However, it is important to follow the sizes in the system provided, as this avoids too many sizes.
     Additionally, use the system in rems, as this works for responsive design.
     (rem and em do NOT depend on html font-size in media queries)
     Instead, 16px = 1.6rem = 1em.
     Use values in brackets only when desperately needed. */

  /* Font Size System (rem) */
  /* 1 / 1.2 / 1.4 / 1.6 / 1.8 / 2 / (2.2) / 2.4 / 3 / 3.6 / 4.4 / 5.2 / 6.2 / 7.4 / 8.6 / 9.8 / 11 / 12.8 / 16 */

  /* Font Weights */
  --font-weight--light: 300;
  --font-weight--default: 400;
  --font-weight--medium: 700;
  --font-weight--medium-bold: 800;
  --font-weight--bold: 900;

  /* Line Heights */
  --line-height--default: 1;
  --line-height--paragraph-default: 1.6;
  --line-height--small: 1.2;
  --line-height--small-medium: 1.4;
  --line-height--medium: 1.6;
  --line-height--large: 1.8;

  /* Letter Spacing */
  --letter-spacing--small: 2px;
  --letter-spacing--medium: 3px;
  --letter-spacing--large: 4px;
  --letter-spacing--heading-large: 1rem;

  /* COLOURS */
  /* SmartTech Colours: https://maketintsandshades.com/#28903a,006e3a */

  /* Primary */
  --colour--primary: #006e3a; /* SmartTech Light Green chosen as the primary colour */
  --colour--primary--transparency-high: #006e3a80; /* High: 50% Transparency */
  --colour--primary--transparency-low: #006e3ab3; /* Low: 70% Transparency */

  /* Tints: lighter than the primary colour */
  --colour--primary-tint-darkest: #1a7d4e;
  --colour--primary-tint-dark: #66a889;
  --colour--primary-tint-light: #99c5b0;
  --colour--primary-tint-lightest: #cce2d8;
  --colour--primary-tint-white: #e6f1eb; /* The "white" tint is often used to replace traditional white */

  /* Shades: darker than the primary colour */
  --colour--primary-shade-lightest: #00582e;
  --colour--primary-shade-light: #004223;
  --colour--primary-shade-medium: #00371d;
  --colour--primary-shade-darkest: #00160c;

  /* Greys: traditional black, white and greys */
  --colour--black: #000;
  --colour--black--transparency-lowest: #000000e6; /* Lowest: 90% Transparency */
  --colour--black--transparency-low: #000000cc; /* Low: 80% Transparency */
  --colour--black--transparency-medium: #000000bf; /* Medium: 75% Transparency */
  --colour--black--transparency-high: #000000b3; /* High: 70% Transparency */
  --colour--black--transparency-highest: #00000099; /* Highest: 60% Transparency*/
  --colour--white: #fff;
  --colour--grey-lightest: #eee;
  --colour--grey-light: #aaa;
  --colour--grey-medium: #767676;
  --colour--grey-dark: #333;
  --colour--grey-body: #495057;

  /* Shadows */
  --shadow--darkest: rgba(0, 0, 0, 0.3);
  --shadow--dark: rgba(0, 0, 0, 0.2);
  --shadow--medium: rgba(0, 0, 0, 0.15);
  --shadow--light: rgba(0, 0, 0, 0.1);
  --shadow--lightest: rgba(0, 0, 0, 0.05);
  --shadow--white: rgba(230, 241, 235, 0.5);

  /* BORDER-RADIUS */

  --border-radius--button: 9px;
  --border-radius--box: 5px;
  --border-radius--checkbox: 3px;
  --border-radius--image-big: 5px;
  --border-radius--image-small: 2px;
  --border-radius--round: 100%;

  /* WHITESPACE */
  /* The spacing system is not placed into variables, as the spacing changes frequently. 
     However, it is important to follow the sizes in the system provided, as this avoids too many sizes.
     Additionally, use the system in rems, as this works for responsive design.
     (rem and em do NOT depend on html font-size in media queries)
     Instead, 16px = 1.6rem = 1em.
     Use values in brackets only when desperately needed. */

  /* Spacing System (rem) */
  /* 0.2 / 0.4 / 0.8 / 1.2 / 1.6 / 2.4 / 3.2 / 4.8 / (5.6) / 6.4 / 8 / 9.6 / 12.8 */

  /* OTHER */

  /* Content */
  --checkmark: "\2713";
}

/* ********************************* */
/* GENERAL PAGE SETTINGS             */
/* ********************************* */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* Percentage of user's browser font-size setting; 1.6rem = 1em = 16px */
  overflow-x: hidden;
}

body {
  font-family: "Lato", sans-serif;
  color: var(--colour--grey-body);
  line-height: var(--line-height--default);
  font-weight: var(--font-weight--default);
  font-size: 2rem;
  overflow-x: hidden;
}

/* GENERAL FOCUS STYLES */

/* Focusing the button with a keyboard only. */
/* This is for accessibility */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.4rem var(--colour--primary);
}

/* Focusing the button with a mouse, touch, or stylus. */
button:focus:not(:focus-visible) {
  box-shadow: none;
}

/* ********************************* */
/* GENERAL REUSABLE COMPONENTS       */
/* ********************************* */

/* HERO SECTIONS */
/* The section-hero occurs on every page, and therefore there is a global
   style, and a local style for each element. */

.section-hero--global,
.hero-img--global {
  height: 60rem;
}

.section-hero--global {
  margin-bottom: 8rem;
}

/* The hero image is a background image.  General positioning is set globally, 
   while specific position is set in the page's local style file.  The source is 
   also set locally, not in the html like for most images. */
.hero-img--global {
  /* The hero-img is positioned relatively to the hero-container. */
  position: relative;

  /* Image positioning: to place the image centrally, use left, top and transform
     as used here: */
  left: 50%;
  top: 50%;

  /* A strange small white border is created around the background image.
     Therefore, we send it far back (z-index), and we shift it up by an 
     additional .2% */
  transform: translate(-50%, -50.2%);
  z-index: -999;

  width: 100vw; /* vw = viewport width*/
}

/* The contents for the hero are contained within a width */
.hero-container--global {
  position: absolute;
  max-width: 130rem;
}

.hero-container-inner--global {
  /* In relation to the parent element: hero-container */
  width: 50%;
}

.hero-text--global {
  font-size: 2.4rem;
  line-height: var(--line-height--large);
  color: var(--colour--primary-tint-white);

  margin-bottom: 9.6rem;
}

/* CONTAINERS */

/* General container used for all sections: centers and contains the content. */
.container--global {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

/* A small border is placed between each section that uses container--global 
   to 'break' the page up. */
section .container--global {
  padding-top: 6.4rem;
  border-top: 1.5px solid var(--colour--grey-lightest);
}

/* Remove the border for the first section of each page by adding 
   container-noBorder--global as a class. */
section .container-noBorder--global {
  padding-top: 0;
  border-top: none;
}

/* A special type of container: galleries have a larger container.  
   container--global is used with this style. */
.container--gallery--global {
  max-width: 160rem;
}

/* GRIDS */

/* Helper class to initialise a standard grid.  Use in conjunction with 
   grid--X-cols--global. */
.grid--global {
  display: grid;
  column-gap: 4.8rem;
  row-gap: 9.6rem;
}

.grid--2-cols--global {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols--global {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols--global {
  grid-template-columns: repeat(4, 1fr);
}

.grid--5-cols--global {
  grid-template-columns: repeat(5, 1fr);
}

.grid--center-v--global {
  align-items: center;
}

/* HEADINGS */
/* Generally, headings can be used as global styles without local styles. */

/* Reserved for section-hero headings */
.heading-primary--global {
  font-size: 6.2rem;
  font-weight: var(--font-weight--medium-bold);
  line-height: var(--line-height--small);
  text-transform: uppercase;
  color: var(--colour--primary-tint-white);
  margin-bottom: 4.8rem;
}

/* Used as the main heading for each section. */
.heading-secondary--global {
  font-size: 4.4rem;
  font-weight: var(--font-weight--medium);
  color: var(--colour--primary);
  margin-bottom: 4.8rem;
}

/* Used within sections */
.heading-tertiary--global {
  font-size: 2.4rem;
  font-weight: var(--font-weight--medium);
  color: var(--colour--black);
  margin-bottom: 1.6rem;
}

/* Used to give additional information ABOVE heading-secondary */
.subheading--global {
  display: block;

  font-size: 2rem;
  font-weight: var(--font-weight--medium);
  color: var(--colour--black);
  text-transform: uppercase;

  margin-bottom: 1.6rem;
}

/* TEXT */

/* Used for standard paragraphs */
.paragraph--global {
  font-size: 2.4rem;
  line-height: var(--line-height--paragraph-default);
}

.paragraph--margin--global {
  margin-bottom: 1.4rem;
}

/* LINKS */

/* Used for a list of downloads */
.downloads-list--global {
  list-style: none;
  line-height: var(--line-height--small-medium);
}

/* Groups together a heading, link and supporting information */
/* Currently no styling */
/* .download-element--global {} */

/* Helper class used to add a bottom margin to a download-element */
.download-element--margin--global {
  margin-bottom: 3.2rem;
}

/* Heading of a download-element */
.download-element-heading--global {
  display: block;

  font-size: 2.4rem;
  font-weight: var(--font-weight--medium);
  color: var(--colour--black);
  margin-left: 0.2rem;
}

/* Download link */
.download-link--global,
.download-link--global:link,
.download-link--global:visited {
  text-decoration: none;
  font-size: 2.4rem;
  color: var(--colour--primary-tint-darkest);
}

.download-link--global:hover,
.download-link--global:active {
  color: var(--colour--primary-tint-dark);
}

/* Supporting information to a download-link */
.download-link-support--global {
  display: inline;

  font-size: 2.4rem;
  font-weight: var(--font-weight--default);
  color: var(--colour--grey-body);
  margin-left: 0.2rem;
}

/* BUTTONS */

/* Used on every button for general style, and further styled locally */
.button--global,
.button--global:link,
.button--global:visited {
  display: inline-block;

  font-size: 2.4rem;
  font-weight: var(--font-weight--medium);
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;

  border-radius: var(--border-radius--button);

  padding: 2.4rem 2.4rem;
}

.button--global:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.8rem var(--colour--primary);
}

/* Further styling for contact buttons: used in conjunction with button--global */
.button--contact--global,
.button--contact--global:link,
.button--contact--global:visited {
  background-color: var(--colour--primary);
  color: var(--colour--primary-tint-white);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing--small);
}

.button--contact--global:hover,
.button--contact--global:active {
  background-color: var(--colour--primary-shade-lightest);
}

.button--contact--global:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.8rem var(--shadow--white);
}

/* CHECKBOXES */

.checkbox--global {
  appearance: none;
  display: block;
  position: relative;

  background-color: var(--colour--primary-tint-white);
  box-shadow: 0 1px 2px var(--shadow--lightest);

  padding: 9px;
  border: 1px solid var(--colour--primary);
  border-radius: var(--border-radius--checkbox);

  cursor: pointer;
}

.checkbox--global:active,
.checkbox--global:checked:active {
  color: var(--colour--primary-tint-white);
  box-shadow: 0 1px 2px var(--shadow--lightest);
}

.checkbox--global:checked {
  background-color: var(--colour--primary);
  box-shadow: 0 1px 2px var(--shadow--lightest);
}

.checkbox--global:checked::after {
  position: absolute;
  top: -1px;
  left: 4px;

  color: var(--colour--primary-tint-white);

  content: var(--checkmark);
  font-size: 14px;
}

.checkbox--global:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.4rem var(--colour--primary--transparency-high);
}

/* VIDEOS */

/* Used for the div surrounding the iframe element */
.video-box--global {
  padding: 3.2rem 0;
}

/* Use for the iframe element */
.video--global {
  border-radius: var(--border-radius--image-big);
  box-shadow: 0 20px 30px 0 var(--shadow--medium);
}

/* Used to globally style a big video that takes up most of the viewport */
.video-big--global {
  width: 100.8rem;
  height: 56.7rem;
}

/* Used to globally style a small video that takes up less than half of the viewport */
.video-small--global {
  width: 64rem;
  height: 36rem;
}

/* ********************************* */
/* HELPER CLASSES                    */
/* ********************************* */

/* Used to hide a div element */
.div-hide--global {
  display: none;
}