/* Shared navigation drawer treatment */
.header,
.health-header,
.ks-header,
.gc-header,
.ap-header,
.shop-header {
  z-index: 40;
}

/* Keep every primary page header on the Body & Wellbeing rhythm. */
.header,
.health-header,
.ks-header,
.gc-header,
.ap-header,
.shop-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 7px 20px;
  border-bottom: 1px solid #d9e2d8;
  background: #fff;
}

body.influence-page .ks-header {
  min-height: 66px;
  padding: 7px 20px;
}

.brand,
.health-brand,
.ks-brand,
.gc-brand,
.ap-brand,
.shop-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
}

.brand-logo,
.health-brand img,
.ks-brand img,
.gc-brand img,
.ap-brand img,
.shop-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  transform: scale(1.22);
  transform-origin: center;
}

.brand-text,
.health-brand > span,
.ks-brand > span,
.gc-brand > span,
.ap-brand > span,
.shop-brand > span {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-script,
.health-brand b,
.ks-brand b,
.gc-brand b,
.ap-brand b,
.shop-brand b {
  margin-bottom: -3px;
  font: 400 20px/1 "Allura", cursive;
}

.brand-plain,
.health-brand em,
.ks-brand em,
.gc-brand em,
.ap-brand em,
.shop-brand em {
  font: 700 12px/1 "Playfair Display", Georgia, serif;
  font-style: normal;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.menu-toggle,
.health-menu-toggle,
.ks-menu-toggle,
.gc-menu-toggle,
.ap-menu summary,
.shop-menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 11px;
  border: 0;
  background: transparent;
  color: #25210f;
  list-style: none;
  cursor: pointer;
}

.gc-menu-toggle::-webkit-details-marker,
.ap-menu summary::-webkit-details-marker,
.shop-menu summary::-webkit-details-marker {
  display: none;
}

.ap-menu summary,
.shop-menu summary {
  align-content: center;
  gap: 7px;
}
.ap-menu summary i,
.shop-menu summary span {
  display: block;
  width: 22px;
  height: 1px;
  background: #25210f;
}
.ap-menu summary i:nth-child(3) {
  display: none;
}

.header nav,
.health-header nav,
.ks-header nav,
.gc-menu-disclosure nav,
.ap-menu nav,
.shop-menu nav {
  position: fixed;
  z-index: 60;
  top: 66px;
  right: 0;
  bottom: 0;
  left: clamp(42px, 12vw, 72px);
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 66px);
  padding: 30px 25px 24px;
  overflow-y: auto;
  border: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 34%),
    #111715;
  box-shadow: -24px 0 58px rgba(13, 18, 16, .22);
  color: #f7f4ec;
  animation: site-drawer-enter .58s cubic-bezier(.16, .72, .18, 1) both;
  overscroll-behavior: contain;
}

.header nav[hidden],
.health-header nav[hidden],
.ks-header nav[hidden] {
  display: none !important;
}

.header nav::before,
.health-header nav::before,
.ks-header nav::before,
.gc-menu-disclosure nav::before,
.ap-menu nav::before,
.shop-menu nav::before {
  display: block;
  margin: 0 0 19px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(247, 244, 236, .2);
  color: #c8a56a;
  content: "EXPLORE THE HUB";
  font: 700 10px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: .2em;
}

.header nav::after,
.health-header nav::after,
.ks-header nav::after,
.gc-menu-disclosure nav::after,
.ap-menu nav::after,
.shop-menu nav::after {
  display: block;
  margin-top: auto;
  padding-top: 21px;
  color: rgba(247, 244, 236, .55);
  content: "FAITH · MONEY · LIFESTYLE";
  font: 600 9px/1.35 "DM Sans", Arial, sans-serif;
  letter-spacing: .16em;
}

.header nav a,
.health-header nav a,
.ks-header nav a,
.gc-menu-disclosure nav a,
.ap-menu nav a,
.shop-menu nav a {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(247, 244, 236, .13);
  color: #f7f4ec;
  font: 400 clamp(21px, 6vw, 28px)/1.08 "Playfair Display", Georgia, serif;
  letter-spacing: -.025em;
  text-decoration: none;
}

.header nav a::before,
.health-header nav a::before,
.ks-header nav a::before,
.gc-menu-disclosure nav a::before,
.ap-menu nav a::before,
.shop-menu nav a::before {
  align-self: center;
  color: rgba(247, 244, 236, .42);
  content: counter(site-drawer-item, decimal-leading-zero);
  counter-increment: site-drawer-item;
  font: 600 9px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: .08em;
}

.header nav,
.health-header nav,
.ks-header nav,
.gc-menu-disclosure nav,
.ap-menu nav,
.shop-menu nav {
  counter-reset: site-drawer-item;
}

