/**
 * Author(s): Vic Chan, James Morris, Helen Chapman
 *
 * MENUS
 * This file contains css that was previously in header.less (now renamed to critical.less) but is less critical so not inlined.
 * Contains submenus and particular page variants on code in critical.less
 */

@import 'variables.less';
@import 'core-mixins.less';
@import 'site-mixins.less';
@import 'grid.less';

/**
 *  CONTENTS
 *  $SUBMENU
 *  $FLYOUT MENUS
 *  $heading styles....................Moved here from site.less so as to load with the rest of the critical css inline
 */


/* $SUBMENU */
.site-header-top {
  ul li a {
    display: block;
    font-size: 1.05em;
    //font-weight: bold;
  }
  ul li ul li a {
    display: block;
    font-weight: normal;
  }
  ul li.expanded ul {
    min-width: 217px;
    width: 120%;
    display: none;
    z-index: 6;
    overflow: hidden;
    position: absolute;
    background-color: @colorTertiary;
    text-align: left;
    margin: 0;
    li {
      font-size: 1.025em;
      line-height: 1.05em;
      border: 0;
      margin: 0;
      padding: 0;
      display: block;
      a {
        color: @colorLink;
        display: block;
        padding: 1.45em 0;
        margin: 0 0.85em;
        font-weight: normal;
        border-bottom: 1px solid @colorLightGrey;
        &:hover {
          background: @colorLink;
        }
      }
    }
    li.last a,
    li:last-child a {
      border: 0;
    }
  }
  ul li.expanded:hover a {
    .opacity(100);
    color: @colorPrimary;
    background-color: @colorTertiary;
    &:hover {
      color: @colorTertiary;
      background-color: @colorLink;
      background-position: right 9px top 1.6em;
    }
  }
  /* Drop down ul */
  ul li.expanded:hover ul,
  ul li.expanded ul:hover {
    display: block;
    .menu-shadow();
    a {
      font-weight: normal;
      text-transform: none;
      color: @colorLink;
      border-bottom: 1px solid @colorLightGrey;
      &:hover {
        border-color: transparent;
        color: @colorWhite;
        padding: 1.45em 0.85em;
        margin: 0em;
      }
    }
    li.last a,
    li:last-child a {
      border: none;
    }
  }
}

/* Submenu: secondary nav only */
.root-menus .site-header-bottom {
  /* Make the last item move the left */
  ul li.last ul {
    right: auto;
  }
}
.site-header-bottom {
  ul {
    position: relative;
  }
  ul li a {
    display: block;
    font-size: @sizeMS;
    &.active-trail {
      color: @colorLinkHeader;
      background-position: right 15px top -14em;
    }
  }
  ul li ul li a {
    display: block;
    font-size: 1.4em;
  }
  ul li.expanded ul {
    min-width: 217px;
    width: 115%;
    max-width: 220px;
    display: none;
    z-index: 2;
    overflow: hidden;
    position: absolute;
    background-color: @colorWhite;
    text-align: left;
    margin: 0;
    li {
      font-size: @sizeS;
      line-height: 1.05em;
      border: 0;
      margin: 0;
      padding: 0;
      display: block;
      a {
        text-transform: none;
        color: @colorLink;
        display: block;
        padding: 1em 0;
        margin: 0 0.625em;
        border-bottom: 1px solid @colorLightGrey;
        &:hover {
          margin: 0;
          padding: 1em 0.625em;
          border-color: transparent;
        }
      }
    }
    li.last a,
    li:last-child a {
      border: none;
    }
  }
  /* Make the last item move the left */
  ul li.last ul {
    right: 0px;
  }
  ul li.expanded:hover a {
    color: @colorPrimary;
    background-color: @colorWhite;
    .opacity(100);
    &:hover {
      color: @colorWhite;
      background-color: @colorLink;
      background-position: right 15px top 0.9em;
    }
  }

  /* Drop down ul */
  ul li.expanded:hover ul,
  ul li.expanded ul:hover {
    display: block;
    .menu-shadow();
    a {
      font-weight: normal;
      text-transform: none;
      font-size: @sizeMS;
      color: @colorLink;
      border-bottom: 1px solid @colorLightGrey;
      &:hover {
        color: @colorWhite;
        background-color: @colorLink;
      }
    }
  }
}

// Overrides of above for 404 page
.page-content-404-page-not-found {
  .site-header-bottom {
    ul li a {
      &.active-trail {
        color: @colorWhite;
        .opacity(70);
        background-position: right 15px top 0.9em;
        &:hover {
          .opacity(100);
        }
      }
    }
    ul li.expanded:hover a {
      color: @colorPrimary;
      &:hover {
        color: @colorWhite;
      }
    }

  }
}

/* $FLYOUT MENUS - More like modals now*/
/* JS at work here too */

.flyout-menu.departments,
.flyout-menu.colleges {
  display: none;
}

