/*
  Standalone behavior layer for the original Univer360 / Weebly menu.

  IMPORTANT:
  Visual styling should come primarily from:
      /files/main_style.css
  and Weebly's sites.css.

  This file deliberately avoids redesigning the desktop menu.
*/

/* Ensure flyouts can layer over the banner. */
#header,
#header .header-wrap,
#nav {
  position: relative;
  z-index: 10000;
}

#nav .wsite-menu-item-wrap,
#nav .wsite-menu-subitem-wrap {
  position: relative;
}

/* Weebly export has inline display:none on these wrappers.
   !important is required to override it. */
#nav .wsite-menu-wrap {
  display: none !important;
}

/* Desktop: reproduce Weebly flyout behavior without main.js. */
@media screen and (min-width: 768px) {

  #nav .has-flyout:hover > .wsite-menu-wrap,
  #nav .has-flyout:focus-within > .wsite-menu-wrap {
    display: block !important;
  }

  /* First-level flyouts */
  #nav > .wsite-menu-default > .has-flyout > .wsite-menu-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10050;
  }

  /* Nested Documents Required flyout */
  #nav .nested-flyout > .wsite-menu-wrap {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10060;
  }

  /* JavaScript toggle buttons are unnecessary on desktop. */
  .standalone-submenu-toggle,
  .standalone-hamburger {
    display: none !important;
  }
}



/* ==========================================================
   FIX: prevent inherited Weebly flyout rules from clipping
   the dropdown to a single submenu row.
   ========================================================== */

#nav .wsite-menu-wrap,
#nav .wsite-menu {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#nav .wsite-menu {
  display: block !important;
}

#nav .wsite-menu > .wsite-menu-subitem-wrap {
  display: block !important;
  float: none !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}

#nav .wsite-menu-subitem {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Make sure nested flyouts are not clipped by their parent row. */
#nav .wsite-menu-subitem-wrap.has-flyout,
#nav .nested-flyout {
  overflow: visible !important;
}


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

@media screen and (max-width: 767px) {

  /*
    Your theme CSS still controls the logo/header appearance.
    These rules only make the same #nav usable as a mobile menu.
  */

  #header .header-wrap {
    position: relative;
  }

  .standalone-hamburger {
    position: absolute;
    top: 50%;
    left: 15px;

    display: block;

    width: 42px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    transform: translateY(-50%);
    cursor: pointer;

    z-index: 10100;
  }

  .standalone-hamburger span,
  .standalone-hamburger span::before,
  .standalone-hamburger span::after {
    position: absolute;

    left: 8px;

    display: block;

    width: 26px;
    height: 2px;

    background: #333;

    content: "";
    transition: transform .18s ease, opacity .18s ease;
  }

  .standalone-hamburger span {
    top: 20px;
  }

  .standalone-hamburger span::before {
    left: 0;
    top: -7px;
  }

  .standalone-hamburger span::after {
    left: 0;
    top: 7px;
  }

  .standalone-hamburger[aria-expanded="true"] span {
    background: transparent;
  }

  .standalone-hamburger[aria-expanded="true"] span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .standalone-hamburger[aria-expanded="true"] span::after {
    top: 0;
    transform: rotate(-45deg);
  }


  /* Hide navigation until hamburger is opened. */
  #nav {
    position: absolute;
    top: 100%;
    left: 0;

    display: none !important;

    width: 100%;

    margin: 0;
    padding: 0;

    background: #fff;

    max-height: calc(100vh - 70px);
    overflow-y: auto;

    box-shadow: 0 7px 14px rgba(0,0,0,.15);
  }

  #nav.mobile-nav-open {
    display: block !important;
  }


  #nav .wsite-menu-default {
    display: block !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
  }

  #nav .wsite-menu-default > li {
    position: relative;

    display: block !important;

    float: none !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid #ededed;
  }

  #nav .wsite-menu-default > li > a {
    display: block !important;

    width: 100%;

    padding: 13px 52px 13px 20px !important;

    line-height: 1.35 !important;
  }


  /* Submenus become accordion panels. */
  #nav .wsite-menu-wrap {
    position: static !important;

    width: 100% !important;

    margin: 0 !important;

    box-shadow: none !important;
  }

  #nav .mobile-submenu-open > .wsite-menu-wrap {
    display: block !important;
  }

  #nav .wsite-menu {
    position: static !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #nav .wsite-menu-subitem-wrap {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid #e7e7e7;
  }

  #nav .wsite-menu-subitem {
    display: block !important;

    width: 100% !important;

    padding: 10px 52px 10px 35px !important;
  }

  #nav .nested-flyout .wsite-menu-subitem {
    padding-left: 50px !important;
  }

  #nav .wsite-menu-arrow {
    display: none !important;
  }


  /* Dedicated touch target for submenu opening. */
  .standalone-submenu-toggle {
    position: absolute;

    top: 0;
    right: 3px;

    display: block;

    width: 48px;
    height: 45px;

    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;

    z-index: 3;
  }

  .standalone-submenu-toggle::after {
    content: "";

    position: absolute;

    top: 16px;
    left: 18px;

    width: 8px;
    height: 8px;

    border-right: 1.5px solid #555;
    border-bottom: 1.5px solid #555;

    transform: rotate(45deg);
    transition: transform .15s ease;
  }

  .mobile-submenu-open > .standalone-submenu-toggle::after {
    top: 20px;
    transform: rotate(225deg);
  }

  /* Nested button aligns with submenu row. */
  .wsite-menu-subitem-wrap > .standalone-submenu-toggle {
    height: 40px;
  }
}

