/* Scoped to .pf-compare throughout — same reason as templates/results.css,
   templates/plan-group.css and questionnaire/plan-finder.css: this page is
   embedded in a WP page alongside the theme's Elementor Kit CSS, which sets
   things like ".elementor-kit-52 h1 { font-size: ...; color: ...; }",
   ".elementor-kit-52 button { background-color: ...; border-radius: 5px; }"
   and a zebra stripe on td. Those are class+tag selectors that outrank a
   single-class selector regardless of load order, so every rule below is
   written as ".pf-compare .whatever" (two classes) to stay ahead of them.
   No :root, no bare element selectors. */

.pf-compare {
  /* Sampled from Compare Plans Page.png. The sky and the mint-pale are the
     same values the plan landing page uses — this comp shares its palette,
     it just leads with the sky where that page leads with navy. */
  --pf-sky: #77c8ff;
  --pf-sky-deep: #4fb0f2;
  --pf-mint-pale: #edfef4;
  --pf-navy: #0a293e;
  --pf-white: #ffffff;
  --pf-rule: #dfe6eb;
  --pf-page-bg: #eaf7ff;

  --pf-radius: 1rem;

  /* The tables' first column, and so the inset of the plan card above them.
     Read by the card's grid AND by the tables' <col>, which is what keeps a
     plan's name over its own values. Change it in one place or not at all. */
  --pf-label-w: 22%;

  box-sizing: border-box;
  background-color: var(--pf-page-bg);
  /* The theme's nav is fixed and semi-transparent, so it floats over whatever
     is beneath it instead of pushing it down like a normal header — the 107px
     is clearance for that, on top of this page's own top padding. */
  padding: calc(107px + 3rem) 1.5rem 5rem;
  font-family: "niveau-grotesk", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--pf-navy);
}

.pf-compare *,
.pf-compare *::before,
.pf-compare *::after {
  box-sizing: inherit;
  font-family: inherit !important;
}

.pf-compare .pf-compare-shell {
  max-width: 1080px;
  margin: 0 auto;
}

/* Visually hidden, still announced. Used for the plan name inside each "View"
   button and for the tables' column headers on the wide layout, where the card
   above is doing that job for anyone who can see it. */
.pf-compare .pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* header */

.pf-compare .pf-compare-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  color: var(--pf-navy);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

/* Underline on the words only — on a flex link the decoration would otherwise
   run under the arrow as a second, detached segment. */
.pf-compare .pf-compare-back__text {
  text-decoration: underline;
}

.pf-compare .pf-compare-back:hover .pf-compare-back__text,
.pf-compare .pf-compare-back:focus-visible .pf-compare-back__text {
  text-decoration: none;
}

.pf-compare .pf-compare-title {
  margin: 0 0 3rem;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--pf-navy);
}

/* plan card
   ---------
   The comp names the plans once, in a white card that sits directly on top of
   the first section's heading bar and starts where the value columns start.
   Its bottom corners are square because the bar covers them. */

.pf-compare .pf-compare-plans {
  display: grid;
  grid-template-columns: var(--pf-label-w) repeat(var(--pf-cols, 3), 1fr);
  border-radius: var(--pf-radius) var(--pf-radius) 0 0;
}

/* Holds the label column's width open so the card lines up with the tables.
   Transparent — the page shows through it in the comp. */
.pf-compare .pf-compare-plans__spacer {
  background: transparent;
}

/* Column, so the View button can be pushed to the bottom — plan_type is free
   text and one plan's runs to three lines, which would otherwise leave that
   column's button sitting well below the other two. */
.pf-compare .pf-compare-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.25rem 2rem;
  border-left: 1px solid var(--pf-rule);
  background: var(--pf-white);
  text-align: center;
}

.pf-compare .pf-compare-plan__head {
  margin-bottom: 1.15rem;
}

/* The first plan cell carries the card's rounded top-left, the last its
   top-right — the card is the plan cells, there is no wrapper to round. */
.pf-compare .pf-compare-plans__spacer + .pf-compare-plan {
  border-left: 0;
  border-top-left-radius: var(--pf-radius);
}

.pf-compare .pf-compare-plan:last-child {
  border-top-right-radius: var(--pf-radius);
}

.pf-compare .pf-compare-plan__name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pf-navy);
}

.pf-compare .pf-compare-plan__type {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--pf-navy);
}

/* auto, so every column's button lands on the same line no matter how tall the
   name and type above it are. The head's margin-bottom is the minimum gap. */
