@import "variables";
@import "media";
@import "mixins";

@import "normalize";
@import "page";

/* Global styles
   ========================================================================== */
* {
  /* Include the content box as well as padding and border for precise definitions */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

// remove the ugly blue outline when focused on some elements, such as the <summary> tag
*:focus {
  outline:0 !important;
}

html {
  font-size: 100%;
}

body {
  @include fontSize($primary-font-size);
  font-family: $body-font-family;
  margin: 0 auto;
  color: $primary-color;
}

main {
  position: relative;

  /* For all headings */
  h1, h2, h3, h4, h5, h6 {
    /* Avoid page breaks immediately */
    page-break-after: avoid;
  }

  /* For all paragraph tags */
  p {
    /* Reset the margin so that the text starts and ends at the expected marks */
    margin: 0;
    font-weight: 300;
  }

  /* For adjacent paragraph tags */
  p + p {
    /* Restore the spacing between the paragraphs */
    margin-top: 0.5cm;
  }

  /* For tables in the document */
  table {
    /* Avoid page breaks inside */
    page-break-inside: avoid;
  }

  ul, ol {
    padding-left: 16px;
    margin: 0 0;
  }

  strong {
    font-weight: 700;
  }

  /* For links in the document */
  a {
    color: $primary-color;
    // use a dashed underline for decoration
    text-decoration: none;
    border-bottom: 1px dashed $divider-color;
  }
}

/* Some old browsers need default styling */
time {
  display: inline-block;
}

header {
  text-align: center;

  h1 {
    @include fontSize(21px);
    margin: 0 0 8px;
    font-weight: 400;

    @media #{$small-screen-only} {
      padding-top: 10px;
    }
  }

  ul {
    list-style: none;
    padding-left: 0 !important;
  }
  li {
    display: block;
  }
  a {
    line-height: 1.2rem;
  }
}

/* Sections
   ========================================================================== */
section {
  @media #{$screen-only} {
    margin-bottom: 0.5rem;
  }

  h2 {
    @include fontSize($h2-font-size);
    font-family: $title-font-family;
    font-weight: bold;
    padding-top: 12px;
    margin: 0 0 4px 0;
    color: $accent-color;
    text-transform: uppercase;
    border-bottom: 0.8px solid #E5E5E5;
    padding-bottom: 2px;
    
    // see more
    a {
      @include fontSize($ref-font-size);
      padding-top: 3px;
      float: right;
    }
  }

  summary {

    clear: both;
    font-weight: 600;
    margin: 0 0 1px 0;

    &::-webkit-details-marker {
      display:none;
    }

    .job {
      box-sizing: border-box;
      display: inline-block;
      min-width: 7cm;
    }

    time {
      font-family: $title-font-family;
      font-weight: 200;
      color: $secondary-color;
    }
  }

  details + details {
    margin-top: 6px;
  }

  &.education, &.projects {
    time {
      float: right;
    }
  }
}

.hide {
  display: none;
}

.download-link {
  position: absolute;
  display: inline-block;
  background-color: #EEE;
  border: none;
  text-decoration: none;

  padding: 10px;
  top: 40px;
  right: 40px;

  @media #{$small-screen-only} {
    @include fontSize(9px);
    top: 0;
    right: 0;
    content: "PDF";
  }
}

/* Print Styles
   ========================================================================== */

/**
 * - Adjust styles for printing, like color
 * - Hide elements with CSS class .web-only
 */
@media print {

  .download-link {
    display: none;
  }

  // no underline for the links
  a {
    border-bottom: none;
  }

  section {
    h2 {
      margin: 0 0 6px 0;
      color: $accent-color-print;
      border-bottom: 1px solid $divider-color;
      // see more
      a {
        display: none;
      }
    }
  }

  // for some unknown reason, we need to declare this rule again to make the exported PDF work
  section summary time {
    color: $secondary-color-print;
  }

  .web-only {
    display: none;
  }
}

$modern-left-column-width: 80px;
.theme-modern {
  header {
    text-align: right;

    h1 {
      font-size: 46px;
      border-bottom: 2px solid #DDD;
      padding-bottom: 10px;
    }
  }

  section {
    padding-left: $modern-left-column-width;

    h2 {
      &:before {
        content: '';
        margin-left: -#{$modern-left-column-width};
        width: 70px;
        margin-right: 10px;
        display: inline-block;
        border-bottom: 5px solid #2b8cd2;
      }
    }
    summary time {
      float: left !important;
      display: inline-block;
      width: $modern-left-column-width;
      text-align: right;
      margin-left: -#{$modern-left-column-width};
      padding-right: 10px;
    }
  }
}