/* ==========================================================
   V3 FIX: allow desktop flyouts to extend outside the header.

   Some Weebly themes clip descendants at the header/nav level.
   If an ancestor has overflow:hidden, changing the dropdown's
   own height/overflow does not help.
   ========================================================== */

@media screen and (min-width: 768px) {

  #header,
  #header .header-wrap,
  #header .logo,
  #nav,
  #nav.menu,
  #nav > .wsite-menu-default,
  #nav > .wsite-menu-default > .wsite-menu-item-wrap,
  #nav .wsite-menu-wrap,
  #nav .wsite-menu {
    overflow: visible !important;
  }

  #header,
  #header .header-wrap,
  #nav,
  #nav.menu {
    max-height: none !important;
  }

  #nav > .wsite-menu-default {
    height: auto !important;
    max-height: none !important;
  }

  /* Open first-level dropdown as a normal block stack. */
  #nav > .wsite-menu-default > .has-flyout:hover > .wsite-menu-wrap,
  #nav > .wsite-menu-default > .has-flyout:focus-within > .wsite-menu-wrap {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #nav > .wsite-menu-default > .has-flyout > .wsite-menu-wrap > .wsite-menu {
    display: block !important;
    position: static !important;

    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #nav > .wsite-menu-default > .has-flyout > .wsite-menu-wrap > .wsite-menu > li {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
  }

  /*
    Keep first-level wrapper positioned under its parent.
    The UL itself is static inside this positioned wrapper.
  */
  #nav > .wsite-menu-default > .has-flyout > .wsite-menu-wrap {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;

    width: auto !important;
    min-width: 220px !important;

    z-index: 999999 !important;
  }

  /*
    Nested Documents Required menu.
  */
  #nav .nested-flyout:hover > .wsite-menu-wrap,
  #nav .nested-flyout:focus-within > .wsite-menu-wrap {
    display: block !important;
  }

  #nav .nested-flyout > .wsite-menu-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;

    min-width: 220px !important;

    overflow: visible !important;
    z-index: 1000000 !important;
  }

}

/* ==========================================================
   V4 APPEARANCE: compact navy desktop flyouts
   ========================================================== */