.oxweb-academic-divisions,
.oxweb-college-websites {
  position: relative;
  .main-menu-item {
    padding: 0.625em 2.1875em 0.8375em 1.25em;
    display: inline-block;
    color: @colorWhite;
    .opacity(70);
    float: right;
    background: url('@{theme_path}/images/menu_arrow.png') no-repeat 86% 1.35em;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#66000000', endColorstr='#66000000'); /* IE */
    background: url('@{theme_path}/images/menu_arrow.png') no-repeat 86% 1.35em fadeOut(@colorBlack, 60%);
    &:focus,
    &.menu-open {
      .opacity(100);
      text-decoration: none;
      color: @colorPrimary;
      background: url('@{theme_path}/images/menu_arrow.png') no-repeat 86% -95px @colorTertiary;
      position: relative;
      z-index: 999999;
      h2 {
        color: @colorPrimary;
      }
    }
    &:hover {
      text-decoration: none;
      .opacity(100);
    }
    h2 {
      display: inline;
      font-size: @sizeSS;
      margin: 0;
      font-weight: normal;
      color: @colorWhite;
    }
  }
  .flyout-menu {
    max-width: 1000px;
    min-width: 950px;
    width: 100%;
    position: absolute;
    top: 46px;
    right: 0;
    z-index: 99999;
    background: @colorTertiary;
    .menu-shadow();
    .border-box();
    padding: 1.5em 2.2em;
    font-size: @sizeMS;
  }
  .section {
    .clearfix();
    margin-bottom: 3.125em;
    &:last-child {
      margin-bottom: 0;
    }
    .section-with-btns {
      position: relative;
      a h2,
      h2 {
        position: absolute;
        bottom: 0;
        float: left;
      }
      .clearfix();
      .section-buttons {
        float: right;
        a.btn {
          background: @colorLink;
          font-size: @sizeSS;
          padding: 0.6em 0.8125em;
          margin-left: 1em;
          text-decoration: uppercase;
          margin-right: 0;
          .transition(none);
          &:hover {
            background: @colorAltLinkHover;
            .transition(none);
          }
        }
      }
    }
  }
}

.oxweb-college-websites {
  .section-with-btns {
    h2 {
      font-size: @sizeMS;
      text-transform: uppercase;
      text-rendering: initial;
      margin-left: 1.0625em;
    }
  }
  ul.col1,
  ul.col2,
  ul.col3 {
    .clearfix();
    display: block;
    margin: 0;
    border-top: 1px solid @colorLightGrey;
    margin-top: 1em;
    float: left;
    width: 33.3%;
    text-align: left;
    li {
      font-weight: 700;
      list-style: none;
      border-bottom: 1px solid @colorLightGrey;
      border-right: 1px solid @colorLightGrey;
      padding: 1.0625em 1.5em;
      font-size: @sizeSS;
      &:last-child {
        border-bottom: none;
      }
      ul {
        margin: 0;
        margin-top: 0.8em;
        li {
          border: none;
          padding: 0;
          margin-bottom: 1em;
          &:last-child {
            margin-bottom: 0;
          }
          a {
            font-size: @sizeXL;
            .transition(color 0.1s);
            &:hover {
              color: @colorAltLinkHover;
              .transition(color 0.1s);
              text-decoration: none;
            }
          }
        }
      }
    }
  }
  ul.col3 li {
    border-left: 1px solid @colorLightGrey;
  }
  ul.col3 li,
  ul.col2 li {
    border-right: none;
  }
}


.oxweb-academic-divisions {
  .section {
    /* Clearfix just the H2 */
    & > a {
      .clearfix();
    }
    a {
      h2 {
        margin-left: 1.5625em;
        float: left;
        font-size: @sizeMS;
        text-transform: uppercase;
        text-rendering: initial;
        padding-right: 15px;
        background: url('@{theme_path}/images/red-black-right-chevron-sprite.png') no-repeat right 3px;
      }
      &:hover h2 {
        color: @colorAltLinkHover;
        background-position: right -28px;
      }
    }
    ul {
      .clearfix();
      display: block;
      margin: 0;
      border-top: 1px solid @colorLightGrey;
      margin-top: 1em;
      float: left;
      width: 33.3%;
      li {
        .border-box();
        text-align: left;
        font-size: @sizeS;
        border-bottom: 1px solid @colorLightGrey;
        border-right: 1px solid @colorLightGrey;
        overflow: hidden;
        a {
          padding: 0.8em 1.5625em;
          .transition(color 0.1s);
          &:hover {
            background: @colorWhite;
            color: @colorAltLinkHover;
            .transition(color 0.1s);
            text-decoration: none;
          }
        }
        /* Meta data School name */
        div {
          color: @colorMidGrey;
          font-size: @sizeMeta;
          text-transform: uppercase;
          margin-bottom: -0.5em;
        }
      }
    }
    ul.col3 {
      li {
        border-right: none;
      }
    }
  }
}