/*Header CSS*/
.header {
      width: 100%;
      background-color: var(--dl-color-scheme-md-red);
      padding: 10px 0;
}

.header-container{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      height: auto;
      justify-content: space-between;
      padding:20px;
      column-gap: 10px;
      background-color: var(--dl-color-scheme-white);

}

/*CSS for the header logo group (UMD, MDEM, Mesonet)*/
.header-logos{
      margin: auto;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 24px;
      overflow-x: auto;
}

.header-logo-link{
      display: flex;
      align-items: center;
}

.header-logo{
      display: block;
      flex-shrink: 0;
}

.header-logo-umd,
.header-logo-mdem{
      height: 64px;
      width: auto;
}

.header-logo-mesonet{
      height: 48px;
      width: auto;
}

/*CSS for the login block and menu dropdown*/
.header-actions{
      margin: auto;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
}

.login-container{
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 20px;
      margin: 10px 0;
      text-align: center;
      min-width: 0;
}

.user-link{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

/*Dropdown menu button (native <details>/<summary>, no JS needed)*/
.menu-dropdown{
      position: relative;
}

.menu-dropdown-btn{
      z-index: 150;
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
      cursor: pointer;
      user-select: none;
      padding: 10px 20px;
      border: 2px solid var(--dl-color-scheme-md-red);
      color: var(--dl-color-scheme-md-red);
      font-weight: 700;
      font-size: 18px;
      background-color: var(--dl-color-scheme-white);
      white-space: nowrap;
      flex-shrink: 0;
}

.menu-dropdown-btn:hover{
      color:var(--dl-color-scheme-white);
      background-color: var(--dl-color-scheme-md-red);
}

.menu-dropdown-btn::-webkit-details-marker{
      display: none;
}

.menu-dropdown[open] .menu-dropdown-btn{
      background-color: var(--dl-color-scheme-md-red);
      color: var(--dl-color-scheme-white);

}

.menu-dropdown-caret{
      font-size: 12px;
}

/*Fixed to the viewport (not the header) so it always renders above page
content regardless of the current page's own z-index usage - e.g. the
homepage's map tooltips use z-index:10, which sat above the header when this
was position:absolute/relative to the header instead.*/
.menu-box {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      position: fixed;
      z-index: 100;
      top: 0;
      right: 0;
      width: 55%;
      margin: 0;
      padding: 80px 0;
      overflow-y: auto;
      list-style: none;
      background-color: var(--dl-color-scheme-white);
      box-shadow: -2px 0 6px rgba(0, 0, 0, .4);
}

/*The panel is position:fixed and covers the "Menu" button once open, so it
needs its own close control - the summary can't be clicked again to toggle it
shut.*/
.menu-close-item{
      position: absolute;
      top: 16px;
      right: 20px;
}

.menu-close-btn{
      background: none;
      border: none;
      padding: 4px 10px;
      font-size: 32px;
      line-height: 1;
      color: var(--dl-color-scheme-md-red);
      cursor: pointer;
}

.menu-close-btn:hover{
      color: var(--dl-color-scheme-pink);
}

.menu-item {
      display: block;
      padding: 10px 30px;
      color: #333;
      font-size: 25px;
      font-weight: 500;
      text-decoration: none;
      transition-duration: .25s;
}

#header-text{
      color: var(--dl-color-scheme-md-red);
      font-weight: 700;
}

#menu-text{
      font-size: 20px;
}

/* Configuration for tablet view*/
@media (max-width : 1000px) {

      .header-logo-umd,
      .header-logo-mdem{
            height: 52px;
      }
      .header-logo-mesonet{
            height: 38px;
      }
      .header-logos{
            gap: 20px;
      }
      .menu-box{
            width: 75%;
      }
}

/* Configuration for narrow/phone view*/
@media (max-width : 600px) {
      .header-container{
            padding: 10px 12px;
      }
      .header-logos{
            gap: 10px;
      }
      .header-logo-umd,
      .header-logo-mdem{
            height: 40px;
      }
      /*The mesonet logo is a ~9:1 wide banner, so on phones it's capped by
      width instead of height - matching heights with the near-square UMD/MDEM
      logos here would make it far too wide for the viewport.*/
      .header-logo-mesonet{
            height: auto;
            width: 150px;
      }
      .login-container{
            gap: 10px;
            margin: 8px 0;
      }
      .user-link{
            max-width: 90px;
      }
      .menu-dropdown-btn{
            padding: 8px 14px;
            font-size: 15px;
      }
      .menu-box{
            width: 100%;
      }
}