/* [ Jamie HR CSS Styles ] */

/* @info: Breakpoints: 480, 1280 */

body {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
}

/* [ Variables ]
---------------------------------------- */
:root {
  --colours-text-body: #444053;
  --colours-text-headling-primary: #38748F;
  --colours-text-headling-secondary: #D98704;
  --colours-text-link-underline: #00B0FF3D;

  --colours-background-body: #fff;
  --colours-background-primary: rgba(0, 176, 255, 0.12);
  --colours-background-secondary: rgba(0, 176, 255, 0.06);

  --grid: 1fr;
  --gridGap: 24px;

  --spacing-xsmall: 4px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 32px;
  --spacing-xlarge: 48px;
  --spacing-xxlarge: 64px;

  --columnGutters: 24px;
  --spacingHeaderFooter: 28px;

  --font-size-title-mobile: 32px;
  --font-size-title-tablet: 42px;
  --font-size-title-desktop: 42px;

  --font-size-body-mobile: 16px;
  --font-size-body-tablet: 16px;
  --font-size-body-desktop: 16px;

  --fontSizeHeading: 24px;

  --typography-letter-spacing-headings: -0.05em;
  --typography-line-height-headings: 1.1em;

  --logo-width-mobile: 109px;
  --logo-width-tablet: 146px;
  --logo-width-desktop: 192px;

  --line-height-body: 24px;

  --maxWidth: 960px;
}

@media screen and (min-width: 480px) {
  :root {
    --grid: repeat(2, 1fr);
    --fontSizeHeading: 32px;
    --spacingHeaderFooter: 34px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --grid: repeat(6, 1fr);
    --fontSizeHeading: 42px;
    --spacingHeaderFooter: 64px;
  }
}

