@charset "UTF-8";
$nav-small-screen-header-height: 3em;
@mixin main-nav(  $nav-orientation: vertical,
                    $side: left,
                    $header-height: 7em,
                    $accountlinks-offset: 0,
                    $search-offset: 0,
                    $topbar-offset: 0,
                    $sidebar-width: 0
                  ) {

    #account-links {
        position: absolute;
        top: -$nav-small-screen-header-height;
        white-space: nowrap;

    }

    .top-bar {
        &.expanded {
            z-index: 99;
        }

        .has-dropdown a, .toggle-topbar a {
            text-decoration: none;
        }
    }

    /* On small screens, this shows in the left corner of the menu bar so an account links
    modal can be accessed */
    #account-link-access, #login-form-access {
        position: absolute;
        left: 1em;
        top:  -1 * $topbar-height;

        &:visited {
            color: $link-color !important;
        }
    }

    /* Adjustments to the account links display in the masthead */
    @media #{$small-only}, print {
        #account-links-userpic {
            margin-top: -11px;
            img {
                max-height: $nav-small-screen-header-height;
                width: auto;
            }
        }
    }

    @media print {
        #account-links-text {
            display: none;
        }
    }

    @media #{$small-only} {
        /* This makes the account links text into a modal when the screen is small */
        #account-links-text {
            @include reveal-modal-base(
              // Provides reveal base styles, can be set to false to override.
              $base-style:true,
              // Sets reveal width Default: $reveal-default-width or 80%
              $width:$reveal-default-width
            );
            @include reveal-modal-style(
              // Sets background color of reveal modal. Default: $reveal-modal-bg or #fff
              $bg:$reveal-modal-bg,
              // Set reveal border style. Default: $reveal-border-style or solid
              $border:true,
              // Padding to apply to reveal modal. Default: $reveal-modal-padding.
              $padding:$reveal-modal-padding,
              // Width of border (i.e. 1px). Default: $reveal-border-width.
              $border-style:$reveal-border-style,
              // Color of border. Default: $reveal-border-color.
              $border-width:$reveal-border-width,
              // Color of border. Default: $reveal-border-color.
              $border-color:$reveal-border-color,
              // Choose whether or not to include the default box-shadow. Default: true, Options: false
              $box-shadow:true,
              // Default: $reveal-position-top or 50px
              $top-offset:$reveal-position-top
            );

            .logout.button { display: block; margin-top: .5em; }
            ul { list-style: none; margin-left: 0; }
            button.close-reveal-modal {
                @include reveal-close();
            }
        }
    }

    @media #{$medium-up} {
      #account-links {
        top: $accountlinks-offset + 1em;

        #account-links-text {
            .close-reveal-modal { display: none; }
        }

        #account-links-text, .account-links-in-header, #nav-login-form {
            float: $side;
        }

        ul {
            float: $side;
            clear: both;
            margin: 0;
            font-size: .85rem;
            line-height: 1.4;
        }

        li {
            list-style: none;
            float: left;
            margin: 0 .5em;

            &:after {
                content: "•";
                margin-left: .5em;
            }
            &:last-child:after {
                content: "";
                margin-left: 0;
            }
        }

        li.before-break:after {
            content: "";
            margin-left: 0;
        }

        li.after-break {
            clear: left;
        }

        .ljuser {
            font-size: 1.3rem;
            line-height: 1;
        }

        .ljuser img {
            vertical-align: middle !important;
        }

        form {
            margin-bottom: 0;
        }

        label.inline {
            text-align: right;
        }

        .logout.button {
            padding: .15rem .5rem;
            margin: 0;
            vertical-align: .15rem;
        }

      }

    #account-links-userpic {
        max-height: 7em;
        float: $side;
        @if $side == left {
            margin-right: 1em;
        } @else {
            margin-left: 1em;
        }
    }

    #account-links-text {
        text-align: $side;
    }

    #nav-login-form {
        line-height: 1;

        label, input {
            margin-bottom: 0.5em;
        }

        a {
            line-height: 2em;
        }
    }

    #nav-login-form {
        #login-form, #login-other {
            display: inline-block;
            width: 49%;
            vertical-align: top;
            padding-left: .9375rem;
        padding-right: .9375rem;
        }
    }

    }

    #header-search {
        position: absolute;
        top: $header-height + $search-offset;
        right: 0;
        padding-right: 2em;

        ul {
            list-style: none;
            margin-bottom: 0;
        }
    }

    .nav-search {
        input, select {
            margin: 0;
            width: auto;
            display: inline-block;
            font-size: 0.875rem;
        }
        input {
            padding: 1px .25em;
        }
        select {
            padding: 1px 24px 1px .25rem; // leave room on right for dropdown arrow
        }
        input.button {
            padding: 0 .5em;
        }
    }

    /**
     * Header space
     */
    #masthead {
        height: $nav-small-screen-header-height + 1em;
    }

    #logo img {
        height: $nav-small-screen-header-height;
        vertical-align: middle;
    }

    #content {
        margin-top: $nav-small-screen-header-height + $topbar-offset + 2 * $base-line-height !important;
    }

    @media #{$medium-up} {
        #masthead {
            height: $header-height;
        }

        #logo {
            line-height: $header-height - $base-line-height;
        }

        #logo img {
            height: auto;
        }

        #content {
            margin-top: $header-height + $search-offset + 2 * $base-line-height !important;
        }
    }

    @if $nav-orientation == vertical {
        .main-nav {
            position: absolute;
            top: $nav-small-screen-header-height + $topbar-offset;
            left: 0;
            right: 0;
        }

        @media #{$medium-up} {
            .main-nav {
                top: $header-height + $topbar-offset;
            }
        }

        @media #{$topbar-media-query} {
            .main-nav {
                width: $sidebar-width;

                section {
                    font-size: small;
                }

                ul {
                    margin: 0;
                    padding: 0;
                }

                .subnav a,
                .topnav a {
                    color: $topbar-link-color;
                }
            }

            /**
             * Reset top-bar styles so they don't apply to the sidebar
             */
            .top-bar {
                height: auto;

                .js-generated {
                    display: none;
                }
            }

            #content {
                border-left: $sidebar-width solid $topbar-bg;
                margin-left: 0; // so that it doesn't try to center the content on the page
                padding-left: ($column-gutter/2);
                min-height: 73rem;
            }
        }
    } @else {
        .main-nav {
            position: absolute;
            top: $nav-small-screen-header-height + $base-line-height;
            left: 0;
            right: 0;
        }

        /* Make top-level nav items match the color of their sub-menu when open.
        /  Without this, it looks like you're hovering on both the top-level item
        /  AND whichever sub-item you're actually hovering on.
        */
        @media #{$topbar-media-query} {
            .top-bar-section li:hover:not(.has-form) a:not(.button):not(:hover) {
                background: $topbar-dropdown-link-bg;
            }
        }

        @media #{$medium-up} {
            .main-nav {
                top: $header-height;
            }
        }

        // shrink search form on smaller screen sizes
        @media #{$small-up} and (max-width:57em) {
            .nav-search input, .nav-search select { max-width: 8em; }
        }

        @media #{$small-up} and (max-width:50em) {
            .nav-search input, .nav-search select { max-width: 6em; }

            .top-bar-section .has-dropdown a {
                padding-right: $topbar-link-padding !important;

                &:after { display: none; }
            }
        }
    }
}