/* Shared top-bar contract + mobile behavior.
 * Canonical geometry and collapse motion mirror the homepage.
 * Page-specific themes may change colors through variables, but must not replace
 * the header geometry or transition shorthand. */
:root {
  --top-bar-bg-duration: 0.22s;
  --top-bar-bg-easing: ease;
}

.top-bar__pill {
  border-radius: var(--radius, 8px) !important;
  transition:
    width 0.28s ease,
    max-width 0.28s ease,
    padding 0.22s ease,
    box-shadow 0.22s ease,
    background-color var(--top-bar-bg-duration) var(--top-bar-bg-easing),
    border-color 0.22s ease,
    --blob-x 0.3s ease-out,
    --blob-y 0.3s ease-out !important;
}

.top-bar__brand {
  transition:
    font-size 0.22s ease,
    gap 0.22s ease,
    color 0.22s ease,
    background-color 0.22s ease,
    text-shadow 0.22s ease !important;
}

.top-bar__mark {
  transition: width 0.22s ease, height 0.22s ease !important;
}

.top-bar__links a {
  transition:
    padding 0.22s ease,
    font-size 0.22s ease,
    color 0.22s ease,
    background-color 0.22s ease,
    text-shadow 0.22s ease !important;
}

/* Homepage compact contract: the outer bar stays full-width and the inner pill
 * becomes the content-width surface. This is intentionally different from the
 * old mortgage behavior that shrank the outer bar itself. */
.top-bar.is-compact {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 24px !important;
  align-self: stretch !important;
}

