@import 'variables';
@import 'icons';
@import 'reset';

// Note: html and body HAVE TO have a height of 100% in order to
// properly display some elements at the bottom of the page.
// This makes these elements weirdly displayed in a browser.
// For now, I am not able to provide a good solution for these 2 worlds :(

@font-face {
  font-family: 'Bebas Neue';
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/BebasNeue/BebasNeue.eot');
  src: url('../fonts/BebasNeue/BebasNeue.eot?#iefix') format('embedded-opentype'),
      url('../fonts/BebasNeue/BebasNeue.woff2') format('woff2'),
      url('../fonts/BebasNeue/BebasNeue.woff') format('woff'),
      url('../fonts/BebasNeue/BebasNeue.ttf') format('truetype'),
      url('../fonts/BebasNeue/BebasNeue.otf') format('opentype'),
      url('../fonts/BebasNeue/BebasNeue.svg#BebasNeue') format('svg');
  unicode-range: U+0020-00FE;
}

@font-face {
  font-family: 'Myriad Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MyriadPro/MyriadPro-Regular.eot');
  src: url('../fonts/MyriadPro/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MyriadPro/MyriadPro-Regular.woff2') format('woff2'),
      url('../fonts/MyriadPro/MyriadPro-Regular.woff') format('woff'),
      url('../fonts/MyriadPro/MyriadPro-Regular.ttf') format('truetype'),
      url('../fonts/MyriadPro/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
  unicode-range: U+0020-00FE;
}

@font-face {
  font-family: 'TrashHand';
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/TrashHand/TrashHand.eot');
  src: url('../fonts/TrashHand/TrashHand.eot?#iefix') format('embedded-opentype'),
      url('../fonts/TrashHand/TrashHand.woff2') format('woff2'),
      url('../fonts/TrashHand/TrashHand.woff') format('woff'),
      url('../fonts/TrashHand/TrashHand.ttf') format('truetype'),
      url('../fonts/TrashHand/TrashHand.otf') format('opentype'),
      url('../fonts/TrashHand/TrashHand.svg#TrashHand') format('svg');
  unicode-range: U+0020-00FE;
}

$gutter: 8mm;
$color-quote: rgb(214, 236, 239);
$font-size-base: 14pt;
$line-height-base: 1.4;
$line-height-small: 1.2;
$page-margin: 16mm;

body {
  background: $background-primary;
  box-sizing: border-box;
  color: $color-primary-print;
  font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
  font-size: $font-size-base;
  line-height: $line-height-base;
  padding: 0 $page-margin 0 10mm;
  position: relative;

  > * {
    box-sizing: border-box;
    padding-left: 6mm;

    &:first-child {
      padding-top: $page-margin;
    }

    &:last-child {
      padding-bottom: $page-margin;
    }
  }
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: 34pt;
}

h2 {
  font-size: 32pt;
}

h3 {
  font-size: 22pt;
}

h4 {
  font-size: 20pt;
}

ol,
ul {
  list-style: inside none;
  margin: 0;
  padding: 0;
}

strong {
  color: $color-pee;
  font-weight: 700;
}

// General classes

.row {
  display: table;
  width: 100%;

  > * {
    display: table-cell;
    vertical-align: top;
    width: 50%;

    &:last-child {
      padding-left: $gutter;
    }
  }
}

.title {
  font-family: 'Bebas Neue', Verdana;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  text-transform: uppercase;

  &:first-of-type {
    margin-top: 0;
  }
}

// Specific classes

.header-new {
  display: none;
}

.new {
  .header-new {
    display: block;
    left: $page-margin;
    position: absolute;

    span {
      background-color: $color-pelorous;
      border-radius: 50%;
      color: $color-secondary;
      display: block;
      font-family: 'TrashHand', serif;
      font-size: 18pt;
      left: -40%;
      padding: 3pt 12pt 2pt;
      position: relative;
      top: - ($font-size-base * $line-height-base + 4pt);
      transform: rotateZ(-6deg);
    }
  }
}