.pf-compare .pf-compare-plan__view {
  display: inline-block;
  margin-top: auto;
  padding: 0.6rem 2rem;
  border-radius: 999px;
  background: var(--pf-sky);
  color: var(--pf-navy);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.pf-compare .pf-compare-plan__view:hover,
.pf-compare .pf-compare-plan__view:focus-visible {
  background: var(--pf-sky-deep);
  color: var(--pf-navy);
}

.pf-compare .pf-compare-plan__view:focus-visible {
  outline: 3px solid var(--pf-navy);
  outline-offset: 2px;
}

/* sections
   --------
   One rounded block per section: sky heading bar on top, table under it. */

.pf-compare .pf-ctable-section {
  margin: 0 0 1.75rem;
  border-radius: var(--pf-radius);
  overflow: hidden;
}

/* Flush against the plan card, which is what the comp shows — the card's
   square bottom edge meets the bar's square top edge. */
.pf-compare .pf-compare-plans + .pf-ctable-section {
  border-top-left-radius: var(--pf-radius);
  border-top-right-radius: var(--pf-radius);
}

.pf-compare .pf-ctable-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.75rem;
  border: 0;
  border-radius: 0;
  background: var(--pf-sky);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  color: var(--pf-navy);
  cursor: pointer;
}

/* The theme paints button:hover, :focus AND :active dark green. Restating the
   sky for the two that aren't rollovers has to come first — same specificity
   as the rollover rule below, so source order decides. Without it a click
   leaves the bar stuck on the theme's green once the pointer moves away,
   because the button keeps focus. Learned on the plan group page. */
.pf-compare .pf-ctable-toggle:focus,
.pf-compare .pf-ctable-toggle:active {
  background: var(--pf-sky);
  color: var(--pf-navy);
}

.pf-compare .pf-ctable-toggle:hover {
  background: var(--pf-sky-deep);
  color: var(--pf-navy);
}

.pf-compare .pf-ctable-toggle:focus-visible {
  outline: 3px solid var(--pf-navy);
  outline-offset: -3px;
}

.pf-compare .pf-ctable-toggle__icon {
  display: inline-flex;
  flex: none;
  transition: transform 0.2s ease;
}

.pf-compare .pf-ctable-toggle[aria-expanded="true"] .pf-ctable-toggle__icon {
  transform: rotate(180deg);
}

.pf-compare .pf-ctable-panel {
  background: var(--pf-white);
}

/* Deliberately NOT a scroll container here — see the narrow media query, which
   is the only place one is needed.
   Setting overflow-x: auto at this width would cost the section its rounded
   bottom corners: per spec a `visible` on the other axis computes to `auto`
   too, so the div becomes a scroll container, and a scrolling box is painted
   in its own layer that the ancestor's border-radius + overflow: hidden clip
   doesn't reach. The cells then square off the bottom corners. */
.pf-compare .pf-ctable-scroll {
  overflow: visible;
}

/* table */

.pf-compare .pf-ctable {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  /* Fixed, so the <col> widths below hold regardless of how long a cell's copy
     runs — that is what keeps every section lined up with every other section
     and with the plan card. */
  table-layout: fixed;
  font-size: 1rem;
}

.pf-compare .pf-ctable__col--label {
  width: var(--pf-label-w);
}

/* Column headers. The plan card above says all of this on the wide layout, so
   here the row collapses to nothing and only a screen reader gets it — the
   cells keep their scope="col" association either way. Below 900px there is no
   card and this row becomes the visible header; see the media query. */
.pf-compare .pf-ctable thead th {
  padding: 0;
  border: 0;
}

.pf-compare .pf-ctable__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Top, not middle. A row is as tall as its longest cell and the comp starts
   every cell on that row's first line — centring a two-word cell against an
   eight-line one leaves it floating in the middle of nowhere with nothing to
   read it against. */
/* overflow-wrap: the columns are fixed and, at this width, nothing scrolls —
   so an unbroken run of characters (a long URL pasted into a WYSIWYG field)
   has to wrap rather than push its column out of the table. */
/* border: 0 first, then only the edges we want. The theme puts
   "border-bottom: 1px solid rgba(128,128,128,.5)" on every td and th — left
   alone that doubles up with the border-top below into a 2px rule between
   rows, and paints a grey hairline across the bottom of the last row, just
   inside the section's rounded corner. */
.pf-compare .pf-ctable tbody th,
.pf-compare .pf-ctable tbody td {
  padding: 1.35rem 1.35rem;
  border: 0;
  border-top: 1px solid var(--pf-rule);
  vertical-align: top;
  line-height: 1.45;
  overflow-wrap: break-word;
  color: var(--pf-navy);
}

.pf-compare .pf-ctable tbody tr:first-child th,
.pf-compare .pf-ctable tbody tr:first-child td {
  border-top: 0;
}