.top-bar.is-compact .top-bar__pill {
  width: var(--site-content-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* Mortgage carousel cards use the same 8px corner language as Experience cards. */
.split-card,
.split-card::before {
  border-radius: 8px !important;
}

/* Experience preload/fallback base matches the loop's cool blue-gray field so
 * the video handoff does not flash from a warm page color first. */
.experience-page.ivan-surface,
.experience-bg,
.experience-bg__video {
  background-color: #e6edf7 !important;
}

/* Home desktop uses the approved hierarchy ambient background.
 * Mortgage keeps its own base color and gets only a soft lavender glow layer.
 */
@media (min-width: 900px) {
  body:has(.frame-section) {
    background-color: #f7f8f5;
    background-image:
      radial-gradient(ellipse 62% 86% at 10% 10%, rgba(72, 120, 95, 0.18) 0%, rgba(72, 120, 95, 0.07) 42%, transparent 70%),
      radial-gradient(ellipse 50% 62% at 33% 18%, rgba(196, 178, 152, 0.10) 0%, transparent 60%),
      radial-gradient(ellipse 56% 70% at 88% 14%, rgba(120, 140, 220, 0.09) 0%, transparent 62%),
      radial-gradient(ellipse 68% 82% at 20% 82%, rgba(88, 145, 118, 0.10) 0%, transparent 66%),
      radial-gradient(ellipse 55% 66% at 78% 82%, rgba(160, 180, 255, 0.07) 0%, transparent 64%),
      linear-gradient(165deg, #fafbf8 0%, #eef2ed 42%, #f7f8f5 72%, #e4e9e3 100%);
    background-attachment: fixed;
  }

  body:has(.frame-section)::before {
    background:
      radial-gradient(circle at 18% 28%, rgba(72, 120, 95, 0.15) 0%, transparent 40%),
      radial-gradient(circle at 36% 62%, rgba(196, 178, 152, 0.07) 0%, transparent 35%),
      radial-gradient(circle at 80% 20%, rgba(130, 150, 230, 0.09) 0%, transparent 40%),
      radial-gradient(circle at 58% 82%, rgba(88, 145, 118, 0.08) 0%, transparent 40%);
  }

  body:has(.page)::before {
    background:
      radial-gradient(circle at 18% 28%, rgba(154, 136, 218, 0.20) 0%, transparent 41%),
      radial-gradient(circle at 82% 20%, rgba(128, 145, 225, 0.17) 0%, transparent 40%),
      radial-gradient(circle at 42% 58%, rgba(245, 241, 232, 0.18) 0%, transparent 36%),
      radial-gradient(circle at 58% 82%, rgba(177, 161, 221, 0.14) 0%, transparent 40%);
  }
}

.top-bar__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #343A40);
  cursor: pointer;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.top-bar__menu-toggle:hover {
  color: var(--ink, #343A40);
}

.top-bar__menu-icon,
.top-bar__menu-icon::before,
.top-bar__menu-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.top-bar__menu-icon {
  position: relative;
}

.top-bar__menu-icon::before,
.top-bar__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.top-bar__menu-icon::before { top: -7px; }
.top-bar__menu-icon::after { top: 7px; }

.top-bar.is-menu-open .top-bar__menu-icon {
  background: transparent;
}

.top-bar.is-menu-open .top-bar__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.top-bar.is-menu-open .top-bar__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .top-bar.is-compact {
    padding-inline: 12px !important;
  }

  .top-bar.is-compact .top-bar__pill {
    width: 100% !important;
  }

  .top-bar__pill {
    flex-wrap: wrap;
    align-items: center;
    border-radius: var(--radius, 8px) !important;
  }

  .top-bar__brand {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px !important;
    gap: 0.5rem !important;
  }

  .top-bar__brand span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-bar.is-compact .top-bar__brand {
    font-size: 17px !important;
  }

  .top-bar__mark {
    width: 32px !important;
    height: 32px !important;
  }

  .top-bar.is-compact .top-bar__mark {
    width: 28px !important;
    height: 28px !important;
  }

  .top-bar__menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: 2px;
  }

  .top-bar__links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(52, 58, 64, 0.1);
  }

  .top-bar.is-menu-open .top-bar__links {
    display: flex;
  }

  .top-bar__links li {
    width: 100%;
  }

  .top-bar__links a {
    width: 100%;
    padding: 12px 14px !important;
    font-size: 1rem !important;
    text-align: left;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-bar__pill,
  .top-bar__brand,
  .top-bar__mark,
  .top-bar__links a,
  .top-bar__menu-icon,
  .top-bar__menu-icon::before,
  .top-bar__menu-icon::after {
    transition: none !important;
  }
}

/* Texas phase surfaces: the centered shell follows the page transition, while
 * the header fill stays on the existing rounded pill instead of its square wrapper. */
body.texas-guide {
  --top-bar-bg-duration: .6s;
  --top-bar-bg-easing: cubic-bezier(.2,.72,.2,1);
}

body.texas-guide .page-shell {
  background-color: #081028 !important;
  transition: background-color .6s cubic-bezier(.2,.72,.2,1);
}

body.texas-guide.is-light-phase .page-shell {
  background-color: #eceeea !important;
}

body.texas-guide .top-bar,
body.texas-guide .top-bar.is-compact {
  background: transparent !important;
}

body.texas-guide .top-bar__pill,
body.texas-guide .top-bar.is-compact .top-bar__pill {
  background-color: #081028 !important;
}

body.texas-guide.is-light-phase .top-bar__pill,
body.texas-guide.is-light-phase .top-bar.is-compact .top-bar__pill {
  background-color: #eceeea !important;
}

/* Texas marquee: keep the dark strip opaque edge-to-edge. The inline mask fades
 * the entire container to transparency, which exposes the light section as white side bars. */
body.texas-guide .program-marquee {
  position: relative;
  background: #081028 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* The Apply wrapper belongs to the hero phase, not the marquee. Keep it navy at
 * the top, then let it follow the page into the light phase so it never becomes
 * a standalone navy slab while scrolling. */
body.texas-guide .hero-apply {
  background: #081028 !important;
  transition: background-color .6s cubic-bezier(.2,.72,.2,1);
}

body.texas-guide.is-light-phase .hero-apply {
  background: #eceeea !important;
}