/* For Screenreaders */

a#skip {
  position: absolute;
  float: left;
  margin-left: -20rem;
}

a#skip:focus {
  font-weight: bold;
  background: #c4161c;
  color: #ffffff;
  margin-left: 0.5rem;
}

#sou-logo-full {
  display: none;
}

/* Hides Hannon Text Logo */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* For Screen Readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* Resets weird .navbar-brand link positioning */
a.navbar-brand {
  padding: 0;
  margin: 0;
  float: none;
}

.main-menu.menu-hide {
  border: 3px dotted blue;
}

/* Base, iPhone SE */

#home {
  padding-top: 40px;
}

#sou-logo {
  float: none;
  padding-left: 10px;
}

#hannon-logo {
  float: none;
  display: absolute;
  left: 75px;
}

.container-fluid > .navbar-header {
  height: 80px;
  margin: 0 0;
}

.navbar-banner {
  width: 100%;
}

.navbar-header img {
  float: left;
}

.homeheader {
  font-size: 2em;
  clear: left;
  padding-bottom: 10px;
}

#logo-svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

header#navbar-banner {
  /* width: 39.8rem; */
  width: 100%;

  border-bottom: 2px solid #B31D22;
}

#navbar-banner > div.container-fluid {
  padding: 0;
}

h2#studylabel,
h2#askuslabel,
#studyrooms,
#askus {
  display: none;
}

.navbar-header .menu-button {
  display: inline;
  min-height: 0;
  min-width: 0;
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

/* Hide Chevrons & Xs Mobile */

nav.main-menu .first-btn.hide-btn,
nav.main-menu .second-btn.hide-btn,
nav.main-menu .third-btn.hide-btn,
nav.main-menu .fourth-btn.hide-btn,
nav.main-menu .fifth-btn.hide-btn,
nav.main-menu .first-btn-x.hide-btn,
nav.main-menu .second-btn-x.hide-btn,
nav.main-menu .third-btn-x.hide-btn,
nav.main-menu .fourth-btn-x.hide-btn,
nav.main-menu .fifth-btn-x.hide-btn {
  display: none;
}

/* Mobile Button */

button.mobile-button {
  z-index: 100;
  min-height: 0;
  min-width: 0;
  position: absolute;
  left: 29rem;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: #fff;
}

img.mobile-x {
  display: none;
}

h2#mobile-label {
  position: absolute;
  top: 1rem;
  left: 24.3rem;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 1.5rem;
  color: #333;
  font-weight: 700;
}

/* Main Menu */

nav.main-menu .first-btn,
nav.main-menu .second-btn,
nav.main-menu .third-btn,
nav.main-menu .fourth-btn,
nav.main-menu .fifth-btn,
nav.main-menu .first-btn-x,
nav.main-menu .second-btn-x,
nav.main-menu .third-btn-x,
nav.main-menu .fourth-btn-x,
nav.main-menu .fifth-btn-x {
  display: none;
  min-height: 0;
  min-width: 0;
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

nav.main-menu {
  width: 39.8rem;
  background-color: #e4e4e4;
  padding-left: 0.8rem;
  z-index: 99;
  border-bottom: 25px solid #231F20;
}

nav.main-menu.menu-hidden {
  display: none;
}

.show-menu {
  display: block;
}

nav.main-menu h2,
nav.main-menu h3,
nav.main-menu li {
  font-family: "Open Sans", Arial, sans-serif;
  color: #231F20;
  margin: 0;
}

nav.main-menu li {
  margin-bottom: 2.4rem;
}

nav.main-menu li:last-child {
  margin-bottom: 2.6rem;
}

nav.main-menu h2 {
  margin-bottom: 2.4rem;
}

nav.main-menu a {
  color: #231F20;
  text-decoration: none;
}

nav.main-menu a:hover {
  text-decoration: none;
  color: #ed1c24;
}

nav.main-menu ul {
  list-style: none;
  padding-left: 2rem;
}

a#homelink {
  font-weight: 700;
  font-size: 1.8rem;
  color: #231F20;
}

nav.main-menu hr {
  border-color: #7F7F7F;
  margin: 0.8rem 0 1rem 0;
}

nav.main-menu hr#hr-services {
  margin: 0.8rem 0 1rem -4rem;
}

nav.main-menu h2 {
  font-size: 1.8rem;
  font-weight: 700;
}

nav.main-menu h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

/* Pixel 7 */

@media (min-width: 411px) and (max-width: 428px ) {
  button.mobile-button {
    left: 25em;
  }
  h2#mobile-label {
    left: 20em;
  }
}

/* iPhone 14 Pro Max */
@media (min-width: 429px) and (max-width: 766px ) {
button.mobile-button {
    left: 23.5em;
  }
  h2#mobile-label {
    left: 18.5em;
  }
}


/* iPad Mini */

