@import url('sanfran.css');

html:root {
  --body-side-margin: 10vmin;
  --navbar-height:6vh;

  --navbar-position-mode:fixed;
  --navbar-offset-enable:0.0;
  /*--navbar-base-color: rgba(51, 51, 51, 0.404);*/
  --navbar-base-color: #3E4B3B;

  --theme-dark: #3E4B3B;
  --theme-white:#F6F4F2;
  --theme-colorful:#D3A02A;
  --theme-diffuse:#C4CABC;
}

html {
  overscroll-behavior:none;
  min-height: 120vh;
}

body{
  margin: 0 var(--body-side-margin);
}

.good_flash {
  background-color: #47d75f;
  border: 0.3vmin solid #238e06;
}

.bad_flash {
  background-color: #ff6767;
  border: 0.3vmin solid #e20000;
}

.flashes {
  color: #fff;
  text-shadow: 0.5vmin;
  transition: opacity 0.4s ease, transform 0.4s ease;
  margin:1.3vmin;
  border-radius: 0.6vmin;
}

.flashes.closing {
  opacity: 0;
  transform: scale(0.95);
}


.flash_close{
  top: 5px;
  left: 5px;
  cursor: pointer;
}

div.navbar-spacer {
  height:calc(var(--navbar-height));
  width:100%;
}

div.navbar{
  position:var(--navbar-position-mode);
  left: calc(-1 * var(--body-side-margin) * var(--navbar-offset-enable));
  width: calc(100% + calc(var(--body-side-margin) * 2* var(--navbar-offset-enable)));
  background-color: rgba(0,0,0,0);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.mobile_navbar {
  display: none; /*Changed by JS*/
  width: 100%;
  /*height:var(--navbar-height);*/
  min-height: var(--navbar-height);
  height:fit-content;
  outline: 0.5vh solid var(--navbar-base-color);
  background-color: white;
  position: fixed;
  z-index: 2000;
  left:0;
  bottom:0;
}

div#mobile_nav_main_content a,  li.mobile_nav_folder, li.mobile-nav-back{
  height:100%;
  padding-top: 1vh;
  padding-bottom: 1vh;
  padding-left: 1vw;
  padding-right: 1vw;
  display: flex;
  color:var(--navbar-base-color);
  text-decoration: none;
  font-family: "San Francisco", Arial, Helvetica, sans-serif;
  align-items: center;
  /*background-color: #555;*/
}

li.mobile_nav_folder, li.mobile-nav-back{
  color:var(--theme-colorful);
  padding-left: 1vw;
  padding-right: 1vw;
}


div.mobile_navbar div#mobile_nav_main_content {
  height: fit-content;
  min-height: 80%;
  width:100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display:flex;
  align-items: center;
  justify-content: space-evenly;
}

div.mobile_navbar div#mobile_navbar_spacer{
  height: 20%;
  width:100%;
}

div.mobile_nav_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

button#mobile_back_button {
  background-color: rgba(0,0,0,0);
  border: none;
  color: black;
  font-size:xx-large;
  cursor: pointer;
}


div.profile_icon_letter{
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  background-color: blue;
  font-size: 20px;
  border-radius: 50%;
  width:24px;
  height:24px;
  text-align: center;
}



ul.navbar li{
  float:right;
  height:100%;
  font-family: "San Francisco", Arial, Helvetica, sans-serif;
  /*margin-right:3vw;*/
  /*background-color:rgba(255, 255, 255, 0.09);*/
}


ul.navbar li.home{
  float:left;
  border-right:1px solid #555;
  height:100%;
}


ul.navbar li a,
ul.navbar li span {
  display: flex;
  align-items: center;
  justify-content: center;
  color:#FFF;
  height: 100%;
  text-decoration: none;
  padding-left:0.5vw;
  padding-right:0.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
}


ul.navbar li:has(> a) {
  /*border: 0.5vmin solid rgba(255, 255, 255, 0.1);*/
}


ul.navbar li a:hover {
  background-color: rgba(125, 125, 125, 0.5);
  text-decoration: underline;
}

ul.navbar {
  background-color: var(--navbar-base-color);
  list-style-type: none;
  height:var(--navbar-height);
  margin:0px;
  padding-left: 0vw;
  padding-right: 0vw;
  width:100%;
  /*
  right:0;
  display: flex;
  flex-direction: row;
  justify-content:right;
  position:absolute;
  */
}

a#home-icon{
  --home-button-padding:10%;
  padding-bottom:var(--home-button-padding);
}

img#home-icon{
  height:calc(100% - 2.0 * var(--home-button-padding));
}


.error {
  padding: 1vmin;
  background-color: red;
  border-radius: 0.5vmin;
  border: #dd0000 0.5vmin;
}



