/**
 * @file
 * Styling for Campus Map
 *
 * This file creates the styling for the application interface.
 */

/*
 *  *********************** GLOBAL STYLES ***********************
 * Flexible/Semantic Font Size - [https://developers.google.com/style/fonts]
 * Font Zoom - [https://developers.google.com/web/fundamentals/accessibility/accessible-styles]
 * html, body - See Google Documentation for best practices relating to fonts.
 * button:hover - Distinguish hover action on buttons, slightly darker than active color.
 */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
  font-weight: lighter;
}
button:hover {
  background-color: #0856d67a;
}

/*
 *  *********************** CONTENT WRAPPER ***********************
 * Scalability - It is best practice to use % and built-in sizes (large,larger, bolder, etc.)
 * on elements and fonts. Fixed sizes should be reserved for setting max
 * and min values in media queries or select text and element decoration.
 * Pixels are Dead - [https://medium.com/@julienetienne/pixels-are-dead-faa87cd8c8b9]
 * Google Responsive UI Guide - [https://developers.google.com/web/fundamentals/design-and-ux/responsive/]
 * .wrapper - 100% to fill viewport, necessary for map display.
 */

/*
 *  *********************** MAP ***********************
 * .map-container - Container 60% to prevent Nav overlap.
 * #map - Map needs to fill map container.
 */
.map-container {
  height: 85%;
  width: 100%;
}
#map {
  height: 100%;
  width: 100%;
}

/*
 *  *********************** MARKER INFOWINDOW ***********************
 * .info-title - General styling since title background does not fill infowindow width anymore.
 * .info-photo - Prevent photo from taking over window.
 * .info-hours - Remove padding, margin, and bullets to ul to keep hours aligned with the rest of the info.
 * .info-flex - Allows icon and text to sit next to each other.
 * .fa - Protects icon from getting squished infowindow
 */
