/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
/* ...
 *= require_self
 *= require_tree .
 */

 html, body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: #f9f6f6;
}

main {

  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f9f6f6;
}


.hidden {
  display: none;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 30px;
}


/* For searchbar **/


.dropdown-option {
  padding: 10px;
  cursor: pointer;
  display: block;
  background-color: #8c012c;
  color: #f9f6f6;
  width: 100%;
}

.dropdown-option:hover {
  background-color: #f9f6f6;
  color: #8c012c; 
}
/* Not a duplicate, need for accessibility */
.dropdown-option.hover { 
  background-color: white;
  color: #8c012c; 
  border: 2px solid black;
}

.dropdown-option-2 {
  padding: 10px;
  cursor: pointer;
  display: block;
  background-color: #8c012c;
  color: #f9f6f6;
}

.dropdown-option-2:hover {
  background-color: #f9f6f6;
  color: #8c012c; 
}
.dropdown-option-2.hover { 
  background-color: white;
  color: #8c012c; 
  border: 2px solid black;
}

.link {
  color: #3b82f6; 
}


.user-is-tabbing .skip-link:focus {
  position: absolute;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.popup-bubble {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  background-color: white;
  padding: 0px;
  border-radius: 20px;
  font-family: sans-serif;
  overflow-y: auto;
  max-height: 180px;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  opacity: 1;
  min-width: 250px;
}

.popup-bubble-anchor {
  position: absolute;
  width: 100%;
  bottom:14px;
  left: 0;
}

.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, 0%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 14px solid #4e6051;
}

.popup-container {
  cursor: auto;
  height: 0;
  position: relative;
  max-width: 265px;
  transform: translateY(-30px);
}

.popup-school-name {
  flex-grow: 1;
  text-align: left;
  margin-right: 10px;
}

.popup-close {
  color: #8c012c;
  right: 10px;
  top: 10px;
  cursor: pointer;
  margin-left: 10px;
}

.text-top,
.text-bottom {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}

.text-top {
  background-color: white;
  color: #4e6051;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-bottom {
  background-color: #4e6051;
  color: white;
  font-size: 12px;
  line-height: 1.5
}

.text-bottom .school-link {
  text-decoration: underline;
  color: white; /* Ensure the link color is white for readability */
}

.address-alert {
  padding: 10px;
  background-color: #8c012c; /* Red */
  color: white;
  margin-bottom: 10px;
  font-size: 12px;
  position: absolute;
  top: 45px;
  right: 10px;
  left: auto;
  transform: translate(0%, 0%);
  z-index: 10;
  opacity: 0.8;
  display: none;
}

.marker-content {
  background-color: white;
  font-size: 13px;
  border: 1px;
  padding: 5px;
  opacity: 0.9;
  border-radius: 20px;
}
.login-field {
  display: block;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  width: 50%;
}

.login-heading {
  font-weight: bold;
  font-size: 2.25rem;
  line-height: 1.25;
  margin-top: 1rem;
}

.frontend-layout {
  min-height: 85vh;
  height: fit-content;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;

}


.admin-layout {
  margin-top: 0.25rem;
  padding-left: 0;
  padding-right: 1rem;
  padding-top: 3rem;
  margin-left: 16rem;
}


.disabled-button {
  pointer-events: none;
  opacity: 0.6;
  user-select: none;
}

.cursor-progress * {
  cursor: progress !important;
}

/* AL */
.dark-film {
  position: fixed;
  top: 15%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  pointer-events: none;
  opacity: 0;
}

.dark-film.active {
  opacity: 1;
  pointer-events: auto
}

.searchbar-containers {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

@media (max-width: 500px) {
  .frontend-layout {
    min-height: 85vh;
    height: fit-content;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 5px;
    padding-left: 0px;
    padding-right: 0px;

  }


  .searchbar-containers {
    flex-direction: column; /* Mobile: Stack vertically */
    align-items: center;
    gap: 1rem; /* Maintains spacing in vertical layout */
    padding: 10px;
  }
  
}