/* ==========================================================================
   COLORADOHEALTH.COM — QUOTE RESULTS
   ==========================================================================

   This styles the page the Visual Basic program prints. There is NO
   JavaScript anywhere — the filter buttons are radio buttons, and the rules
   in section 5 do the filtering.

   Colours are in section 1. Change one there and it updates everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEEP THE SCROLLBAR'S SPACE RESERVED
   Filtering down to a handful of plans makes the page short enough that the
   browser drops its scrollbar. The window then gets about 15px wider and
   everything centred - the logo, the page, the filter rail - slides sideways.
   Reserving the space permanently means the width never changes.
   -------------------------------------------------------------------------- */
html { scrollbar-gutter: stable; }


/* --------------------------------------------------------------------------
   1. COLOURS
   -------------------------------------------------------------------------- */
:root {
  --navy:      #003f67;
  --navy-dark: #002e50;
  --green:     #24652d;
  --ink:       #061f3b;
  --body:      #33475c;
  --quiet:     #6a7f93;
  --link:      #00527f;
  --line:      #d8e3ed;
  --tint:      #eef7fc;
  --page:      #f4f7fa;

  /* How tall the blue bar is. The menu underneath has to start exactly
     where the bar ends, so the two read the same number. */
  --bar-h: 52px;
}


/* --------------------------------------------------------------------------
   2. BASICS
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: var(--link); }
/* some pages print a whole web address as the link text - a long unbroken
   string that would otherwise push a phone screen sideways */
.ch-page a { overflow-wrap: anywhere; }

.ch-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px clamp(12px, 3vw, 28px) 60px;
}
/* The older blocks below the plan cards - the summary tables, the
   unfiltered-quote buttons, the footer. They sit INSIDE ch-page, in the
   same column as the plans, so they inherit its width and padding and need
   none of their own. They used to be printed after ch-page closed, which
   put them at the full width of the window - underneath the filter rail,
   lined up with nothing - and it also meant the rail came unpinned at the
   last plan, because a pinned block only holds within its own container. */

.qh-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
}
.qh-sub,
.qh-note,
.qh-tail {
  margin: 5px 0 18px;
  color: var(--quiet);
  font-size: 14px;
  text-align: center;
}


/* --------------------------------------------------------------------------
   3. THE BAR AT THE TOP
   -------------------------------------------------------------------------- */
.ch-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  /* an explicit height, so the menu below knows where to start. The
     picture is at most 44px and the button 42px, both of which fit. */
  height: var(--bar-h);
  padding: 4px clamp(12px, 3vw, 32px);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: 0 2px 10px rgba(0, 20, 40, .25);
}
.ch-bar-spacer { flex: 0 0 46px; }
.ch-logo { flex: 1 1 auto; min-width: 0; text-align: center; }
/* display:block, not inline-block: an inline picture carries a five pixel
   gap underneath it for the tails of letters that are not there, which made
   the bar 57px tall on a computer and 52px on a phone. */
.ch-logo img { display: block; margin: 0 auto; width: auto; height: clamp(34px, 10vw, 44px); }

.ch-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 9px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}
.ch-bars, .ch-bars::before, .ch-bars::after {
  display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px;
}
.ch-bars { position: relative; }
.ch-bars::before, .ch-bars::after { content: ""; position: absolute; left: 0; }
.ch-bars::before { top: -6px; }
.ch-bars::after { top: 6px; }

/* text only a screen reader needs */
.ch-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* --------------------------------------------------------------------------
   3b. THE MENU BEHIND THE HAMBURGER
   Closed until the hidden checkbox in the header is ticked. The hamburger
   is a <label> pointing at that box, so no JavaScript is involved.
   It opens in place and pushes the page down, which needs no cleverness
   and cannot end up stuck open behind something.
   -------------------------------------------------------------------------- */
.ch-menu { display: none; }