.header.row {
  > * {
    &:first-child {
      // Space between .main-gallery--img
      padding-right: calc(#{50% / 2} - #{$gutter / 2} - #{3 * 128px / 2});
      width: auto;
    }

    &:last-child {
      padding-left: 0;
      width: 128px; // Width of .main-gallery--img
    }
  }
}

.header-company,
.header-site,
.header-date {
  margin: 0;
}

.header-company {
  color: $color-itdlc;
}

.header-date {
  color: $color-pee;
  font-size: 28pt;
}

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

.header-category--image {
  background-color: $color-pee;
  box-sizing: border-box;
  height: 40pt;
  margin: 0 auto;
  padding: $gutter / 10 $gutter / 20;
  width: 40pt;

  svg {
    display: block;
    fill: $color-secondary;
    max-height: 100%;
    max-width: 100%;

    * {
      fill: inherit;
    }
  }
}

.header-category--caption {
  color: $color-pee;
  letter-spacing: 1pt;
  margin-top: $gutter / 5;
}

.main {
  .row {
    &:first-child {
      margin-bottom: $gutter;

      > * {
        vertical-align: middle;
      }
    }
  }
}

.main-title {
  color: $color-itdlc;
  height: 128px; // Pictures height
  margin-bottom: 0;
}

.main-gallery--item {
  float: right;
  text-align: center;
  width: 30%;

  &:nth-child(3n + 1) {
    text-align: right;
  }

  &:nth-child(3n) {
    text-align: left;
  }

  &:nth-child(3n + 1),
  &:nth-child(3n + 2) {
    margin-left: 5%;
  }
}

.main-gallery--img {
  max-width: 100%;
  vertical-align: top;
}

.main-article--title {
  color: $color-pee;
  margin: $gutter 0 $font-size-base;
}

.main-article--content,
.main-article--presentation,
.main-article--visit,
.main-article--quote {
  text-align: justify;
}

.main-article--quote {
  font-family: 'TrashHand', serif;
  left: -6mm;
  margin-top: $gutter;
  overflow-y: hidden;
  padding-left: 6mm;
  position: relative;
  width: 100%;

  :first-child {
    border-top-left-radius: 20pt;
    border-top-right-radius: 20pt;
  }

  :last-child {
    border-bottom-left-radius: 20pt;
    border-bottom-right-radius: 20pt;
    padding-bottom: $gutter / 2;
  }
}

.main-article--quote-quote,
.main-article--quote-signature {
  background-color: $color-quote;
  margin: 0;
  padding-left: $gutter / 1.6;
  padding-right: $gutter / 2;
}

.main-article--partner {
  bottom: $page-margin;
  position: absolute;
}

.main-article--partner-logo {
  display: block;
}

.main-article--quote-quote {
  padding-top: $gutter / 1.6;

  &::before {
    background-image: url('../images/pdf/quote.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: '';
    display: block;
    height: $gutter / 3.2 + $font-size-base * $line-height-base;
    left: 0;
    position: absolute;
    top: $gutter / 3.2;
    width: 6mm + $gutter / 1.6 - 1mm;
  }
}

.main-article--quote-signature {
  overflow-y: hidden;
  padding-top: $gutter / 1.6;

  > span {
    float: right;
    font-size: $font-size-base / 1.25;
    margin-right: $gutter * 2;
  }
}

.insert {
  border: solid $gutter / 5 $color-pee;
  border-radius: 20pt;
  line-height: $line-height-small;
  padding: $gutter / 2;

  + .insert {
    margin-top: $gutter / 1.6;
  }
}

.insert--title {
  color: $color-itdlc;
  margin-bottom: $gutter / 2;
  margin-top: 0;
  padding-left: $gutter / 2; // Half-size of the .insert-item::before icons
}

.insert-item {
  min-height: $gutter / 1.25;
  padding-left: $gutter * 1.5;
  position: relative;

  + .insert-item {
    margin-top: $gutter / 2;
  }

  &::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: $gutter;
    left: 0;
    position: absolute;
    // Make the icon vertically centered according to the first line:
    // $gutter: icon's height
    // $font-size-base * $line-height-small: first line's height
    top: - ($gutter - $font-size-base * $line-height-small) / 2;
    width: $gutter;
  }

  &--info-date {
    &::before {
      background-image: url('../images/pdf/calendar.svg');
    }
  }

  &--info-time {
    &::before {
      background-image: url('../images/pdf/clock.svg');
    }
  }

  &--info-duration {
    &::before {
      background-image: url('../images/pdf/hourglass.svg');
    }
  }

  &--info-additional {
    &::before {
      background-image: url('../images/pdf/exclamation-mark.svg');
    }
  }

  &--info-spaces {
    &::before {
      background-image: url('../images/pdf/crowd.svg');
    }
  }

  &--access-audience {
    &::before {
      background-image: url('../images/pdf/person.svg');
    }
  }

  &--access-registration-paf {
    &::before {
      background-image: url('../images/pdf/national-education.svg');
    }
  }

  &--access-registration {
    &::before {
      background-image: url('../images/pdf/checkbox-checked.svg');
    }
  }

  &--access-contact {
    &::before {
      background-image: url('../images/pdf/information.svg');
    }
  }

  &--access-price {
    &::before {
      background-image: url('../images/pdf/euro.svg');
    }
  }

  &--company-location {
    &::before {
      background-image: url('../images/pdf/map-marker.svg');
    }
  }

  &--company-website {
    &::before {
      background-image: url('../images/pdf/laptop.svg');
    }
  }
}

.insert-company {
  .locality,
  .org {
    text-transform: uppercase;
  }

  .org {
    font-weight: 700;
  }

  .photo {
    display: block;
    max-width: 100%;
  }

  .url {
    color: $color-itdlc;
    overflow-wrap: break-word;
    // Non-standard property.
    // Standardized version is overflow-wrap, but not supported by wkhtmltopdf :(
    word-wrap: break-word;

    a {
      &[href^='http'] {
        color: $color-itdlc;
      }
    }
  }
}
