/* Header menu: Calculators toggle + a cleaner mobile / tablet slide-in menu. Desktop menu is unchanged. */

/* the mobile-only chevron next to "Calculators" */
.ac-mega-toggle {
  display: none;
}

@media screen and (max-width: 991px) {
  /* panel */
  .ul-sidebar {
    width: min(360px, 88vw);
    padding: 18px 20px 22px;
    border-left: 0;
    justify-content: flex-start;
    gap: 14px;
  }
  .ul-sidebar.active {
    box-shadow: 0 0 0 100vmax rgba(11, 27, 46, 0.45); /* dims the page behind the menu */
  }
  .ul-sidebar-header {
    align-items: center;
    padding-bottom: 14px;
    border-bottom-color: #E8EDF3;
  }
  .ul-sidebar-header-logo img {
    max-width: 150px;
  }
  .ul-sidebar-closer {
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ul-2-primary);
    color: #fff;
    font-size: 14px;
  }
  .ul-sidebar-closer:hover {
    background: var(--artha-accent);
    color: var(--ul-2-primary);
  }

  /* menu list */
  .ul-sidebar .ul-header-nav {
    border: 0;
  }
  .ul-sidebar .ul-header-nav > * {
    position: relative;
    padding: 0;
    border-bottom: 1px solid #EEF1F5;
  }
  .ul-sidebar .ul-header-nav > :last-child {
    border-bottom: 0;
  }
  .ul-sidebar .ul-header-nav > a,
  .ul-sidebar .ul-header-nav .has-sub-menu > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #0B1B2E;
  }
  .ul-sidebar .ul-header-nav > a:active,
  .ul-sidebar .ul-header-nav .has-sub-menu > a:active {
    color: var(--ul-2-primary);
  }
  .ul-sidebar .ul-header-nav .has-sub-menu > a::after {
    font-size: 11px;
    color: #98A2B3;
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .ul-sidebar .ul-header-nav .has-sub-menu.active > a {
    color: var(--ul-2-primary) !important;
  }
  .ul-sidebar .ul-header-nav .has-sub-menu.active > a::after {
    transform: rotate(180deg);
    color: var(--ul-2-primary);
  }
  .ul-sidebar .ul-header-nav .has-sub-menu.active {
    background: transparent;
    border-color: #EEF1F5;
  }

  /* submenus: indented list with an accent rule */
  .ul-sidebar .ul-header-nav .has-sub-menu.active .ul-header-submenu {
    padding: 0 0 12px;
  }
  .ul-sidebar .ul-header-submenu ul {
    margin-left: 6px;
    padding-left: 14px;
    border-left: 2px solid var(--artha-accent);
  }
  .ul-sidebar .ul-header-submenu li a {
    padding: 8px 0;
    font-size: 15px;
    font-weight: 500;
    color: #5B6577;
  }
  .ul-sidebar .ul-header-submenu li a:hover {
    color: var(--ul-2-primary);
  }

  /* Calculators: label goes to the page, the chevron button opens the list */
  .ul-sidebar .ul-header-nav .ac-has-mega > a::after {
    content: none;
  }
  .ul-sidebar .ac-has-mega > a {
    padding-right: 54px !important;
  }
  .ul-sidebar .ac-mega-toggle {
    position: absolute;
    top: 6px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #F2F6FB;
    color: var(--ul-2-primary);
    font-size: 11px;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  .ul-sidebar .ac-has-mega.active .ac-mega-toggle {
    transform: rotate(180deg);
    background: var(--ul-2-primary);
    color: #fff;
  }

  /* calculators list inside the menu */
  .ul-sidebar .ac-mega-box {
    padding-left: 14px;
    margin-left: 6px;
    border-left: 2px solid var(--artha-accent);
  }
  .ul-sidebar .ac-mega ul {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .ul-sidebar .ac-mega-group + .ac-mega-group {
    margin-top: 4px;
  }
  .ul-sidebar .ac-mega-heading {
    padding: 10px 0 4px;
    font-size: 11px;
    color: #98A2B3;
  }
  .ul-sidebar .ac-mega-heading::before {
    display: none;
  }
  .ul-sidebar .ul-header-nav .ul-header-submenu.ac-mega a.ac-mega-link {
    padding: 6px 0;
    font-size: 15px;
    font-weight: 500;
    color: #0B1B2E;
  }
  .ul-sidebar .ac-mega-icon {
    width: 26px;
    height: 26px;
  }
  .ul-sidebar .ac-mega-foot {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 0 2px;
  }
  .ul-sidebar .ul-header-nav .ul-header-submenu.ac-mega a.ac-mega-cta {
    padding: 9px 16px;
  }

  /* footer of the panel */
  .ul-sidebar-footer {
    padding-top: 16px;
    border-top: 1px solid #EEF1F5;
  }
  .ul-sidebar-footer-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .ul-sidebar-footer-social a {
    height: 38px;
    border-color: #DCE3EC;
    color: var(--ul-2-primary);
  }
  .ul-sidebar-footer-social a:hover {
    background: var(--ul-2-primary);
    border-color: var(--ul-2-primary);
    color: #fff;
  }
}

/* header bar on phones and tablets: one short registration line on top, then logo / search / menu on one row */
@media screen and (max-width: 991px) {
  .ul-2-header-top {
    padding: 8px 0;
  }
  .ul-2-header-top-right {
    display: none;
  }
  .ul-2-header-top-left {
    width: 100%;
    text-align: center;
  }
  .ul-2-header-top-left p {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .ul-2-header-bottom {
    padding: 12px 0;
  }
  .ul-2-header-bottom .ul-2-header-container {
    flex-wrap: nowrap;
  }
  .ul-2-header-logo-container {
    flex: 0 1 auto;
    min-width: 0;
  }
  .ul-2-header-logo-container img {
    display: block;
    width: 100%;
    max-width: 170px;
  }
  .ul-2-header-bottom-right {
    flex: none;
    gap: 10px;
  }
  .ul-2-header-bottom .ul-header-search-opener,
  .ul-2-header-bottom .ul-header-sidebar-opener {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
  }
  .ul-2-header-bottom .ul-header-search-opener {
    background: #F2F6FB;
    color: var(--ul-2-primary);
  }
  .ul-2-header-bottom-btns .ul-btn {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }
}
@media screen and (max-width: 479px) {
  .ul-2-header-logo-container img {
    max-width: 140px;
  }
}

/* text wordmark in the header and menu panel (styles shared with the footer, artha-footer.css) */
.ul-2-header-logo-container .af-logo-word,
.ul-sidebar-header-logo .af-logo-word {
  font-size: 24px;
}
@media screen and (max-width: 479px) {
  .ul-2-header-logo-container .af-logo-mark,
  .ul-sidebar-header-logo .af-logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 19px;
  }
  .ul-2-header-logo-container .af-logo-word,
  .ul-sidebar-header-logo .af-logo-word {
    font-size: 20px;
  }
  .ul-2-header-logo-container .af-logo-word small,
  .ul-sidebar-header-logo .af-logo-word small {
    font-size: 9.5px;
  }
}

/* the page you are on: navy, bold, with a yellow underline (desktop) or a yellow side bar (menu panel) */
.ul-header-nav > a.is-current,
.ul-header-nav > .is-current > a {
  color: var(--ul-2-primary) !important;
  font-weight: 700;
  background: linear-gradient(var(--artha-accent), var(--artha-accent)) no-repeat left bottom / 100% 3px;
  padding-bottom: 4px;
}
@media screen and (max-width: 991px) {
  .ul-sidebar .ul-header-nav > a.is-current,
  .ul-sidebar .ul-header-nav > .is-current > a {
    padding-bottom: 0;
    padding-left: 12px !important;
    background: linear-gradient(var(--artha-accent), var(--artha-accent)) no-repeat left center / 4px 60%;
  }
}
/* hero tag line on phones: the ribbon on its own line, the note under it */
@media screen and (max-width: 575px) {
  .ul-2-banner-sub-title .bg {
    display: table;
    margin-bottom: 8px;
  }
  .ul-2-banner-sub-title {
    line-height: 1.45;
  }
}

/* desktop menu: one even weight for every link (semi-bold); the current page differs only by colour and underline,
   so nothing shifts when you change page */
@media screen and (min-width: 992px) {
  .ul-2-header .ul-header-nav > a,
  .ul-2-header .ul-header-nav > .has-sub-menu > a {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: #1A2B44;
  }
  .ul-2-header .ul-header-nav > a.is-current,
  .ul-2-header .ul-header-nav > .is-current > a {
    font-weight: 600;
  }
}

/* menu panel always fits the visible screen (phone browser bars included); "Follow us" stays inside it */
.ul-sidebar {
  top: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ul-sidebar > * {
  flex-shrink: 0;
}
.ul-sidebar-footer {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* Artha logo image: header, menu panel and footer */
.af-logo img {
  display: block;
  width: auto;
  height: 52px;
}
.ul-2-header-logo-container .af-logo img {
  height: clamp(44px, 3.4vw, 58px);
}
.ul-sidebar-header-logo .af-logo img {
  height: 40px;
}
.af-brand .af-logo img {
  height: 60px;
}
@media screen and (max-width: 991px) {
  .ul-2-header-logo-container .af-logo img {
    height: 44px;
  }
}
@media screen and (max-width: 479px) {
  .ul-2-header-logo-container .af-logo img {
    height: 38px;
  }
}
.acb-logo {
  width: auto;
  height: 44px;
}
.acb-logo + h3 {
  margin-top: 22px !important;
}

/* Sticky header: the top bar scrolls away, the menu bar stays (offset set by useStickyHeader in Header.jsx) */
.ul-2-header {
  position: sticky;
  top: calc(-1 * var(--hdr-top, 0px));
  z-index: 999;
  background: #fff;
}
.ul-2-header.sticky {
  box-shadow: 0 8px 24px -16px rgba(11, 37, 69, 0.35);
}
/* slimmer menu bar */
.ul-2-header-bottom {
  padding: 8px 0;
}
.ul-2-header-logo-container img {
  max-width: clamp(150px, 10.5vw, 190px);
}
@media screen and (max-width: 991px) {
  .ul-2-header-bottom {
    padding: 8px 0;
  }
  .ul-2-header-bottom .ul-header-search-opener,
  .ul-2-header-bottom .ul-header-sidebar-opener,
  .ul-2-header-bottom-btns .ul-btn {
    height: 40px;
  }
  .ul-2-header-bottom .ul-header-search-opener,
  .ul-2-header-bottom .ul-header-sidebar-opener {
    width: 40px;
  }
}
/* the phone menu panel, search overlay and popups sit above the sticky header (same z-index, earlier in the page) */
.ul-sidebar,
.ul-search-form-wrapper,
.ul-form-modal-bg {
  z-index: 1000;
}