/* Round 12: final pass (insurance). Loaded after the r7 files. */

/* ==========================================================================
   Insurance and financing (page-templates/template-insurance.php)
   Round 12 content migration: each plan list keeps its specialty's own
   introduction and note from eliteod.com, Medicaid and Tricare plans carry a
   label, the lists are always shown in full (on a phone too), the printable
   list is a real button, the HSA and FSA "Important tip" is a callout, and
   the questions column carries the old page's "call us, visit us" block.
   Everything here is scoped to the insurance page; the home summary only
   changed words, not styles.
   ========================================================================== */

/* ---- Participating plans ------------------------------------------------ */
.page-template-template-insurance .plan-card__intro {
  align-self: stretch; max-width: 62ch; margin: 0;
  color: var(--body); font-size: 0.97rem; line-height: 1.6; text-wrap: pretty;
}

/* Medicaid and Tricare lines, found at a glance. */
.page-template-template-insurance .plans-list__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; }
.page-template-template-insurance .plans-list__badge {
  display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0.1rem 0.5rem;
  border-radius: 999px; background: var(--ortho-tint); color: var(--ortho);
  font-family: var(--text, inherit); font-size: 0.68rem; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
}

/* The note under each list: the orthodontic one in the orthodontic tint. */
.page-template-template-insurance .plan-card--ortho .plan-card__note { background: var(--ortho-tint); }
.page-template-template-insurance .plan-card--ortho .plan-card__note svg { color: var(--ortho); }
.page-template-template-insurance .plan-card__note a {
  color: var(--ortho); font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.page-template-template-insurance .plan-card__note a:hover { color: var(--ortho-dark); }

/* The list and its note sit at the top of their column, however tall the
   heading column beside them is. */
.page-template-template-insurance .plan-card__panel { align-content: start; }

/* Wide desktop: heading, introduction and booking on the left, the list (two
   columns, so each plan line reads whole) and its note beside them. */
@media (min-width: 80rem) {
  .page-template-template-insurance .plan-card .card__body { grid-template-rows: auto auto 1fr; }
  .page-template-template-insurance .plan-card__intro { grid-column: 1; grid-row: 2; }
  .page-template-template-insurance .plan-card__acts { grid-row: 3; }
  .page-template-template-insurance .plan-card__panel { grid-row: 1 / span 3; }
  .page-template-template-insurance .plans-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* Under the lists: the date and the note on the left, the printable list and
   the call on the right. */
.page-template-template-insurance .plan-meta { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; padding: 1.25rem 1.5rem; }
.page-template-template-insurance .plan-meta__facts { gap: 0.4rem; }
.page-template-template-insurance .plan-meta__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.page-template-template-insurance .plan-meta__acts .btn { gap: 0.55rem; min-height: 48px; white-space: nowrap; }
.page-template-template-insurance .plan-meta__acts .btn svg { flex-shrink: 0; color: currentColor; }

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .page-template-template-insurance .plan-meta { grid-template-columns: minmax(0, 1fr); }
  .page-template-template-insurance .plan-meta__acts { justify-content: flex-start; }
}

/* ---- HSA and FSA --------------------------------------------------------- */
.page-template-template-insurance .hsa-card__intro { align-self: stretch; margin: -0.35rem 0 0; color: var(--body); font-size: 0.97rem; line-height: 1.6; text-wrap: pretty; }
.page-template-template-insurance .hsa-tip--key { border-color: var(--ortho-tint-2, var(--ortho-tint)); background: var(--ortho-tint); }
.page-template-template-insurance .hsa-tip--key .disc { background: #fff; color: var(--ortho); }
.page-template-template-insurance .hsa-tip__k {
  margin: 0 0 0.3rem; color: var(--ortho); font-size: 0.72rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase;
}
.page-template-template-insurance .hsa-tip--key h3 { font-size: 1.15rem; }
.page-template-template-insurance .hsa-tip--key p:last-child { color: var(--body-strong, var(--body)); }

@media (min-width: 64rem) {
  /* The list a little wider than the notes; the tip at the top of the notes,
     the two notes under it, each an icon row, so the column ends level with
     the list. */
  .page-template-template-insurance .hsa-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-template-template-insurance .hsa-tips { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; grid-template-rows: auto 1fr 1fr; }
  .page-template-template-insurance .hsa-tip { grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; padding: 1.25rem 1.4rem; }
}

/* ---- Questions: the old page's closing "call us, visit us" block --------- */
.page-template-template-insurance .ins-ask h2 + p { margin: 0.75rem 0 0; color: var(--body); font-size: 0.97rem; line-height: 1.55; text-wrap: pretty; }
.page-template-template-insurance .ins-ask__list { display: grid; gap: 0.5rem; margin: 1rem 0 1.1rem; padding: 0; list-style: none; }
.page-template-template-insurance .faqpage__nav .ins-ask__row {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: 0.75rem;
  min-height: 3.25rem; margin: 0; padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid var(--line-soft); border-radius: 0.8rem; background: var(--paper);
  color: var(--ink); font-size: 0.95rem; font-weight: 700; line-height: 1.35;
}
.page-template-template-insurance .faqpage__nav a.ins-ask__row:hover { border-color: var(--ortho-tint-2, var(--line)); background: var(--ortho-tint); color: var(--ortho); }
.page-template-template-insurance .ins-ask__ic {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
  background: var(--ortho-tint); color: var(--ortho);
}
.page-template-template-insurance .ins-ask__row small {
  display: block; margin-bottom: 0.1rem; color: var(--muted, var(--body)); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Tablets: the questions column sits above the questions, so the two contact
   rows share a line and the booking button follows them. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .page-template-template-insurance .faqpage__nav.ins-ask { display: block; }
  .page-template-template-insurance .ins-ask__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .page-template-template-insurance .plan-card__intro { font-size: 0.95rem; }
  .page-template-template-insurance .plans-list { border-top: 1px solid var(--line-soft); }
  .page-template-template-insurance .plan-meta { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
  .page-template-template-insurance .plan-meta__acts { display: grid; justify-content: stretch; }
  .page-template-template-insurance .plan-meta__acts .btn { justify-content: center; width: 100%; }
  .page-template-template-insurance .hsa-tip--key { grid-template-columns: 44px minmax(0, 1fr); }
  .page-template-template-insurance .faqpage__nav .ins-ask__row { border-radius: 0.8rem; padding-inline: 0.5rem 0.75rem; }
}