@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&symbols=menu,home,favorite,star,bolt,abc,sports_esports,contact_page,theaters,contact_mail,web,other_admission,phone_android');

nav {
  display: flex;
  padding: 0.3rem 0.3rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 1px #a7a7a7;
}

/* The page banner is also (.o_container > .title); the 0,2,0 specificity here
   keeps the navbar's own title from picking up the banner styles. */
nav#top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.3rem;
  border-bottom: solid 1px #a7a7a7;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
}

body #top-nav #nav-title {
  display: inline;
  background-color: transparent;
  color: #000;
  border-radius: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: normal;
  text-align: center;
}

.menu {
  display: inline-block;
  justify-items: center;
  padding: 0.5rem;
  margin-left: 0.5rem;
}

.menu:hover {
  cursor: pointer;
  background-color: #f0f0f0;
  box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.menu:active {
  box-shadow: 0 0rem 0.2rem rgba(0, 0, 0, 0.3);
  transform: translateY(0px);
  transition: all 0.2s ease;
}

.menu .menu-icon {
  display: block;
}

.menu .menu-icon:hover {
  cursor: pointer;
}

.menu .menu-text {
  display: block;
  font-size: x-small;
  padding: 0 8px 4px 8px;
}

nav#top-nav .title {
  display: inline;
}

/* Whole top-bar title is a link back to Home. */
nav#top-nav .title a {
  color: inherit;
  text-decoration: none;
}

nav#top-nav .contact-container {
  display: flex;
  justify-content: space-evenly;
  gap: 12px;
  align-items: center;
  padding: 0.3rem 0.8rem;
  margin-right: 1rem;
}

nav#top-nav .contact-container:hover {
  cursor: pointer;
  background-color: #f0f0f0;
  box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

nav#top-nav .contact-container:active {
  box-shadow: 0 0rem 0.2rem rgba(0, 0, 0, 0.3);
  transform: translateY(0px);
  transition: all 0.2s ease;
}

nav#top-nav .contact-container .contact {
  display: inline;
  text-decoration: underline;
  color: inherit;
  text-decoration-color: inherit;
}

/* --- side nav ------------------------------------------------------------- */

.sidenav {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  min-width: 10px;
  /* Height is driven by the shell grid row (nav height subtracted there). */
  height: 100%;
  overflow-y: auto;
  padding-top: 0.5rem;
  border-right: solid 1px #a7a7a7;
}

.sidenav .sidenav-item-container {
  display: inline-flex;
  flex-wrap: nowrap;
  padding: 1rem 0.8rem;
  align-items: center;
  justify-items: center;
  gap: 0.5rem;
  margin: 0 1rem;
  width: auto;
}

.sidenav .sidenav-item-container .sidenav-icon {
  display: inline;
}

.sidenav .sidenav-item-container .sidenav-text {
  display: inline;
  cursor: pointer;
}

.sidenav-item-container:hover {
  background-color: #f0f0f0;
  cursor: pointer;
  box-shadow: 0 0.5rem 0.4rem rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.sidenav-item-container:active {
  box-shadow: 0 0rem 0.2rem rgba(0, 0, 0, 0.3);
  transform: translateY(0px);
  transition: all 0.2s ease;
}

.sidenav-item-container.active {
  background-color: #e6e6e6;
}

.sidenav-item-container:focus-visible,
.menu:focus-visible,
nav#top-nav .contact-container a:focus-visible {
  outline: 2px solid #636363;
  outline-offset: 2px;
}

.sidenav-item-container .sidenav-text[hidden] {
  display: none;
}

/* --- layout shell (index.vue: nav + [side nav | item view]) ---------------- */

.shell {
  display: grid;
  grid-template-columns: auto 1fr;
  height: calc(100vh - var(--nav-height, 0px) - 8px);
}

.item-view-container {
  display: block;
  color: rgb(0, 0, 0);
  background-color: #eeeeee;
  height: 100%;
  border: none;
  overflow: auto;
  /* Makes this element the "containing block" for absolutely positioned
     descendants. Purely a layout fix: nothing here is positioned, so the paint is
     unchanged, but an absolutely positioned page now fills the scrolling area
     instead of being clipped to the initial viewport. Pages that opt in use it. */
  position: relative;
}

.item-view-container .item-view {
  width: 100%;
  height: 100%;
  border: none;
}

/* --- collapsed side nav ----------------------------------------------------
   Mirrors the `hidden` flag main.ts puts on every .sidenav-text. Without it a
   collapsed nav still measured ~83px wide on a phone, a fifth of the screen
   spent on a strip of icons. Now it is a 3rem icon rail (3.5rem once it is
   hovered or keyboard-focused, which keeps the names reachable on a desktop). */

.sidenav.collapsed .sidenav-item-container {
  justify-content: center;
  padding: 1rem 0.4rem;
  margin: 0 0.25rem;
}

/* --- small screens: the nav comes out of the grid flow ---------------------
   Below 900px the side nav used to stay a grid column, so whatever width it
   had was taken away from the page for good. Instead it is pinned under the
   top bar over the content, hidden until the Menu button opens it, and it
   closes itself after a page is picked. The `:not(.collapsed)` guards keep the
   closed state consistent even if a stylesheet loads in an odd order. */

@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .shell > .sidenav {
    position: absolute;
    top: var(--nav-height, 0px);
    left: 0;
    z-index: 40;
    width: min(16rem, 85vw);
    height: auto;
    max-height: calc(100vh - var(--nav-height, 0px));
    padding: 0.5rem 0;
    background-color: #fff;
    border-right: solid 1px #a7a7a7;
    border-bottom: solid 1px #a7a7a7;
    box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.25);
    /* A slide-in instead of an instant pop. */
    transition:
      transform 0.2s ease,
      opacity 0.2s ease,
      visibility 0.2s ease;
  }

  .shell > .sidenav.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .shell > .sidenav:not(.collapsed) {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .sidenav .sidenav-item-container {
    margin: 0 0.5rem;
    padding: 0.85rem 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell > .sidenav {
    transition: none;
  }
}