/* variables */
:root {
    --alt-orange: #FF783E;
    --vc-orange: #f56600;
    --dark-orange: #C4500E;
    --darker-orange: #A13D03; 
    --body-bg: #272C34; 
    --footer-bg: #000;
    --default-text: #fff; 
    --footer-text: #b5b5b5; 
    --nav-text: #000;
    --subnav-text: #fff;
    --nav-text-size: 1rem; 

    --nav-background-color: var(--vc-orange);
  }

  .page nav {
    margin: 0;
    background: var(--nav-background-color);
    border-top: 1rem solid var(--footer-bg);
  }

  .disclosure-nav {
    display: flex;
    justify-content: right;
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* height: 3rem;
    gap: 1rem; */
  }

  .disclosure-nav a{
    border: 0;
    color: var(--nav-text);
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0.5rem;
    text-decoration: none;
  }

  .disclosure-nav .last-nav{
    padding: 0.5rem 0 0.5rem 0.5rem;
  }

  .disclosure-nav a:hover{
    text-decoration: underline;
  }
  
  .disclosure-nav ul {
    display: block;
    list-style-type: none;
    margin: 0;
    min-width: 20rem;
    position: absolute;
    top: 3.55rem;
    right: 0;
    padding: 0.5rem;
    background: var(--dark-orange);
    color: var(--default-text);
    z-index: 10;
  }

  .mobile-nav ul {
    top: 3.95rem;
  }
  
  .disclosure-nav li {
    margin: 0;
    padding: 0;
  }
  
  .disclosure-nav > li {
    display: flex;
    position: relative;
    align-items: center;
  }
  
  .disclosure-nav ul a {
    border: 0;
    color: var(--subnav-text);
    display: block;
    margin: 0;
    padding: 1rem 0.5rem;
    text-decoration: none;
  }

  .disclosure-nav ul .button-sub-item {
    padding: 0.5rem 0 0.5rem 1rem;
  }

  
  
  .disclosure-nav ul a:hover,
  .disclosure-nav ul a:focus {
    text-decoration: underline;
  }
  
  .disclosure-nav ul a:focus {
   /*  outline: 5px solid rgb(0 90 156 / 75%); */
    position: relative;
  }
  
  .disclosure-nav button,
  .disclosure-nav .main-link {
    align-items: center;
    display: flex;
    padding: 1rem;
    font-size: var(--nav-text-size);
    background-color: transparent;
    border: none;
    margin: 0;
    color: var(--nav-text);
  }
  
  .disclosure-nav .main-link {
    border-right-color: transparent;
  }

  
  
  .disclosure-nav button::after {
    content: "";
    /*
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    */
    /* height: 25px; */
    /* margin-left: 0.75em; */
    /* width: 24px; */
    /* transform: rotate(45deg); */
    /* background-image: url(../img/keyboard_arrow_down.svg); */
  }

  .disclosure-nav button svg{
    pointer-events: none;
  }

  .mobile-nav button::after {
    /* content: ""; */
    /*
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    */
    /* height: 31px;
    margin-left: 0.75em;
    width: 30px; */
    /* transform: rotate(45deg); */
   /*  background-image: url(../img/menu.svg); */
  }
  
  .disclosure-nav .main-link + button::after {
    margin-left: 0;
  }
  
  .disclosure-nav button:focus,
  .disclosure-nav .main-link:focus {
    /* border-color: #005a9c;
    outline: 5px solid rgb(0 90 156 / 75%); */
    position: relative;
    background: var(--dark-orange);
    color: var(--default-text);
  }

  .disclosure-nav button:focus .down-svg,
  .disclosure-nav .main-link:focus .down-svg, .disclosure-nav button:focus .menu-svg,
  .disclosure-nav .main-link:focus .menu-svg {
    fill: var(--default-text);

  }
  
  .disclosure-nav button:hover,
  .disclosure-nav button[aria-expanded="true"] {
    /* background-color: #005a9c; 
    color: #fff; */
    text-decoration: underline;
  }
  
  .disclosure-nav button:hover::after,
  .disclosure-nav button[aria-expanded="true"]::after {
   /*  border-color: #fff; */
  }
  
  /* Styles for example page content section
  .disclosure-page-content {
    border: 1px solid #ccc;
    padding: 1em;
  }
  
  .disclosure-page-content h3 {
    margin-top: 0.5em;
  }
  
  .sample-header {
    border: #005a9c solid 2px;
    background: #005a9c;
    color: white;
    text-align: center;
  }
  
  .sample-header .title {
    font-size: 2.5em;
    font-weight: bold;
    font-family: serif;
  }
  
  .sample-header .tagline {
    font-style: italic;
  }
  
  .sample-footer {
    border: #005a9c solid 2px;
    background: #005a9c;
    font-family: serif;
    color: white;
    font-style: italic;
    padding-left: 1em;
  }

   */

   /* navigation media queries */


@media (min-width: 821px) {
    .mobile-nav{
      display: none;
    }
  }
  
  @media (max-width: 820px) {
    .desktop-nav{
      display: none;
    }
  }
  
  
    
/* secondary navigation layout */

.secondary-navigation{
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}