/* Wapan Health: site nav ("Grouped menus", design option 1b) + footer.
   Self-contained so it works on both figma.css and wapan.css pages. Tokens: wapan-colors.css. */
.snav, .sfoot { font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
.snav *, .sfoot * { box-sizing: border-box; }
.snav { position: relative; z-index: 60; width: 100%; }
.snav a, .sfoot a { text-decoration: none; }

/* logo */
.slogo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.slogo svg { display: block; }
.slogo__word { font-family: Lora, Georgia, serif; font-size: 23px; font-weight: 500; color: #F4F1EA; line-height: 1; }
.slogo__tag { font-size: 10px; font-weight: 700; letter-spacing: .22em; color: #F2A23A; margin-top: 4px; }

/* desktop bar */
.snav__bar { background: #1F3B63; border-bottom: 1px solid #152A47; }
.snav__inner { max-width: 1264px; margin: 0 auto; padding: 0 32px; height: 76px; display: flex; align-items: center; gap: 40px; }
.snav__links { display: flex; align-items: stretch; gap: 8px; flex: 1; height: 76px; }
.snav__item { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; background: transparent; font: 600 15px 'Public Sans', system-ui, sans-serif; color: #F4F1EA; cursor: pointer; }
.snav__item:hover, .snav__item:focus-visible { color: #F2A23A; }
.snav__chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.snav__item[aria-expanded="true"] .snav__chev { transform: rotate(225deg) translate(-2px, 0); }
.snav__item.is-active::after, .snav__item[aria-expanded="true"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: #F2A23A; }
.snav__help { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #F4F1EA; white-space: nowrap; }
.snav__help:hover { color: #F2A23A; }
.snav__help::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #F2A23A; }
.snav__cta { display: flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; background: #CC4A22; color: #FFFFFF; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s ease; }
.snav__cta:hover { background: #B33E1B; color: #FFFFFF; }

/* mega panels */
.snav__panel { position: absolute; left: 0; right: 0; top: 100%; background: #FAF8F4; border-bottom: 1px solid #E2DDD4; box-shadow: 0 28px 48px -28px rgba(21, 42, 71, .35); }
.snav__panel[hidden] { display: none; }
.snav__grid { max-width: 1264px; margin: 0 auto; padding: 32px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.snav__lede { display: flex; flex-direction: column; gap: 14px; padding-right: 32px; border-right: 1px solid #E2DDD4; }
.snav__lede-title { font-family: Lora, Georgia, serif; font-size: 27px; line-height: 1.2; color: #1F3B63; text-wrap: balance; }
.snav__lede-big { font-family: Lora, Georgia, serif; font-size: 52px; line-height: 1; color: #1F3B63; }
.snav__lede p { margin: 0; font-size: 14px; line-height: 1.6; color: #586273; }
.snav__lede a { font-size: 14px; font-weight: 600; color: #CC4A22; }
.snav__lede a:hover { color: #B33E1B; }
.snav__group { display: flex; flex-direction: column; gap: 2px; }
.snav__group-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #586273; padding: 0 12px 8px; }
.snav__link { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 8px; }
.snav__link:hover, .snav__link:focus-visible { background: #F1EBE2; }
.snav__link strong { font-size: 15px; font-weight: 600; color: #1F3B63; }
.snav__link span { font-size: 13px; line-height: 1.45; color: #586273; }

/* mobile bar + menu (shared by all variants in the design) */
.snav__mbar { display: none; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; background: #1F3B63; border-bottom: 1px solid #152A47; }
.snav__mbar .slogo__word { font-size: 21px; }
.snav__mright { display: flex; align-items: center; gap: 8px; }
.snav__mhelp { font-size: 13px; font-weight: 600; color: #F2A23A; padding: 10px; }
.snav__mbtn { height: 44px; padding: 0 16px; border: 1.5px solid #F4F1EA; border-radius: 999px; background: transparent; color: #F4F1EA; font: 600 14px 'Public Sans', system-ui, sans-serif; cursor: pointer; }
.snav__mpanel { position: absolute; left: 0; right: 0; top: 100%; background: #FAF8F4; border-bottom: 1px solid #E2DDD4; box-shadow: 0 24px 48px -24px rgba(21, 42, 71, .3); padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 20px; max-height: calc(100vh - 64px); overflow-y: auto; }
.snav__mpanel[hidden] { display: none; }
.snav__mgroup { display: flex; flex-direction: column; }
.snav__mtitle { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #586273; padding: 14px 0 6px; }
.snav__mlink { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid #E2DDD4; font-size: 16px; font-weight: 600; color: #1F3B63; }
.snav__mcta { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: #CC4A22; color: #FFFFFF; font-size: 15px; font-weight: 600; }
.snav__mcta:hover { background: #B33E1B; color: #FFFFFF; }

@media (max-width: 939px) {
  .snav__bar, .snav__panel { display: none !important; }
  .snav__mbar { display: flex; }
}
@media (min-width: 940px) {
  .snav__mpanel { display: none !important; }
}

/* footer */
.sfoot { background: #152A47; color: #F4F1EA; }
.sfoot__top { max-width: 1264px; margin: 0 auto; padding: 72px 32px 40px; display: flex; flex-wrap: wrap; gap: 56px; justify-content: space-between; }
.sfoot__brand { flex: 1 1 300px; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.sfoot__brand p { margin: 0; font-size: 14px; line-height: 1.6; color: #C9D2E0; }
.sfoot__cols { display: flex; flex-wrap: wrap; gap: 64px; }
.sfoot__col { display: flex; flex-direction: column; gap: 10px; }
.sfoot__title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F2A23A; margin: 0 0 4px; }
.sfoot__col a { font-size: 14px; color: #C9D2E0; }
.sfoot__col a:hover { color: #FFFFFF; }
.sfoot__bottom { max-width: 1264px; margin: 0 auto; padding: 20px 32px 28px; border-top: 1px solid rgba(244, 241, 234, .16); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: #C9D2E0; }
.sfoot__bottom a { color: #FFFFFF; font-weight: 600; }
@media (max-width: 699px) {
  .sfoot__top { padding: 56px 20px 32px; gap: 40px; }
  .sfoot__cols { gap: 36px 48px; }
  .sfoot__bottom { padding: 20px 20px 28px; }
}

/* Find care panel: four columns (lede + Get matched + Coverage + Browse by) */
.snav__grid--4 { grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1180px) { .snav__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .snav__grid--4 .snav__lede { display: none; } }
/* Footer: five link columns */
.sfoot__cols { gap: 40px 56px; }
@media (max-width: 1180px) { .sfoot__brand { max-width: none; flex-basis: 100%; } }