/* ==========================================================================
   UNIRANKS Insights design (UR, 2026-11), stage 2: header, menu and footer.
   Port of the sister Insights site's header/menu/footer look onto the UNIRANKS template markup:
   #sp-top-bar (logo) and #sp-header (main menu) are shown as one dark bar; the existing menu, its promo
   pictures, the phone menu module and the footer content are kept and only restyled.
   body.ur-chrome is set by index.php (html/ur_chrome.php) while the stage-2 switch or preview cookie is on.
   ========================================================================== */

body.ur-chrome {
  --ur-blue: #003366;
  --ur-deep: #00213f;
  --ur-accent: #1d55c1;
  --ur-on-dark: #ffffff;
  --ur-on-dark-muted: rgba(255, 255, 255, .64);
  --ur-font: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ur-gutter: clamp(16px, 3.6vw, 48px);
  --ur-ease: cubic-bezier(.2, .7, .2, 1);
  --ur-bar: 112px;
  --ur-hh: var(--ur-bar);
}
body.ur-chrome .ur-wrap { max-width: 1760px; margin: 0 auto; padding: 0 var(--ur-gutter); }
#ur-mm-data { display: none !important; }

/* ==========================================================================
   Header bar
   ========================================================================== */
body.ur-chrome #sp-top-bar {
  padding: 0;
  background: var(--ur-deep);
  border: 0;
  box-shadow: none;
  font-family: var(--ur-font);
}
/* "All Section" panel: the same links as the main menu (desktop) and the phone menu */
body.ur-chrome #sp-top1 { display: none !important; }
body.ur-chrome #sp-top-bar > .container { max-width: 1760px; padding: 0 var(--ur-gutter); }
body.ur-chrome #sp-top-bar > .container > .container-inner > .row { margin: 0; align-items: center; }
body.ur-chrome #sp-logo { flex: 1 1 auto; width: auto; max-width: none; padding: 0; }
body.ur-chrome #sp-logo .logo { display: flex; align-items: center; margin: 0; }
/* the navy UNIRANKS logo drawn white on the dark bar (same file, no second image) */
body.ur-chrome :is(#sp-logo, .ur-sticky-logo) :is(.logo-image, .logo-image-phone) {
  width: auto;
  max-width: none;
  filter: brightness(0) invert(1);
}