@media (min-width: 768px) {
  .container-fluid > .navbar-header {
    width: 76.2rem;
  }

  header#navbar-banner,
  nav.main-menu {
    width: 76.2rem;
  }

  h2#studylabel,
  h2#askuslabel,
  #studyrooms,
  #askus {
    position: absolute;
    display: inline-block;
  }

  h2#studylabel,
  h2#askuslabel {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 1.5rem;
  }

  #studyrooms,
  #askus {
    height: 40px;
    width: 40px;
  }

  h2#studylabel {
    left: 32rem;
    top: 1rem;
  }

  h2#askuslabel {
    left: 49rem;
    top: 1rem;
  }

  #studyrooms {
    left: 42rem;
  }

 #askus {
    left: 54.5rem;
  }

  button.mobile-button {
    left: 68rem;
  }

  h2#mobile-label {
    left: 63rem;
  }
}

/* LowRes Desktop */

@media (min-width: 800px) {
  .container-fluid > .navbar-header {
    width: 77.2rem;
  }

  header#navbar-banner,
  nav.main-menu {
    width: 77.2rem;
  }

  h2#studylabel,
  h2#askuslabel,
  #studyrooms,
  #askus {
    position: absolute;
    display: inline-block;
  }

  h2#studylabel {
    left: 37rem;
    top: 1rem;
  }

  h2#askuslabel {
    left: 54rem;
    top: 1rem;
  }

  #studyrooms {
    left: 47rem;
  }

 #askus {
    left: 59.5rem;
  }

  button.mobile-button {
    left: 73rem;
  }

  h2#mobile-label {
    left: 68rem;
  }
}

/* Desktop */

@media (min-width: 960px) {
  h2#studylabel,
  h2#askuslabel,
  #studyrooms,
  #askus,
  h2#mobile-label,
  button.mobile-button,
  #sou-logo,
  #hannon-logo {
    display: none;
  }

  header#navbar-banner {
    border: none;
    width: 110rem;
  }

  #homelink {
    display: none;
  }

  #sou-logo-full {
    display: block;
  }

  .responsive-h1 {
    position: absolute;
    width: auto;
    height: auto;
    top: 45px;
    left: 360px;
    margin: 0 0 1rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  #helvetica a {
    color: #333333;
    text-transform: uppercase;
    font-family: Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: 0.8rem;
    text-decoration: none;
    font-size: 3.6rem;
  }

  #helvetica a:hover {
    text-decoration: none;
  }

  nav.main-menu {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: 0 20px 20px 20px;
    background-color: #FFF;
    border-bottom: none;
  }

  nav.main-menu h2,
  nav.main-menu h3 {
    margin: 0;
    padding: 10px 20px;
  }

  nav.main-menu h2 {
    font-weight: 600;
    font-size: 1.8rem;
    cursor: pointer;
  }

  nav.main-menu h3 {
    font-weight: 600;
    font-size: 2rem;
  }

  nav.main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  nav.main-menu a {
    text-decoration: none;
    display: block;
    padding: 5px 20px;
    font-size: 1.8rem;
    font-weight: 400;
    width: fit-content;
  }

  h2.menuItem:hover {
    color: #B31D22 !important;
  }

  /* Tabs */
  .tab {
    margin-top: -15px;
    background-color: #E4E4E4;
    border: 15px solid #E4E4E4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  /* Chevrons */
  nav.main-menu .first-btn.show-btn,
  nav.main-menu .second-btn.show-btn,
  nav.main-menu .third-btn.show-btn,
  nav.main-menu .fourth-btn.show-btn,
  nav.main-menu .fifth-btn.show-btn {
    display: block;
    margin-top: -29px;
  }

  /* X buttons */
  nav.main-menu .first-btn-x.hide-btn,
  nav.main-menu .second-btn-x.hide-btn,
  nav.main-menu .third-btn-x.hide-btn,
  nav.main-menu .fourth-btn-x.hide-btn,
  nav.main-menu .fifth-btn-x.hide-btn {
    display: none;
  }

  nav.main-menu .first-btn-x.show-btn,
  nav.main-menu .second-btn-x.show-btn,
  nav.main-menu .third-btn-x.show-btn,
  nav.main-menu .fourth-btn-x.show-btn,
  nav.main-menu .fifth-btn-x.show-btn {
    display: block;
    margin-top: -32px;
  }

  nav.main-menu .first-btn,
  nav.main-menu .first-btn-x {
    padding-left: 123px;
  }

  nav.main-menu .second-btn,
  nav.main-menu .second-btn-x {
    padding-left: 75px;
  }

  nav.main-menu .third-btn,
  nav.main-menu .third-btn-x {
    padding-left: 43px;
  }

  nav.main-menu .fourth-btn,
  nav.main-menu .fourth-btn-x {
    padding-left: 58px;
  }

  nav.main-menu .fifth-btn,
  nav.main-menu .fifth-btn-x {
    padding-left: 68px;
  }

  /* Tabbed menu styling */
  nav.main-menu h2 {
    display: inline-block;
    position: relative;
    padding: 10px 0;
  }

  nav.main-menu hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 10px 0;
  }

  /* Megamenu container */
  nav.main-menu ul.first,
  nav.main-menu ul.second,
  nav.main-menu ul.third,
  nav.main-menu ul.fourth,
  nav.main-menu ul.fifth {
    position: absolute;
    top: 4.3rem;
    left: 0;
    width: 100%;
    background-color: #E4E4E4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 999;
  }

  /* Height & Bottom Stripe */
  ul.first.menu-open,
  ul.second.menu-open,
  ul.third.menu-open,
  ul.fourth.menu-open,
  ul.fifth.menu-open {
    height: 675px;
    border-bottom: 25px solid #231F20;
  }

  /* Megamenu Grids */
  /* Individual columns inside the megamenu */
  ul.first.menu-closed,
  ul.second.menu-closed,
  ul.third.menu-closed,
  ul.fourth.menu-closed,
  ul.fifth.menu-closed {
    display: none;
  }

  /* Menu Display Grid */
  ul.first.menu-open,
  ul.second.menu-open,
  ul.third.menu-open,
  ul.fourth.menu-open,
  ul.fifth.menu-open {
    display: block;
    position: relative;
  }

  h3#archives-header,
  ul#archives-ul {
    position: absolute;
    left: 395px;
  }

  h3#archives-header {
    top: 15px;
  }

  ul#archives-ul {
    top: 60px;
  }

  h3#borrowing-header,
  ul#borrowing-ul {
    position: absolute;
    left: 450px;
  }

  h3#borrowing-header {
    top: 15px;
  }

  ul#borrowing-ul {
    top: 60px;
  }

  h3#faculty-header,
  ul#faculty-ul {
    position: absolute;
    left: 450px;
  }

  h3#faculty-header {
    top: 300px;
  }

  ul#faculty-ul {
    top: 350px;
  }

  h3#rooms-header,
  ul#rooms-ul {
    position: absolute;
    left: 267px;
  }

  h3#rooms-header {
    top: 15px;
  }

  ul#rooms-ul {
    top: 60px;
  }

  h3#policies-header,
  ul#policies-ul {
    position: absolute;
    left: 450px;
  }

  h3#policies-header {
    top: 15px;
  }

  ul#policies-ul {
    top: 60px;
  }

  h3#employment-header,
  ul#employment-ul {
    position: absolute;
    left: 450px;
  }

  h3#employment-header {
    top: 360px;
  }

  ul#employment-ul {
    top: 410px;
  }
}