/* The label column is a tinted band running the full height of the table. */
.pf-compare .pf-ctable tbody th[scope="row"] {
  background: var(--pf-mint-pale);
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

/* Explicit white, because the theme zebra-stripes td at rgba(128,128,128,.07)
   and the comp's value cells are all one colour. */
.pf-compare .pf-ctable tbody td {
  border-left: 1px solid var(--pf-rule);
  background: var(--pf-white);
  text-align: center;
}

/* Value cells keep the editor's markup (see the renderer), and a WYSIWYG field
   wraps every line in its own <p>. The comp's cells read as one block — the
   spacing between "No Plan Deductible" and "$257 Part B Deductible" is the same
   as between two wrapped lines of the sentence below them — so the paragraph
   gap goes and line-height carries it. Left at the theme's spacing, a six-line
   cell would break into six separate-looking statements. */
.pf-compare .pf-ctable tbody td p {
  margin: 0;
  line-height: 1.45;
}

.pf-compare .pf-ctable__download {
  color: var(--pf-navy);
  font-weight: 600;
  text-decoration: underline;
}

.pf-compare .pf-ctable__download:hover,
.pf-compare .pf-ctable__download:focus-visible {
  text-decoration: none;
}

/* empty + editor notice */

.pf-compare .pf-compare-empty {
  padding: 3rem 2rem;
  border-radius: var(--pf-radius);
  background: var(--pf-white);
  text-align: center;
}

.pf-compare .pf-compare-empty__heading {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--pf-navy);
}

.pf-compare .pf-compare-empty__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pf-navy);
}

.pf-compare .pf-compare-admin-notice {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid #d98c1f;
  border-radius: 0.35rem;
  background: #fff6e6;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4a3403;
}

.pf-compare .pf-compare-admin-notice p {
  margin: 0 0 0.5rem;
}

.pf-compare .pf-compare-admin-notice p:last-child {
  margin-bottom: 0;
}

/* narrow
   ------
   Four columns won't fit, so the tables scroll sideways and carry their own
   plan names — which means the card above them stops being a header and
   becomes a plain stacked list of what's being compared. Scrolling a table
   right can then never take its heading away from it, and there is nothing
   left for the card to stay aligned with. */

@media (max-width: 900px) {
  .pf-compare {
    padding: 2rem 1rem 3.5rem;
  }

  .pf-compare .pf-compare-title {
    margin-bottom: 2rem;
  }

  .pf-compare .pf-compare-plans {
    display: block;
    margin-bottom: 1.75rem;
    border-radius: var(--pf-radius);
    overflow: hidden;
  }

  .pf-compare .pf-compare-plans__spacer {
    display: none;
  }

  /* Row, not column: with the card stacked there's width to spare, so the
     name sits left and its button right rather than under it. */
  .pf-compare .pf-compare-plan {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-left: 0;
    border-top: 1px solid var(--pf-rule);
    text-align: left;
  }

  .pf-compare .pf-compare-plans__spacer + .pf-compare-plan,
  .pf-compare .pf-compare-plan:first-child {
    border-top: 0;
    border-radius: 0;
  }

  .pf-compare .pf-compare-plan:last-child {
    border-radius: 0;
  }

  .pf-compare .pf-compare-plan__head {
    margin-bottom: 0;
  }

  .pf-compare .pf-compare-plan__view {
    flex: none;
    margin-top: 0;
    padding: 0.45rem 1.5rem;
    font-size: 0.95rem;
  }

  .pf-compare .pf-ctable-toggle {
    padding: 1rem 1.25rem;
    font-size: 1.2rem;
  }

  /* Here the table genuinely can't fit, so this does become a scroll
     container — and it has to carry the section's bottom corners itself,
     because the section's rounded clip won't reach into a scrolling box. It's
     the last thing in the section, so its bottom corners are the section's. */
  .pf-compare .pf-ctable-scroll {
    overflow-x: auto;
    border-bottom-right-radius: var(--pf-radius);
    border-bottom-left-radius: var(--pf-radius);
  }

  /* Wide enough that three plans plus their labels stay readable; the
     container scrolls to reach them. */
  .pf-compare .pf-ctable {
    min-width: 40rem;
  }

  /* The row that was collapsed on the wide layout is the header here. */
  .pf-compare .pf-ctable thead th {
    padding: 0.9rem 1rem;
    background: var(--pf-navy);
    color: var(--pf-white);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
  }

  .pf-compare .pf-ctable thead th:first-child {
    text-align: left;
  }

  .pf-compare .pf-ctable__name {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  .pf-compare .pf-ctable tbody th,
  .pf-compare .pf-ctable tbody td {
    padding: 1rem;
    font-size: 0.95rem;
  }
}