/**
 * Custom CSS for Kadence Child Theme.
 *
 * Loaded via inc/enqueue.php AFTER Kadence's own CSS, so selectors here
 * can override parent styles using normal specificity — avoid !important
 * unless there's truly no other way.
 *
 * Organize with comment section headers as this file grows, e.g.:
 *
 * ============================
 * 1. Global / Base
 * ============================
 *
 * ============================
 * 2. Header
 * ============================
 *
 * ============================
 * 3. Footer
 * ============================
 *
 * ============================
 * 4. Page/Post specific
 * ============================
 */





/* ---------- Fonts ---------- */
.inner-page-wrap,
.inner-page-wrap * {
    font-family: 'Lato', sans-serif;
    box-sizing: border-box;
}
.inner-page-wrap h1,
.inner-page-wrap h2,
.inner-page-wrap h3,
.inner-page-wrap h4 {
    font-family: 'Lexend Deca', sans-serif;
}

/* ---------- Banner ---------- */
.page-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 1;
    min-height: 220px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.8;
}
.page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}
.page-banner-content h1 {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
}
.page-banner-breadcrumbs {
    font-size: 15px;
}
.page-banner-breadcrumbs a {
    color: #fff;
    text-decoration: none;
}
.page-banner-breadcrumbs a:hover {
    color: #f58320;
}
.page-banner-breadcrumbs span.sep {
    margin: 0 8px;
    opacity: 0.6;
}
.page-banner-breadcrumbs span.current {
    color: #f58320;
}

/* ---------- Layout ---------- */
.inner-page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}
.inner-page-columns {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.inner-page-content {
    flex: 1 1 65%;
    min-width: 0;
}
.inner-page-content img {
    max-width: 100%;
    height: auto;
}

/* ---------- Quote Form Card ---------- */
.inner-page-form {
    flex: 1 1 35%;
    max-width: 380px;
}
.quote-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    padding: 40px 30px 20px 40px;
    position: sticky;
    top: 30px;
}
.quote-card h2 {
    color: #f58320;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .page-banner-content h1 {
        font-size: 30px;
    }
    .inner-page-columns {
        flex-direction: column;
    }
    .inner-page-content,
    .inner-page-form {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .quote-card {
        position: static;
    }
}


/* ==========================================
   QUOTE POPUP
   (Form fields reuse .quote-card styles already
   defined for the inner-page template — not duplicated here)
========================================== */
.quote-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}
.quote-popup.active {
    opacity: 1;
    visibility: visible;
}
.quote-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.8);
}
.quote-popup-container {
    position: relative;
    width: min(480px, 92%);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: quotePopupShow .35s ease;
    z-index: 2;
}
.quote-popup-content {
    padding: 40px 35px;
    text-align: center;
    font-family: 'Lato', sans-serif;
}
.quote-popup-logo {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
}
.quote-popup-content h2 {
    margin: 0 0 12px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #f58320;
}
.quote-popup-content p {
    margin-bottom: 22px;
    color: #666;
    line-height: 1.6;
    font-size: 15px;
}

/* The form itself is rendered inside .quote-card,
   which already carries all input/button styling
   (border-radius, focus border, #f58320 submit button, etc).
   Just remove the card's own shadow/padding since the popup
   already provides a card-like container. */
.quote-popup-content .quote-card {
    background: none;
    box-shadow: none;
    padding: 0;
    text-align: left;
}

/* CLOSE BUTTON */
.quote-popup-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: none;
    background: transparent;
    padding: 0;
    width: auto;
    height: auto;
    cursor: pointer;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    color: #777;
    transition: .2s;
}
.quote-popup-close:hover {
    color: #f58320;
    background: none;
    transform: none;
}

@keyframes quotePopupShow {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    .quote-popup-content { padding: 30px 22px; }
    .quote-popup-content h2 { font-size: 22px; }
}