body.guide {
  &::-webkit-scrollbar {
    width: 12px;
    background-color: $gray-100;
  }
  
  &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
      border-radius: 10px;
      background-color: transparent;
    }
  
  &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  }

  -webkit-tap-highlight-color:rgba(38, 27, 35, 0);


  // ----------------------------------------------------------------------------
  // Typographic Baseline
  // ----------------------------------------------------------------------------
  
  :root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  }
  @supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
  }

  font-family: Inter, sans-serif;
  font-size: 1rem; /* 16px */
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;

  font-feature-settings: "liga" 1;
  @supports (font-variant-ligatures: common-ligatures) {
    font-feature-settings: normal;
    font-variant-ligatures: common-ligatures;
  }

  font-feature-settings: "onum" 1;
  @supports (font-variant-numeric: oldstyle-nums) {
    font-feature-settings: normal;
    font-variant-numeric: oldstyle-nums;
  }

  p {
    // Set hyphenation rules
    hyphenate-limit-lines: 2; /* Safari */
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
    hyphenate-limit-chars: 6 3 2; /* Not Safari */
    hyphenate-limit-last: always;

    margin: 0 0 0.75em 0; // Space after paragraph
    text-align: left;
  } // p

  // Links

  a {

    &:link {
      color: $rf-brand;
      text-decoration: underline;
    }

    &:hover,
    &:active {
      color: $rf-brand-light;
    }

    &:visited {
      color: $rf-brand-darker;
    }
  }

  abbr {
    hyphens: manual;
  }

  abbr.smallcaps {
    font-feature-settings: "smcp" 1, "c2sc" 1;
    @supports (font-variant-caps: all-small-caps) {
      font-feature-settings: normal;
      font-variant-caps: all-small-caps;
    }
  }

  // Tables
  table {
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
    margin: 2em auto;
    width: 100%;

    caption {
      caption-side: bottom;
    }

    th {
      background-color: $gray-700;
      color: #fff;
      font-size: 0.875em;
      padding: 0.5em;
      text-align: left;
    }

    tr {
      &:nth-child(even) {
        background-color: $gray-100;
      }
    }

    td {
      padding: 0.5em;
    }
  }

  // Headlines
  // TODO: media queries to increase font size, current sizes are for desktop, so drop base to mobile appropriate and MQ up twice (min width 60/120 em, minheight 30/60em)
  h1 {
    color: $rf-brand;
    font-family: 'Calibre', sans-serif;
    font-size: 3rem; /* 48px */
    font-weight: 700; /* Light */
    line-height: 1em;
    margin-top: 0;

    @include media('<desktop') { margin-top: 0.5em; }
  } // h1

  h2 {
    font-family: 'Calibre', sans-serif;
    font-size: 2.25rem; // Calibre is smaller than inter at the same size
    font-weight: 700; /* Bold */

    a,
    a:link,
    a:visited {
      color: $rf-brand;
    } // a, a:link, a:visited
  } // h2

  h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600; /* Semibold */

    a,
    a:link,
    a:visited {
      color: $gray-900;
    } // a, a:link, a:visited

    code {
      font-size: 1.5rem;
      font-weight: 400;
    }
  } // h3

  h4 {
    font-size: 1.125rem;

    code {
      font-size: 1.125rem;
      font-weight: 400;
    }
  }

  h5 {
    font-size: 0.9375rem;

    code {
      font-size: 0.9375rem;
      font-weight: 400;
    }
  }

  h1, h2, h3, h4, h5 {
    a,
    a:link {
      text-decoration: none;
    } // a, a:link

    a:hover,
    a:active {
      text-decoration: underline;
    } // a:hover, a:active

    span {
      font-weight: 400;
    }
  } // h1, h2, h3, h4

  // Old style numbers look weird in headlines and ordered lists, so use proportional lining numbers
  h1, h2, h3, h4, h5, h6, ol, ol > li {
    font-feature-settings: "kern" 1;
    @supports (kerning: normal) {
      font-feature-settings: normal; 
      kerning: normal;
    }
    font-feature-settings: "lnum" 1;
    @supports (font-variant-numeric: lining-nums) {
      font-feature-settings: normal;
      font-variant-numeric: lining-nums;
    }
  }

  // Horizontal Rule
  hr {
    height: 1em;
    border: 0;
    background: url("../images/hr_rails_mobile.svg") center no-repeat;
    background-size: contain;
    margin: 1em auto;
    width: 90%;

    @include media('>tablet') {
      height: 1.5em;
      background: url("../images/hr_rails.svg") center no-repeat;
    }

    @include media('>desktop-ultra-wide') {
      height: 2em;
    }

    &.hide {
      height: 0 !important;
    }
  }

  // Definition Lists

  dl {
    margin: 0;
    
    dt {
      font-weight: bold;
      font-size: 1.125rem;
      padding: 0.125em 0 0.25em 0;
      margin-bottom: 0.75em;

      @include media('<phone-wide') {
        font-size: 1rem;
      } // @include media('<phone-wide')
    } // dt

    dd {
      padding: 0.25em 0 1em;
      border-bottom: 1px solid $gray-500;
      margin: 0 0 1em 0;

      .guides-indes-list &:last-child {
        border-bottom: none;
      }
    } // dd
  } // dl

  li {
    margin-bottom: 0.5em;
  }

  // Code

  pre, code {
    font-size: 1rem;
    font-family: "IBM Plex Mono", "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace !important;
    line-height: 1.5;
    margin: 1em 0;
    overflow: auto;
  } // pre, code
  
  p code, ul code {
    background: $gray-200;
    border-radius: calc($base-border-radius / 2);
    padding: 1px 3px;
  }

  p img {
    max-width: 100%;
  }
  
  pre, tt, code {
    // https://caniuse.com/mdn-css_properties_white-space_pre-wrap
    white-space: pre-wrap;       /* css-3 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }

  // Back to Top element

  a.back-to-top {
    background: url('../images/up_white_arrow.png') no-repeat center center, $rf-brand;
    background-size: 1em;
    border-radius: calc($base-border-radius * 2);
    box-shadow: 0 2px 20px rgba(0,0,0,0.25);
    padding: 1.5em;
    position: fixed;
    right: 1em;
    bottom: 1em;
    visibility: hidden;
  }
  
  a.back-to-top.show {
    visibility: visible;
  }

  // ----------------------------------------------------------------------------
  // Layout
  // ----------------------------------------------------------------------------

  .wrapper {
    padding: 1em;
    text-align: left;

    @include media('>desktop') { // 1024
      max-width: calc(55rem + 420px);
      margin: 0 auto;
      padding-right: 470px;

      :where(html[dir="rtl"]) & {
        padding-right: 1.5em;
        padding-left: 470px;
      }
    }
  } // .wrapper

  #container .wrapper {
    padding-top: 0;

    h2:first-child {
      margin-top: 0;
    }
  }

  select {
    border-radius: $base-border-radius;
    padding: 0.25em;
  }

  // topNav is a hidden area for mobile only
  nav#topNav {
    background-color: $gray-200;
    color: $gray-600;
    padding: 0.5em 0;
    font-size: 0.875rem;

    @include media('>desktop') {
      display: none;
    }

    .wrapper {
      text-align: center;
    }

    .s-hidden {
      display: none;
    }

    .red-button {
      background: $rf-brand;
      border-bottom: 2px solid $rf-brand-dark;
      border-radius: $base-border-radius;
      color: white;
      padding: 0.5em 1em;
    }

    .more-info-label {
      @include media('<desktop') {
        display: none;
      }
    }

    .more-info-button {
      cursor: pointer;
    }

    .more-info-links {
      @extend %list-in-disguise;
      background: $gray-200;
      border-radius: $base-border-radius;
      box-shadow: 0 2px 20px rgba(0,0,0,0.25);
      font-size: 1.25em;
      position: absolute;
        left: 10vw;
      width: 80vw;

      li {
        border-bottom: 1px solid $gray-300;
        padding: 0.5em;

        &:last-child {
          border-bottom: none;
        }

        a,
        a:link,
        a:visited {
          font-weight: bold;
          text-decoration: none;
        }
      }
    }

  } // nav#topNav

  header#page_header {
    width: 100%;

    .wrapper {
      max-width: calc(57em + 400px);
      padding-right: 0;
    }

    nav#feature_nav {
      @include media('>desktop'){
        align-items: top;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
      }
      
      // Image augmented
      .header-logo {
        text-align: center;
        
        a {
          background-image: url("../images/logo_rails-circle.svg");
          background-repeat: no-repeat;
          background-position: top center;
          display: inline-block;
          font-family: 'Calibre', sans-serif;
          font-size: 2.25rem;
          font-weight: 700;
          margin: 0 auto;
          padding-top: 75px;
          text-align: center;
          text-decoration: none;
          font-weight: 700;

          @include media('>desktop'){
            padding: 10px 0 0 85px;
            background-position: top left;     
            height: 85px;
            vertical-align: middle;
          }
        } // a
        
        span#version_switcher {
          color: $gray-600;
          display: block;
          font-size: 0.75em;

          @include media('>desktop') {
            display: inline-block;
            margin-left: 0.5em;
            vertical-align: 1px;
          }

          select {
            color: $gray-600;
          }
        } // span#version_switcher
      } // .header-logo

      ul.nav {
        @extend %list-in-disguise;
        margin: 1em 1em 0 1em;

        @include media('>desktop'){
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          margin: 0;
          padding: 1em 0 0 0;
        }

        li {
          background: $gray-200;
          border-bottom: 1px solid $gray-300;
          font-size: 1.25em;
          text-align: center;
          padding: 1em;

          @include media('>desktop'){
            background: none;
            border: none;
            font-size: 0.75rem;
            height: 24px;
            padding-top: 5px;

            &:first-child {padding-top: 0;}

            a,
            a:link,
            a:visited {
              color: $gray-900;
              font-weight: bold;
              text-decoration: none;
            }
          }

          &:first-child {
            border-top-left-radius: $base-border-radius;
            border-top-right-radius: $base-border-radius;
          }
          &:nth-last-child(2) {
            border-bottom: none;
            border-bottom-left-radius: $base-border-radius;
            border-bottom-right-radius: $base-border-radius;
          }
          &:last-child {
            // the drop down
            background: none;
            border: none;
            padding: 1em 0 0 0;
            
            select {
              max-width: 100%;
            }
          }

          a#home_nav {
            @include media('>desktop') {
              // Image replacement
              background-color: transparent;
              color: transparent;
              border: 0;
              overflow: hidden;
              text-indent: 100%;
              text-shadow: none;
              white-space: nowrap;
            
              &:before {
                content: "";
                display: block;
                height: 100%;
                width: 0;
              }

              // all the rest
              background-image: url("../images/icon_house-chimney.svg");
              background-repeat: no-repeat;
              background-position: top center;
              display: inline-block;
              height: 24px;
              width: 24px;
            }
          }


          &.guides-index-large {
            @include media('<desktop') {
              display: none;
            }
          }

          &.guides-index-small {
            @include media('>desktop') {
              display: none;
            }
            @include media('<desktop') {
              display: block;
            }
          }
        }
      }
    } // nav#feature_nav
  } // header#page_header

  // Desktop guides flyout

  .guides-index .guides-index-item {
    position: relative;
    z-index: 15;
    padding-bottom: 0.125em;

    :where(html[dir="ltr"]) & { background-position: right top; padding-right: 1em; }
    :where(html[dir="rtl"]) & { background-position: left top; padding-left: 1em; }
  }

  
  #guides {
    background: $gray-200;
    box-shadow: 0 2px 20px rgba(0,0,0,0.25);
    display: block;
    border-radius: $base-border-radius;
    color: $gray-900;
    padding: 2em 2em 1.5em 2em;
    position: absolute;
      top: 25px;
      right: 50px;
    width: 90vw;
    max-width: 1000px;
    z-index: 10;

    :where(html[dir="ltr"]) & { left: auto; right: 50px; }
    :where(html[dir="rtl"]) & { left: 50px; right: auto; }

    &.visible {
      display: block !important;
    }

    .guides-section-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: 60em;
      width: 100%;

      .guides-section {
        flex: auto;
        margin: 0 2em 0.5em 0;
        text-align: left;
        width: 33%;

        dt, dd {
          font-weight: 400 !important;
          font-size: 0.825rem;
          margin: 0;
          padding: 0;
          font-variant-numeric: lining-nums tabular-nums;
        }

        dt {
          margin: 0.5em 0;
          font-weight: bold !important;

        }

        dd {
          line-height: 1.2;
          margin-bottom: 0.5em;
          border-bottom: none;

          a,
          a:link,
          a:visited {
            color: $gray-900;
            text-decoration: none;
            font-weight: 400 !important;
          }
      
          a:hover,
          a:active {
            color: $rf-brand !important;
            text-decoration: underline !important;
          }
        }
      }
    }

  } // #guides

  footer#page_footer {
    background-color: $gray-800;
    color: #fff;
    font-size: 0.75em;
    padding: 1.5em 1.5em .5em 1.5em;
    width: 100%;

    .wrapper {
      padding: 0;

      @include media('>desktop') {
        padding: 0 1.5em;
      }
    }

    p {
      max-width: 100vw;
    }
  }

  #feature {
    background-color: $gray-100;

    @include media('>desktop') {
      background-color: #fff;
    }

    hr {
      margin-top: 2.5em;
    }

    #subCol {
      background-color: $gray-100;
      border-radius: $base-border-radius;
      font-size: 1rem;
      padding: 0.5em 1em;

      @include media('>desktop') {
        display: block;
        position: fixed;
          top: 100px;
          right: 50px;
        max-height: calc(100vh - 200px);
        width: 400px;
        
        :where(html[dir="rtl"]) & {
          right: auto; 
          left: 50px;
        }
      }

      &.guide-index {
        background-color: transparent !important;
      }

      @include media('>desktop-ultra-wide') {
        right: calc(30vw - 400px);

        :where(html[dir="rtl"]) & {
          right: auto; 
          left: calc(30vw - 400px);
        }
      }

      @include media('>desktop-hd') { // 1920
        right: calc(40vw - 400px);

        :where(html[dir="rtl"]) & {
          right: auto; 
          left: calc(40vw - 400px);
        }
      }

      h3.chapter img {
        margin-right: 0.25em;
      }

      ol.chapters {
        padding-inline-start: 3.5em;
        padding-inline-end: 1em;

        &::-webkit-scrollbar
        {
          width: 6px;
          background-color: #F5F5F5;
        }

        &::-webkit-scrollbar-track
        {
          background-color: #F5F5F5;
          border-radius: 6px;
          box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        }  

        &::-webkit-scrollbar-thumb
        {
          border-radius: 5px;
          background-image: -webkit-gradient(linear,
                            left bottom,
                            left top,
                            color-stop(0.44, $rf-brand-light),
                            color-stop(0.72, $rf-brand),
                            color-stop(0.86, $rf-brand-dark));
        }


        @include media('>desktop') {
          overflow-y: auto;
          overflow-x: hidden;
          max-height: calc(100vh - 350px);
        }

        li {
          font-weight: bold;

          a {
            position: relative;
            display: block;
            word-wrap: break-word;
          }

          a,
          a:link,
          a:visited {
            color: $gray-900;
            text-decoration: none;
          }
          
          a:hover,
          a:active {
            color: $rf-brand;
            text-decoration: underline;
          } // a

          ul {
            margin-top: 0.5em;
            margin-bottom: 0.75em;
            padding-inline-start: 1em;
            padding-inline-end: 0.25em;
            
            li {
              font-weight: 400;

              a.active::after { // highlight
                @include media('>desktop') {
                  width: 328px;
                }
                left: -3em;
              }

              a.active::before { // red square
                left: -2.5em;
                top: 7px;
              }
            } // li
          } // ul

          a::after { // highlight
            content: '';
            position: absolute;
            display: block;
            height: calc(100% + 10px);
            @include media('>desktop') {
              width: 352px;
            }
            top: 50%;
            transform: translateY(-50%);
            left: -3.5em;
            border-radius: 8px;
            background-color: $stop-bkgnd;
            opacity: 0;
            transition: opacity 0.2s ease-in-out;

            :where(html[dir="rtl"]) & {
              right: -3.5em;
              left: unset;
            }
          }

          a.active::after {
            opacity: 1;
          }

          a::before { // red square
            content: '';
            display: block;
            position: absolute;
            height: 10px;
            width: 10px;
            top: 6px;
            left: -3em;
            border-radius: 3px;
            background-color: $rf-brand;
            opacity: 0;
            transition: opacity 0.2s ease-in-out;

            :where(html[dir="rtl"]) & {
              right: -3em;
              left: unset;
            }
          }

          a.active::before {
            opacity: 1;
          }
        } // li

        > li:first-child {
          margin-top: 0.5em;
        }
      } // ol
    }
  }
  
} // body.guide

html[dir="rtl"] {
  body.guide {
    direction: rtl;

    p, table th, .wrapper,
    #guides .guides-section-container .guides-section {
      text-align: right;
    }
  } // body.guide

  &:lang(ar), &:lang(fa) {
    body.guide {
      h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li,
      header#page_header nav#feature_nav .header-logo a {
        font-family: "Noto Sans Arabic", sans-serif !important;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings: "wdth" 100;
      }
    } // body.guide
  } // &:lang(ar), &:lang(fa)

  &:lang(he), &:lang(iw) {
    body.guide {
      h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li,
      header#page_header nav#feature_nav .header-logo a {
        font-family: "Heebo", sans-serif !important;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
      }
    } // body.guide
  } // &:lang(he), &:lang(iw)
} // html[dir="rtl"]