@media screen and (min-width: 768px) {

  /* Solid navy panel */
  #nav .wsite-menu-wrap,
  #nav .wsite-menu {
    background: #203d72 !important;
  }

  #nav > .wsite-menu-default > .has-flyout > .wsite-menu-wrap,
  #nav .nested-flyout > .wsite-menu-wrap {
    background: #203d72 !important;
    border: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.22) !important;
  }

  /* Compact rows */
  #nav .wsite-menu-subitem-wrap {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    background: #203d72 !important;
  }

  #nav .wsite-menu-subitem-wrap:last-child {
    border-bottom: 0 !important;
  }

  #nav .wsite-menu-subitem {
    display: block !important;
    box-sizing: border-box !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 5px 11px !important;

    font-family: "News Cycle", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;

    color: #ffffff !important;
    background: #203d72 !important;

    text-decoration: none !important;
    white-space: normal !important;
  }

  #nav .wsite-menu-title {
    color: #ffffff !important;
    line-height: 1.18 !important;
  }

  #nav .wsite-menu-arrow {
    color: #ffffff !important;
  }

  /* Hover/focus: slightly lighter navy */
  #nav .wsite-menu-subitem:hover,
  #nav .wsite-menu-subitem:focus,
  #nav .wsite-menu-subitem:focus-visible {
    color: #ffffff !important;
    background: #2b568f !important;
  }

  #nav .wsite-menu-subitem:hover .wsite-menu-title,
  #nav .wsite-menu-subitem:focus .wsite-menu-title,
  #nav .wsite-menu-subitem:focus-visible .wsite-menu-title {
    color: #ffffff !important;
  }

  /* Keep dropdown width sensible with long university names */
  #nav > .wsite-menu-default > .has-flyout > .wsite-menu-wrap {
    width: 275px !important;
    min-width: 275px !important;
  }

  #nav .nested-flyout > .wsite-menu-wrap {
    width: 250px !important;
    min-width: 250px !important;
  }
}

/* ==========================================================
   V5 TYPOGRAPHY: bolder + force left alignment
   ========================================================== */

@media screen and (min-width: 768px) {

  #nav .wsite-menu-subitem,
  #nav .wsite-menu-title {
    text-align: left !important;
  }

  #nav .wsite-menu-subitem {
    font-weight: 700 !important;
  }

  #nav .wsite-menu-title {
    display: block !important;
    width: 100% !important;
    font-weight: 700 !important;
  }

  /* Keep submenu arrow at the far right without affecting text alignment */
  #nav .wsite-menu-arrow {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
  }

  #nav .nested-flyout > .wsite-menu-subitem {
    position: relative !important;
    padding-right: 28px !important;
  }
}

/* ==========================================================
   DESKTOP VISIBILITY FIX
   Some original Weebly page rules/scripts hide #nav.
   Force only the desktop top-level navigation visible.
   ========================================================== */

@media screen and (min-width: 768px) {

  #header #nav,
  #header #nav.menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
  }

  #header #nav > ul.wsite-menu-default {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    align-items: stretch !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  #header #nav > ul.wsite-menu-default > li.wsite-menu-item-wrap {
    display: flex !important;
    float: none !important;

    width: auto !important;
    height: auto !important;

    visibility: visible !important;
    opacity: 1 !important;
  }

  #header #nav > ul.wsite-menu-default > li.wsite-menu-item-wrap > a.wsite-menu-item {
    display: flex !important;
    align-items: center !important;

    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ==========================================================
   FINAL TOP NAV SIZE
   Keep desktop navigation compact and on one line.
   ========================================================== */
@media screen and (min-width: 768px) {
  #header #nav > ul.wsite-menu-default >
  li.wsite-menu-item-wrap > a.wsite-menu-item {
    font-size: 13.5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
  }
}
/* ==========================================================
   MOBILE HEADER OVERRIDE
   Preserve original desktop navigation exactly.
   On mobile: centered logo + hamburger at right.
   ========================================================== */