@media (min-width: 992px) {
  body.ur-chrome #sp-top-bar { position: relative; z-index: 20; }
  body.ur-chrome #sp-top-bar > .container > .container-inner > .row { min-height: var(--ur-bar); }
  body.ur-chrome #sp-logo .logo-image { height: 48px; }

  /* the menu row is drawn on top of the logo row, on the right */
  body.ur-chrome #sp-header {
    --ur-hh: var(--ur-bar);
    z-index: 21;
    height: var(--ur-hh);
    margin-top: calc(-1 * var(--ur-bar));
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    font-family: var(--ur-font);
  }
  body.ur-chrome .nav-placeholder { height: 0 !important; }
  body.ur-chrome #sp-header > .container { max-width: 1760px; height: 100%; padding: 0 var(--ur-gutter); }
  body.ur-chrome #sp-header > .container > .container-inner::after { display: none; }
  /* the dropdown panel spans the whole bar, so nothing in between may be positioned */
  body.ur-chrome #sp-header > .container,
  body.ur-chrome #sp-header > .container > .container-inner,
  body.ur-chrome #sp-header > .container > .container-inner > .row,
  body.ur-chrome #sp-header #sp-menu,
  body.ur-chrome #sp-header #sp-menu > .sp-column,
  body.ur-chrome #sp-menu .sp-megamenu-wrapper,
  body.ur-chrome #sp-menu .sp-megamenu-parent,
  body.ur-chrome #sp-menu .sp-megamenu-parent > li { position: static !important; }
  body.ur-chrome #sp-header > .container > .container-inner,
  body.ur-chrome #sp-header > .container > .container-inner > .row,
  body.ur-chrome #sp-header #sp-menu,
  body.ur-chrome #sp-header #sp-menu > .sp-column { height: 100%; }
  body.ur-chrome #sp-header > .container > .container-inner > .row { margin: 0; }
  /* pages whose logo and menu already share the top bar (home page): the panel spans the top bar */
  body.ur-chrome #sp-top-bar > .container,
  body.ur-chrome #sp-top-bar > .container > .container-inner,
  body.ur-chrome #sp-top-bar > .container > .container-inner > .row,
  body.ur-chrome #sp-top-bar #sp-menu,
  body.ur-chrome #sp-top-bar #sp-menu > .sp-column { position: static !important; }
  body.ur-chrome #sp-top-bar #sp-menu { align-self: stretch; display: flex; flex: 1 1 auto; width: auto; max-width: none; }
  body.ur-chrome #sp-top-bar #sp-logo { flex: 0 0 auto; }
  body.ur-chrome #sp-menu { padding: 0; justify-content: flex-end; }
  body.ur-chrome #sp-menu > .sp-column { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }
  body.ur-chrome #sp-menu .sp-megamenu-wrapper { margin-left: auto; height: 100%; }
  body.ur-chrome #sp-menu .sp-megamenu-parent { height: 100%; }

  /* pinned bar after scrolling: dark, a little lower, with the logo */
  body.ur-chrome #sp-header.header-sticky {
    --ur-hh: 80px;
    top: 0;
    margin-top: 0;
    background: var(--ur-deep);
    box-shadow: 0 12px 30px -14px rgba(0, 10, 30, .55);
    pointer-events: auto;
  }
  body.ur-chrome #sp-header .ur-sticky-logo { display: none; margin: 0 auto 0 0; pointer-events: auto; }
  body.ur-chrome #sp-header .ur-sticky-logo .logo-image { height: 38px; }
  body.ur-chrome #sp-header.header-sticky .ur-sticky-logo { display: flex; align-items: center; }

  /* top-level items */
  body.ur-chrome #sp-menu .sp-megamenu-parent {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0 clamp(20px, 2.6vw, 44px);
    margin: 0;
    pointer-events: auto;
  }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li { display: flex; align-items: center; margin: 0; padding: 0; }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > :is(a, span) {
    position: relative;
    display: inline-block;
    padding: 0;
    line-height: var(--ur-hh);
    font-family: var(--ur-font);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ur-on-dark);
    white-space: nowrap;
    cursor: pointer;
  }
  /* bar on the top edge of the header above the open / current item */
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > :is(a, span)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ur-on-dark);
    transform: scaleX(0);
    transition: transform .3s var(--ur-ease);
  }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li:is(:hover, :focus-within, .active) > :is(a, span)::before { transform: scaleX(1); }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > :is(a, span):hover,
  body.ur-chrome #sp-menu .sp-megamenu-parent > li.active > :is(a, span) { color: var(--ur-on-dark); }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li.sp-has-child > :is(a, span)::after { display: none; }

  /* Contact US: outline button */
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > a.uniranks-contact-btn {
    line-height: 1.2;
    padding: 11px 24px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    transition: background-color .2s, color .2s, border-color .2s;
  }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > a.uniranks-contact-btn::before { display: none; }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > a.uniranks-contact-btn:is(:hover, :focus-visible) {
    background: var(--ur-on-dark) !important;
    color: var(--ur-deep) !important;
    border-color: var(--ur-on-dark) !important;
  }

  /* full-width dropdown panel: section title and description | link groups | promo picture */
  body.ur-chrome #sp-menu .sp-megamenu-parent .sp-dropdown.sp-dropdown-main {
    left: 0 !important;
    right: 0 !important;
    top: 100%;
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li:focus-within > .sp-dropdown { display: block; opacity: 1; visibility: visible; }
  body.ur-chrome #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    align-items: start;
    padding: 44px max(var(--ur-gutter), calc((100% - 1760px) / 2 + 48px)) 64px;
    background: var(--ur-deep);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0;
    box-shadow: 0 40px 60px -20px rgba(0, 10, 30, .45);
    font-family: var(--ur-font);
  }
  body.ur-chrome .ur-mm-head { padding-right: 40px; }
  body.ur-chrome .ur-mm-title {
    margin: 0;
    font-family: var(--ur-font);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ur-on-dark);
  }
  body.ur-chrome .ur-mm-title a { color: inherit; text-decoration: none; }
  body.ur-chrome .ur-mm-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
  body.ur-chrome .ur-mm-desc {
    margin: 16px 0 0;
    max-width: 30ch;
    font-size: 16px;
    line-height: 1.45;
    color: var(--ur-on-dark-muted);
  }

  /* mega panels (Rankings, OnePath, Excellence): the template's three columns */
  body.ur-chrome #sp-menu .sp-dropdown-inner > .row {
    display: grid;
    grid-template-columns: repeat(2, max-content) minmax(220px, 340px);
    column-gap: 56px;
    align-items: start;
    margin: 0;
  }
  body.ur-chrome #sp-menu .sp-dropdown-inner > .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }
  body.ur-chrome #sp-menu .sp-dropdown-inner > .row > [class*="col-"]:last-child { justify-self: end; width: 100%; }
  body.ur-chrome #sp-menu .sp-mega-group { margin: 0; padding: 4px 0 4px 20px; list-style: none; border-left: 1px solid rgba(255, 255, 255, .22); }
  body.ur-chrome #sp-menu .sp-mega-group > li { padding: 0; }
  body.ur-chrome #sp-menu .sp-mega-group .sp-group-title {
    display: block;
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--ur-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ur-on-dark-muted);
  }
  body.ur-chrome #sp-menu .sp-mega-group .sp-mega-group-child { display: grid; gap: 12px; margin: 0; padding: 0; }
  /* promo picture of the panel */
  body.ur-chrome #sp-menu .sp-mega-group > li.module .mod-custom p { margin: 0; }
  body.ur-chrome #sp-menu .sp-mega-group > li.module img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    object-position: left top;
    border-radius: 10px;
    transition: opacity .2s;
  }
  body.ur-chrome #sp-menu .sp-mega-group > li.module a:hover img { opacity: .88; }

  /* simple panels (Home, Discover) */
  body.ur-chrome #sp-menu .sp-dropdown-inner > .sp-dropdown-items {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 4px 0 4px 20px;
    border-left: 1px solid rgba(255, 255, 255, .22);
  }
  /* links in all panels */
  body.ur-chrome #sp-menu .sp-dropdown li.sp-menu-item { padding: 0; }
  body.ur-chrome #sp-menu .sp-dropdown li.sp-menu-item > a {
    display: inline-block;
    padding: 2px 0;
    background: none;
    font-family: var(--ur-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ur-on-dark);
    text-decoration: none;
    transition: opacity .2s;
  }
  body.ur-chrome #sp-menu .sp-dropdown li.sp-menu-item > a:hover,
  body.ur-chrome #sp-menu .sp-dropdown li.sp-menu-item.active > a { color: var(--ur-on-dark); background: none; opacity: .7; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  body.ur-chrome #sp-logo .logo-image { height: 40px; }
  body.ur-chrome #sp-menu .sp-megamenu-parent { gap: 0 20px; }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > :is(a, span) { font-size: 16px; }
  body.ur-chrome #sp-menu .sp-megamenu-parent > li > a.uniranks-contact-btn { padding: 9px 18px; }
  body.ur-chrome #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
  body.ur-chrome .ur-mm-title { font-size: 28px; }
  body.ur-chrome #sp-menu .sp-dropdown-inner > .row { column-gap: 32px; grid-template-columns: repeat(2, max-content) minmax(180px, 240px); }
}

