/* InsuranceNew layout pass, 2026-10-10.
   Linked from templates/ts_saifway/tpls/blocks/head.php after the other disk styles.
   Article and snippet style blocks load later, so these selectors stay stronger. */

/* 1. Body text uses the full content column. The 72ch cap left a blank band
   beside paragraphs. Leftover floats cannot park a text chunk in a side pocket. */
body #t3-content p,
body #t3-content li,
body .insnew-page p,
body .insn-legal p,
body .insn-legal li {
  max-width: none;
}

body .insn-legal {
  max-width: none;
}

body .insnew-page p {
  text-align: left;
}

body .insnew-section-head {
  max-width: none;
}

body #t3-content .insnew-page,
body #t3-content .article-content {
  clear: both;
}

body #t3-content img {
  float: none;
}

/* An image column only while a picture is actually in it. */
body .insnew-page section.insnew-panel.insnew-panel--split {
  grid-template-columns: minmax(0, 1fr);
}

body .insnew-page section.insnew-panel.insnew-panel--split > .insnew-split__media:not(:has(img[src]:not([src=""]))) {
  display: none;
}

@media (min-width: 901px) {
  body .insnew-page section.insnew-panel.insnew-panel--split:has(> .insnew-split__media img[src]:not([src=""])) {
    grid-template-columns: minmax(0, 1fr) fit-content(320px);
  }
}

/* 2. Inner pages were taller above the H1 than the homepage because the
   breadcrumb carried a 30px offset and 48px link boxes. Keep one compact line. */
body .insn-breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
}

body .insn-breadcrumb ol {
  margin-top: 6px;
  margin-bottom: 0;
}

body .insn-breadcrumb a {
  min-height: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.4;
}

/* Homepage content starts 60px under the menu (40px main body + 20px content).
   A breadcrumb already uses about 31px of that, so inner pages drop the extra
   main-body padding and the title or hero card lines up with the homepage. */
@media (min-width: 992px) {
  body:has(.insn-breadcrumb) .t3-mainbody {
    padding-top: 9px;
  }
}

/* 3a. Single mint ZIP form. Field about 46px, button on the same row. */
body .insn-hero-zip .insn-hero-row input,
body .insn-hero-zip .insn-hero-row .insn-cta,
body .insn-hero-zip .insn-hero-row button {
  height: 46px;
  min-height: 46px;
}

body .insn-hero-zip .insn-hero-row {
  flex-wrap: nowrap;
}

body .insn-hero-zip .insn-hero-row input {
  flex: 1 1 72px;
  height: 46px;
  min-height: 46px;
}

body .insn-hero-zip .insn-hero-row .insn-cta,
body .insn-hero-zip .insn-hero-row button {
  flex: 0 0 auto;
  width: auto;
  line-height: 46px;
}

@media (max-width: 480px) {
  body .insn-hero-zip .insn-hero-row input {
    flex: 1 1 128px;
    min-width: 128px;
  }

  body .insn-hero-zip .insn-hero-row .insn-cta,
  body .insn-hero-zip .insn-hero-row button {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 14px;
  }
}

/* A second copy of that same single form, once the mint box is already
   next to the title. A real Auto + Home pair is left in place. */
body:has(.insn-hero-zip) .insnew-panel--forms:not(:has(.insnew-quote-card + .insnew-quote-card)) .insnew-forms-grid {
  display: none;
}

body:has(.insn-hero-zip) .insnew-page section.insnew-panel:not(.insnew-panel--forms):has(> form.quote-form) {
  display: none;
}

body:has(.insn-hero-zip) h2#quotes:has(+ p + .insn-forms):not(:has(+ p + .insn-forms .insn-formbox ~ .insn-formbox)),
body:has(.insn-hero-zip) h2#quotes:has(+ p + .insn-forms):not(:has(+ p + .insn-forms .insn-formbox ~ .insn-formbox)) + p,
body:has(.insn-hero-zip) .insn-forms:not(:has(.insn-formbox + .insn-formbox)) {
  display: none;
}

/* 3b. Pair: equal cards, side by side from 768px, stacked on a phone.
   Label, field, and button stay on one row. Not a full-width stack. */