.header nav a:last-child,
.health-header nav a:last-child,
.ks-header nav a:last-child,
.gc-menu-disclosure nav a:last-child,
.ap-menu nav a:last-child,
.shop-menu nav a:last-child {
  border-bottom: 0;
}

.header nav a[aria-current],
.health-header nav a[aria-current],
.ks-header nav a[aria-current],
.gc-menu-disclosure nav a[aria-current],
.ap-menu nav a[aria-current],
.shop-menu nav a[aria-current] {
  color: #d2ac70;
  font-style: italic;
  font-weight: 500;
}

.header nav a[aria-current]::before,
.health-header nav a[aria-current]::before,
.ks-header nav a[aria-current]::before,
.gc-menu-disclosure nav a[aria-current]::before,
.ap-menu nav a[aria-current]::before,
.shop-menu nav a[aria-current]::before {
  color: #d2ac70;
}

.menu-toggle[aria-expanded="true"],
.health-menu-toggle[aria-expanded="true"],
.ks-menu-toggle[aria-expanded="true"],
.gc-menu-disclosure[open] .gc-menu-toggle,
.ap-menu[open] summary,
.shop-menu[open] summary {
  position: relative;
  z-index: 70;
}

.menu-toggle[aria-expanded="true"] svg,
.health-menu-toggle[aria-expanded="true"] svg,
.ks-menu-toggle[aria-expanded="true"] svg,
.gc-menu-disclosure[open] .gc-menu-toggle svg {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"]::before,
.menu-toggle[aria-expanded="true"]::after,
.health-menu-toggle[aria-expanded="true"]::before,
.health-menu-toggle[aria-expanded="true"]::after,
.ks-menu-toggle[aria-expanded="true"]::before,
.ks-menu-toggle[aria-expanded="true"]::after,
.gc-menu-disclosure[open] .gc-menu-toggle::before,
.gc-menu-disclosure[open] .gc-menu-toggle::after,
.ap-menu[open] summary::before,
.ap-menu[open] summary::after,
.shop-menu[open] summary::before,
.shop-menu[open] summary::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 23px;
  height: 1.5px;
  background: #25210f;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"]::after,
.health-menu-toggle[aria-expanded="true"]::after,
.ks-menu-toggle[aria-expanded="true"]::after,
.gc-menu-disclosure[open] .gc-menu-toggle::after,
.ap-menu[open] summary::after,
.shop-menu[open] summary::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ap-menu[open] summary i,
.shop-menu[open] summary span {
  opacity: 0;
}

body:has(.header > nav:not([hidden])),
body:has(.health-header > nav:not([hidden])),
body:has(.ks-header > nav:not([hidden])),
body:has(.gc-menu-disclosure[open]),
body:has(.ap-menu[open]),
body:has(.shop-menu[open]) {
  overflow: hidden;
}

@keyframes site-drawer-enter {
  from {
    opacity: .35;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-height: 660px) {
  .header nav,
  .health-header nav,
  .ks-header nav,
  .gc-menu-disclosure nav,
  .ap-menu nav,
  .shop-menu nav {
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .header nav::before,
  .health-header nav::before,
  .ks-header nav::before,
  .gc-menu-disclosure nav::before,
  .ap-menu nav::before,
  .shop-menu nav::before {
    margin-bottom: 10px;
    padding-bottom: 11px;
  }

  .header nav a,
  .health-header nav a,
  .ks-header nav a,
  .gc-menu-disclosure nav a,
  .ap-menu nav a,
  .shop-menu nav a {
    min-height: 49px;
    font-size: 20px;
  }
}

/* Shared site footer */
footer,
.becoming-footer,
.ks-footer,
.shop-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 22px;
  border: 0;
  background: #18281e;
  color: #e9eee9;
  font:
    500 11px/1.35 "DM Sans",
    Arial,
    sans-serif;
  letter-spacing: 1px;
}

footer span,
.becoming-footer span,
.ks-footer span,
.shop-footer span {
  flex: 0 1 auto;
  flex-basis: auto;
  white-space: nowrap;
}

@media (max-width: 390px) {
  footer,
  .becoming-footer,
  .ks-footer,
  .shop-footer {
    gap: 8px;
    padding-inline: 18px;
    font-size: 10px;
    letter-spacing: 0.7px;
  }
}

/* Original compact dropdown, shared so every page uses the same navigation. */
.header nav,
.health-header nav,
.ks-header nav,
.gc-menu-disclosure nav,
.ap-menu nav,
.shop-menu nav {
  position: absolute;
  z-index: 60;
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
  display: block;
  min-height: 0;
  padding: 8px 20px 18px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid #ded9d2;
  background: #fff;
  box-shadow: 0 14px 24px rgba(17, 17, 17, .08);
  color: #201d1b;
  animation: none;
}

.header nav::before,
.header nav::after,
.health-header nav::before,
.health-header nav::after,
.ks-header nav::before,
.ks-header nav::after,
.gc-menu-disclosure nav::before,
.gc-menu-disclosure nav::after,
.ap-menu nav::before,
.ap-menu nav::after,
.shop-menu nav::before,
.shop-menu nav::after {
  display: none;
  content: none;
}

.header nav a,
.health-header nav a,
.ks-header nav a,
.gc-menu-disclosure nav a,
.ap-menu nav a,
.shop-menu nav a {
  display: flex;
  align-items: center;
  min-height: 49px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e3ded8;
  color: #201d1b;
  font: 500 15px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: 0;
}

.header nav a::before,
.health-header nav a::before,
.ks-header nav a::before,
.gc-menu-disclosure nav a::before,
.ap-menu nav a::before,
.shop-menu nav a::before {
  display: none;
  content: none;
}

.header nav a[aria-current],
.health-header nav a[aria-current],
.ks-header nav a[aria-current],
.gc-menu-disclosure nav a[aria-current],
.ap-menu nav a[aria-current],
.shop-menu nav a[aria-current] {
  color: #201d1b;
  font-style: normal;
  font-weight: 700;
}

.menu-toggle[aria-expanded="true"] svg,
.health-menu-toggle[aria-expanded="true"] svg,
.ks-menu-toggle[aria-expanded="true"] svg,
.gc-menu-disclosure[open] .gc-menu-toggle svg {
  opacity: 1;
}

.menu-toggle[aria-expanded="true"]::before,
.menu-toggle[aria-expanded="true"]::after,
.health-menu-toggle[aria-expanded="true"]::before,
.health-menu-toggle[aria-expanded="true"]::after,
.ks-menu-toggle[aria-expanded="true"]::before,
.ks-menu-toggle[aria-expanded="true"]::after,
.gc-menu-disclosure[open] .gc-menu-toggle::before,
.gc-menu-disclosure[open] .gc-menu-toggle::after,
.ap-menu[open] summary::before,
.ap-menu[open] summary::after,
.shop-menu[open] summary::before,
.shop-menu[open] summary::after {
  display: none;
}

.ap-menu[open] summary i,
.shop-menu[open] summary span {
  opacity: 1;
}

body:has(.header > nav:not([hidden])),
body:has(.health-header > nav:not([hidden])),
body:has(.ks-header > nav:not([hidden])),
body:has(.gc-menu-disclosure[open]),
body:has(.ap-menu[open]),
body:has(.shop-menu[open]) {
  overflow: auto;
}

/* Keep the original compact drawer attached to the viewport while scrolling. */
.header,
.health-header,
.ks-header,
.gc-header,
.ap-header,
.shop-header {
  position: sticky !important;
  z-index: 10000 !important;
  top: 0 !important;
  overflow: visible !important;
  isolation: isolate;
  transform: none !important;
}

.header nav,
.health-header nav,
.ks-header nav,
.gc-menu-disclosure nav,
.ap-menu nav,
.shop-menu nav {
  position: fixed;
  z-index: 10001;
  top: 66px !important;
  right: 0;
  bottom: auto;
  left: 0;
  max-height: calc(100dvh - 66px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.brand,
.health-brand,
.ks-brand,
.gc-brand,
.ap-brand,
.shop-brand {
  position: relative;
  z-index: 10003;
}

.menu-toggle,
.health-menu-toggle,
.ks-menu-toggle,
.gc-menu-toggle,
.ap-menu > summary,
.shop-menu > summary {
  position: relative;
  z-index: 10002;
  pointer-events: auto;
}

@media (max-width: 600px) {
  body {
    padding-top: 66px;
  }

  .header,
  .health-header,
  .ks-header,
  .gc-header,
  .ap-header,
  .shop-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }
}

/* A softer editorial reveal for the shared compact drawer. */
.header nav:not([hidden]),
.health-header nav:not([hidden]),
.ks-header nav:not([hidden]),
.gc-menu-disclosure[open] nav,
.ap-menu[open] nav,
.shop-menu[open] nav {
  transform-origin: top center;
  animation: shared-drawer-reveal .48s cubic-bezier(.2, .72, .2, 1) both;
}

.header nav a,
.health-header nav a,
.ks-header nav a,
.gc-menu-disclosure nav a,
.ap-menu nav a,
.shop-menu nav a {
  min-height: 54px;
  font-size: 17px;
  line-height: 1.25;
}

@keyframes shared-drawer-reveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header nav:not([hidden]),
  .health-header nav:not([hidden]),
  .ks-header nav:not([hidden]),
  .gc-menu-disclosure[open] nav,
  .ap-menu[open] nav,
  .shop-menu[open] nav {
    animation-duration: .01ms;
  }
}