/*
 * Site-specific overrides — migrated from WP Customizer "Additional CSS"
 * into the theme so they survive a theme switch. Enqueued last (after
 * style.css) so it keeps the same "loads last, wins" precedence it had
 * in the Customizer.
 */

/* Blog inner form text colors */
.section-blog-inner .blog-inner-container .blog-inner-content .form-container .title h3{
    color:white;
}
.section-blog-inner .blog-inner-container .blog-inner-content .form-container p{
    color:white;
}

/* Blog outside paragraph styling */
.section-blog.outside-blog .paragraph{
    text-align: center;
    margin-top: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 150%;
}

.section-blog.outside-blog .paragraph a{
    text-decoration: underline;
}

/* Banner styling */
#sbb-banner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
#sbb-banner span{
    font-weight: 700;
}
#sbb-banner a button{
    font-weight: 700;
    border-radius: 32px;
}

/* Blog card excerpt truncation */
.section-blog .blog-grid .blog-card .blog-content p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FluentForm field styling */
.fluentform .ff-el-form-control {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #444 !important;
}

/* Fix helping.jpg image */
/* img[src*='helping.jpg'] {
    width: 100% !important;
    height: auto !important;
    max-width: 2400px !important;
    object-fit: cover !important;
    display: block !important;
} */

/* ========== POPUP/MODAL FIXES (mobile + desktop unified) ========== */

/* Base popup structure */
#exitPopup .modal-content .modal-box .modal-inner .box-inner {
    align-items: stretch;
}

#exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper {
    overflow: hidden;
    border-radius: 24px;
    flex-shrink: 0;
}

#exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper .product-img {
    display: block;
    width: 100%;
    height: 100%;
}

#exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper .product-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* MOBILE popup styling (keeps your working mobile layout) */
@media (max-width: 768px) {
    #exitPopup .modal-content .modal-box .modal-inner .box-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper {
        width: 200px !important;
        max-width: 200px !important;
        height: 200px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    #exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper .product-img {
        width: 200px !important;
        height: 200px !important;
        max-width: 200px !important;
        max-height: 200px !important;
    }

    #exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper .product-img img {
        width: 200px !important;
        height: 200px !important;
        max-width: 200px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        object-position: center 20% !important;
        border-radius: 24px !important;
    }

    #exitPopup .modal-content .modal-box .modal-inner .box-inner .user-info {
        width: 100% !important;
    }
}

/* DESKTOP popup styling (above 768px) */
@media (min-width: 769px) {
    #exitPopup .modal-content .modal-box .modal-inner .box-inner {
        flex-direction: row !important;
        align-items: stretch !important;
    }

/*     #exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper {
        width: 320px !important;
        max-width: 320px !important;
        height: auto !important;
        aspect-ratio: 3 / 4;
    } */

    #exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper .product-img {
        width: 100% !important;
        height: 100% !important;
    }

    #exitPopup .modal-content .modal-box .modal-inner .box-inner .img-wrapper .product-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

/*     #exitPopup .modal-content .modal-box .modal-inner .box-inner .user-info {
        width: auto !important;
        flex: 1 1 auto !important;
    } */
}

/* ========== CONTACT PAGE LAYOUT FIX ========== */

.section-hero-contact .hero-layout .content {
    overflow: visible !important;
}