/* IT HAS TO OPEN WHERE YOU ARE, NOT WHERE THE PAGE STARTS.
   The bar is sticky and follows you down the page; the menu used to sit
   in the document just under it, near the top. Opening it from halfway
   down a page unfolded it a thousand pixels above the screen and nothing
   appeared to happen.

   Fixed to the window instead, starting where the bar ends, it drops out
   of the bar wherever the bar is. It also scrolls on its own if it is
   taller than what is left of the screen. */
#ch-menu-open:checked ~ .ch-menu {
  display: block;
  position: fixed;
  top: var(--bar-h);
  left: 0;
  right: 0;
  z-index: 99;
  max-height: calc(100vh - var(--bar-h));
  overflow-y: auto;
}

.ch-menu {
  padding: 14px clamp(12px, 3vw, 28px) 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(0, 20, 40, .1);
}

.ch-menu-head {
  margin: 14px 0 7px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ch-menu-head:first-child { margin-top: 0; }

.ch-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px 14px;
}
.ch-menu-grid a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--page);
  color: var(--link);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ch-menu-grid a:hover { border-color: var(--navy); background: var(--tint); }

.ch-quote-links a {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}
.ch-quote-links a:hover { border-color: var(--navy-dark); background: var(--navy-dark); }

.ch-menu-call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

