@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
html { font-family: "Abel", sans-serif !important; }
.hero-video{
  position: relative;
  height: 400px;
  overflow: hidden;
}

/* make video behave like background-size: cover */
.hero-video__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* optional readability overlay */
.hero-video__shade{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: none;
}

/* overlay logo/text */
.hero-video__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;    /* NEW: stack vertically */
  align-items: center;
  justify-content: center;
  gap: 14px;                 /* slightly tighter than 16px */
  padding: 24px;
  text-align: center;
}

.hero-video__logo{
  height: clamp(90px, 12vw, 160px);  /* NEW: bigger, responsive */
  width: auto;
  max-width: 80vw;                   /* NEW: prevent overflow on small screens */
  display: block;
}

.hero-video__subtitle{
  color: #fff;
  font-size: clamp(16px, 1.6vw, 22px); /* NEW: a bit larger */
  line-height: 1.3;                    /* NEW: better readability */
  max-width: 900px;                    /* NEW: nicer on wide screens */
  opacity: 0.95;                       /* optional, helps look */
}
@media (max-width: 768px){
  .hero-video{ height: 400px; } /* or 280/320 if you prefer */
  .hero-video__overlay{ flex-direction: column; }
}

@media (min-width: 992px) {

  /* Positioning context + avoid clipping */
  .page-wrapper #primary-menu.main-navigation-wrapper {
    position: relative !important;
    overflow: visible !important;
    padding-right: 12ch !important;
  }

  /* Dock account menu inside the bar, always full bar height */
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;

    display: flex !important;
    align-items: center !important;

    /* IMPORTANT: don't inherit (inherit may be transparent) */
    background-color: rgba(0,0,0,0) !important;  /* transparent but not "inherit" */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make the link fill the bar height and center text */
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu ul.navigation__menubar,
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu ul.navigation__menubar > li,
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu ul.navigation__menubar > li > a {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
  }

  /* Match padding of menu items (adjust if needed) */
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu ul.navigation__menubar > li > a {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
@media (min-width: 992px) {

  /* ...keep your existing rules... */

  /* CRITICAL: shrink the absolutely-positioned block to its contents */
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu {
    left: auto !important;          /* cancel any inherited left:0 */
    width: auto !important;
    max-width: max-content !important;
  }

  /* Also shrink the nav element inside if Solo sets it to 100% */
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu nav,
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu .solo-menu {
    width: auto !important;
    max-width: max-content !important;
  }

  /* And shrink the UL (Solo sometimes forces width:100%) */
  .page-wrapper #primary-menu #block-solo-glowacon-account-menu ul.navigation__menubar {
    width: auto !important;
  }
}
/* MOBILE / TABLET */
@media (max-width: 991.98px) {

  /* Menu bar is positioning context + create space for the stacked Log in/out */
  .page-wrapper #primary-menu.main-navigation-wrapper{
    position: relative !important;
    overflow: visible !important;
    padding-bottom: 56px !important; /* reserve vertical room for Log in/out */
  }

  /* Keep hamburger at top-right. Prevent it from being a full-width overlay. */
  .page-wrapper #primary-menu .mobile-nav.hamburger-icon{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    height: 56px !important;        /* reference height */
    z-index: 10000 !important;
  }

  /* Log in/out UNDER the hamburger area (not under the whole bar) */
  .page-wrapper #primary-menu nav#block-solo-glowacon-account-menu{
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 56px !important;           /* exactly under hamburger */
    width: auto !important;
    z-index: 9999 !important;

    background: #0a8fbc !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make Log in/out box match hamburger width+height */
  .page-wrapper #primary-menu nav#block-solo-glowacon-account-menu{
    width: auto !important;
    min-width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: stretch !important;
  }

  /* Fill the box */
  .page-wrapper #primary-menu nav#block-solo-glowacon-account-menu ul.navigation__menubar,
  .page-wrapper #primary-menu nav#block-solo-glowacon-account-menu ul.navigation__menubar > li{
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
  }

  /* Right aligned text + symmetric padding */
  .page-wrapper #primary-menu nav#block-solo-glowacon-account-menu ul.navigation__menubar > li > a{
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 16px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
}