/* Truck Insurance Group: cost & requirements pages.
   Loaded after the theme CSS. Uses the theme's fonts (Rajdhani / Roboto)
   and colors (#202426 dark, #888 skin grey). */

/* ---------- Header: logo wrapper is a div on these pages (H1 is the page title) */
.site-branding .site-logo { margin: 0; line-height: inherit; }

/* ---------- Page title banner (same image and highlight style as the home slider, shorter) */
.cost-hero {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 190px 0 70px;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
}
.cost-hero .container { position: relative; z-index: 2; }
.cost-hero-overlay {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 640px; max-width: 100%;
  background-color: #888; opacity: .85; z-index: 1;
}
.cost-hero-box {
  max-width: 560px;
  border: 8px solid #fff; border-left: 0;
  padding: 26px 30px 24px 0;
}
.cost-hero-eyebrow {
  font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 28px;
  color: #fff; margin: 0 0 6px;
}
.cost-hero h1 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 50px; line-height: 54px; color: #fff; margin: 0 0 14px;
}
.cost-hero .breadcrumb-wrapper span,
.cost-hero .breadcrumb-wrapper span a,
.cost-hero .breadcrumb-wrapper .cmt-bread-sep { color: rgba(255,255,255,.9); font-size: 15px; }
.cost-hero .breadcrumb-wrapper span a:hover { color: #fff; text-decoration: underline; }

/* ---------- Article */
.cost-section { padding: 60px 0 50px; }
.cost-article { font-size: 17px; line-height: 29px; color: #555; }
.cost-article p, .cost-article ul { margin-bottom: 20px; }
.cost-article h2 { font-size: 34px; line-height: 40px; margin: 42px 0 16px; }
.cost-article h3 { font-size: 22px; line-height: 28px; margin: 26px 0 10px; }
.cost-article ul { padding-left: 22px; }
.cost-article ul:not(.cost-related) { list-style: disc; }
.cost-article ul li { margin-bottom: 8px; }
.cost-article strong { color: #202426; }
.cost-article a { color: #202426; text-decoration: underline; text-underline-offset: 2px; }
.cost-article a:hover { color: #888; }
.cost-updated { font-size: 14px; color: #888; margin-bottom: 18px; }

/* Tables */
.cost-article .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
.cost-table { font-size: 16px; line-height: 23px; margin-bottom: 0; }
.cost-table.wide { min-width: 560px; }
.cost-table thead th {
  background: #202426; color: #fff; border: 0;
  font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .2px;
}
.cost-table td { border-top: 1px solid #e1e1e1; vertical-align: top; font-variant-numeric: tabular-nums; }
.cost-table tbody tr:nth-child(even) td { background: #f6f6f6; }
.cost-article .note { font-size: 14px; line-height: 22px; color: #888; font-style: italic; }

/* CTA: theme button */
.cost-cta { margin: 30px 0 10px; }
.cost-article .cost-cta a { text-decoration: none; color: #fff; }

/* Related links + FAQ */
.cost-related { list-style: none; padding-left: 0 !important; }
.cost-related li { padding: 8px 0; border-bottom: 1px solid #e1e1e1; margin: 0 !important; }
.cost-faq h3 { margin-top: 22px; }

/* ---------- Responsive */
@media (max-width: 991px) {
  .cost-hero { padding: 150px 0 50px; min-height: 380px; }
  .cost-hero h1 { font-size: 40px; line-height: 44px; }
}
@media (max-width: 575px) {
  .cost-hero { padding: 120px 0 36px; min-height: 0; }
  .cost-hero-overlay { width: 100%; opacity: .82; }
  .cost-hero-box { border-width: 6px; padding: 18px 18px 16px 0; }
  .cost-hero-eyebrow { font-size: 16px; }
  .cost-hero h1 { font-size: 32px; line-height: 36px; }
  .cost-section { padding: 36px 0 30px; }
  .cost-article { font-size: 16px; line-height: 27px; }
  .cost-article h2 { font-size: 27px; line-height: 32px; margin-top: 34px; }
}

/* ---------- Existing pages: banner title is now an H1 (logo is no longer wrapped in H1) */
.slide .slide_style6 .slide__content--headings h1 {
  text-align: left; line-height: 78px; letter-spacing: 0; font-weight: 700;
  font-size: 98px; color: #fff; font-family: 'Rajdhani', sans-serif; margin-top: 20px;
}
@media (max-width: 767px) {
  .slide .slide_style6 .slide__content--headings h1 { font-size: 48px; line-height: 52px; }
}