/* The site's new styling (same look as the PPC quote pages and colors as
   ppc-landing.css). Applied by adding .modern to a page's <main>; info.php does it for
   coverage pages. */
main.modern { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 1.05rem; line-height: 1.65; }
main.info.modern { padding: 24px 0 64px; }
main.modern article :is(h1, h2, h3, h5) { font-family: inherit; color: #111; }
main.modern article h1 { font-size: 2.75rem; font-weight: 800; line-height: 1.15; margin: 8px 0 28px; }
main.modern article h2 { font-size: 1.7rem; font-weight: 800; line-height: 1.2; margin: 56px 0 18px; padding-top: 0; }
main.modern article h3 { font-size: 1.2rem; font-weight: 700; margin: 28px 0 8px; }
main.modern article p { margin: 0 0 16px; }
main.modern article a { color: #111; text-decoration: underline; }
main.modern article a:hover { color: #d96a0c; }

/* "I'll answer your insurance questions" box */
main.modern .call-to-action { background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); border-radius: 14px; padding: 28px 28px 32px; margin: 0 0 32px; }
main.modern .call-to-action h2 { font-size: 1.5rem; margin: 0 0 18px; }
main.modern .call-to-action a.btn { border: 0; border-radius: 8px; font-weight: 700; font-size: 1.05rem; padding: 13px 24px; margin-right: 10px; text-decoration: none; color: #fff; }
main.modern .call-to-action a.btn.ask { background: #111; }
main.modern .call-to-action a.btn.freequote { background: #f07d1a; }
main.modern .call-to-action a.btn.freequote:hover, main.modern .call-to-action a.btn.freequote:focus { background: #d96a0c; color: #fff; }
main.modern .call-to-action a.btn.ask:hover, main.modern .call-to-action a.btn.ask:focus { background: #333; color: #fff; }

/* Question list: numbered black dots */
main.modern :is(ol.question, .call-to-action + ol, ol[class~="20years"]) { list-style: none; counter-reset: q; margin: 0 0 24px; padding: 0; }
main.modern :is(ol.question, .call-to-action + ol, ol[class~="20years"]) li { counter-increment: q; position: relative; padding: 0 0 0 40px; margin: 0 0 14px; }
main.modern :is(ol.question, .call-to-action + ol, ol[class~="20years"]) li::before { content: counter(q); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: #111; color: #fff; font-size: .85rem; font-weight: 700; line-height: 26px; text-align: center; }

main.modern .wp-block-image:not(.card-img-top) img { border-radius: 12px; }
main.modern .wp-block-image .alignright { margin: 0 0 20px 32px; }

/* Ask-a-question form */
main.modern .contact { background: #f3f3f3; border-radius: 14px; padding: 28px; margin: 56px 0 0; }
main.modern .contact h2 { font-size: 1.7rem; text-align: center; margin: 0 0 18px; }
/* elements.css sets a pill radius, font size and padding on every .wpforms-submit with !important; match the other orange buttons (8px, 13px 24px). */
main.modern .contact div.wpforms-container-full .wpforms-form .wpforms-submit { background: #f07d1a !important; border: 0 !important; color: #fff !important; font-weight: 700; font-size: 1.05rem !important; padding: 13px 24px !important; height: auto !important; line-height: 1.5 !important; border-radius: 8px !important; cursor: pointer; }
main.modern .contact div.wpforms-container-full .wpforms-form .wpforms-submit:hover { background: #d96a0c !important; }

/* Cards and accents */
main.modern :is(ol.question, .call-to-action + ol, ol[class~="20years"]) { background: #f3f3f3; border-radius: 14px; padding: 24px 24px 10px; }
main.modern article h2 { border-left: 5px solid #f07d1a; padding-left: 14px; }
main.modern .call-to-action h2 { border: 0; padding: 0; }

@media (max-width: 900px) {
  main.modern article h1 { font-size: 2rem; }
  main.modern article h2 { font-size: 1.45rem; margin-top: 40px; }
  main.modern .call-to-action a.btn { display: block; margin: 0 0 10px; text-align: center; }
}

/* Cards (Commercial and Personal pages) */
main.modern .wp-block-group.card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); }
main.modern .wp-block-group.card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
main.modern .card .card-body { padding: 14px 26px 30px; }
main.modern .wp-block-columns { gap: 40px; margin-bottom: 40px; }
main.modern .card .card-title { font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin: 0 0 10px; }
main.modern .card li { margin-bottom: 6px; }
main.modern .card .card-text { margin-bottom: 14px; }
main.modern .card .wp-block-button__link { background: #f07d1a; border-radius: 8px; font-weight: 700; padding: 12px 24px; text-decoration: none; }
main.modern .card .wp-block-button__link:hover { background: #d96a0c; }

/* Commercial and Personal page intro */
main.modern .entry-content > h1 { margin-top: 8px; }
main.modern .entry-content > p { font-size: 1.2rem; max-width: 46em; margin: 0 0 28px; }

main.modern .card .wp-block-button.is-style-outline .wp-block-button__link { background: #fff; border: 2px solid #111; color: #111 !important; padding: 10px 22px; }
main.modern .card .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #111; color: #fff !important; }
main.modern .card figure.card-img-top { border-radius: 14px 14px 0 0; }

/* Blog: the /answers/ listing (index.php) and single posts (single.php) */
main.modern.blog-index, main.modern.blog { padding: 24px 0 64px; }
main.modern.blog-index h1 { font-family: inherit; font-size: 2.75rem; font-weight: 800; line-height: 1.15; color: #111; margin: 8px 0 18px; }
main.modern.blog-index .col-12 > p { font-size: 1.2rem; max-width: 46em; margin: 0 0 32px; }
main.modern.blog-index p a, main.modern.blog aside a { color: #111; }
main.modern.blog-index article { padding-bottom: 28px; }
main.modern.blog-index article > a { display: block; height: 100%; color: #444; text-decoration: none !important; }
main.modern.blog-index article .item { background: #fff; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); transition: all .3s ease; margin: 0; }
main.modern.blog-index article > a:hover .item { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
main.modern.blog-index article .item picture.thumbnail { height: auto; display: block; }
main.modern.blog-index article .item img { display: block; width: 100%; height: 200px; object-fit: cover; }
main.modern.blog-index article .item > div:last-child { padding: 18px 22px 24px; font-size: .95rem; line-height: 1.55; }
main.modern.blog-index article h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: #111; margin: 0 0 10px; padding: 0; border: 0; }
main.modern.blog-index article > a:hover h2 { text-decoration: underline; }
main.modern .pagination > * { background: #f3f3f3; border: 0; border-radius: 8px; color: #111; font-size: .85rem; letter-spacing: 0; text-transform: none; padding: 8px 14px; }
main.modern .pagination a { text-decoration: none !important; }
main.modern .pagination a:hover { background: #f07d1a; color: #fff; }
main.modern .pagination .current { background: #111; color: #fff; }

main.modern.blog header { margin-bottom: 28px; line-height: 1.4; }
main.modern.blog header p { margin: 0; }
main.modern.blog .videoWrapper { border-radius: 14px; overflow: hidden; margin-bottom: 28px; }
main.modern.blog .tags { border: 0; padding: 0; margin: 32px 0; }
main.modern.blog .tags a { background: #f3f3f3; border-radius: 999px; color: #111; padding: 3px 12px 4px; text-decoration: none !important; }
main.modern.blog .tags a:hover { background: #f07d1a; color: #fff; }
main.modern.blog .navigation .previous a, main.modern.blog .navigation .next a { background: #f3f3f3; border-radius: 14px; padding-top: 16px; padding-bottom: 16px; text-decoration: none !important; }
main.modern.blog .navigation .previous a { padding-left: 48px; }
main.modern.blog .navigation .next a { padding-right: 48px; }
main.modern.blog .navigation a:before { color: #f07d1a; top: 14px; }
main.modern.blog .navigation a:hover { background: #ececec; }
main.modern.blog .bio { border: 0; background: #f3f3f3; border-radius: 14px; padding: 24px; }
main.modern.blog aside section { border: 0; border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); }
main.modern.blog aside section.search input { border-radius: 8px; }
main.modern.blog aside .tags a { border-radius: 999px; }

@media (max-width: 900px) {
  main.modern.blog-index h1 { font-size: 2rem; }
}

/* Home page: the hero buttons and the Honesty / Education / Simplicity tiles follow the
   same font and button radius (elements.css sets Verdana on every h2 and a pill radius). */
main.modern.home .hero .btn { border-radius: 8px; }
main.modern.home .under-hero :is(h2, p) { font-family: inherit; }
main.modern.home .card .wp-block-button__link { text-decoration: none !important; }
main.modern.home .card .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #32373c; }
main.modern.home .card .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #111; }
