/* ==========================================================================
   Auto Insurance Texas Online - site settings
   Brand colours and page backgrounds for the site.
   Edit colours and backgrounds here.
   ========================================================================== */

/* Theme colour variables (used by site.min.css) */
:root {
  --primary-color: #023B58;
  --secondary-color: #FFDB00;
  --third-color: #FFDB00;
  --dark-color: #FFDB00;
  --primary-color-rgb: 2, 59, 88;
  --secondary-color-rgb: 255, 219, 0;
  --third-color-rgb: 255, 219, 0;
  --dark-color-rgb: 255, 219, 0;
  --link-color: #023B58;
  --link-color-hover: #FFDB00;
  --link-color-active: #FFDB00;
  --gradient-color-from: #023B58;
  --gradient-color-to: #023B58;
  --gradient-color-from-rgb: 2, 59, 88;
  --gradient-color-to-rgb: 2, 59, 88;
  --gradient-color-from2: #FFDB00;
  --gradient-color-to2: #FFDB00;
  --gradient-color-from2-rgb: 255, 219, 0;
  --gradient-color-to2-rgb: 255, 219, 0;
  --gradient-color-from3: #023B58;
  --gradient-color-to3: #FFDB00;
  --gradient-color-from3-rgb: 2, 59, 88;
  --gradient-color-to3-rgb: 255, 219, 0;
  --gradient-color-from4: #FFDB00;
  --gradient-color-to4: #FFDB00;
  --gradient-color-from4-rgb: 255, 219, 0;
  --gradient-color-to4-rgb: 255, 219, 0;
}

/* Two-colour brand rule: logo blue + logo yellow only.
   Blocks whose background switched from navy to yellow need blue text. */
.ct-tab-banner1 .ct-tab-title h4,
.ct-tab-banner1 .ct-tab-title p,
.ct-cover-boxes1 .ct-cover-inner,
.ct-cover-boxes1 .ct-cover-inner *,
.widget_newsletterwidget,
.widget_newsletterwidget *,
.site-h2 .ct-newsletter1.style1 .tnp-field-email .tnp-email {
  color: #023B58;
}

/* Yellow parity: primary calls-to-action, heading dashes and the quote-card
   frame use logo yellow; hover swaps to logo blue. */
