@import 'variables.css';
@import 'colors.css';

nav {
    position: relative;
    text-align: center;
    letter-spacing: 0.06rem;
}

nav a {
    text-decoration: none;
    color: #fff;
    display: block;
}

nav ul {
    padding: 0;
    list-style: none;
    position: relative;
    text-align: left;
}

nav > ul:first-child {
    border-bottom: var(--header-top-border-height) solid var(--primary-color);
}

nav li {
    float: left;
}

nav ul:after {
    clear: both;
}

nav ul:before,
nav ul:after {
    content: " ";
    display: table;
}

nav ul.primary li a {
    display: block;
    padding: 1.10rem;
}

nav ul.primary li:last-child a {
    border-right: none;
}

nav ul.primary li a:hover, nav ul.primary li.active a {
    color: var(--action-color);
}

nav ul.sub {
    position: absolute;
    z-index: 200;
    box-shadow: 0.12rem 0.12rem 0 var(--content-box-color);
    width: 180px;
    display: none;
}

nav ul.sub li {
    float: none;
    margin: 0;
}

nav ul.sub li a {
    border-bottom: 0.06rem dotted var(--content-box-color);
    border-right: none;
    color: var(--typography-color);
    padding: 0.84rem 1.66rem;
}

nav ul.sub li:last-child a {
    border-bottom: none;
}

nav ul.sub li a:hover, nav ul.sub li.active a {
    color: var(--action-color);
    background: #eeeeee;
}

nav ul.primary li:hover ul {
    display: block;
    background: #fff;
}

nav ul.primary li:hover a {
    background: #fff;
}

nav ul.primary li:hover > a {
    color: var(--typography-color);
    opacity: 0.6;
}

nav ul.primary li.active > a {
    color: var(--action-color);
}