/* phone and tablet: logo left, menu button right */
@media (max-width: 991.98px) {
  /* the template pins this bar on phones and keeps 80px of room for it above the page */
  body.ur-chrome #sp-top-bar > .container > .container-inner > .row { min-height: 80px; }
  body.ur-chrome #sp-logo > .sp-column { display: flex; align-items: center; justify-content: space-between; }
  body.ur-chrome #sp-logo :is(.logo-image, .logo-image-phone) { height: 34px; }
  body.ur-chrome #sp-logo .logo { order: 1; }
  body.ur-chrome #offcanvas-toggler {
    order: 2;
    float: none;
    width: 44px;
    height: 44px;
    margin: 0;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--ur-on-dark);
    font-size: 18px;
  }
  body.ur-chrome #offcanvas-toggler > span { color: var(--ur-on-dark); }
}

/* ==========================================================================
   Phone menu (full screen, dark); the existing menu module is kept
   ========================================================================== */
body.ur-chrome .offcanvas-menu {
  width: 100%;
  background: var(--ur-deep);
  color: var(--ur-on-dark);
  overflow-y: auto;
  font-family: var(--ur-font);
}
body.ltr.offcanvs-position-left.ur-chrome .offcanvas-menu { left: -100%; }
body.ltr.offcanvs-position-left.offcanvas-active.ur-chrome .offcanvas-menu { left: 0; }
body.ltr.offcanvs-position-left.offcanvas-active.ur-chrome .body-wrapper { left: 0; }
body.ur-chrome .offcanvas-menu .close-offcanvas {
  top: 16px;
  right: var(--ur-gutter);
  left: auto;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  background: rgba(255, 255, 255, .12);
  color: var(--ur-on-dark);
}
body.ur-chrome .offcanvas-menu .offcanvas-inner { margin-top: 84px; padding: 0 var(--ur-gutter) 40px; }
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul > li a,
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul > li span { font-family: var(--ur-font); color: var(--ur-on-dark); }
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul.menu > li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > :is(a, span) {
  padding: 16px 48px 16px 0;
  border: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > :is(a, span) > .menu-toggler {
  right: 4px;
  padding: 8px;
  color: var(--ur-on-dark);
  font-size: 16px;
}
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul ul { padding: 0 0 12px 2px; }
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul ul > li > :is(a, span) {
  padding: 8px 48px 8px 0;
  border: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ur-on-dark-muted);
}
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul ul > li > span.menu-separator {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul ul ul { padding-left: 14px; }
body.ur-chrome .offcanvas-menu .offcanvas-inner .sp-module ul a:hover { color: var(--ur-on-dark); }

/* ==========================================================================
   Footer: link footer above the existing footer, existing footer in the same dark blue
   ========================================================================== */
body.ur-chrome .ur-footer-links {
  padding: 64px 0 40px;
  background: var(--ur-deep);
  color: var(--ur-on-dark);
  font-family: var(--ur-font);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
body.ur-chrome .ur-footer-links__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
body.ur-chrome .ur-footer-links__title {
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--ur-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ur-on-dark);
}
body.ur-chrome .ur-footer-links ul { margin: 0; padding: 0; list-style: none; }
body.ur-chrome .ur-footer-links li { margin: 0 0 8px; line-height: 1.5; }
body.ur-chrome .ur-footer-links .ur-footer-links__list--2 { column-count: 2; column-gap: 32px; }
body.ur-chrome .ur-footer-links .ur-footer-links__list--2 li { break-inside: avoid; }
body.ur-chrome .ur-footer-links a { font-size: 15px; color: var(--ur-on-dark-muted); text-decoration: none; }
body.ur-chrome .ur-footer-links a:hover { color: var(--ur-on-dark); }
body.ur-chrome .ur-footer-latest li { margin-bottom: 12px; line-height: 1.35; }
body.ur-chrome .ur-footer-latest__all a { display: inline-flex; align-items: center; gap: 8px; color: var(--ur-on-dark); }

body.ur-chrome #sp-footer { background: var(--ur-deep); color: var(--ur-on-dark-muted); font-family: var(--ur-font); }
body.ur-chrome #sp-footer > .container { max-width: 1760px; padding-left: var(--ur-gutter); padding-right: var(--ur-gutter); }
body.ur-chrome #sp-footer .sppb-section,
body.ur-chrome #sp-footer .sppb-row-container { background-color: transparent !important; }
body.ur-chrome #sp-footer a { color: var(--ur-on-dark); }
body.ur-chrome #sp-footer :is(p, span, a, li) { font-family: var(--ur-font); }

@media (max-width: 991.98px) {
  body.ur-chrome .ur-footer-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ur-chrome .ur-footer-links__col--wide { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  body.ur-chrome .ur-footer-links { padding: 48px 0 32px; }
  body.ur-chrome .ur-footer-links__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ==========================================================================
   Focus and motion
   ========================================================================== */
body.ur-chrome :is(#sp-top-bar, #sp-header, .offcanvas-menu, .ur-footer-links, #sp-footer) :is(a, button):focus-visible { outline: 2px solid var(--ur-on-dark); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  body.ur-chrome :is(#sp-header, .offcanvas-menu) * { transition: none !important; }
}