.btn.btn-gradient3,
.btn.btn-default,
.btn.btn-preset4,
.lead-submit {
  background: #FFDB00 !important;
  background-image: none !important;
  color: #023B58 !important;
  border-color: #FFDB00 !important;
}
.btn.btn-gradient3 i, .btn.btn-default i, .btn.btn-preset4 i { color: #023B58 !important; }
.btn.btn-gradient3:hover,
.btn.btn-default:hover,
.btn.btn-preset4:hover,
.lead-submit:hover {
  background: #023B58 !important;
  color: #fff !important;
  border-color: #023B58 !important;
}
.btn.btn-gradient3:hover i, .btn.btn-default:hover i, .btn.btn-preset4:hover i { color: #fff !important; }
.ct-heading .dot-shape i { background-color: #FFDB00 !important; }
/* Tab banner icons: yellow circle + blue icon when idle, solid blue circle + white icon when active
   (the theme's blue-to-yellow gradient rendered olive). */
.ct-tab-banner1 .ct-tab-title .ct-tab-icon { color: #023B58; }
.ct-tab-banner1 .ct-tab-title.active .ct-tab-icon { color: #fff; }
.ct-tab-banner1 .ct-tab-title .ct-tab-icon:after { background-image: none !important; background-color: #023B58 !important; }
.lead-card { border-color: #FFDB00 !important; }
#ct-header-topbar { background-color: #FFDB00 !important; color: #023B58 !important; }
#ct-header-topbar a, #ct-header-topbar span, #ct-header-topbar strong { color: #023B58 !important; }

/* Cover boxes under the hero: icon hover fill is solid blue (theme gradient rendered olive),
   glyph turns white so it stays visible on the blue square. */
.ct-cover-boxes1 .item--icon:after {
  background-image: none !important;
  background-color: #023B58 !important;
}
.ct-cover-boxes1 .ct-cover-item.active .item--icon,
.ct-cover-boxes1 .ct-cover-item.active .item--icon i,
.ct-cover-boxes1 .ct-cover-item:hover .item--icon,
.ct-cover-boxes1 .ct-cover-item:hover .item--icon i {
  color: #fff !important;
}

/* "How it works" process: four illustrated steps (theme only ships 2 and 3 column layouts). */
.ct-process1.ct-process-4-column .ct-process-item {
  width: 25%;
  padding: 0 15px;
  max-width: none;
}
.ct-process1.ct-process-4-column .ct-process-item + .ct-process-item { margin-top: 0; }
.ct-process1 .ct-process-title { color: #023B58; }
.ct-process1.ct-process-4-column .item--icon img {
  max-width: 200px;
  width: 100%;
  border-radius: 24px;
}
@media (max-width: 991px) {
  .ct-process1.ct-process-4-column .ct-process-item { width: 50%; margin-bottom: 40px; }
}
@media (max-width: 575px) {
  .ct-process1.ct-process-4-column .ct-process-item { width: 100%; }
}

/* Tab banner (No SSN / Licencia / SR-22): taller photo so the car is visible below the
   floating text card; card's top stripe is solid yellow instead of a blue-to-yellow blend. */
.ct-tab-banner1 .ct-tab-image { min-height: 600px; background-size: cover; background-position: center center; }
.ct-tab-banner1 .ct-tab-box:before { background-image: none !important; background-color: #FFDB00 !important; }
@media (max-width: 767px) {
  .ct-tab-banner1 .ct-tab-image { min-height: 480px; }
}

/* Footer call-to-action: subtitle must stay readable on the navy panel. */
.ct-cta1 .ct-cta-desc { color: rgba(255, 255, 255, .85); }

/* Sign-up strip: the theme's flex layout targets .input-filled, but the field and button sit
   inside a <p>, so they stacked with no gap. Lay the <p> out as a row with a gap instead. */
.ct-get-quote1 .wpcf7-form .input-filled > p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.ct-get-quote1 .wpcf7-form .input-filled > p .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0;
}
.ct-get-quote1 .wpcf7-form .input-filled > p .btn-preset4 { flex: 0 0 auto; white-space: nowrap; }
.ct-get-quote1 .wpcf7-form .input-filled .wpcf7-form-control:not(.wpcf7-submit) {
  background-color: #fff;
  border-color: #fff;
  color: #023B58;
  width: 100%;
}
@media (max-width: 767px) {
  .ct-get-quote1 .wpcf7-form .input-filled > p { flex-direction: column; align-items: stretch; }
}

/* Footer newsletter: phone field above the email, same look as the email
   input. The subscribe button is absolutely positioned at the bottom-right
   so it stays on the email row. */
.mc4wp-form-fields input[type="tel"] {
  border: none;
  background-color: #eee;
  border-radius: 0;
  height: 46px;
  font-size: 14px;
  font-weight: 400;
  color: #444;
  width: 100%;
  margin-bottom: 10px;
}

/* Page backgrounds */
body #pagetitle.page-title {
  background-image: url('../images/bg-page-title.jpg');
}

.site-content {
  background-repeat: no-repeat;
  background-position: right top;
  background-image: url('../images/bg-content.png');
}


/* Header logo size.
   The theme caps layout-6 logos at 34px, which is small for this wide wordmark
   in an 84px header bar. These raise it without touching the header height. */
#ct-header-wrap .ct-header-branding img,
#ct-header-wrap.ct-header-layout6 .ct-header-branding img {
  max-height: 58px;
}

.ct-header-mobile .ct-header-branding img {
  max-height: 42px;
}

/* Link colours */
a { color: #023B58; }
a:hover { color: #0A5A82; }
a:active { color: #0A5A82; }

/* Page content spacing */
#content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Footer photo grid (replaces the WordPress Instagram feed widget) */
.ct-instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-bottom: 8px;
}

.ct-instagram-grid a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

.ct-instagram-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ct-instagram-grid a:hover img {
  transform: scale(1.08);
}