@media (max-width: 1100px) {
    .section-hero-contact .hero-layout {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .section-hero-contact .hero-layout .content {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .section-hero-contact .hero-layout .form-container {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

.section-hero-contact .hero-layout .content .text h3 {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
}

/* Prevent bottom banner from covering page content */
main.overflow-hidden {
    padding-bottom: 90px;
}

@media (max-width: 600px) {
    main.overflow-hidden {
        padding-bottom: 80px;
    }
}
/* ========== CONTACT PAGE LAYOUT FIX ========== */

/* Reset the hero layout to original flexbox behavior */
@media (min-width: 768px) {
    .section-hero-contact .hero-layout {
        display: flex !important;
        flex-direction: row !important;
        gap: 64px !important;
        align-items: flex-start !important;
    }

    /* Both columns should be equal width */
    .section-hero-contact .hero-layout .content,
    .section-hero-contact .hero-layout .form-container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Form should not stretch vertically */
    .section-hero-contact .hero-layout .form-container {
        align-self: flex-start !important;
        max-width: none !important;
    }
}

/* Allow content to show properly */
.section-hero-contact .hero-layout .content {
    overflow: visible !important;
}

/* Five-star pledge: list and badge side by side */
.section-hero-contact .hero-layout .content .pledge .pledge-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.section-hero-contact .hero-layout .content .pledge .pledge-content ol {
    flex: 1 !important;
    list-style: decimal !important;
    padding-left: 24px !important;
    margin-top: 12px !important;
}

.section-hero-contact .hero-layout .content .pledge .pledge-content picture.pledge-icon img {
    width: 96px !important;
    height: 96px !important;
    flex-shrink: 0 !important;
}

@media (min-width: 768px) {
    .section-hero-contact .hero-layout .content .pledge .pledge-content picture.pledge-icon img {
        width: 128px !important;
        height: 128px !important;
    }
}

/* Mobile layout */
@media (max-width: 767px) {
    .section-hero-contact .hero-layout {
        flex-direction: column !important;
    }
}
/* ============================================
   ACCESSIBILITY FIX: Button Color Contrast
   Blue-Cyan Mix - Dynamic & On-Brand
   ============================================ */

/* Fix ALL primary buttons for WCAG AA compliance */
.btn.btn-primary,
a.btn.btn-primary,
button.btn-primary {
    background-color: #0284C7 !important;
    color: #ffffff !important;
    border-color: #0284C7 !important;
    font-weight: 600;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus {
    background-color: #0369A1 !important;
    color: #ffffff !important;
    border-color: #0369A1 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
    transition: all 0.3s ease;
}

/* Fix the specific WP Rocket analytics button */
button[data-rocket-onclick] {
    background-color: #0284C7 !important;
    color: #ffffff !important;
    font-weight: 600;
}

button[data-rocket-onclick]:hover {
    background-color: #0369A1 !important;
}

/* ============================================
   ACCESSIBILITY FIX: Heading Hierarchy
   Maintains visual appearance after fixing tags
   ============================================ */

/* Homepage: Make the H2.heading in section-work-with-us look like H3 */
.section-work-with-us h2.heading,
.expert-domain h2.heading {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* FAQ Page: Make H2 questions look like they did as H5 */
.faq-question h2,
.faq-container h2,
.faq-list-item h2 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Ensure FAQ H2 doesn't get too large on mobile */
@media (max-width: 768px) {
    .faq-question h2 {
        font-size: 1rem !important;
    }
}

/* ============================================
   NUCLEAR FIX: Button Contrast Override
   Maximum specificity to force correct colors
   ============================================ */

/* Target all button variations with maximum specificity */
body .btn.btn-primary,
body a.btn.btn-primary,
body button.btn-primary,
.section a.btn-primary,
.section .btn.btn-primary,
a[href].btn-primary,
button[class="btn btn-primary"],
a[class="btn btn-primary"] {
    background: #0369A1 !important;
    background-color: #0369A1 !important;
    border-color: #0369A1 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

body .btn.btn-primary:hover,
body a.btn.btn-primary:hover,
body .btn.btn-primary:focus,
body a.btn.btn-primary:focus {
    background: #025a8a !important;
    background-color: #025a8a !important;
    border-color: #025a8a !important;
    color: #ffffff !important;
}

/* Fix WP Rocket button */
button[data-rocket-onclick],
button[onclick*="dataLayer"] {
    background: #0369A1 !important;
    background-color: #0369A1 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-color: #0369A1 !important;
}


.modal-overlay .modal-content .modal-box .modal-inner .box-inner .user-info select {
	  background: #ffffff url('https://nameexperts.com/wp-content/themes/name-experts/img/home/icons/select-black.svg') no-repeat right 20px center;
}
/* Service page hero h1 – responsive sizing to prevent text clipping */
.section-hero-contact .hero-layout .content .text h1 {
    font-size: 36px;
    line-height: 110%;
    letter-spacing: -0.02em;
}

@media screen and (min-width: 768px) {
    .section-hero-contact .hero-layout .content .text h1 {
        font-size: calc(-4.57px + 4.76vw);
    }
}

@media screen and (min-width: 1440px) {
    .section-hero-contact .hero-layout .content .text h1 {
        font-size: 64px;
    }
}