:focus-visible { outline: 3px solid #ffb100; outline-offset: 2px; }
#ch-menu-open:focus-visible ~ .ch-bar .ch-toggle { outline: 3px solid #ffb100; outline-offset: 2px; }


/* --------------------------------------------------------------------------
   3c. THE OLDER BLOCKS THAT STILL PRINT BELOW EVERYTHING
   The summary of what was entered, the Health Sharing Ministry note, and
   the working figures. All still useful, all still plain <table> markup
   from the original program.

   Nothing in the new design uses a table, so every table on these pages is
   one of these - which makes them safe to style in one go, with no change
   to the Visual Basic that prints them.
   -------------------------------------------------------------------------- */
.ch-tail { margin-top: 26px; }

.ch-page table,
.ch-tail table {
  width: auto;
  max-width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  overflow: hidden;
}
/* ON A NARROW SCREEN THE OLD TABLES FILL THE COLUMN.
   They are "width: auto", which lets them size to their content - fine on
   a computer, where they sit neatly in the middle. On a phone the content
   is wider than the screen, so the table came out slightly too wide AND
   slightly off centre, and hung 2px over the edge. Filling the column
   exactly removes both. */
@media (max-width: 700px) {
  .ch-page table, .ch-tail table { width: 100%; max-width: 100%; }
}

.ch-page table td,
.ch-tail table td {
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

/* ---- turning off the 1990s formatting ----------------------------------
   These blocks are not plain markup. They carry the formatting in the HTML
   itself - border="1", bgcolor="...", <font color=...>, and <b> round
   absolutely everything. Styling the table alone changed almost nothing,
   because all of that was still in force underneath.

   None of it needs !important. Attributes like bgcolor and border are only
   "presentation hints" and lose to any real stylesheet rule. */

/* border="1" draws a box round every single cell, not just the table */
.ch-page table[border] td, .ch-page table[border] th,
.ch-tail table[border] td, .ch-tail table[border] th { border-width: 0; }
.ch-page table[border] tr + tr td,
.ch-tail table[border] tr + tr td { border-top-width: 1px; }

/* Cell fills from the old palette - a bright blue heading row with white
   text, and the green that used to mark an input. Kept as headings rather
   than flattened, because that colour was carrying the structure, but in
   this palette instead of pure blue. */
.ch-page [bgcolor], .ch-tail [bgcolor] {
  background-color: var(--tint);
  color: var(--ink);
}
.ch-page [bgcolor] b, .ch-tail [bgcolor] b { font-weight: 700; }

/* <font color=red size=+1> and friends */
.ch-page font, .ch-tail font { color: inherit; font-size: inherit; }

/* Everything is wrapped in <b>, so nothing stood out. The label is the
   first cell and the answer is the last, so only the answer stays bold. */
.ch-page table b, .ch-tail table b { font-weight: 400; }
.ch-page table td:last-child b,
.ch-tail table td:last-child b { font-weight: 700; color: var(--ink); }

/* align="center" on a cell of NUMBERS reads worse than left, so it is
   overruled. But the same attribute is also used to centre a button or a
   picture that spans the whole row - on the Details and Apply page the
   Apply button sat 452 pixels left of where it belonged because of this.
   A cell holding a control is being positioned, not tidied, so its
   centring is left alone. */
.ch-page table td[align], .ch-tail table td[align] { text-align: left; }
.ch-page table td[align]:has(form, button, input, img, .oldbtn, .oldbtn-go),
.ch-tail table td[align]:has(form, button, input, img, .oldbtn, .oldbtn-go) { text-align: center; }
.ch-page table tr:first-child td,
.ch-tail table tr:first-child td { border-top: 0; }

/* the first cell of each row is the caption in nearly all of them */
.ch-page table td:first-child,
.ch-tail table td:first-child { color: var(--quiet); }

.ch-page table b,
.ch-tail table b { color: var(--ink); font-weight: 700; }

/* an old table wider than the phone scrolls inside its own box rather
   than making the whole page slide sideways */
.ch-tail { overflow-x: auto; }

/* The notices between those tables are bare <h2> tags, so they came out at
   24px - bigger than the page heading, which is what made this stretch look
   unfinished. They are ordinary sentences, so they are set like sentences. */
/* Any depth, not just direct children. The Health Sharing Ministry block
   keeps its headings inside table cells, so a "> h2" rule never reached
   them and they stayed at 24px. */
.ch-tail h1, .ch-tail h2, .ch-tail h3,
.ch-page > center h1, .ch-page > center h2, .ch-page > center h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.ch-tail h3 { font-size: 14px; font-weight: 600; color: var(--body); }
.ch-tail center { font-size: 14px; }
.ch-tail a { color: var(--link); }

/* These were <input type="image"> - a .gif with the whole button drawn
   into it, cyan and orange pills left over from the old site. No amount of
   CSS can restyle a picture, so the Visual Basic now prints a real button
   with the same words, and it gets the same treatment as every other
   button on the site. Any that get missed are capped in size below. */
.oldbtn {
  text-decoration: none;            /* it dresses links as well as buttons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 4px 4px 0;
  padding: 0 18px;
  border: 1px solid var(--navy);
  border-radius: 9px;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.oldbtn:hover { background: var(--navy); color: #fff; }

/* the thick blue bars were a picture of a line */
.oldrule {
  margin: 22px auto;
  border: 0;
  border-top: 1px solid var(--line);
}

.ch-tail input[type="image"],
.ch-page input[type="image"] { max-height: 38px; width: auto; vertical-align: middle; }

/* Several <center> blocks are printed with nothing in them - spacers from
   the old layout. Each was drawing an empty 23px band. Same test as the
   notice above: :empty is no use because they contain whitespace. */
.ch-tail > center:not(:has(h1, h2, h3, p, a, li, b, table, img)) { display: none; }


/* --------------------------------------------------------------------------
   3g. THE STATIC PAGES
   About Us, FAQ, the help pages and the rest of the menu share this
   stylesheet with the quote pages, so they match without any code of
   their own. Two extras they need:
   -------------------------------------------------------------------------- */

/* text pages read better narrower than the quote pages */
.ch-narrow { max-width: 880px; }

/* the address card - the team photo and the lines around it sit centred.
   Images are inline, so centring the text centres them too. */
.card-center { text-align: center; }


/* A run of link-buttons laid out in columns instead of a single stack.
   One column on a phone; then as many as fit, each at least 240px, so a
   wide card gets three or four across and the space is used. The buttons
   stretch to equal width so the rows line up. */
/* A row of buttons that wraps and stays centred. It was a grid before, but
   a grid cannot centre a short last row - one lone button sat in the left
   cell with an empty slot beside it. A wrapping flex row centres every
   row, full or not, and each button is as wide as its own words. */
.btn-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 0;
}
.btn-grid .oldbtn { margin: 0; min-width: 200px; }

/* .grid from the form stylesheet gives two columns on a computer. This
   variant gives three, for rows of short cards - carriers, brokers. Inside
   a grid the gap does the spacing, so the cards drop their own margin. */
@media (min-width: 900px) {
  .grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid > .card { margin: 0; }

/* In a narrow three-across card there is no room for a photo or logo to sit
   beside the text - the heading wraps round it in ragged pieces. Inside a
   grid the picture takes its own line above the text instead. */
.grid .mugshot { float: none; display: block; margin: 0 0 10px; }

/* A floated photo ignores text-align, so in a centred card it would stay
   pinned left while everything else moved. Un-float and centre it.
   This rule sits AFTER the .grid one above on purpose: they tie on
   specificity, so whichever is written later wins, and this one must. */
.card-center .mugshot { float: none; display: block; margin: 0 auto 10px; }
.card-center .card-logo { margin: 0 auto 8px; }

/* A form laid out as a .grid puts its boxes in grid cells, and grid cells
   do not centre from text-align. In a centred card, centre the cells. */
.card-center .grid { justify-items: center; }
/* ...and a LONE question spans the whole grid rather than sitting in the
   left half of a two-column one, which put it 200px off centre. Only when
   it is the only field - a proper form (Contact Us) keeps its two columns
   and its left-aligned boxes; only its heading and intro are centred. */
.card-center .field:only-child { grid-column: 1 / -1; width: 100%; max-width: 420px; }
.card-center .grid:has(.field + .field) { justify-items: stretch; text-align: left; }
.card-center .qf-go { justify-content: center; }

/* On the static pages a plain <h2> is a section heading between cards
   ("Delta Dental has five different options:") and a paragraph holding
   only a logo is a section badge. Both sit centred, like the page title. */
.ch-page > h2 { text-align: center; margin: 22px 0 12px; }
.ch-page > p.logo-line { text-align: center; margin: 4px 0 6px; }
/* a button standing on its own between sections, likewise */
.ch-page > p.btn-line { text-align: center; margin: 14px 0; }

/* a carrier logo in a card heading - How to Pay, the doctor directories */
.card-logo { display: block; max-height: 44px; width: auto; margin: 0 auto 8px; }
/* two logos on one line (Elevate + Peak) sit side by side, centred as a pair */
.logo-line .card-logo { display: inline-block; vertical-align: middle; margin: 0 8px 8px; }

/* Bulleted lists inside a centred card: the bullets themselves stay left,
   otherwise centred bullets zig-zag and are hard to read. */
.card-center ul, .card-center ol { display: inline-block; text-align: left; margin: 8px auto; }

/* a small photo beside a paragraph, as in the staff introductions */
.mugshot { float: left; margin: 2px 14px 8px 0; border-radius: 8px; }
.mugshot-card { display: flow-root; }    /* keeps the card wrapped round the float */




/* --------------------------------------------------------------------------
   SHARED WITH EVERY PAGE ON THE SITE
   These read as results-page styling but every page needs them: the
   hamburger menu is a hidden checkbox and uses .f-radio, and the static
   pages end with .qh-tail lines.

   THEY MUST STAY AT THE END OF THIS FILE. They override rules further
   up, and an override of the same strength only wins if it comes last.
   -------------------------------------------------------------------------- */
.f-radio { position: fixed; opacity: 0; pointer-events: none; }
.qh-tail { margin: 2px 0 10px; }
form.qh-tail { margin: 0 0 16px; }


/* --------------------------------------------------------------------------
   THE WORKING-OUT AT THE FOOT OF THE QUOTES PAGE
   Two bordered tables of twenty-six rows - how the tax credit was reached,
   and what the customer told us. Same white sections as the plans above.
   Every figure is still there; only the shape and the labels changed.
   -------------------------------------------------------------------------- */
.qw {
  /* 820, not the page's full 1180. A label on the far left and its figure
     a thousand pixels away on the right is the thing one-per-line was
     meant to fix; holding the block to a readable column finishes it. */
  max-width: 820px;
  margin: 0 auto 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.qw h2 {
  margin: 0;
  padding: 9px 16px;
  background: var(--tint);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* ONE PER LINE, NOT TWO.
   Two across looked tidy in a narrow card and wrong across a full page:
   the label sat on the far left and its figure a thousand pixels away on
   the right, with nothing between them to carry the eye across.

   One per line keeps the two together. The value is held to a column of
   its own so the figures line up under each other down the page. */
.qw-list { display: block; margin: 0; }
.qw-list > div {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
}
.qw-list dt { flex: 1 1 auto; color: var(--body); font-size: 13.5px; line-height: 1.4; }
.qw-list dd {
  flex: 0 0 auto;
  min-width: 160px;
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  /* on a phone a long label and its figure will not share a line */
  .qw-list > div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 14px; }
  .qw-list dd { min-width: 0; text-align: left; }
}

/* "Not given - prices are shown in full" is a sentence, not a figure, so it
   is allowed to take the room it needs instead of being squeezed into the
   value column. */
.qw-list .qw-wide dd { min-width: 0; font-weight: 600; text-align: right; }


/* ===== Find a Doctor - three columns on a wide screen ==================
   The page is a directory: seven carriers, fifteen networks, one button per
   network. Stacked, that is nearly 4,000px of scrolling. Side by side it is
   about 2,900.

   Markup this expects, per carrier:

     <div class="card card-center dir">
       <div class="dir-brand"> logo, and how to use that carrier
       <hr class="oldrule">
       <div class="dir-nets">
         <div class="dir-net"> description  +  <p class="dir-go"> button

   To make the button rail wider or narrower, change 260px in BOTH places.
   ====================================================================== */

/* the CO-DocFinder brandmark above the search box - Tom's artwork */
.dir-brandmark { text-align: center; margin: 0 0 18px; }

/* The City box is the third field on a two-column form, so it would sit
   alone at the bottom left. It takes the whole row and sits centred, at
   the same width as the two boxes above it. On a phone the form is one
   column anyway and this does nothing. */
@media (min-width: 620px) {
  .qf .dir-city { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); }
}
.dir-brandmark img { max-width: 100%; height: auto; }

/* --- these two are for the PHONE ---------------------------------------
   Each network used to be one paragraph with a <br> before its button. It
   is two paragraphs now, so that the button can move into its own column on
   a wide screen. Left alone, that second paragraph adds a browser-default
   margin fifteen times over and the phone page grows by ~250px. These trim
   it back. The wide-screen block below overrides both with 0. */
.dir-net p { margin: 8px 0; }
.dir-net ol { margin: 8px 0; }
.dir-go { margin: 4px 0 0; }

@media (min-width: 761px) {

  /* the carrier's logo column, then everything else.
     250px, not 210 - at 210 the how-to text wrapped to seven ragged lines
     and made every card as tall as its instructions. */
  .dir { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
  .dir-brand { text-align: center; }

  /* Carriers with one network (Cigna, Kaiser, SelectHealth, Elevate) have a
     short right column and a tall left one, which left the right side of the
     card looking empty. Centring just the networks against the brand closes
     that gap. The logo stays at the top, where it tells you whose card this
     is as you scroll into it. */
  .dir-nets { align-self: center; }

  /* once the two sit side by side, the rule between them is just noise */
  .dir .oldrule { display: none; }

  /* one network: what it is on the left, the button in the right rail */
  .dir-net {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 16px;
    align-items: center;
    text-align: left;                 /* .card-center centres it otherwise */
    padding: 12px 0;
    border-top: 1px solid #e3e8ef;
  }
  .dir-net:first-child { border-top: 0; padding-top: 0; }
  .dir-net p { margin: 0; }

  /* the Healthgrades card holds a numbered list rather than a sentence */
  .dir-net ol { display: block; text-align: left; margin: 0; padding-left: 20px; }

  /* every button the same width, so the rail reads as a column */
  .dir-go { text-align: center; margin: 0; }
  .dir-go .oldbtn { width: 100%; margin: 0; }
}
/* ===== end Find a Doctor ============================================== */