/* /CSS/Header.css */

/* =========================
   NAVIGATION VARIABLES
========================= */

:root{
  --nav-height:70px;
  --logo-height:50px;
  --site-max-width:2000px;

  --accent:#ffd700;
  --text-light:#e6e6e6;

  --radius-sm:14px;

  --glass-bg:rgba(0,0,0,0.8);
  --glass-blur:10px;

  --shadow-soft:0 18px 42px rgba(0,0,0,0.34);
  --shadow-grey-outline:0 0 2px 2px rgba(150,150,150,1);

  --dropdown-gap:10px;
  --panel-edge-gap:12px;
  --desktop-panel-text-pad:20px;
  --desktop-dropdown-min-width:300px;
  --mobile-panel-side-gap:14px;
  --mobile-panel-max-width:340px;
  --mobile-submenu-indent:36px;
  --dropdown-item-min-height:46px;
  --mobile-submenu-item-min-height:44px;
  --dropdown-arrow-size:18px;
}

/* =========================
   SITE HEADER STACKING
========================= */

.site-header{
  width:100%;
  max-width:var(--site-max-width);
  margin-inline:auto;
  position:relative;
  z-index:1000;
}

/* =========================
   MAIN NAVIGATION BAR
========================= */

.site-nav{
  width:100%;
  max-width:var(--site-max-width);
  height:var(--nav-height);
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  padding:0 25px 0 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--glass-bg);
  border:none;
  box-shadow:0 2px 2px 0 rgba(150,150,150,1);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}

.site-nav .nav-left,
.site-nav .nav-left-main{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}

.site-nav .logo-desktop,
.site-nav .logo-mobile{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  text-decoration:none;
}

.site-nav .logo-mobile{
  display:none;
}

.site-nav .logo-img{
  height:var(--logo-height);
  width:auto;
  display:block;
  object-fit:contain;
}

.site-nav .nav-links{
  display:flex;
  align-items:center;
  gap:1.5rem;
  list-style:none;
}

.site-nav .nav-links > li{
  display:flex;
  align-items:center;
}

.site-nav a,
.site-nav .nav-dropdown-toggle,
.mobile-menu-panel a,
.mobile-submenu-toggle{
  color:var(--text-light);
  text-decoration:none;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
}

.site-nav a{
  display:inline-flex;
  align-items:center;
}

.site-nav .nav-dropdown-toggle,
.mobile-submenu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
}

.site-nav .nav-dropdown-toggle::after,
.mobile-submenu-toggle::after{
  content:"▾";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  font-size:var(--dropdown-arrow-size);
  font-weight:700;
  line-height:1;
  transform:rotate(0deg);
  transform-origin:center;
  transition:transform 0.2s ease;
}

.site-nav .nav-dropdown-toggle[aria-expanded="true"]::after,
.mobile-submenu-toggle[aria-expanded="true"]::after{
  transform:rotate(180deg);
}

.site-nav a:hover,
.site-nav .nav-dropdown-toggle:hover,
.mobile-menu-panel a:hover,
.mobile-submenu-toggle:hover,
.site-nav .nav-dropdown-toggle[aria-expanded="true"],
.mobile-submenu-toggle[aria-expanded="true"],
.site-nav a[aria-current="page"]{
  color:var(--accent);
}

.site-nav .menu-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  flex:0 0 auto;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
}

.site-nav .menu-toggle span{
  width:24px;
  height:3px;
  background:var(--accent);
  border-radius:2px;
}

.site-nav .utc-clock{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  flex:0 0 auto;
  line-height:1.1;
  text-align:right;
}

.site-nav .utc-clock__label{
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.site-nav .utc-clock__time{
  margin-top:4px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.site-nav a:focus-visible,
.site-nav .nav-dropdown-toggle:focus-visible,
.site-nav .menu-toggle:focus-visible,
.site-nav .logo-desktop:focus-visible,
.site-nav .logo-mobile:focus-visible,
.mobile-menu-panel a:focus-visible,
.mobile-submenu-toggle:focus-visible,
.desktop-dropdown-panel a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:8px;
}

/* =========================
   DESKTOP DROPDOWNS
========================= */

.desktop-dropdown-layer{
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
}

.desktop-dropdown-panel{
  position:fixed;
  top:calc(var(--nav-height) + var(--dropdown-gap));
  left:var(--panel-edge-gap);
  width:max-content;
  min-width:var(--desktop-dropdown-min-width);
  max-width:calc(100vw - (var(--panel-edge-gap) * 2));
  padding:10px 0;
  background:var(--glass-bg);
  border:none;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-grey-outline),var(--shadow-soft);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s ease;
  pointer-events:none;
}

