/* Shared header and footer contract used by every Daylivia page. */

.shared-header-container,
.shared-footer-container {
  width: min(calc(100% - 40px), 73.75rem);
  margin-inline: auto;
}

.shared-footer-container {
  width: min(calc(100% - 40px), 64rem);
}

.shared-header-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 10px 12px 10px 22px;
  box-sizing: border-box;
}

.shared-header-brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.shared-header-brand .brand-wordmark-image {
  display: block;
  width: 128px;
  height: auto;
  object-fit: contain;
}

.shared-header-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.shared-header-nav a {
  position: relative;
  padding: 11px 14px;
  color: var(--muted, rgba(12, 23, 43, 0.7));
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  transition: color 180ms ease;
}

.shared-header-nav a::after {
  position: absolute;
  right: 14px;
  bottom: 5px;
  left: 14px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--daylivia-brand-primary, var(--blue, #1768ff)), var(--daylivia-brand-soft, var(--cyan, #62d6ff)));
  content: "";
  transition: transform 220ms ease;
}

.shared-header-nav a:hover,
.shared-header-nav a.is-active {
  color: var(--ink, #10172f);
}

.shared-header-nav a:hover::after,
.shared-header-nav a.is-active::after {
  transform: scaleX(1);
}

.shared-header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shared-header-theme-toggle,
.shared-header-menu-toggle {
  display: inline-grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  place-items: center;
  border: 1px solid var(--line, rgba(23, 42, 86, 0.12));
  border-radius: 50%;
  background: var(--surface-solid, #fff);
  color: var(--ink, #10172f);
  cursor: pointer;
}

.shared-header-theme-toggle .shared-header-theme-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-header-theme-toggle .theme-icon-moon,
.shared-header-menu-toggle {
  display: none;
}

[data-theme="dark"] .shared-header-theme-toggle .theme-icon-sun {
  display: none;
}

[data-theme="dark"] .shared-header-theme-toggle .theme-icon-moon {
  display: block;
}

.shared-header-menu-toggle .menu-icon {
  display: flex;
  width: 20px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
}

.shared-header-menu-toggle .menu-icon-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 220ms ease, opacity 180ms ease;
}

.shared-header-menu-toggle.is-open .menu-icon-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.shared-header-menu-toggle.is-open .menu-icon-line:nth-child(2) {
  opacity: 0;
}

.shared-header-menu-toggle.is-open .menu-icon-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.shared-header-app-store {
  display: inline-flex;
  align-items: center;
}

.shared-header-app-store img {
  width: 128px;
  height: auto;
}

.shared-header-mobile {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  z-index: 10;
  display: none;
  grid-template-columns: 1fr;
  gap: 4px;
  width: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line, rgba(23, 42, 86, 0.12));
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-solid, #fff);
  box-shadow: 0 24px 60px rgba(18, 38, 74, 0.16);
}

.shared-header-mobile.hidden {
  display: none !important;
}

.shared-header-mobile:not(.hidden),
.shared-header-mobile.is-open {
  display: grid;
}

.shared-header-mobile a {
  padding: 13px 16px;
  border-radius: 14px;
  color: var(--ink, #10172f);
  font-size: 1rem;
  font-weight: 700;
}

.shared-header-mobile a:hover {
  background: var(--blue-soft, #dfe9ff);
}

.shared-site-footer {
  --shared-footer-link-blue: #1768ff;
  position: relative;
  z-index: 10;
  padding: 0;
  color: rgb(100 116 139);
  font-family: "Manrope", "SF Pro Display", "SF Pro Text", sans-serif;
}

.shared-footer-container {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding: 32px 0;
}

.shared-footer-container .footer-top,
.shared-footer-container .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.shared-footer-container .footer-top {
  padding: 0;
  line-height: 1.5;
}

.shared-footer-container .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.shared-footer-container .brand-lockup-wordmark {
  line-height: 0;
}

.shared-footer-container .brand-wordmark-image {
  display: block;
  width: 6.4rem;
  height: 2.05rem;
  object-fit: contain;
}

.shared-footer-container .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.shared-footer-container .footer-links a {
  color: rgb(100 116 139);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

.shared-footer-container .footer-email {
  margin-left: 0;
  color: var(--shared-footer-link-blue);
  font-size: 0.875rem;
  font-weight: 800;
}

.shared-footer-container .footer-bottom {
  justify-content: center;
  padding: 2rem 0 0;
  color: rgba(100, 116, 139, 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.shared-footer-container .footer-copyright {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: center;
}

footer.shared-site-footer .shared-footer-container .footer-bottom {
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
}

footer.shared-site-footer .shared-footer-container .footer-copyright {
  text-align: center;
}

[data-theme="dark"] .shared-header-nav a,
[data-theme="dark"] .shared-footer-container .footer-links a {
  color: rgba(221, 232, 249, 0.72);
}

[data-theme="dark"] .shared-header-theme-toggle,
[data-theme="dark"] .shared-header-menu-toggle {
  border-color: rgba(162, 195, 239, 0.2);
  background: rgba(20, 39, 69, 0.78);
  color: rgba(237, 244, 255, 0.88);
}

[data-theme="dark"] .shared-header-mobile {
  border-color: rgba(162, 195, 239, 0.16);
  background: #102039;
}

[data-theme="dark"] .shared-header-mobile a {
  color: #edf4ff;
}

[data-theme="dark"] .shared-site-footer {
  --shared-footer-link-blue: #6d9cff;
  color: rgb(159 176 202);
}

[data-theme="dark"] .shared-footer-container {
  border-top-color: rgba(162, 195, 239, 0.16);
}

@media (max-width: 1040px) {
  .shared-header-nav {
    display: none;
  }

  .shared-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .shared-header-actions {
    grid-column: 2;
  }

  .shared-header-menu-toggle {
    display: inline-grid;
  }
}

@media (max-width: 767px) {
  .shared-header-container,
  .shared-footer-container {
    width: min(calc(100% - 28px), 73.75rem);
  }

  .shared-header-inner {
    min-height: 60px;
    padding: 8px 9px 8px 17px;
  }

  .shared-header-brand .brand-wordmark-image {
    width: 112px;
  }

  .shared-header-inner .shared-header-app-store {
    display: none;
  }

  .shared-footer-container .footer-top {
    align-items: flex-start;
    flex-direction: column;
  }

  footer.shared-site-footer .shared-footer-container .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  footer.shared-site-footer .shared-footer-container .footer-copyright {
    text-align: center;
  }
}