/*
 Theme Name:   Motors Child
 Template:     motors
*/

/* =============================================================
   WHC WARRANTY PAGE — Motors Theme Conflict Fixes
   Add or merge this into: wp-content/themes/motors-child/style.css
   ============================================================= */

/* -------------------------------------------------------------
   FIX 1: Suppress the Motors page title banner and breadcrumb
   on the Vehicle Protection Plans page.

   HOW TO FIND YOUR PAGE ID:
   In the WordPress admin go to Pages, hover over "Vehicle
   Protection Plans" and look at the URL in the bottom of your
   browser — you'll see "post=XXXX". Replace 8648 below with
   that number.
   ------------------------------------------------------------- */
.page-id-8648 .stm-breadcrumbs,
.page-id-8648 .page-header-breadcrumbs,
.page-id-8648 .page-header,
.page-id-8648 .entry-header,
.page-id-8648 .page-title-wrap,
.page-id-8648 .breadcrumb-wrap,
.page-id-8648 h1.entry-title {
    display: none !important;
}

/* Remove the gap left behind after hiding the header */
.page-id-8648 .site-content,
.page-id-8648 #content,
.page-id-8648 .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* -------------------------------------------------------------
   FIX 2: Push sticky nav below the Motors header.

   The Motors header is ~70px tall on desktop, ~60px on mobile.
   Your whc-sticky-nav uses position:sticky; top:0 — this
   puts it behind the Motors header. We bump it down.
   ------------------------------------------------------------- */
#whc-sticky-nav {
    top: 70px !important;
}

@media (max-width: 1024px) {
    #whc-sticky-nav {
        top: 60px !important;
    }
}

/* If you have the admin bar showing (logged in), add 32px more */
.admin-bar #whc-sticky-nav {
    top: 102px !important; /* 70px header + 32px admin bar */
}

@media (max-width: 782px) {
    .admin-bar #whc-sticky-nav {
        top: 106px !important; /* 60px header + 46px admin bar */
    }
}

/* -------------------------------------------------------------
   FIX 3: Force full-width content on this page.

   Motors constrains pages inside a content column. This breaks
   the page out so the full-bleed dark sections can work.
   ------------------------------------------------------------- */
.page-id-8648 .entry-content,
.page-id-8648 .post-content,
.page-id-8648 article.page {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.page-id-8648 #primary,
.page-id-8648 #main,
.page-id-8648 .site-main {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Also hide any sidebar that might be injecting */
.page-id-8648 #secondary,
.page-id-8648 .widget-area,
.page-id-8648 aside {
    display: none !important;
}

/* -------------------------------------------------------------
   FIX 4: Remove Motors theme's default bottom margin/padding
   that creates a white gap under the last section.
   ------------------------------------------------------------- */
.page-id-8648 .site-content,
.page-id-8648 #content {
    padding-bottom: 0 !important;
}

/* Motors sometimes adds padding to .page type entries */
.page-id-8648 .type-page {
    padding: 0 !important;
    margin: 0 !important;
}

/* =============================================================
   FIX 5: COMPREHENSIVE MOTORS THEME OVERRIDE
   These rules beat Motors' aggressive global styles by using
   #whc-warranty-wrap as the leading selector for specificity.
   ============================================================= */

/* --- Typography: Motors forces dark colors on h1/h2/h3 --- */
#whc-warranty-wrap h1,
#whc-warranty-wrap h2,
#whc-warranty-wrap h3,
#whc-warranty-wrap h4,
#whc-warranty-wrap h5,
#whc-warranty-wrap h6 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin-top: 0 !important;
}

/* Hero title specifically — must be white */
#whc-warranty-wrap #whc-hero h1,
#whc-warranty-wrap .whc-hero-title {
    color: #ffffff !important;
    font-size: clamp(2.4rem, 4.5vw, 3.8rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
}

#whc-warranty-wrap .whc-hero-title em {
    color: #e0ad56 !important;
    font-style: italic !important;
}

/* Dark section headings — must be white */
#whc-warranty-wrap .whc-section--dark h2,
#whc-warranty-wrap .whc-section--dark h3,
#whc-warranty-wrap .whc-section--mid h2,
#whc-warranty-wrap .whc-section--mid h3 {
    color: #ffffff !important;
}

/* Light section headings */
#whc-warranty-wrap .whc-section--white h2,
#whc-warranty-wrap .whc-section--cream h2,
#whc-warranty-wrap .whc-section-header h2 {
    color: #1a2433 !important;
}

