/*
HTML source for Ethan Bayer's personal website
Copyright (C) 2025 Ethan Bayer

This file is part of the source code for studioeb.github.io.

The source code of studioeb.github.io is free software: you can
redistribute it and/or modify it under the terms of the GNU General
Public License as published by the Free Software Foundation, either
version 3 of the License, or (at your option) any later version.

The source code of studioeb.github.io is distributed in the hope
that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
PURPOSE.  See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

/* Sidebar Stylesheet */

/* ---- Overall Styling ---- */
/* Make sidebar */
.sidebar {
  display: flex;
  flex-flow: column;
  position: fixed;
  top: 0;
  bottom: env(safe-area-inset-bottom, 0);
  overflow: auto;
  z-index: 1; /* Keep sidebar on top of content */
  align-items: stretch;
}
.sidebar ul {
  /* Set font styling */
  font-family: var(--heading-fonts);
  font-weight: bold;
  font-size: 1.6rem;
  /* Make the list a flexbox */
  display: flex;
  flex-flow: column;
}
.sidebar h1 {
  /* Reset default h1 margins */
  margin: 0;
}
.header-mobile svg,
.header-desktop svg {
  color: var(--white);
}
.sidebar ul {
  /* Undo default browser styling for list */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Socials List */
.socials {
  margin: auto 1rem 1rem 1rem;
}
.socials ul {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 18px;
}
.socials a {
  color: var(--white);
}

/* Sidebar nav button styling */
.sidebar nav a {
  text-decoration: none;
  /* Make link take up space horizontally */
  display: block;
  padding: 0.6rem 0;
  color: var(--white);
}

@media (hover: hover) {
  .sidebar nav a:hover {
    background: hsla(0, 0%, 0%, 0.32);
    color: var(--accent);
  }
  .sidebar nav a:active {
    background: var(--accent-dark);
  }
  .socials a:hover {
    color: var(--accent);
  }
  .socials a:active {
    color: var(--accent-dark);
  }
  .header-mobile svg:hover,
  .header-desktop svg:hover {
    color: var(--accent);
  }
  .header-mobile svg:active,
  .header-desktop svg:active {
    color: var(--accent-dark);
  }
}

/* ---- Desktop Version ---- */
@media (min-width: 769px) {
  .header-mobile {
    display: none;
  }
  .sidebar {
    width: var(--sidebar-width);
    background: var(--navy-dark);
    left: 0;
    box-shadow: var(--navy-dark) 0 0 8px;
  }
  .scrolling-content {
    /* Put main area to the side of sidebar */
    margin-left: var(--sidebar-width);
  }
  .header-desktop {
    margin-top: 2.2rem;
  }
  .header-desktop a {
    display: block;
    text-decoration: none;
  }
  .header-desktop h1 {
    width: 210px;
    margin: 0 auto;
  }
  .header-desktop::after {
    content: "";
    display: block;
    margin: 1.2rem auto;
    width: 130px;
    border: 1px solid var(--white);
    border-radius: 1px;
  }
}

/* ---- Mobile Version ---- */

/* Class to handle sidebar styling with JS
ID is used here to increase specificity */

.sidebar.sidebar-opened {
  left: 0;
}
.sidebar.sidebar-animated {
  transition: left 0.3s;
}
@media (prefers-reduced-motion) {
  .sidebar.sidebar-animated {
    transition: none;
  }
}
@media (max-width: 768px) {
  .header-desktop {
    display: none;
  }
  .sidebar {
    width: 100vw;
    top: var(--mobile-header-height);
    border-top: 1px solid hsl(220, 36%, 35%);
    background: var(--navy-dark-transparent);
    left: -100vw;
  }
  .sidebar ul {
    margin-top: 1.2rem;
  }
  .header-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1; /* Show above other content */
    background: var(--navy-dark);
    height: var(--mobile-header-height);
  }
  .header-mobile h1 svg {
    width: 80px;
  }
  .menu-button-icon {
    width: calc(var(--mobile-header-height) - 15px);
    height: calc(var(--mobile-header-height) - 15px);
  }
  .x-icon {
    height: calc(var(--mobile-header-height) - 5px);
    display: none;
  }
  .menu-button {
    border: 0px;
    background-color: transparent;
    position: absolute;
    left: 0;
  }

  .scrolling-content {
    margin-top: var(--mobile-header-height);
  }
  section,
  article {
    scroll-margin-top: calc(var(--mobile-header-height) + 10px);
  }
}