@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Inter:wght@400;500;600;700&display=swap');

/* =============================================================================
 * ARCpoint Framework 2 — Redesign Overrides
 *
 * Loaded by functions.php (my_theme_enqueue_styles), after the child style.css.
 *
 * Scoping body classes (set by includes/page-body-classes.php):
 *   .page-type-b2c           consumer pages (also on dual-brand B2C-style pages)
 *   .page-type-b2b           Employer Solutions + B2B sub-pages
 *   .page-type-dual-brand    extra modifier on dual-brand sites' B2C pages
 *                            (used here to render the above-hero notification bar)
 *
 * Companion edits (NOT in this file):
 *   - functions.php arcpoint_header_shortcode: B2C $brandColor #54B8A1 → #F6871F
 *   - style.css: WPForms button overrides + --brand-accent var teal → orange
 *   - css/arcpoint-popup.css: popup button bg teal → orange
 *
 * Why we use !important here:
 *   Divi emits its dynamic per-page CSS as inline <style> tags inside the body
 *   (after our <head>-linked stylesheets). To win over those rules we need
 *   matching/higher specificity AND !important.
 * ============================================================================= */

:root {
    --redesign-blue:   #005A96;
    --redesign-navy:   #00254A;
    --redesign-orange: #F6871F;
    --redesign-orange-hover: #d97a16;
    --redesign-white:  #FFFFFF;
} 


body,
body p,
body li,
body td,
body th,
body label,
body input,
body textarea,
body select,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a,
body span,
body div,
body button,
body .et_pb_module,
body .et_pb_button,
body .et_pb_blurb_title,
body .et_pb_slide_title,
body .et_pb_menu a,
body .et-menu a,
body #top-menu a,
body .et_mobile_menu a {
    font-family: 'Montserrat', sans-serif !important;
}


#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_left_icon,
#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_right_icon,
#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_left_icon span,
#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_right_icon span {
    font-family: ETmodules !important;
    font-weight: 400 !important;
}
/* =============================================================================
 * BUTTONS — site-wide recolor from teal to orange
 *
 * Covers Divi modules (any et_pb_button), WooCommerce buttons (cart, checkout,
 * single-product), Divi shop overlay icons, Divi shop price text.
 * ============================================================================= */

/* All Divi buttons */
.et_pb_button,
.et_pb_button:link,
.et_pb_button:visited {
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
}

.et_pb_button:hover,
.et_pb_button:active {
    background-color: var(--redesign-orange-hover) !important;
    border-color: var(--redesign-orange-hover) !important;
    color: var(--redesign-white) !important;
}

/* Exclude floating icon-only phone buttons from the recolor.
   The hero "Call Us Now" CTA has id="es-head-call-us-btn" (and stays orange);
   the fixed-position floating phone button has NO id and renders a phone.png
   background-image — so a solid fill would hide its icon. Keep it transparent. */
