/* ═══════════════════════════════════════════
   SCOPED STYLES — .sjh-portal wrapper v6
   No ID selectors. Native CSS nesting.
   ═══════════════════════════════════════════ */
.sjh-portal {
  --sjh-red: #C8102E;
  --sjh-card-bg: #EBF5FA;
  --sjh-card-border: #d0e8f0;
  --sjh-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --sjh-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --sjh-border: #dddedd;

  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--main-padding, 2.5%) !important;
  font-family: var(--font-1, 'Open Sans', sans-serif);
  font-size: 16px;
  line-height: var(--line-height, 2);
  color: var(--text-color, #3b3b3b);

  & *, & *::before, & *::after {
    box-sizing: border-box;
  }

  /* Override global svg { fill: currentColor; height: 1em; width: 1em; } */
  & svg {
    fill: none;
    width: auto;
    height: auto;
  }

  /* ── ROW LABELS — all caps, bold, navy ── */
  & .sjh-row-label {
    font-size: 1.125rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--click1-color, #12435F);
    font-family: var(--font-1, 'Open Sans', sans-serif);
    margin-bottom: 12px;
    margin-top: var(--spacing-huge, 3rem);
    line-height: 1.5;
  }

  /* ── TOP NAV ── */
  & .sjh-topnav {
    margin-bottom: var(--spacing-variable, 1.67rem);
  }

  /* ── CARD ROWS — all 3-column ── */
  & .sjh-card-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── INDIVIDUAL CARD ── */
  & .sjh-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    background: var(--sjh-card-bg);
    border: 1px solid var(--sjh-card-border);
    border-radius: var(--radial-border, 5px);
    color: var(--click1-color, #12435F) !important;
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background var(--transit-1, .4s ease 0s), border-color var(--transit-1, .4s ease 0s), box-shadow var(--transit-1, .4s ease 0s);
    min-height: 64px;

    &:hover, &:focus {
      background: var(--white-color, #FFFFFF);
      border-color: var(--primary-color, #1e92ae);
      box-shadow: var(--sjh-shadow-sm);
      color: var(--click1-color, #12435F) !important;
      text-decoration: none !important;
    }

    &:hover .sjh-card-chevron {
      color: var(--primary-color, #1e92ae);
      transform: translateX(2px);
    }
  }

  & .sjh-card-icon {
    flex-shrink: 0;
    line-height: 0;
    width: 24px;
    height: 24px;

    & svg {
      display: block;
    }
  }

  & .sjh-card-label {
    flex: 1;
  }

  & .sjh-card-chevron {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--tertiary-color, #536F76);
    font-weight: 300;
    transition: color var(--transit-1, .4s ease 0s), transform var(--transit-1, .4s ease 0s);
  }

  /* ── NOTICE BANNERS (shared base) ── */
  & .sjh-notice {
    border-radius: var(--radial-border, 5px);
    padding: 14px 20px;
    margin-bottom: var(--spacing-variable, 1.67rem);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-color, #3b3b3b);
  }

  & .sjh-notice-icon {
    flex-shrink: 0;
    line-height: 0;
  }

  /* Emergency (red outline only, no fill) */
  & .sjh-notice--red {
    background: transparent;
    border: 1px solid var(--sjh-red);
    margin-bottom: var(--spacing-huge, 3rem);
    line-height: 1.7;

    & a, & a:visited, & a:active {
      color: #C8102E !important;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 2px;

      &:hover {
        color: #a00d24 !important;
      }
    }
  }

  /* Login help (white bg, solid 1px border) */
  & .sjh-notice--login {
    background: var(--white-color, #FFFFFF);
    border: 1px solid var(--sjh-border);

    & .sjh-login-phone {
      display: inline;
      white-space: nowrap;

      & a {
        white-space: nowrap !important;
      }
    }

    & a, & a:visited, & a:active {
      color: var(--primary-color, #1e92ae) !important;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 2px;

      &:hover {
        color: var(--click1-color, #12435F) !important;
      }
    }
  }

  /* HealtheLife app pill buttons */
  & .sjh-app-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, #1e92ae) !important;
    text-decoration: none !important;
    background: rgba(30, 146, 174, 0.1);
    border: 1px solid rgba(30, 146, 174, 0.3);
    border-radius: 9999px;
    cursor: pointer;
    transition: background var(--transit-1, .4s ease 0s);

    &:hover, &:focus {
      background: rgba(30, 146, 174, 0.2);
      color: var(--primary-color, #1e92ae) !important;
      text-decoration: none !important;
    }
  }

  /* More spacing above first content section */
  & .sjh-notice--red + .sjh-section {
    margin-top: calc(var(--spacing-huge, 3rem) + 0.5rem);
  }

  /* ── SECTION CARDS (Grey boxes) — equalized padding ── */
  & .sjh-section {
    background: var(--off-color, #f1f2f1);
    border: 1px solid var(--sjh-border);
    border-radius: var(--radial-border, 5px);
    padding: 50px 70px 50px 50px;
    margin-bottom: var(--spacing-variable, 1.67rem);
    scroll-margin-top: var(--spacing-variable, 1.67rem);

    & h2 {
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--click1-color, #12435F);
      margin-bottom: var(--spacing-variable, 1.67rem);
      font-family: var(--font-2, 'Open Sans', sans-serif);
    }

    & h3 {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--secondary-color, #48484a);
      margin-bottom: 14px;
    }

    & p {
      color: var(--text-color, #3b3b3b);
      margin-bottom: 14px;
      line-height: 1.7;
      font-size: 0.97rem;
    }

    & p:last-child {
      margin-bottom: 0;
    }
  }

  /* ── TEXT LINKS ── */
  & a.sjh-text-link {
    color: var(--primary-color, #1e92ae) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    &:hover {
      color: var(--click1-color, #12435F) !important;
      text-decoration-thickness: 2px;
    }
  }

  /* ── BULLET LISTS — hanging indent, force bullets ── */
  & .sjh-list {
    margin: 10px 0 14px 0;
    padding: 0 0 0 24px;
    font-size: 0.97rem;
    color: var(--text-color, #3b3b3b);
    line-height: 1.7;
    list-style: disc outside !important;

    & li {
      margin-bottom: 8px;
      padding-left: 4px;
      display: list-item !important;
      list-style-type: disc !important;
    }
  }

  /* ── BUTTONS: Primary (teal) + Secondary (teal outline) ── */
  & .sjh-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  & a.sjh-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-color, #1e92ae);
    color: var(--white-color, #FFFFFF) !important;
    border: none;
    border-radius: var(--radial-border, 5px);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--transit-1, .4s ease 0s), box-shadow var(--transit-1, .4s ease 0s);

    &:hover, &:focus {
      background: var(--click1-color, #12435F);
      box-shadow: var(--sjh-shadow-md);
      color: var(--white-color, #FFFFFF) !important;
      text-decoration: none !important;
    }
  }

  & a.sjh-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--white-color, #FFFFFF);
    color: var(--primary-color, #1e92ae) !important;
    border: 1.5px solid var(--primary-color, #1e92ae);
    border-radius: var(--radial-border, 5px);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color var(--transit-1, .4s ease 0s), background var(--transit-1, .4s ease 0s), color var(--transit-1, .4s ease 0s);

    &:hover, &:focus {
      border-color: var(--click1-color, #12435F);
      color: var(--click1-color, #12435F) !important;
      background: var(--off-color, #f1f2f1);
      text-decoration: none !important;
    }
  }

  /* ── FAQ ACCORDION ── */
  & .sjh-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  & .sjh-faq-item {
    border: 1px solid var(--sjh-border);
    border-radius: var(--radial-border, 5px);
    overflow: hidden;
    background: var(--white-color, #FFFFFF);

    & summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      font-size: 0.97rem;
      font-weight: 600;
      color: var(--secondary-color, #48484a);
      cursor: pointer;
      list-style: none;
      transition: background var(--transit-1, .4s ease 0s);
      gap: 12px;

      &::-webkit-details-marker {
        display: none;
      }

      &::after {
        content: "＋";
        font-size: 1.1rem;
        color: var(--tertiary-color, #536F76);
        flex-shrink: 0;
      }

      &:hover {
        background: var(--off-color, #f1f2f1);
      }
    }

    &[open] summary::after {
      content: "−";
    }
  }

  & .sjh-faq-answer {
    padding: 0 20px 16px;
    font-size: 0.95rem;
    color: var(--text-color, #3b3b3b);
    line-height: 1.7;

    & a {
      color: var(--primary-color, #1e92ae) !important;
      font-weight: 500;
    }
  }

  /* ── BACK TO TOP ── */
  & .sjh-back-top {
    text-align: center;
    margin-top: var(--spacing-huge, 3rem);

    & a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.9rem;
      color: var(--tertiary-color, #536F76) !important;
      text-decoration: none !important;
      font-weight: 500;
      transition: color var(--transit-1, .4s ease 0s);

      &:hover {
        color: var(--primary-color, #1e92ae) !important;
      }
    }
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    padding-left: 20px !important;
    padding-right: 20px !important;

    & .sjh-login-phone {
      display: block !important;
      white-space: nowrap !important;
    }

    & .sjh-card-row {
      grid-template-columns: repeat(2, 1fr);
    }

    & .sjh-section {
      padding: 30px 24px;
    }

    & .sjh-btn-group {
      flex-direction: column;
    }

    & a.sjh-btn-primary,
    & a.sjh-btn-secondary {
      justify-content: center;
      text-align: center;
    }
  }

  @media (max-width: 480px) {
    padding-left: 16px !important;
    padding-right: 16px !important;

    & .sjh-card-row {
      grid-template-columns: 1fr;
    }

    & .sjh-card {
      min-height: auto;
    }

    & .sjh-section {
      padding: 24px 18px;
    }
  }
}