.info-title {
  color: #032e59;
  font-size: larger;
  font-weight: bold;
}
.info-photo {
  width: 50%;
  height: auto;
}
.info-hours {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.info-flex {
  display: inline-flex;
  padding-left: .5em;
}
.info-line {
  padding-bottom: .5em;
}
.fa {
  padding: 1px;
}

/*
 *  *********************** HEADER ***********************
 * .header-container - 10% so Nav doesn't push/overlap map.
 * .header-menu-logo-container - Holds menu-button-container and app-logo-container in place.
 * .menu-button-container - Holds menu-button in place.
 * .menu-button - Styles for inactive menu-button.
 * .app-logo-container - Holds app-logo in place.
 * .app-logo - Styles for app-logo.
 * .campus-nav-container - Holds nav-buttons in place.
 * .nav-button - Styles for nav-button.
 * .nav-acive - Styles for active nav-button.
 */
.header-container {
  height: 15%;
  width: 100%;
  background-color: #002D5B;
  display: inline-block;
}
.header-menu-logo-container {
  width: 100%;
  height: 55%;
  display: inline-flex;
}
.menu-button-container {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-button {
  color: white;
  border: .5px solid #ffffff85;
  border-radius: 2px;
  box-shadow: 4px 3px 6px 0px rgba(0, 0, 0, 0.38);
  background: none;
  margin: 0 1% 0 1%;
  width: fit-content;
  min-height: 60%;
  padding: .5em;
  position: relative;
}
.app-logo-container {
  width: 85%;
  text-align: center;
}
.app-logo {
  max-width: 70%;
  margin-right: 15%;
  height: 100%;
}
.campus-nav-container {
  width: 100%;
  height: 45%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff1c;
}
.nav-button {
  color: white;
  border: .5px solid #ffffff85;
  border-radius: 2px;
  box-shadow: 4px 3px 6px 0px rgba(0, 0, 0, 0.38);
  background: none;
  margin: 0 1% 0 1%;
  width: -webkit-fill-available;
  padding: .5em;
  max-width: 250px;
  position: relative;
}
.nav-active {
  border-color: #226be8 !important;
  background-color: #226be8 !important;
}

/*
 *  *********************** DRAWER ***********************
 * #drawer - Connected to visibility on menu click.
 * .drawer-inner - Holds drawer-header and drawer-scroll in place.
 * .drawer-header - Holds parking-button-container and search-container in place.
 * .parking-button-container - Holds parking-buttons in place.
 * .parking-button - Styles for interactive parking-buttons.
 * .search-container - Holds search input field.
 * #search - Connected to live search.
 * .drawer-scroll - Holds return-list-container and places-list-container in place.
 * .return-list-container - Holds scrollable return-list.
 * .return-list -  Allows scroll in return-list, force scrollbar.
 * .return-list ul - Styles for return list.
 * .return-list li - Styles for return list item.
 * .return-list a - Styles for return list title.
 * .places-list-container - Holds scrollable places-list.
 * .places-list - Allows scroll in places-list, force scrollbar.
 * .category - Holds category-header and accordion-inner in place.
 * .category-header - Holds checkbox-wrapper and category-label in place.
 * .checkbox-wrapper - Container boundaries for checkbox element, tied to data.
 * .checkbox - Tied to map marker group display.
 * .category-label - Label for the group.
 * .accordion-inner - Holds the places ul in place.
 * .hide - Hides the accordion inner.
 * .places - ul of the group child elements.
 * .place-title-container - Holds the title in place.
 * .place-title - Styles for title, tied to data.
 */
#drawer {
  background-color: #002D5B;
  bottom: 0px;
  left: 0;
  height: 85%;
  width: 0;
  margin: 0;
  position: absolute;
  transition: 0.5s;
  overflow-y: hidden;
  padding: 0;
}
.drawer-inner {
  transition: 0.3s;
  padding: 3%;
  height: 97%;
  width: 94%;
  margin: 0;
}
.drawer-header {
  height: 22%;
  width: 100%;
}
.parking-button-container {
  width: 100%;
  height: 60%;
  margin: 0;
  padding: 0;
}
.parking-button {
  color: white;
  border: .5px solid #ffffff85;
  border-radius: 2px;
  box-shadow: 4px 3px 6px 0px rgba(0, 0, 0, 0.38);
  background: none;
  margin: 1% 0 1% 0;
  width: -webkit-fill-available;
  padding: .5em;
  position: relative;
  background-color: #1d446c;
}
.search-container {
  height: 40%;
  width: 100%;
}
#search {
  background: #FFFFFF;
  border: none;
  border-radius: 2px;
  color: #262729;
  padding: .5em;
  width: -webkit-fill-available;
  height: 100%;
}
.search-label {
  color: white;
}
.drawer-scroll {
  overflow-y: scroll;
  overflow: -moz-scrollbars-vertical;
  height: 70%;
  width: 100%;
  padding-top: 8%;
}
.return-list-container {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.return-list {
  overflow-y: scroll;
  height: -webkit-fill-available;
}
.return-list ul {
  list-style-type: none;
  margin: .5em 0 .5em 0;
  padding: 0;
}
.return-list li {
  border-bottom: 1px solid #002d5a;
  padding: 4%;
  background: #236ae947;
}
.return-list a {
  color: white;
  text-decoration: none;
}
.places-list-container {
  padding: 0;
  margin: 0;
}
.places-list {
  height: -webkit-fill-available;
  padding-bottom: 10px;
}
.category {
  border-bottom: 1px solid #002d5a;
  height: 100%;
  width: 100%;
}
.category-header {
  background: #1d446c;
  display: inline-flex;
  width: 100%;
  height: 100%;
}
.category-header:hover {
  background-color: #0856d67a;
}
.checkbox-wrapper {
  padding: 1em 0 1em 1em;
}
.checkbox {
  width: 20px;
  height: 20px;
}
.category-label-wrapper {
  height: 100%;
  width: -webkit-fill-available;
  padding: 1em;
}
.category-label {
  color: white;
  font-weight: bolder;
  font-size: large;
  height: 100%;
  width: 100%;
}
.accordion-inner {
  background-color: #002d5b94;
  -webkit-transition: max-height 0.2s ease-out;
  -moz-transition: max-height 0.2s ease-out;
  -o-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
}
.hide {
  display: none;
}
.places {
  margin: 0 0 1em 0;
  padding: 0;
  list-style-type: none;
}
.place-title-container {
  padding: 1em 0 1em 1em;
  border-bottom: .5px solid #ffffff36;
}
.place-title-container:hover,
.place-title-container:focus {
  border-bottom: 3px solid white;
  background-color: #236ae9;
}
.place-title {
  color: #FFFFFF;
  display: block;
  text-decoration: none;
}

/*
 * !!! DEBUGGING - ACCESSIBILITY TABBING
 *
 */
 /*
a:focus,
input:focus,
button:focus {
  border: solid 0.3em red;
}
*/

/*
 * ACCESSIBILITY (ARIA)
 *
 */
/*[role="tooltip"] {
  display: none;
}
#search:focus + [role="tooltip"] {
  background: #0054A6;
  border: 2px solid #FFFFFF;
  border-radius: 3px;
  display: block;
  padding: 0.5em;
  width: 100%;
}