/* Retention microsite — cross-year plan comparison table.
   The page chrome (navy masthead, KP footer, intro polish) comes from the shared
   kp-modern theme (css/kp-modern.css), registered by layout-2027.php. This file
   holds only the comparison-table styles, loaded after the 2027 Vite bundle. */

/* No bottom margin: the wrap also holds the Additional Information section, so
   its last edge is the page's, and the footer brings its own spacing. */
.retention-compare-wrap {
    margin: 0 auto;
}

.retention-unavailable {
    padding: 30px;
    background: #f5f7f9;
    border-radius: 6px;
    text-align: center;
}

/* Comparison grid: label column + current + new */
.retention-compare {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(140px, 1fr);
    border: 1px solid #d9e1e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* new-plan-only purls (content_properties retention.new_plan_only): the current-year column is
   not rendered, so the grid is label + new plan only and the plan column widens
   to fill the freed space. A new-plan-only purl whose CMS id covers two plans
   (the Full / Partial Cost Sharing Assistance D-SNP pairs) keeps the three-column
   grid and puts the pair in it. */
.retention-compare.rc-new-only {
    grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 2fr);
}

.retention-compare .rc-row {
    display: contents;
}

/* shared cell baseline */
.retention-compare .rc-label,
.retention-compare .rc-cell,
.retention-compare .rc-category-label,
.retention-compare .rc-subheading-label {
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f4;
    font-size: 15px;
    line-height: 1.4;
}

/* row striping via the label column reference is hard in subgrid; tint cells instead */
.retention-compare .rc-benefit .rc-label {
    font-weight: 600;
    color: #2b3a42;
    background: #fafbfc;
}

.retention-compare .rc-cell {
    background: #fff;
}

/* ---- header (plan name + premium) ---- */
.rc-head .rc-label,
.rc-head .rc-cell {
    background: #003b71;
    color: #fff;
    border-bottom: none;
    padding: 18px 16px;
    vertical-align: top;
}

.rc-head .rc-year {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.rc-head .rc-benefits-year {
    display: block;
    font-size: 13px;
    letter-spacing: .08em;
    opacity: .85;
}

.rc-head h2 {
    margin: 4px 0 0;
    font-size: 20px;
    color: #fff;
}

.rc-head .rc-plan h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #fff;
}

.rc-plan-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(255, 255, 255, .18);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.rc-plan-tag-new {
    background: #ffd200;
    color: #003b71;
    font-weight: 700;
}

.rc-price {
    margin: 6px 0 0;
    font-size: 14px;
}

.rc-price span {
    font-size: 22px;
    font-weight: 700;
}

/* keep the premium "Changed" badge at badge size, not price size */
.rc-price .rc-badge {
    font-size: 11px;
}

/* current plan column gets a subtle separator */
.retention-compare .rc-current {
    border-left: 1px solid #eef2f4;
}

.retention-compare .rc-new {
    border-left: 1px solid #eef2f4;
}

/* ---- column header ("Description" / "You Pay") ---- */
.retention-compare .rc-columnheader .rc-label,
.retention-compare .rc-columnheader .rc-cell {
    background: #eaf1f6;
    color: #003b71;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid #d9e1e6;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Footnote markers must stay small and raised against the uppercase caption. */
.retention-compare .rc-columnheader sup {
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
}

/* ---- category + sub headings ---- */
.rc-category-label {
    grid-column: 1 / -1;
    background: #eaf1f6 !important;
    border-bottom: 1px solid #d9e1e6;
}

.rc-category-label h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #003b71;
}

/* A subheading opens a group of benefits, so it reads as a break: space above
   to close off the rows before it, a navy rule and tinted band, and a bold
   label. Scoped under .retention-compare to override the shared cell baseline. */
.retention-compare .rc-subheading-label {
    grid-column: 1 / -1;
    margin-top: 18px;
    padding: 10px 16px;
    background: #e3eef7;
    border-top: 1px solid #003b71;
    border-bottom: 1px solid #c5d8e8;
    text-align: center;
}

.rc-subheading-label h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #003b71;
}

.rc-subheading-label p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #5a6b74;
}

/* the sheet's descriptive line under a benefit label */
.rc-label-note {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: #5a6b74;
}

/* the words of a changed value that differ from last year's */
.retention-compare mark.rc-diff {
    padding: 0 2px;
    background: #ffe08a;
    color: inherit;
    border-radius: 2px;
}

/* ---- changed-row highlighting ---- */
.retention-compare .rc-benefit.changed .rc-new {
    background: #fff8e1;
    box-shadow: inset 3px 0 0 #f5a623;
}

.retention-compare .rc-benefit.changed .rc-label {
    background: #fff4d6;
}

.rc-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rc-sublist li {
    padding: 2px 0;
}

.rc-sublist li.changed {
    font-weight: 600;
}

.rc-sublabel {
    display: inline-block;
    min-width: 90px;
    color: #5a6b74;
    font-size: 13px;
}

.rc-empty {
    color: #9aa7ae;
}

/* ---- badges + legend ---- */
.rc-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f5a623;
    color: #3a2a00;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.rc-badge-changed {
    background: #ffd200;
    color: #003b71;
}

.rc-legend {
    margin: 14px 2px 0;
    font-size: 13px;
    color: #5a6b74;
}

.rc-enroll {
    margin-top: 24px;
}

/* ---- mobile: stack the two plan columns ---- */
@media (max-width: 720px) {
    .retention-compare {
        display: block;
    }
    .retention-compare .rc-row {
        display: block;
    }
    .rc-head .rc-label {
        display: none;
    }
    .retention-compare .rc-columnheader {
        display: none;
    }
    .retention-compare .rc-benefit {
        border-bottom: 1px solid #eef2f4;
        padding: 8px 0;
    }
    .retention-compare .rc-benefit .rc-label {
        background: transparent;
        font-size: 14px;
        padding-bottom: 2px;
        border: none;
    }
    .rc-category-label h3 {
        font-size: 17px;
    }
    .retention-compare .rc-cell {
        border: none;
        padding: 2px 16px;
    }
    /* Each stacked value is prefixed with its column's name, which the view
       supplies: "New" / "Current" for the year-over-year table, the variant
       name for a side-by-side pair. A single column has nothing to contrast
       with and carries no label. */
    .retention-compare .rc-cell[data-col-label]::before {
        content: attr(data-col-label) ": ";
        font-weight: 600;
    }
    .retention-compare .rc-cell.rc-current::before {
        color: #5a6b74;
    }
    .retention-compare .rc-cell.rc-new::before {
        color: #003b71;
    }
}

/* ---- section banners (Additional Information) ---- */
/* The shared plans.css paints .top-bar h2 #006ca6; on this page it should match
   the dark blue used everywhere else. Same specificity, wins on load order. */
#plans-container .top-bar h2 {
    background-color: #003b71;
}

/* style.css sets every contact-box link to normal weight; the toll-free number
   keeps the bold its copy wraps it in. */
#content .agent .contact-data ul li a.phone {
    font-weight: 700;
}