/* JCI site shell, part 1. Transitional extraction from the former global lock. */
/* Global lock: single header/footer UI across all templates */

/* Canonical header geometry. These values mirror the fixed dimensions owned by
 * the shell at each breakpoint, so layout offsets are available at first paint
 * without JavaScript writing inline CSS variables. */
:root {
  --jci-header-offset: 124px;
  --jci-header-visual-offset: 126px;
  /* Templates whose first content is already positioned by a secondary-nav
   * shell can set this to 0 without changing the header/sticky offsets. */
  --jci-main-content-offset: var(--jci-header-visual-offset);
  --jci-header-cta-gap: 16px;
}

@media (min-width: 1025px) {
  :root {
    --jci-header-offset: 108px;
    --jci-header-visual-offset: 120px;
  }
}

@media (max-width: 768px) {
  :root {
    --jci-header-offset: 74px;
    --jci-header-visual-offset: 76px;
  }
}

/* Header frame */
.site-wrapper > header.site-header,
header.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--color-white, #fff) !important;
  z-index: 1000 !important;
  box-shadow: none !important;
}

.site-wrapper > header #blue-line-row,
#blue-line-row {
  height: 12px !important;
  background: var(--color-blue, #3f6ff0) !important;
  position: relative !important;
  z-index: 2 !important;
}

.site-wrapper > header #blue-line-row::after,
#blue-line-row::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -2px !important;
  height: 2px !important;
  background: var(--color-blue, #3f6ff0) !important;
}

/* Header layout desktop */
.site-wrapper > header .container-menu-inside,
.container-menu-inside {
  padding-block: 14px 10px !important;
  display: grid !important;
  grid-template-columns: 210px 1fr 210px !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
}

.site-wrapper > header .image-logo img,
.image-logo img {
  height: auto !important;
}

.site-wrapper > header .container-menu-inside .image-logo,
.container-menu-inside .image-logo {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  right: 0 !important;
  position: relative !important;
}

.site-wrapper > header .container-menu-inside .image-logo img,
.container-menu-inside .image-logo img {
  height: auto !important;
  max-height: none !important;
}

/* Hard-match Home vs inner pages */
body.home .site-wrapper > header .container-menu-inside,
body.home .container-menu-inside,
body:not(.home) .site-wrapper > header .container-menu-inside,
body:not(.home) .container-menu-inside {
  padding-top: 14px !important;
  padding-bottom: 10px !important;
  grid-template-columns: 210px 1fr 210px !important;
  height: auto !important;
}



.site-wrapper > header .menu-center,
.menu-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-self: end !important;
  align-self: center !important;
  gap: 10px !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
}

.site-wrapper > header .menu-right,
.menu-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-self: end !important;
  align-self: center !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.site-wrapper > header .menu-center-title,
.site-wrapper > header .menu-right-title,
.menu-center-title,
.menu-right-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.site-wrapper > header .menu-right-actions,
.menu-right-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* Keep body content offset consistent while the header is fixed.
 * Use the canonical header geometry variables at every breakpoint so content
 * starts after the shared header without template-specific compensation. */
@media (min-width: 769px) and (max-width: 1024px) {
  main,
  .site-main {
    padding-top: var(--jci-main-content-offset, var(--jci-header-visual-offset, 126px)) !important;
  }
}

@media (min-width: 1025px) {
  main,
  .site-main {
    padding-top: var(--jci-main-content-offset, var(--jci-header-visual-offset, var(--jci-header-offset, 120px))) !important;
  }
}

/* Header layout mobile */
@media (max-width: 768px) {
  .site-wrapper > header .container-menu-inside,
  .container-menu-inside {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    grid-template-columns: none !important;
  }

  .site-wrapper > header .menu-center,
  .site-wrapper > header .menu-right-title,
  .menu-center,
  .menu-right-title {
    display: none !important;
  }

  .site-wrapper > header .menu-right,
  .menu-right {
    flex-direction: row !important;
    gap: 10px !important;
  }

  .site-wrapper > header .menu-right-actions,
  .menu-right-actions {
    gap: 16px !important;
  }

  .site-wrapper > header #blue-line-row,
  #blue-line-row {
    height: 8px !important;
  }

  .site-wrapper > header .container-menu-inside .image-logo,
  .container-menu-inside .image-logo {
    width: auto !important;
    height: auto !important;
    right: 0 !important;
  }

  main,
  .site-main {
    padding-top: var(--jci-main-content-offset, var(--jci-header-offset, 110px)) !important;
  }
}

/* Footer lock (single footer visual baseline) */
.site-footer {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2026-06-10 consistent inner header logo, including The Magazine posts. */
body:not(.home) .site-header--inner .jci-header-logo__image,
body:not(.home) .site-header--inner .image-logo img,
body.single-post .site-header .jci-header-logo__image,
body.single-post .site-header .image-logo img {
  height: auto !important;
  max-height: none !important;
}

/* 2026-06-10 global header/footer parity. */
body:not(.home) .site-header,
body:not(.home) .site-header.site-header--inner,
body:not(.home) .site-wrapper > header {
  background: #fff !important;
}

body:not(.home) #blue-line-row {
  display: block !important;
}

body:not(.home) .jci-header-logo__image,
body:not(.home) .image-logo img {
  height: auto !important;
}

body.home .site-header.site-header--home:not(.is-scrolled):not(.has-scrolled) {
  background: transparent !important;
}

body.home .site-header.site-header--home.is-scrolled,
body.home .site-header.site-header--home.has-scrolled,
body.home .site-header.site-header--home.scrolled {
  background: #fff !important;
}

.jci-global-prefooter,
.jci-new-quote.jci-global-prefooter {
  min-height: clamp(260px, 24vw, 360px) !important;
  display: grid !important;
  padding: clamp(70px, 7vw, 110px) 20px clamp(58px, 6vw, 92px) !important;
  margin: 0 !important;
  background: #f2f0ec !important;
  color: #071426 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.jci-global-prefooter strong {
  display: block !important;
  margin: 0 !important;
  color: #071426 !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.jci-global-prefooter p {
  display: block !important;
  max-width: 620px !important;
  margin: 20px auto 0 !important;
  color: #071426 !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.jci-global-prefooter a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 32px !important;
  background: #071426 !important;
  color: #fff !important;
  border: 1px solid #071426 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.jci-global-prefooter a:hover,
.jci-global-prefooter a:focus-visible {
  background: #1f63ff !important;
  border-color: #1f63ff !important;
  color: #fff !important;
}

/* 2026-06-10 homepage scroll state uses site-header--scrolled. */
body.home .site-header.site-header--home.site-header--scrolled {
  background: #fff !important;
}

/* 2026-06-10 align mega menu utility links on the bottom edge. */
@media (min-width: 1025px) {
  

  

  

  

  
}