/* Hi Res Desktop */

@media (min-width: 1310px) {
  nav.main-menu {
    width: 110rem;
  }

  h3#archives-header,
  ul#archives-ul {
    left: 360px;
  }

  h3#archives-header {
    top: 15px;
  }

  ul#archives-ul {
    top: 60px;
  }

  h3#borrowing-header,
  ul#borrowing-ul {
    left: 360px;
  }

  h3#borrowing-header {
    top: 15px;
  }

  ul#borrowing-ul {
    top: 60px;
  }

  h3#faculty-header,
  ul#faculty-ul {
    left: 750px;
  }

  h3#faculty-header {
    top: 15px;
  }

  ul#faculty-ul {
    top: 60px;
  }

  h3#rooms-header,
  ul#rooms-ul {
    left: 395px;
  }

  h3#rooms-header {
    top: 15px;
  }

  ul#rooms-ul {
    top: 60px;
  }

  h3#policies-header,
  ul#policies-ul {
    left: 395px;
  }

  h3#policies-header {
    top: 15px;
  }

  ul#policies-ul {
    top: 60px;
  }

  h3#employment-header,
  ul#employment-ul {
    left: 750px;
  }

  h3#employment-header {
    top: 15px;
  }

  ul#employment-ul {
    top: 60px;
  }
}

/* Fixes Position of Header for Menu Scrolling */
@media (max-width: 959px) {
  header#navbar-banner {
    position: absolute;
    top: 0rem;
    left: 0;
    right: 0;

    z-index: 1000; /* higher than nav.main-menu (99) */
    background-color: #fff;
  }

  .container-fluid > .navbar-header {
    height: 80px;
    margin: 2rem 0 0 0;
  }

  nav.main-menu {
    padding-top: 6.5rem;
    max-width: 100%;
  }

  /* Offset page content for fixed header */
  body {
    padding-top: 95px; /* matches .navbar-header height */
  }

  .page-header {
    margin: 75px 0 10px;
  }
}

/* Accessibility */

.mobile-button:focus {
    outline: 1px solid #b31d22; 
}