@media screen and (max-width: 767px) {

  #header {
    position: relative !important;
  }

  #header .header-wrap {
    position: relative !important;
    min-height: 70px !important;
    padding-left: 58px !important;
    padding-right: 58px !important;
  }

  #header .logo {
    position: relative !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  #header .wsite-logo,
  #header .wsite-logo a,
  #header .wsite-logo img {
    display: inline-block !important;
  }

  #nav-trigger.standalone-hamburger {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    z-index: 1000001 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  /* Clean three-line hamburger. */
  #nav-trigger.standalone-hamburger span,
  #nav-trigger.standalone-hamburger::before,
  #nav-trigger.standalone-hamburger::after {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    height: 2px !important;
    background: #203d72 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  #nav-trigger.standalone-hamburger::before {
    top: 11px !important;
  }

  #nav-trigger.standalone-hamburger span {
    top: 19px !important;
  }

  #nav-trigger.standalone-hamburger::after {
    top: 27px !important;
  }

  /* Keep it as a hamburger even when menu is open: no X transformation. */
  #nav-trigger.standalone-hamburger[aria-expanded="true"]::before {
    top: 11px !important;
    transform: none !important;
  }

  #nav-trigger.standalone-hamburger[aria-expanded="true"] span {
    top: 19px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #nav-trigger.standalone-hamburger[aria-expanded="true"]::after {
    top: 27px !important;
    transform: none !important;
  }
}


/* ==========================================================
   DEFINITIVE MOBILE MENU FIX
   - one 3-line navy hamburger only
   - no X transformation
   - opened navigation forced visible below header
   ========================================================== */
@media screen and (max-width: 767px) {

  #header,
  #header .header-wrap {
    overflow: visible !important;
  }

  #header .header-wrap {
    position: relative !important;
    min-height: 70px !important;
    padding-left: 58px !important;
    padding-right: 58px !important;
  }

  #header .logo {
    position: relative !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  #nav-trigger.standalone-hamburger {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    left: auto !important;
    transform: translateY(-50%) !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 1000002 !important;
  }

  /* Kill the OLD hamburger pseudo-lines completely. */
  #nav-trigger.standalone-hamburger span::before,
  #nav-trigger.standalone-hamburger span::after,
  #nav-trigger.standalone-hamburger[aria-expanded="true"] span::before,
  #nav-trigger.standalone-hamburger[aria-expanded="true"] span::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  /* Draw exactly three navy lines: before / span / after. */
  #nav-trigger.standalone-hamburger::before,
  #nav-trigger.standalone-hamburger > span,
  #nav-trigger.standalone-hamburger::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;

    left: 8px !important;
    width: 24px !important;
    right: auto !important;
    height: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #203d72 !important;
    border: 0 !important;
    border-radius: 0 !important;

    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #nav-trigger.standalone-hamburger::before {
    top: 11px !important;
  }

  #nav-trigger.standalone-hamburger > span {
    top: 19px !important;
  }

  #nav-trigger.standalone-hamburger::after {
    top: 27px !important;
  }

  /* Never change to X when open. */
  #nav-trigger.standalone-hamburger[aria-expanded="true"]::before {
    top: 11px !important;
    transform: none !important;
  }

  #nav-trigger.standalone-hamburger[aria-expanded="true"] > span {
    top: 19px !important;
    background: #203d72 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #nav-trigger.standalone-hamburger[aria-expanded="true"]::after {
    top: 27px !important;
    transform: none !important;
  }

  /* Closed mobile navigation. */
  #header #nav,
  #header #nav.menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Open mobile navigation — override all old theme hiding rules. */
  #header #nav.mobile-nav-open,
  #header #nav.menu.mobile-nav-open {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 70px) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #ffffff !important;
    box-shadow: 0 7px 14px rgba(0,0,0,.18) !important;

    transform: none !important;
    z-index: 1000000 !important;
  }

  #header #nav.mobile-nav-open > .wsite-menu-default,
  #header #nav.menu.mobile-nav-open > .wsite-menu-default {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}