/* [ Base styles ]
---------------------------------------- */
body {
  line-height: var(--line-height-body, 1);
  color: var(--colours-text-body, #f0f);
  text-rendering: optimizeLegibility;
}

p {
  margin: 24px 0 0 0;
}

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

h2 {
  font-size: var(--fontSizeHeading);
  font-weight: 300;
  color: var(--colours-text-headling-primary, #f0f);
  margin-top: var(--spacing-xlarge, 0);
  letter-spacing: var(--typography-letter-spacing-headings, auto);
  line-height: 1;
}

a:link,
a:visited,
a:active,
a:hover {
  color: var(--colours-text-headling-primary, #f0f);
  text-decoration: none;
  border-bottom: 1px solid var(--colours-text-link-underline, #f0f);
}

.illustration {
  display: block;
  position: absolute;
  user-select: none;
}

/* [ Main content ]
---------------------------------------- */
.content {
  margin: var(--spacingHeaderFooter) 0;
}

.background__square {
  width: 100%;
  position: absolute;
  background-color: rgba(0, 176, 255, 0.06);

  transform: rotate(-2deg);
}
.section--header .background__square {
  max-width: 1130px;
  min-width: 990px;
  height: 230px;
  top: 32px;
  background-color: rgba(249, 168, 38, 0.1);
}
.section--processes .background__square {
  height: 91%;
  top: 60px;
  transform: rotate(3deg);
  max-width: 1130px;
  min-width: 990px;
}
.section--quotes .background__square {
  height: 95%;
  top: 20px;
  transform: rotate(-2deg);
  max-width: 1130px;
  min-width: 990px;
}

/* [ Sections ]
---------------------------------------- */
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.section__content {
  display: grid;
  grid-template-columns: var(--grid);
  grid-column-gap: var(--gridGap);
  z-index: 1;

  max-width: var(--maxWidth);
  margin: 0 var(--columnGutters);
}

.section__background {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.section__backgroundContainer {
  width: 100%;
  height: 100%;
  max-width: var(--maxWidth);
}

/* [ Section - Header ]
---------------------------------------- */
.section--header {
  padding-bottom: 36px;
}
.section--header.background-skew::before {
  top: 69px;
  height: 25ch;
}

.header__logo {
  width: var(--logo-width-mobile, auto);
}

.header__nav {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu {
  display: flex;
  justify-content: flex-end;
}

.header__title {
  font-weight: bold;
  letter-spacing: var(--typography-letter-spacing-headings, auto);
  line-height: var(--typography-line-height-headings, auto);
  color: #FF9D00;

  max-width: 14ch;

  margin-top: 60px;
  margin-bottom: 0;
}
.header__title br {
  display: none;
}

.header__intro {
  margin-top: 196px;
}

.illustration--conversation {
  top: 150px;
  width: 67%;
  min-width: 310px;
  max-width: 700px;
  left: 20%;
}

@media screen and (min-width: 480px) {
  .header__logo {
    width: var(--logo-width-tablet, auto);
  }

  .section--header {
    grid-column: 1/3;
  }

  .section--header.background-skew::before {
    top: 100px;
    height: 21ch;
  }

  .header__title {
    max-width: none;
    grid-column: 1/3;
    margin-bottom: 67px;
  }
  .header__title br {
    display: block;
  }

  .header__intro {
    grid-column: 1/2;
    grid-row: 3/4;
    margin-top: 16px;
  }

  .illustration--conversation {
    top: min(29%, 130px);
    left: 47%;
  }
}

@media screen and (min-width: 768px) {
  .section--header {
    padding-bottom: 126px;
  }
  .header__title {
    grid-column: 1/5;
  }
  .header__intro {
    grid-column: 1/4;
  }
}

/* [ Section - Processes ]
---------------------------------------- */
.section--processes {
  padding-top: 50px;
  padding-bottom: 100px;
}

.processes h2 {
  max-width: 14ch;
}

.illustration--compass {
  top: -40px;
  left: 200px;
  width: 240px;
}

@media screen and (min-width: 480px) {
  .processes {
    grid-column: 1/2;
  }

  .illustration--compass {
    max-width: none;
    width: 610px;
    left: 40%;
    top: -80px;
  }
}

@media screen and (min-width: 768px) {
  .section--processes {
    padding-bottom: 140px;
    padding-top: 113px;
  }
  .processes {
    grid-column: 4/7;
    min-height: 610px;
  }
  .illustration--compass {
    left: calc(50% - 556px);
    width: 950px;
    top: -33px;
  }
}

/* [ Section - Planning / Relationships ]
---------------------------------------- */
.relations {
  grid-column: 1/2;
}
.planning {
  grid-column: 1/2;
}

@media screen and (min-width: 480px) {
  .relations {
    grid-column: 1/2;
  }
  .planning {
    grid-column: 2/3;
  }
}

@media screen and (min-width: 768px) {
  .relations {
    grid-column: 1/4;
  }
  .planning {
    grid-column: 4/7;
  }
}

/* [ Section - One place ]
---------------------------------------- */
.section--one_place {
  padding-top: 130px;
}

.section--one_place h2 {
  color: var(--colours-text-headling-secondary, #f0f);
  max-width: 13ch;
}

.illustration__book {
  left: 120px;
  top: 0;
}

@media screen and (min-width: 480px) {
  .section--one_place {
    padding-top: 0;
    margin-top: 0;
  }

  .section--one_place h2 {
    align-self: flex-start;
  }

  .section--one_place h2,
  .section--one_place p {
    grid-column: 1/2;
  }

  .illustration__book {
    left: calc(50% - 80px);
    top: 60px;
    width: 490px;
  }
}

@media screen and (min-width: 480px) {
  .section--one_place {
    margin-top: 50px;
    padding-bottom: 60px;
  }

  .section--one_place h2,
  .section--one_place p {
    grid-column: 1/2;
  }
}

@media screen and (min-width: 768px) {
  .section--one_place h2,
  .section--one_place p {
    grid-column: 1/4;
  }
  .illustration__book {
    width: 581px;
    top: 0;
  }
}
/* [ Section - Advice ]
---------------------------------------- */
.section--advice {
  padding-top: 90px;
  margin-top: 16px;
}
.section--advice h2 {
  color: var(--colours-text-headling-secondary, #f0f);
  max-width: 50%;
  z-index: 1;
  align-self: flex-end;
}

.section--advice h2,
.illustration--forms {
  grid-column: 1/2;
  grid-row: 1/2;
}

.illustration__forms {
  top: 0px;
  left: 210px;
}

@media screen and (min-width: 480px) {
  .section--advice {
    padding-top: 20px;
    padding-bottom: 60px;
    margin-top: 0;
  }
  .section--advice h2,
  .section--advice p {
    grid-column: 2/3;
  }
  .illustration__forms {
    left: calc(50% - 260px);
    width: 230px;
  }
}

@media screen and (min-width: 768px) {
  .section--advice {
padding-top: 30px;
padding-bottom: 130px;
margin-top: 60px;
margin-bottom: 50px;
  }
  .section--advice h2,
  .section--advice p {
    grid-column: 4/7;
  }
  .illustration__forms {
    left: calc(50% - 360px);
    width: 230px;
  }
}

/* [ Section - Quotes ]
---------------------------------------- */
.section--quotes {
  margin-top: var(--spacing-xlarge, 0);
  padding-top: 110px;
  padding-bottom: 110px;
}

.section--quotes .section__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 0;
}

/* [ Section - Quotes - References ]
---------------------------------------- */
.reference {
  display: flex;
  flex-wrap: wrap;
  padding: 28px 0;
}

.reference__quote {
  flex: 100%;
}

.reference__fig {
  display: flex;
  flex-direction: row;
}

.reference__pic {
  border-radius: 50%;
  width: 46px;
  height: 46px;
  mix-blend-mode: multiply;
  align-self: center;
}
.reference--title {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-medium, 0);
  font-weight: 500;
}
.reference--title cite {
  font-weight: 300;
  font-style: normal;
}


@media screen and (min-width: 480px) {
  .reference {
    flex: 50%;
    padding: 28px 12px;
    flex-grow: 0;
    align-content: flex-start;
  }
}

@media screen and (min-width: 768px) {
  .reference {
    padding: 28px 24px;
  }
}

/* [ Section - Contact ]
---------------------------------------- */
.section--contact {
  margin: 24px 0 128px 0;
}

/* TODO: Fix tablet view  */
.section--contact .section__content > *{
  grid-column: 2/6;
}

.section--contact h2,
.section--contact p {
  grid-column: 1/2;
}