:root {--accent: #fff;}



  /* ---------- Mobile Navbar ---------- */

  div#mobile-ham-container{
    display:flex; align-items:center; gap:.5rem; color:black;
  }
  .mobile-navbar{
    display:none; /* shown on small screens by media query */
    align-items:center;
    justify-content:space-between;
    padding:.6rem 1rem;
    background:rgba(40, 40, 40, 0.1);
    position:relative;
  }
  .mobile-btn{ background:none; border:0; font-size:1.8rem; cursor:pointer; padding:.35rem; }



  .mobile-menu{
    display:flex; /* toggled by JS */
    position:absolute;
    flex-direction: column;
    color:#000;
    bottom: calc(-1 * 100vh);
    left:0;
    right:0;
    margin:0 0.5rem;
    background:#FFF;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    overflow-y:auto;           /* scrollable */
    max-height:70vh;           /* mobile menu must not exceed 70vh (your requirement) */
    z-index:1200;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .hamburger-show{
    display:flex;
    transform: translateY(0);
    bottom: calc(var(--navbar-height) + 2vh);
    opacity: 1;
  }
  .mobile-menu a{
    display:block;
    padding:.7rem 1rem;
    color:#000;
    text-decoration:none;
    border-bottom:0.1vh solid #CCC;
  }
  .mobile-menu a:last-child{ border-bottom:0; }
  .mobile-menu a:hover{ background: rgba(255,255,255,0.04) }






.mobile-menu-level {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.mobile-menu-level.m_active {
  display: block;
}

.mobile-menu-level li {
  border-bottom: 0.1vh solid #CCC;
  cursor: pointer;
}

.mobile-menu-level li.folder::after {
  float: right;
  opacity: 0.9;
}







    /* ---------- Desktop Navbar ---------- */
  
  .brand{font-weight:700; font-size:1.05rem;}

  .desktop_only_buttons{
    display:none; /*Set with JS*/ 
  }

  .desktop-links { display:flex; gap:.5rem; align-items:center; }
  .desktop-links a{
    color:var(--accent);
    text-decoration:none;
    padding:.45rem .6rem;
    border-radius:6px;
    white-space:nowrap;
  }
  .desktop-links a:hover{ background: rgba(255,255,255,0.06) }

  /* hamburger container on desktop (only contains links YOU place in .desktop-hamburger-list) */
  .desktop-hamburger {
    position:relative;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .hamburger-btn{
    background:none;
    border:0;
    color:var(--accent);
    font-size:1.35rem;
    cursor:pointer;
    padding:.75rem;
  }

  .desktop-hamburger-menu{
    display:none; /* toggled by JS */
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    min-width:200px;
    background:var(--navbar-base-color);
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    overflow-y:auto;               /* scrollable if list grows */
    max-height:60vh;               /* desktop dropdown cap (can still scroll) */
    z-index:1200;
  }
  .desktop-hamburger-menu a{
    display:block;
    padding:.6rem 1rem;
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,0.03);
  }
  .desktop-hamburger-menu a:last-child{ border-bottom:0; }
  .desktop-hamburger-menu a:hover{ background: rgba(255,255,255,0.04) }

  .hamburger-show{
    display:flex;
  }



  /* ---------- Responsive visibility ---------- */
  @media (max-width: 768px){
    .desktop-navbar{ display:none; } /* desktop hidden on small screens */
    .mobile-navbar{ display:flex; }
    /* make mobile dropdown full-width inside its margins */
    .mobile-menu{ left:0; right:0; margin:0; border-radius:0 0 12px 12px; }
    button#hamburger{display:block;}
    nav.menu{
      display:block;
    }
  }



.base_navbar_dropdown span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
}

.base_navbar_dropdown{
  color:var(--theme-white);
  
}

.base_navbar_dropdown .base_navbar_dropdown_content {
  display: flex;
  color:var(--theme-white);
  visibility: hidden;
  flex-direction: column;
  background-color: var(--theme-white);
  list-style: none;
  padding: 0;
  align-items: flex-start;
  border: 0.25vmin solid var(--theme-diffuse);
}
.base_navbar_dropdown:hover .base_navbar_dropdown_content {
  visibility:visible;
  /*margin-left:5%;
  margin-right:5%;*/
}


.base_navbar_dropdown ul.base_navbar_dropdown_content li a{
  color:var(--theme-dark) !important;
  width:100% !important;
  padding:0;
  text-align: center;
  height: 100%;
  padding-top:5%;
  padding-bottom: 5%;
}

.base_navbar_dropdown ul.base_navbar_dropdown_content li{
  width:100% !important;
  padding:0;
}











/*M-only navbar*/
#hamburger {
  display: none;
  position: fixed;
  right: 16px;
  z-index: 1001;
  font-size: 2rem;
  background-color: rgba(0,0,0,0);
  color:var(--theme-diffuse);
  border:none;
}

.menu button {
  border: none;
  background-color: var(--theme-white);
  color:var(--theme-dark);
  font-size: 2rem;
}

.menu {
  font-family: "San Francisco", Arial, Helvetica, sans-serif;
  position: fixed;
  top: 0;
  right: 0;
  width: 70vw;
  height: 100%;
  background: var(--theme-white);
  color:var(--theme-dark);
  box-shadow: -4px 0 10px rgba(0,0,0,0.2);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  font-size: 2rem;
}

.menu.open {
  transform: translateX(0);
}

/* Header */
.menu-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}

#back {
  visibility: hidden;
  margin-right: 12px;
}

/* Menu levels */
.menu-level {
  position: absolute;
  inset: 56px 0 0 0;
  list-style: none;
  margin: 0;
  padding: 16px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.menu-level.active {
  transform: translateX(0);
}

.menu-level.exit-left {
  transform: translateX(-100%);
}

.menu li {
  padding: 12px;
  cursor: pointer;
}

.menu li.folder::after {
  content: ">";/*"›";*/
  float: right;
  opacity: 0.8;
}

.menu a {
  text-decoration: none;
  color: inherit;
  display: block;
}


nav.menu button{
  border: none;
  color:var(--theme-dark)
}