.et_pb_button[href^="tel:"]:not([id]),
.et_pb_button[href^="tel:"]:not([id]):link,
.et_pb_button[href^="tel:"]:not([id]):visited,
.et_pb_button[href^="tel:"]:not([id]):hover,
.et_pb_button[href^="tel:"]:not([id]):active {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* WooCommerce buttons (cart, checkout, single-product add-to-cart) */
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt {
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
}

.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page input.button:hover {
    background-color: var(--redesign-orange-hover) !important;
    border-color: var(--redesign-orange-hover) !important;
}

/* Divi shop module — product price and overlay icon were hardcoded teal */
.et_pb_shop .price,
.et_pb_shop .price .amount,
.et_pb_shop_0 .price,
.et_pb_shop_0 .price .amount {
    color: var(--redesign-orange) !important;
}

.et_pb_shop .et_overlay:before,
.et_pb_shop_0 .et_overlay:before {
    color: var(--redesign-orange) !important;
}

/* =============================================================================
 * INFO BAND — yellow text → white (the navy band right under the home hero)
 *
 * Divi inlines `.et_pb_blurb_0 / _1 / _2 / _3 { color:#f6d258 !important; }` on
 * the home page. The mockup shows white text on the navy band.
 * Scoped to B2C/Dual-Brand only — B2B pages don't have this band.
 * ============================================================================= */

.page-type-b2c .et_pb_section_1 .et_pb_blurb,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_blurb_description,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_main_blurb_image,
.page-type-b2c .et_pb_section_1 .et_pb_blurb p,
.page-type-b2c .et_pb_section_1 .et_pb_blurb span,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_module_header,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_module_header a {
    color: var(--redesign-white) !important;
}

/* =============================================================================
 * FORM CONTAINERS — B2C: blue background per mockup
 *
 * Applies to Contact 7, Gravity Forms, Divi contact form. Not WPForms (handled
 * in style.css with location-template-b2c scope).
 * ============================================================================= */

.page-type-b2c .et_pb_contact_form_container,
.page-type-b2c .wpcf7-form,
.page-type-b2c .gform_wrapper {
    background-color: var(--redesign-blue);
    padding: 30px;
    border-radius: 8px;
}

.page-type-b2c .et_pb_contact_form input[type="text"],
.page-type-b2c .et_pb_contact_form input[type="email"],
.page-type-b2c .et_pb_contact_form input[type="tel"],
.page-type-b2c .et_pb_contact_form textarea,
.page-type-b2c .wpcf7-form input[type="text"],
.page-type-b2c .wpcf7-form input[type="email"],
.page-type-b2c .wpcf7-form input[type="tel"],
.page-type-b2c .wpcf7-form textarea {
    background-color: var(--redesign-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-type-b2c .et_pb_contact_form label,
.page-type-b2c .wpcf7-form label {
    color: var(--redesign-white);
}

/* =============================================================================
 * DUAL-BRAND — above-hero notification bar
 *
 * Rendered with ::before on the first content section so we never touch Divi
 * page content. Final copy to be confirmed with marketing.
 * ============================================================================= */

.page-type-dual-brand #et-main-area > .et_pb_section:first-of-type::before {
    content: "Please make sure you're on the right site for your needs.";
    display: block;
    background-color: var(--redesign-navy);
    color: var(--redesign-white);
    text-align: center;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .page-type-dual-brand #et-main-area > .et_pb_section:first-of-type::before {
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* =============================================================================
 * DEFERRED — keep in mind, not applied yet
 *
 * - Hero H1 font swap (Kalam → Poppins) — see typography phase
 * - Hero solid-navy vs image+overlay decision — current image+overlay matches
 *   mockup intent, leaving alone
 * - Specific selectors for the new "VIEW ALL TESTS" header button: handled by
 *   functions.php $brandColor change, no CSS override needed
 * ============================================================================= */

 /* =============================================================================
 * SLIDER BUTTON — Orange + Century Gothic
 * ============================================================================= */

body.page-type-b2c .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_more_button,
body.page-type-b2b .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_more_button {
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
    font-family: 'Century Gothic', CenturyGothic, sans-serif !important;
}

#apl-wellness-section * {
    color: #fff !important;

}

#apl-wellness-section a {
    font-weight: 100 !important;
    /* font-size: 13px !important; */
}

.footer .contact-item .icon {
    filter: brightness(0) saturate(100%) invert(58%) sepia(74%) saturate(1000%) hue-rotate(345deg) brightness(100%);
}




#apl-faq-section .chiac-content {
    background-color: #012b49 !important;
}

#apl-faq-section .chiac-content p,
#apl-faq-section .chiac-content li,
#apl-faq-section .chiac-content span {
    color: #fff !important;
}

.apl-dark-section.et_pb_section {
    background-color: #00254a !important;
    margin-bottom: 1% !important;
}

.apl-dark-section * {
    color: #fff !important;
}
.apl-dark-section p {
   
}

#faq h3 {
    color: #005A96 !important;
            font-size: 36px !important;
            font-weight: 700;
            text-align: center;
            margin: 0 0 40px;
            text-transform: none !important;
}

#apl-faq-section .chiac-title {
    font-weight: 200 !important;
    font-size: 16px !important;
}

#apl-faq-section .chiac-content p {
     font-size: 15px !important;
}


@media only screen and (min-width: 981px) {
    body.page-type-b2c .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_slide_description,
    body.page-type-b2b .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_slide_description {
        text-align: left !important;
        margin: 0 !important;
        max-width: 620px !important;
        padding: 0 !important;
    }

    body.page-type-b2c .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_button_wrapper,
    body.page-type-b2b .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_button_wrapper {
        text-align: left !important;
    }
}

#apl-employer-solutions.et_pb_section {
        padding: 2% 0 !important;
        /* text-align: right !important; */
}
#apl-employer-solutions.et_pb_section h3{
    text-transform: none !important;
}

#apl-employer-solutions p{
    width: 50% ;
    font-weight: 100;
     font-size: 20px !important;

}

@media only screen and (min-width: 981px) {
    #apl-employer-solutions h3{
     width: 100% ;
    }

    #apl-employer-solutions p{
        width: 100% ;
        font-weight: 100 ;
        font-size: 20px ;
    }

}

