/*
 * CARFAX Reports Landing Page — Supplemental Styles
 *
 * Reuses from main.css / Bootstrap 5 alpha:
 *   .hero, .hero__title, .hero__subtitle, .hero__content
 *   .check__title, .check__form__input
 *   .bg-secondary (#EBEEF3), .btn, .btn-primary
 *   .container-xxl, Bootstrap row/col grid, spacing utilities
 *
 * New styles here cover only what the theme doesn't already provide.
 */

/* ──────────────────────────────────────────────
   Hero — solid brand-blue variant (default, no image)
   ────────────────────────────────────────────── */
.carfax-hero {
    background-color: #0C52C0;
    /* Override main.css .hero { padding: 140px 0 180px 0 } */
    padding: 80px 0 100px;
}

/*
 * Hero with a custom background image.
 * PHP adds .carfax-hero--has-image when carfax_hero_image is set.
 * A blue overlay (::before) keeps white text readable over any photo.
 */
.carfax-hero--has-image {
    position: relative;
}

.carfax-hero--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 82, 192, 0.55);
    pointer-events: none;
    z-index: 0;
}

.carfax-hero--has-image .container-xxl {
    position: relative;
    z-index: 1;
}

/* ──────────────────────────────────────────────
   About section
   ────────────────────────────────────────────── */

/* White background (image edges fade to white) */
#about-carfax {
    background-color: #fff;
}

/*
 * Reduce heading margins for the landing page context.
 * main.css sets margin-top: 6rem — too large here.
 */
.who-we-are h2 {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/*
 * When an image is set it becomes the section background,
 * anchored to the bottom. padding-bottom creates space for the image.
 */
.carfax-about--has-image {
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
}

/* ── Reduce .check__title bottom margin on this page ── */
#pricing .check__title,
#contact-form .check__title {
    margin-bottom: 2rem;
}

/* Center the content block; override main.css max-width: 550px */
.carfax-hero .hero__content {
    max-width: 720px;
    margin: 0 auto;
}

.carfax-hero .hero__description {
    font-size: 18px;
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
    max-width: 580px;
    margin: 1.5rem auto 0;
    opacity: 0.88;
}

/* ──────────────────────────────────────────────
   Section headings — matches .check__title pattern
   Only applied inside sections that don't already
   have their own heading rule in main.css.
   ────────────────────────────────────────────── */
.carfax-section-title {
    font-size: 36px;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
    margin-bottom: 4rem;
    position: relative;
}

.carfax-section-title::before {
    width: 100px;
    content: "";
    display: block;
    height: 3px;
    background-color: #0C52C0;
    position: absolute;
    margin-top: 55px;
}

/* ──────────────────────────────────────────────
   Pricing Cards
   ────────────────────────────────────────────── */
.carfax-pricing-card {
    background-color: #fff;
    border: 1px solid #dce3ef;
    padding: 1.5rem 1.25rem 1.25rem;
    position: relative;
    transition: box-shadow 0.25s, border-color 0.25s;
}

.carfax-pricing-card:hover {
    box-shadow: 0 6px 24px rgba(12, 82, 192, 0.10);
    border-color: #0C52C0;
}

/* "Most Popular" featured variant — green accent */
.carfax-pricing-card--featured {
    border: 2px solid #24B07E;
}

.carfax-pricing-card--featured:hover {
    box-shadow: 0 6px 24px rgba(36, 176, 126, 0.14);
    border-color: #24B07E;
}

/* "Best Value" variant — brand blue accent */
.carfax-pricing-card--value {
    border: 2px solid #0C52C0;
}

/* Badge (Most Popular / Best Value) */
.carfax-pricing-card__badge {
    position: absolute;
    top: -1px;
    right: 1.25rem;
    background-color: #24B07E;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    font-family: 'Roboto', sans-serif;
}

.carfax-pricing-card__badge--value {
    background-color: #0C52C0;
}