body .insn-forms,
body .insnew-page .insnew-forms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  max-width: none;
  align-items: stretch;
  margin-bottom: 36px;
}

body .insnew-panel--forms {
  margin-bottom: 36px;
}

body .insn-hero-zip {
  margin-bottom: 28px;
}

@media (min-width: 768px) {
  body .insn-forms,
  body .insnew-page .insnew-forms-grid {
    grid-template-columns: 1fr 1fr;
  }
}

body .insn-formbox,
body .insnew-page .insnew-quote-card {
  height: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
}

body .insn-formbox form.quote-form,
body .insnew-page form.insnew-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

body .insn-formbox form.quote-form .zip-label,
body .insnew-page form.insnew-form .zip-label {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

body .insn-formbox form.quote-form input[name="zipcode"],
body .insnew-page form.insnew-form input[name="zipcode"],
body .insnew-page form.insnew-form input[type="text"] {
  flex: 1 1 72px;
  width: auto;
  min-width: 0;
  height: 46px;
  min-height: 46px;
  margin: 0;
}

body .insn-formbox form.quote-form button,
body .insn-formbox form.quote-form .btn-quote,
body .insnew-page form.insnew-form .btn-quote,
body .insnew-page form.insnew-form button {
  flex: 0 0 auto;
  width: auto;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 16px;
  white-space: nowrap;
}

/* A narrow card cannot fit the label, a real ZIP field, and the button
   on one line. Keep the field and button together; do not stretch the
   button to the full card the way the old stack did. */
@container (max-width: 460px) {
  body .insn-formbox form.quote-form,
  body .insnew-page form.insnew-form {
    flex-wrap: wrap;
  }

  body .insn-formbox form.quote-form .zip-label,
  body .insnew-page form.insnew-form .zip-label {
    flex: 1 0 100%;
  }
}

/* 4. FAQ answers read as normal paragraphs, not a one-line strip in a wide hole. */
body .insnew-page #faq + h3,
body .insnew-page h2#faq + h3,
body .insnew-page .insn-faq h3 {
  margin-bottom: 8px;
}

body .insnew-page #faq ~ p,
body .insnew-page h2#faq ~ p,
body .insnew-page .insn-faq p {
  max-width: none;
  margin-bottom: 16px;
  line-height: 1.55;
}

body .insn-faq-intro {
  max-width: none;
  margin: 0 0 16px;
  line-height: 1.55;
}

body .insn-form-hint {
  margin: 8px 0 0;
}

/* One quiet tip, the same weight as the homepage hint cards. */
body .insn-rhythm-tip {
  display: block;
  max-width: 320px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #d9e8f4;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-sizing: border-box;
}

body .insn-rhythm-tip strong {
  display: block;
  margin: 0 0 4px;
  color: #176ca8;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

body .insn-rhythm-tip span {
  display: block;
  color: #607487;
  font-size: 14px;
  line-height: 1.45;
}

/* A hint sits beside the ZIP form, not on its own row above the article.
   The two boxes share a top edge and the same height. */
body .insn-zip-aside {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin: 0 0 20px;
}

body .insn-zip-aside > .insn-hero-zip {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  height: auto;
  margin: 0;
}

body .insn-zip-aside > .insn-rhythm-tip {
  flex: 0 1 300px;
  max-width: 320px;
  align-self: stretch;
  height: auto;
  margin: 0;
}

@media (max-width: 767px) {
  body .insn-zip-aside {
    flex-direction: column;
    align-items: stretch;
  }

  body .insn-zip-aside > .insn-rhythm-tip {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* The tinted tip used under quote pairs and inside guide articles. */
body .insnew-tip {
  max-width: none;
  margin-top: 18px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #b7ddf5;
  border-left: 5px solid #176ca8;
  border-radius: 16px;
  background: #eef8ff;
  color: #24425a;
  line-height: 1.55;
  box-sizing: border-box;
}

body .insnew-tip strong {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
}

body .insn-forms > .insnew-tip {
  grid-column: 1 / -1;
  margin-top: 12px;
  margin-bottom: 14px;
}