/*
 *      _
 *     | | __ _ _   _
 *  _  | |/ _` | | | |
 * | |_| | (_| | |_| |
 *  \___/ \__,_|\__, |
 *              |___/
 */

/* Custom additions on top of the lanyon theme. The original slide-in
   slide-out of lanyon has been removed from lanyon.css and instead
   been reimplemented differently here. */

/* Coloring */
.sidebar-title {
    color:rgba(255,255,255,.9);
}
.email {
    color:rgba(255,255,255,.8);
}
.copyright {
    color:rgba(255,255,255,.3);
}
.paginate-category {
    color: #9a9a9a;
}

/* Captions for images */
.caption {
    text-align: center;
    line-height: 1;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

/* Special handling of emails */
.emailtail {
    /* Reverse direction */
    unicode-bidi:bidi-override;
    direction:rtl;
    /* Prevent selection / copy-pasting */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}
.email {
    text-align: center;
}

/* Sub items in sidebar nav */
.sidebar-nav-subitem {
    padding-left: 2.5rem;
}

/* Handle the menu checkbox */
.sidebar-checkbox {
    position: fixed;
    clip: rect(0, 0, 0, 0);
}
.sidebar-checkbox ~ label {
    position: fixed;
    z-index: 100;
    top: 1.5rem;
    left: 1rem;
    background-image: url("/public/menu.svg");
    cursor: pointer;
    height: 0.75rem;
    width: 0.75rem;
    background-size: contain;
}
.sidebar-checkbox:checked ~ label {
    background-image: url("/public/menu-selected.svg");
}

/* Handle sidebar-site-title positioning */
.sidebar-site-title {
    margin-top: 0rem;
    text-align: center;
}

/* Properly style the about-me section */
.about-me {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Fix bottom stickiness */
.sidebar {
    display: flex;
    flex-direction: column;
}
.sidebar-except-bottom {
    flex: 1 0 auto;
}
.stick-bottom {
    flex-shrink: 0;
    right:0;
    left:0;
}

/* Aligning stuff better */
.sidebar {
    margin-top: -0.5rem;
}
@media (max-width: 56em) {
    .sidebar {
	margin-top: 0rem;
    }
    .sidebar-checkbox ~ label {
	top: 1rem;
	left: 1rem;
	height: 1.5rem;
	width: 1.5rem;
    }
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 0.1rem;
    right: 0.1rem;
    background-color: #fff;
    padding: 0.5rem;
    border-radius: 5px;
    opacity: 0.3;
    color: black;
}
.back-to-top:hover {
    opacity: 1;
    text-decoration: none;
}
.back-to-top-content:after {
    content: "Back to Top";
}
@media (max-width: 56em) {
    .back-to-top-content:after {
	content: "⇧";
	text-align: center;
	display: block;
	height: 2rem;
	width: 2rem;
	font-size: 1.5rem;
    }
}

/* Sidebar gets toggled based upon the checkbox */
.sidebar-checkbox ~ .sidebar {
    display: none;
}
.sidebar-checkbox:checked ~ .sidebar {
    display: flex;
}

/* For small enough widths, switch over to a vertical view.
   This is for mobile. */
@media (max-width: 38em) {
    /* Set a full width menu */
    .sidebar {
	width: 100%;
	position:relative;
    }
    /* Make copyright not take up as much space */
    .copyright {
	font-size: 0.5rem;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	text-align: center;
    }
}

/* Do the exact opposite of the toggle for desktop mode */
@media (max-width: 80em) {
    .sidebar-checkbox ~ .sidebar {
	display: flex;
    }
    .sidebar-checkbox:checked ~ .sidebar {
	display: none;
    }
    .sidebar-checkbox {
	position: absolute;
    }
    .sidebar-checkbox ~ label {
	position: absolute;
	background-image: url("/public/menu-selected.svg");
    }
    .sidebar-checkbox:checked ~ label {
	background-image: url("/public/menu.svg");
    }
}

/* Add smooth scrolling when possible */
html {
    scroll-behavior: smooth;
}