/* Nav */

:root {
  --logo-width: 3rem;
  --nav-width: 280px;
}
@media (min-width: 768px) {
  :root {
    --logo-width: 4rem;
    --nav-width: 225px;
}
}
@media( min-width: 992px ) {
    :root {
        --nav-width: 240px;
    }
}

@media( min-width: 1200px ) {
    :root {
        --nav-width: 280px;
    }
}

.logo {
    display: inline-block;
    width: var(--logo-width);
}
.nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: var(--nav-width);
    background-color: var(--light);
}
.main-nav {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
}

.main-nav details summary {
    outline: none;
    cursor: pointer;
    padding: 1rem 1.5rem;
    line-height: 1em;
    list-style-type: none;
    font-size: var(--h3);
    font-weight: 500;
    text-decoration: none;
    color: var(--black);
    transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-property: margin, color;
}
.main-nav details summary:hover {
    color: var(--dark);
}
.main-nav details summary:active {
    color: var(--primary);
    transition: none;
}
.main-nav details summary::marker, .main-nav details summary::-webkit-details-marker {
    display: none;
}
.main-nav details summary .icon {
    transform: rotate(-90deg);
    transition: transform 120ms ease-out;
}

.main-nav details[open] {
    margin-bottom: 1rem;
}
.main-nav details[open] summary {
    margin-bottom: 2rem;
}
.main-nav details[open] summary .icon {
    transform: rotate(0);
}
.main-nav details[open] ul {
    margin-top: -2rem;
}

.main-nav details ul a {
    color: var(--dark);
    display: block;
    padding: .5rem 1rem .5rem 3rem;
    text-decoration: none;
    transition: 300ms;
    transition-property: color, background-color;
}
.main-nav details ul a:hover {
    color: var(--black);
    background-color: rgba(0,0,0,.04);
}
.main-nav details ul a:active {
    color: var(--primary);
    transition: none;
}
.main-nav details .current-menu-item a, .main-nav details .current-menu-item a:hover, .main-nav details .current-menu-item a:active {
    color: var(--primary);
    background-color: transparent;
}



input[type="checkbox"].mobile-nav-check {
    display: none;
}

/* Mobile nav */
@media (max-width: 768px) {
    .mobile-nav-btn {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 101;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        font-weight: 600;
        color: var(--primary);
    }
    .mobile-nav-btn:focus, .mobile-nav-btn:active {
        background-color: rgba(0,0,0,.1);
    }

    .mobile-nav-icon {
        width: 32px;
        height: 32px;
        margin-right: .25em;
        display: inline-block;
        position: relative;
    }
    .mobile-nav-icon span, .mobile-nav-icon:before, .mobile-nav-icon:after {
        content: '';
        display: block;
        position: absolute;
        left: 4px; right: 4px;
        height: 3px;
        background: var(--primary);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transition: 300ms ease-in-out;
    }
    .mobile-nav-icon span   { top: calc(50% - 1px); }
    .mobile-nav-icon:before { top: 8px; }
    .mobile-nav-icon:after  { bottom: 7px; }
    input[type="checkbox"].mobile-nav-check:checked ~ .mobile-nav-btn .mobile-nav-icon:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 15px;
    }
    input[type="checkbox"].mobile-nav-check:checked ~ .mobile-nav-btn .mobile-nav-icon:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 14px;
    }
    input[type="checkbox"].mobile-nav-check:checked ~ .mobile-nav-btn .mobile-nav-icon span {
        opacity: 0;
    }

    .mobile-nav-overlay {
        pointer-events: none;
        opacity: 0;
        position: fixed;
        z-index: 99;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0,0,0,.5);
        transition: opacity 200ms;
    }
    input[type="checkbox"].mobile-nav-check:checked ~ .mobile-nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .nav {
        pointer-events: none;
        z-index: 100;
        opacity: 0;
        max-width: 90vw;
        transform: translateX(100%);
        transition: opacity .2s cubic-bezier(.165,.84,.44,1), transform .2s cubic-bezier(.165,.84,.44,1);
    }
    input[type="checkbox"].mobile-nav-check:checked ~ .nav {
        opacity: 1;
        pointer-events: visible;
        transform: translateX(0);
    }
    .main-nav {
        padding-top: 3.5rem;
    }
    .main-nav details summary {
        font-size: var(--h4);
    }
}

html.nav-open, html.nav-open body {
    overflow-x: hidden;
    overflow-y: hidden;
}



/* Article nav */

.article-nav {
    border-top: 1px solid var(--light-border);
}
.article-next a, .article-previous a {
    display: flex;
    align-items: flex-end;
    color: var(--black);
    text-decoration: none;
}
.article-next a:hover, .article-previous a:hover {
    color: var(--dark);
    text-decoration: none;
}
.article-next a:active, .article-previous a:active {
    transition: none;
    color: var(--primary);
}
.article-next .post {
    margin-right: 1rem;
}
.article-next {
    margin-left: auto;
}
.article-previous .post {
    margin-left: 1rem;
}
.article-nav .label, .article-nav .title {
    display: block;
}
.article-nav .title {
    font-size: var(--h2);
    line-height: var(--icon-size);
}
.article-nav .label {
    font-size: var(--h5);
    line-height: var(--icon-size);
}
.article-next a:hover .title, .article-previous a:hover .title {
    text-decoration: underline;
}

.article-previous .icon {
    transform: rotate(-180deg);
}

@media (max-width: 480px) {
    .article-next .post {
        margin-right: .5rem;
    }
    .article-previous .post {
        margin-left: .5rem;
    }
    .article-nav .label {
        display: none;
    }
    .article-nav .title {
        font-size: var(--h3);
        line-height: var(--icon-size-sm);
    }
    .article-nav .icon {
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
    }
}