.desktop-dropdown-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.desktop-dropdown-panel a{
  display:flex;
  align-items:center;
  min-height:var(--dropdown-item-min-height);
  padding:0 var(--desktop-panel-text-pad);
  color:var(--text-light);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  text-align:left;
}

.desktop-dropdown-panel a:hover{
  color:var(--accent);
}

/* =========================
   MOBILE MENU
========================= */

.mobile-menu-panel{
  position:fixed;
  top:calc(var(--nav-height) + var(--dropdown-gap));
  left:var(--mobile-panel-side-gap);
  width:min(var(--mobile-panel-max-width),calc(100vw - (var(--mobile-panel-side-gap) * 2)));
  z-index:999;
  display:none;
  padding:0;
  background:var(--glass-bg);
  border:none;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-grey-outline),var(--shadow-soft);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s ease;
}

.mobile-menu-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.mobile-menu-list{
  width:100%;
  list-style:none;
  padding:10px 10px 14px;
}

.mobile-menu-list > li,
.has-mobile-submenu{
  width:100%;
}

.mobile-menu-list > li > a,
.mobile-submenu-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 12px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text-light);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  text-align:left;
}

.mobile-submenu{
  display:none;
  width:auto;
  margin:8px -10px 10px;
  padding:8px 10px 10px;
  list-style:none;
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
  box-shadow:0 -2px 2px 0 rgba(70,70,70,1),0 2px 2px 0 rgba(70,70,70,1);
}

.has-mobile-submenu.is-open > .mobile-submenu{
  display:block;
}

.mobile-submenu li{
  width:100%;
}

.mobile-submenu a{
  display:flex;
  align-items:center;
  width:100%;
  min-height:var(--mobile-submenu-item-min-height);
  padding:0 12px 0 var(--mobile-submenu-indent);
  border-radius:10px;
  color:var(--text-light);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  white-space:normal;
  text-align:left;
}

.mobile-submenu a:hover{
  color:var(--accent);
}

/* =========================
   NAVIGATION TRANSITIONS
========================= */

.site-nav,
.desktop-dropdown-panel,
.mobile-menu-panel{
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    opacity 0.18s ease,
    visibility 0.18s ease;
}

/* =========================
   NAVIGATION RESPONSIVE
========================= */

@media (max-width:768px){
  .site-nav{
    padding:0 25px 0 20px;
    justify-content:space-between;
  }

  .site-nav .menu-toggle{
    display:flex;
    z-index:1003;
  }

  .site-nav .nav-left,
  .site-nav .nav-left-main{
    position:static;
    gap:0;
  }

  .site-nav .nav-left{
    z-index:3;
  }

  .site-nav .logo-desktop{
    display:none;
  }

  .site-nav .logo-mobile{
    display:flex;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:4;
    pointer-events:auto;
  }

  .site-nav .logo-mobile .logo-img{
    height:50px;
  }

  .site-nav .nav-links{
    display:none;
  }

  .mobile-menu-panel{
    display:block;
  }

  .desktop-dropdown-layer{
    display:none;
  }

  .site-nav .utc-clock{
    position:relative;
    z-index:3;
  }

  .site-nav .utc-clock__label{
    font-size:10px;
  }

  .site-nav .utc-clock__time{
    font-size:15px;
  }
}

@media (min-width:769px){
  .mobile-menu-panel{
    display:none !important;
  }
}
/* /CSS/Header.css */

/* =========================
   HEADER / HERO
========================= */

.hero-banner{
  width:100%;
  max-width:var(--site-max-width);
  margin-inline:auto;
  position:relative;
  z-index:1;
  margin-top:var(--nav-height);
  min-height:clamp(220px,28vw,420px);
  background:url("../Files/HeaderDesktop.png") center center / cover no-repeat;
  border:none;
  box-shadow:none;
}

.hero-banner::before,
.hero-banner::after{
  content:none;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){
  .hero-banner{
    min-height:clamp(180px,40vw,260px);
    background:url("../Files/HeaderMobile.png") center center / cover no-repeat;
  }
}