/* Additions on top of the old theme stylesheets. Colours and fonts are the
   old theme's own: text #45484D, orange #FFA300, blue #2F55D4, navy #2F4375,
   Noto Sans SC for headings and prices, Source Sans Pro for body text. */

:root {
  --sc-ink: #45484d;
  --sc-muted: #6b7280;
  --sc-line: #dfe5ec;
  --sc-orange: #ffa300;
  --sc-blue: #2f55d4;
  --sc-navy: #2f4375;
  --sc-soft: #f2f6f7;
}

/* Cookie notice: hidden until site.js decides to show it. */
#cookie-policy.sc-show { display: block; }

/* Provider logo strip: one row that site.js moves along. */
.providers-row-container { overflow: hidden; }
.providers-row.sc-rotate { flex-wrap: nowrap !important; justify-content: flex-start !important; will-change: transform; }
.providers-row.sc-rotate .provider { flex: 0 0 20%; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.providers-row.sc-rotate .provider img { max-height: 40px; max-width: 140px; width: auto; }
@media (max-width: 991px) { .providers-row.sc-rotate .provider { flex-basis: 33.333%; } }
@media (max-width: 575px) { .providers-row.sc-rotate .provider { flex-basis: 50%; } }

/* Provider cards, stacked, one provider per row. */
.sc-card[hidden] { display: none !important; }
.sc-cards-section { padding-top: 48px; padding-bottom: 48px; }
.sc-cards-title { margin-bottom: 28px; }
.sc-cards { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; margin: 0 auto; }
.sc-card {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.1fr; align-items: center;
  background: #fff; border: 1px solid var(--sc-line); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(47, 67, 117, .08); padding: 22px 24px; color: var(--sc-ink);
}
.sc-card > div { padding: 0 18px; }
.sc-card > div + div { border-left: 1px solid var(--sc-line); }
.sc-brand { display: flex; flex-direction: column; gap: 8px; }
.sc-brand .sc-logo { max-height: 42px; max-width: 150px; width: auto; }
.sc-logo-text { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 22px; color: var(--sc-navy); line-height: 1.1; }
.sc-type { font-size: 14px; color: var(--sc-muted); }
.sc-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc-col .plans-starting { font-size: 14px; color: var(--sc-muted); }
.sc-col .plan-price { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 40px; line-height: 1.1; color: var(--sc-ink); }
.sc-col .plan-price sup { font-size: 15px; top: -1.25em; font-weight: 700; }
.sc-terms { font-size: 13px; color: var(--sc-muted); line-height: 1.3; margin-top: 2px; }
.sc-metric { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 36px; line-height: 1.15; color: var(--sc-ink); }
.sc-metric small { font-size: 16px; font-weight: 700; }
.sc-metric-text { font-size: 18px; font-weight: 700; line-height: 1.3; }
.sc-call-rate { font-family: "Noto Sans SC", sans-serif; font-weight: 700; font-size: 20px; color: var(--sc-ink); }
.sc-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.sc-cta .btn { width: 100%; }
.sc-more { font-size: 14px; color: var(--sc-blue); text-decoration: underline; }
.sc-cards-note { max-width: 1080px; margin: 18px auto 0; font-size: 13px; color: var(--sc-muted); }

@media (max-width: 767px) {
  .sc-card { grid-template-columns: 1fr 1fr; row-gap: 16px; padding: 18px; }
  .sc-card > div { padding: 0 8px; }
  .sc-card > div + div { border-left: 0; }
  .sc-brand, .sc-cta { grid-column: 1 / -1; }
  .sc-brand { flex-direction: row; align-items: center; justify-content: space-between; }
  .sc-col .plan-price { font-size: 32px; }
  .sc-metric { font-size: 28px; }
}

/* Click-to-call bar on phones; most search visits are on mobile. */
.sc-mobile-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: block; text-align: center;
  background: var(--sc-orange); color: #fff !important; font-family: "Noto Sans SC", sans-serif; font-weight: 700;
  font-size: 17px; padding: 16px; text-decoration: none !important; box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
}
@media (max-width: 767px) { body { padding-bottom: 58px; } #cookie-policy { bottom: 58px; } }
@media (min-width: 768px) { .sc-mobile-call { display: none; } }

/* Customer service pages: the provider hero illustrations sit to the right. */

/* Blog "What to read next": the old slider, as a plain row of three. */
.related-posts-wrap { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related-posts-wrap > * { width: auto !important; min-width: 0; }
.related-posts-control { display: none !important; }
@media (max-width: 991px) { .related-posts-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .related-posts-wrap { grid-template-columns: 1fr; } }

/* Cards placed inside an old section, under its own heading. */
.sc-cards-inline { margin: 24px 0 8px; }
.providers-table .sc-logo-text { font-size: 16px; }
.providers-table td img { max-height: 32px; width: auto; }

/* Footnote under cards and tables: small print, not body text. */
.sc-cards-note, .section .sc-cards-note { font-size: 13px !important; line-height: 1.45; color: #6b7280 !important; text-align: center; max-width: 1080px; margin: 16px auto 0 !important; }
/* Inline cards line up with the section's own heading. */
.sc-cards-inline .sc-cards { max-width: none; }
/* Logo strip: never show a sliver of the next logo past the edge. */
.providers-row-container .container-fluid { overflow: hidden; }
/* Bootstrap's screen-reader-only text (the decimal point in prices). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Do-not-sell request form at the old width. */
.sc-sortable th { cursor: pointer; }

/* City pages: "Why X residents love it" lines up across the three columns,
   as the old site's matchHeight script did. */
.city-page .contenders-wrapper .contender { display: flex; flex-direction: column; }
.city-page .contenders-wrapper .contender .header { flex: 1 0 auto; display: flex; flex-direction: column; }
.city-page .contenders-wrapper .contender .sub-title.equal-height { flex: 1 0 auto; }
/* Related posts: the old slider's spacing. */
.related-posts-wrap { gap: 30px; }