/* Site-specific styles. This file loads after the theme, so anything here wins. */

/* ---------------------------------------------------------- price boxes -- */
/*
 * The three boxes hold different amounts of copy: only Daycare carries a
 * second-dog note, and only Boarding for two has a fifth line in its list.
 * Left alone that made one box 27px taller than the other two and pushed its
 * button below theirs. The theme's answer was min-height: 300px on the feature
 * list, which levelled the heights by padding every list with empty grey.
 *
 * Here the row is a flex container instead, so the boxes take their height
 * from the tallest, the note keeps its line whether or not there is a note to
 * put in it, and the lists stretch to meet the buttons. Every row lines up
 * across all three and the buttons sit together.
 */

#pricing .section-content > .row {
  display: flex;
  flex-wrap: wrap;
}

#pricing .section-content > .row > [class*="col-"] {
  display: flex;
}

#pricing .pricing-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Flex stops adjacent margins collapsing, which would otherwise open up the
   gaps inside each box. These hold the original spacing. The !important is to
   outrank the theme's m-10 utility, which carries one of its own. */
#pricing .pricing-table .price {
  margin-top: 0 !important;
}

/* The note's line, reserved in all three boxes so the lists start level. */
#pricing .pricing-table .package-note {
  margin: 0;
  min-height: 30px;
}

#pricing .pricing-table .product-features {
  flex: 1 0 auto;
  margin-top: 0;
  margin-bottom: 0;
}