/* --- Sticky Nav: Motors kills flex layout and font sizing --- */
#whc-warranty-wrap #whc-sticky-nav,
#whc-sticky-nav {
    background: #0d1b2a !important;
    border-bottom: 1px solid rgba(201,146,42,0.25) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}

#whc-sticky-nav .whc-sticky-nav-inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 0 24px !important;
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    list-style: none !important;
}

#whc-sticky-nav .whc-sticky-nav-inner a {
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #8a9bb0 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    line-height: normal !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
}

#whc-sticky-nav .whc-sticky-nav-inner a:hover,
#whc-sticky-nav .whc-sticky-nav-inner a.whc-active {
    color: #ffffff !important;
    background: rgba(201,146,42,0.2) !important;
}

/* --- Coverage Spectrum: Motors breaks flex row into stacked mess --- */
#whc-warranty-wrap .whc-coverage-spectrum {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 52px !important;
    box-shadow: 0 6px 24px rgba(13,27,42,0.12) !important;
}

#whc-warranty-wrap .whc-spectrum-segment {
    flex: 1 !important;
    padding: 28px 20px !important;
    text-align: left !important;
    position: relative !important;
    display: block !important;
    width: auto !important;
    float: none !important;
}

#whc-warranty-wrap .whc-spectrum-segment:nth-child(1) { background: #0d3b5e !important; }
#whc-warranty-wrap .whc-spectrum-segment:nth-child(2) { background: #1a5276 !important; }
#whc-warranty-wrap .whc-spectrum-segment:nth-child(3) { background: #1f6b8c !important; }
#whc-warranty-wrap .whc-spectrum-segment:nth-child(4) { background: #2386a0 !important; }

#whc-warranty-wrap .whc-spectrum-rank {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.18) !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    left: auto !important;
    text-align: right !important;
    margin: 0 !important;
}

#whc-warranty-wrap .whc-spectrum-label {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.6) !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-align: left !important;
}

#whc-warranty-wrap .whc-spectrum-name {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

#whc-warranty-wrap .whc-spectrum-tagline {
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.65) !important;
    text-align: left !important;
}

/* --- Best-For Cards Grid --- */
#whc-warranty-wrap .whc-bestfor-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

#whc-warranty-wrap .whc-bestfor-card {
    background: #faf7f2 !important;
    border: 1px solid #d9e0e9 !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    width: auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* --- Plan Cards: Motors collapses the two-column body grid --- */
#whc-warranty-wrap .whc-plan-card {
    background: #ffffff !important;
    border: 1px solid #d9e0e9 !important;
    border-radius: 20px !important;
    margin-bottom: 40px !important;
    overflow: hidden !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#whc-warranty-wrap .whc-plan-card-header {
    padding: 36px 40px 30px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    border-bottom: 1px solid #d9e0e9 !important;
    position: relative !important;
    flex-wrap: wrap !important;
}

#whc-warranty-wrap .whc-plan-card-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
}

#whc-warranty-wrap .whc-plan-section {
    padding: 28px 32px !important;
    display: block !important;
    width: auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Plan card coverage lists — Motors applies its own list styles */
#whc-warranty-wrap .whc-coverage-list,
#whc-warranty-wrap .whc-coverage-list li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#whc-warranty-wrap .whc-coverage-list li {
    font-size: 0.88rem !important;
    color: #374558 !important;
    padding: 5px 0 5px 22px !important;
    position: relative !important;
    line-height: 1.45 !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    display: list-item !important;
}

#whc-warranty-wrap .whc-coverage-list li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    color: #2e7d52 !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
}

#whc-warranty-wrap .whc-coverage-list.whc-exclusions li::before {
    content: '—' !important;
    color: #8a9bb0 !important;
}

#whc-warranty-wrap .whc-coverage-list.whc-extras li::before {
    content: '◆' !important;
    font-size: 0.55rem !important;
    top: 8px !important;
    color: #c9922a !important;
}

/* --- Tier items inside plan cards --- */
#whc-warranty-wrap .whc-tier-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#whc-warranty-wrap .whc-tier-item {
    background: #faf7f2 !important;
    border: 1px solid #d9e0e9 !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#whc-warranty-wrap .whc-tier-item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* --- Comparison Table: Motors applies its own table styles --- */
#whc-warranty-wrap .whc-comparison-table {
    width: 100% !important;
    min-width: 700px !important;
    border-collapse: collapse !important;
    background: #152336 !important;
    font-size: inherit !important;
}

