/*CSS for OD Main Menu*/

/**  ///  ===  STICKY NAV  ===  ///  */
#sticky_navigation_wrapper {
  height: var(--od-menuBar);
  margin: 0 auto;
  z-index: 9900;
}

#sticky_navigation {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: var(--od-menuBar);
  background: url(../images/trans-black-60.png);
  z-index: 9900;
}

#sticky_navigation table {
  margin: 0 auto;
}


/**  ///  ===  SEARCH BAR  ===  ///  */
.searchCon {
  --od-search-w: min(70rem, 70vw);
  position: relative;
  display: flex;
  align-items: center;
  left: 0;
  background: transparent;
  width: var(--od-search-w);
  height: var(--od-menuBar);
  margin: auto auto auto 5rem;
  box-shadow: 0 0 3em rgba(0, 0, 0, .15);
}

.searchOD {
  --od-search-size: 3rem;
  position: relative;
  display: flex;
  top: 0;
  font-size: var(--od-fz-sm);
  background: #222222c4;
  border: 2px solid var(--od-c-offBlack);
  border-radius: 100px;
  overflow: hidden;
  width: var(--od-search-size);
  height: var(--od-search-size);
  margin: .5rem 0;
  transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

label.sr-only {
  border: 0px;
  width: 100%;
}

.search__input {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  flex-grow: 1;
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  padding: .25em 1em;
}

.search__submit {
  font-size: var(--od-fz-sm);
  background: url(/images/searchG.png) no-repeat center center;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  width: calc(var(--od-search-size) - 4px);
  height: calc(var(--od-search-size) - 4px);
  transition: background 200ms ease-out;
  margin: 0 0 auto auto;
}

.searchOD:focus-within {
  background-color: white;
  width: 100%;
}

.searchOD:focus-within .search__input {
  opacity: 1;
  z-index: initial;
  cursor: initial;
  width: calc(100% - var(--od-search-size));
}

.searchOD:focus-within .search__submit {
  background: var(--od-c-red) url(/images/searchW.png) no-repeat center center;
  outline: 2.5px solid var(--od-c-offBlack);
}

.searchOD:focus-within .search__submit:hover,
.searchOD:focus-within .search__submit:focus {
  outline: 0;
  box-shadow: 0 0 10px rgb(0 0 0 / 65%);
}


/**  ///  ===  MENU BAR AND TOP BUTTONS  ===  ///  */
.topMenu {
  height: var(--od-menuBar);
  z-index: 10;
}

#subMenu .topMenu {
  height: var(--od-subMenuBar);
}


#mainMenu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: var(--od-fullpage);
  margin-right: 2rem;
}

#mainMenu hr {
  opacity: 0;
}

.menuLink {
  width: calc(100%, 1000px);
}


.topBtn {
  --od-c: whitesmoke;
  display: flex;
  align-items: center;
  font-family: var(--od-ff-heading);
  font-size: var(--od-fz-sm);
  color: var(--od-c);
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50);
  line-height: var(--od-lh);
  height: var(--od-menuBar);
  width: max-content;
  padding: 0 1rem;
}

.topBtn:hover {
  background: var(--od-c-red);
  cursor: pointer;
  height: var(--od-menuBar);
}


/**  ///  ===  DROPDOWN MENU & COLUMN FORMATTING  ===  ///  */
/*  MENU DROPDOWN CONTAINER  /  .menuDD  */
.menuDD {
  --od-c: whitesmoke;
  --od-lh: 1.7;
  position: absolute;
  top: var(--od-menuBar);
  left: 0;
  right: 0;
  width: var(--od-fullpage);
  height: max-content;
  padding: 10px 0;
  margin: 0 auto;
  background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
  opacity: .95;
  background-blend-mode: multiply;
  display: none;
  color: var(--od-c);
  font-size: 14px;
  line-height: var(--od-lh);
  box-sizing: border-box;
  z-index: 9999;
}


.col1 {
  grid-area: col1;
}

.col2 {
  grid-area: col2;
}

.col3 {
  grid-area: col3;
}

.menuLink:is(:hover, :focus, :active) .menuDD {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "col1 col2 col3";
  column-gap: 0;
  row-gap: 1rem;
  width: min(100%, 1000px);
  right: 0;
  margin: 0 auto;
}

/**  ///  ===  RESOURCES  ===  ///  */
.col12 {
  grid-area: col12;
}

.col22 {
  grid-area: col22;
}

.menuLink:is(:hover, :focus, :active) #resources.menuDD {
  display: grid;
  grid-template-columns: 1fr minmax(25.5rem, 1fr) minmax(24.5rem, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "col1 col2 col3"
    "col12 col22 col3";
  column-gap: 0;
  row-gap: 1rem;
  width: min(100%, 1000px);
  right: 0;
  margin: 0 auto;
}

.menuCol {
  display: flex;
  flex-flow: column wrap;
  text-align: left;
}

.menuCol:is([class^="col2"], [class^="col3"]) {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}


.menuCol h3 {
  font-size: 16px;
  text-align: center;
  display: block;
  width: 95%;
  margin: 0 auto 5px auto;
  border-bottom: 1px solid #b80808;
  padding-left: 10px;
  text-transform: uppercase;
  font-weight: 400;
}

#mainMenu h3:nth-of-type(2),
#mainMenu .news {
  margin-top: 2rem;
}


.menuCol a {
  display: flex;
  align-items: center;
  font-family: var(--od-ff-condensed);
  width: 100%;
  padding: 0 0.5rem 0 1rem;
  min-height: 2rem;
}

.menuCol .col1 a {
  padding-left: 25px;
}

.menuCol a:hover {
  color: #FBD61A;
  background-image: linear-gradient(to right, #232323 0%, black 100%);
  /*background-image: linear-gradient(to right, #232323 0%, black 100%);
  background: rgba(16, 21, 34, 1);*/

}





/*< ///  ----------  MEDIA QUERIES  ----------  ///  */


@media (max-width: 1280px) {

  .menuCol a {
    min-height: 3rem;
  }

  /** end max-width 1280px */
}


@media (max-width: 800px) {

  .menuLink:is(:hover, :focus, :active) #school.menuDD {
    display: grid;
    grid-template-columns: 37% 35% 28%;
  }
  /** end max-width 800px */
}


















/*! The code below was replaced by Mobile Accordion Menu */


@media (max-width: 600px) {

  .menuCol a {
    min-height: 4rem;
  }

  #mainMenu :is(.about, .trainDept, .odRes) {
    margin-top: 2rem;
  }

  .submenuLinks {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .submenuLinks>* {
    flex-basis: 50%;
  }


  /**  ///  ===  CORPS  ===  ///  */
  .menuLink:is(:hover, :focus, :active) #corps.menuDD {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "col1 col2"
      "col3 col3";
  }

  #corps.menuDD .col3 {
    display: flex;
    flex-flow: row nowrap;
    border: unset;
  }

  #corps.menuDD .col3 .news {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }

  #corps.menuDD .col3>* {
    flex-basis: 100%;
  }


  /**  ///  ===  SCHOOL  ===  ///  */
  .menuLink:is(:hover, :focus, :active) #school.menuDD {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "col3 col1"
      "col2 col2";
  }

  /**  ///  ===  RESOURCES  ===  ///  */
  .menuLink:is(:hover, :focus, :active) #resources.menuDD {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "col3 col2"
      "col1 col1";
  }

  /** end of max-width 600px */
}