/* Card content */
.carfax-pricing-card__amount {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    font-family: 'Ubuntu', sans-serif;
    margin-bottom: 0.875rem;
}

.carfax-pricing-card__price-per {
    font-size: 28px;
    font-weight: 700;
    color: #0C52C0;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.carfax-pricing-card__price-per span {
    font-size: 15px;
    font-weight: 400;
    color: #828282;
}

.carfax-pricing-card__total {
    font-size: 14px;
    color: #828282;
    font-family: 'Roboto Slab', serif;
    margin-bottom: 1rem;
}

.carfax-pricing-card__footer {
    margin-top: auto;
    padding-top: 1rem;
}

/* CTA button on standard cards: override Bootstrap primary red → brand blue */
.carfax-btn-order.btn-primary:not(.button-hero) {
    background-color: #0C52C0;
    border-color: #0C52C0;
    border-radius: 0;
}

.carfax-btn-order.btn-primary:not(.button-hero):hover {
    background-color: #6D97D9;
    border-color: #6D97D9;
}

.carfax-btn-order.btn-primary:not(.button-hero):focus {
    background-color: #6D97D9;
    border-color: #6D97D9;
    box-shadow: 0 0 0 0.2rem rgba(12, 82, 192, 0.4);
}

/* Featured card uses .button-hero (green) — already in main.css, no override needed */

/* ──────────────────────────────────────────────
   Persuasive pitch block (left column of form section)
   ────────────────────────────────────────────── */
.carfax-pitch__lead {
    font-size: 17px;
    color: #828282;
    font-family: 'Roboto Slab', serif;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.carfax-pitch__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.carfax-pitch__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
    font-family: 'Roboto Slab', serif;
}

.carfax-pitch__item strong {
    font-weight: 600;
    color: #333333;
}

.carfax-pitch__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #0C52C0;
    color: #fff;
    border-radius: 50%;
    margin-top: 2px;
}

/* ──────────────────────────────────────────────
   Form card — no background, blends into section
   ────────────────────────────────────────────── */
.carfax-form-card {
    background: none;
}

.carfax-lead-form .form-control {
    width: 100%;
    display: block;
}

/* ──────────────────────────────────────────────
   Lead Form
   ────────────────────────────────────────────── */
.carfax-lead-form .form-control {
    border-radius: 0;
    border: 1px solid #CAD4E6;
    background-color: #F9FBFD;
}

.carfax-lead-form .form-control:focus {
    border-color: #0C52C0;
    box-shadow: 0 0 0 0.2rem rgba(12, 82, 192, 0.15);
}

.carfax-submit-btn.btn-primary {
    background-color: #0C52C0;
    border-color: #0C52C0;
    border-radius: 0;
}

.carfax-submit-btn.btn-primary:hover {
    background-color: #6D97D9;
    border-color: #6D97D9;
}

.carfax-submit-btn.btn-primary:focus {
    background-color: #6D97D9;
    border-color: #6D97D9;
    box-shadow: 0 0 0 0.2rem rgba(12, 82, 192, 0.4);
}

.carfax-selected-package {
    font-size: 14px;
    color: #828282;
    font-family: 'Roboto', sans-serif;
}

/* ──────────────────────────────────────────────
   Trust Indicators
   ────────────────────────────────────────────── */
.carfax-trust-item {
    padding: 1rem 0.75rem;
}

.carfax-trust-item__icon {
    margin-bottom: 1rem;
}

.carfax-trust-item__icon svg {
    display: inline-block;
}

.carfax-trust-item__title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 0.5rem;
}

.carfax-trust-item__desc {
    font-size: 16px;
    color: #828282;
    font-family: 'Roboto Slab', serif;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ──────────────────────────────────────────────
   Responsive adjustments
   ────────────────────────────────────────────── */
@media (max-width: 575px) {
    .carfax-pricing-card__price-per {
        font-size: 26px;
    }

    .carfax-section-title {
        font-size: 28px;
    }

    .carfax-section-title::before {
        margin-top: 45px;
    }
}