#whc-warranty-wrap .whc-comparison-table th,
#whc-warranty-wrap .whc-comparison-table td {
    padding: 14px 18px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    vertical-align: middle !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#whc-warranty-wrap .whc-comparison-table th {
    background: #1e3350 !important;
    color: #ffffff !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

#whc-warranty-wrap .whc-comparison-table th:first-child {
    text-align: left !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #8a9bb0 !important;
    background: #0d1b2a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

#whc-warranty-wrap .whc-comparison-table td:first-child {
    text-align: left !important;
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    background: rgba(0,0,0,0.15) !important;
    padding-left: 20px !important;
}

#whc-warranty-wrap .whc-comparison-table td {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.88rem !important;
}

/* --- Decision Guide Grid --- */
#whc-warranty-wrap .whc-guide-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

#whc-warranty-wrap .whc-guide-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    padding: 24px 26px !important;
    display: block !important;
    box-sizing: border-box !important;
}

#whc-warranty-wrap .whc-guide-card h4 {
    color: #ffffff !important;
    font-size: 1rem !important;
    margin-bottom: 10px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-weight: 600 !important;
}

/* --- FAQ Grid --- */
#whc-warranty-wrap .whc-faq-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 40px !important;
}

#whc-warranty-wrap .whc-faq-question {
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 20px 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    cursor: pointer !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1a2433 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}

/* --- Roadside Grid inside expanders --- */
#whc-warranty-wrap .whc-roadside-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

#whc-warranty-wrap .whc-roadside-item {
    background: #faf7f2 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 0.8rem !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* --- Repair Cost Bar Chart --- */
#whc-warranty-wrap .whc-repair-cost-visual {
    background: #1e3350 !important;
    border-radius: 12px !important;
    padding: 28px 24px !important;
    margin-top: 20px !important;
    display: block !important;
}

#whc-warranty-wrap .whc-repair-cost-visual > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 40px !important;
}

#whc-warranty-wrap .whc-cost-bar-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

#whc-warranty-wrap .whc-cost-bar-track {
    flex: 1 !important;
    height: 6px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    display: block !important;
    min-width: 40px !important;
}

#whc-warranty-wrap .whc-cost-bar-fill {
    height: 100% !important;
    border-radius: 3px !important;
    background: linear-gradient(90deg, #c9922a, #e0ad56) !important;
    display: block !important;
}

/* --- General: Motors forces bullets, margins on all lists --- */
#whc-warranty-wrap ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* --- General: Motors adds borders/backgrounds to all buttons --- */
#whc-warranty-wrap button:not(.whc-plan-expander-toggle):not(.whc-faq-question):not(.whc-plan-tab) {
    border-radius: 0;
}

#whc-warranty-wrap .whc-plan-tab {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 30px !important;
    padding: 9px 20px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.6) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    box-shadow: none !important;
    display: inline-block !important;
}

#whc-warranty-wrap .whc-plan-tab.whc-active {
    background: #c9922a !important;
    border-color: #c9922a !important;
    color: #0d1b2a !important;
    font-weight: 600 !important;
}

/* --- CTA Buttons --- */
#whc-warranty-wrap .whc-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    border-radius: 40px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 2px solid transparent !important;
    box-sizing: border-box !important;
}

#whc-warranty-wrap .whc-btn-primary {
    background: #c9922a !important;
    color: #0d1b2a !important;
    border-color: #c9922a !important;
}

#whc-warranty-wrap .whc-btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* --- Section padding: Motors may collapse it --- */
#whc-warranty-wrap .whc-section {
    padding: 80px 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#whc-warranty-wrap .whc-container {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* --- Responsive overrides --- */
@media (max-width: 960px) {
    #whc-warranty-wrap .whc-coverage-spectrum {
        flex-direction: column !important;
    }
    #whc-warranty-wrap .whc-bestfor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #whc-warranty-wrap .whc-plan-card-body {
        grid-template-columns: 1fr !important;
    }
    #whc-warranty-wrap .whc-guide-grid {
        grid-template-columns: 1fr !important;
    }
    #whc-warranty-wrap .whc-faq-grid {
        grid-template-columns: 1fr !important;
    }
    #whc-warranty-wrap .whc-roadside-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    #whc-warranty-wrap .whc-bestfor-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    #whc-warranty-wrap .whc-repair-cost-visual > div {
        grid-template-columns: 1fr !important;
    }
    #whc-warranty-wrap .whc-roadside-grid {
        grid-template-columns: 1fr !important;
    }
}