/* ============================================================= */
/* CONTACT US ICONS – FULLY CENTERED (covers #1 through #10+)   */
/* ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Averia+Libre:wght@400&display=swap');

/* Force full-width wrapper for every contact-us block (including the very last one) */
[id^="contact-us-icons-"].contact-us-icons,
#contact-us-icons-1, #contact-us-icons-2, #contact-us-icons-3,
#contact-us-icons-4, #contact-us-icons-5, #contact-us-icons-6,
#contact-us-icons-7, #contact-us-icons-8, #contact-us-icons-9,
#contact-us-icons-10 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2em !important;           /* nice spacing between icons */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 1.5em 0 !important;
    text-align: center;
}

/* Individual icon images – all instances up to #10+ */
[id^="contact-us-icons-"] .contact-us-icon,
#contact-us-icons-1 .contact-us-icon,
#contact-us-icons-2 .contact-us-icon,
#contact-us-icons-3 .contact-us-icon,
#contact-us-icons-4 .contact-us-icon,
#contact-us-icons-5 .contact-us-icon,
#contact-us-icons-6 .contact-us-icon,
#contact-us-icons-7 .contact-us-icon,
#contact-us-icons-8 .contact-us-icon,
#contact-us-icons-9 .contact-us-icon,
#contact-us-icons-10 .contact-us-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    transition: transform 0.3s ease;
    display: block;
}

[id^="contact-us-icons-"] .contact-us-icon:hover,
#contact-us-icons-1 .contact-us-icon:hover,
#contact-us-icons-2 .contact-us-icon:hover,
#contact-us-icons-3 .contact-us-icon:hover,
#contact-us-icons-4 .contact-us-icon:hover,
#contact-us-icons-5 .contact-us-icon:hover,
#contact-us-icons-6 .contact-us-icon:hover,
#contact-us-icons-7 .contact-us-icon:hover,
#contact-us-icons-8 .contact-us-icon:hover,
#contact-us-icons-9 .contact-us-icon:hover,
#contact-us-icons-10 .contact-us-icon:hover {
    transform: scale(1.15);
}

/* Tooltips – all instances up to #10+ */
[id^="contact-us-icon-link-"] .tooltip,
#contact-us-icon-link-email-1 .tooltip,
#contact-us-icon-link-chat-1 .tooltip,
#contact-us-icon-link-calendar-1 .tooltip,
#contact-us-icon-link-email-2 .tooltip,
#contact-us-icon-link-chat-2 .tooltip,
#contact-us-icon-link-calendar-2 .tooltip,
#contact-us-icon-link-email-3 .tooltip,
#contact-us-icon-link-chat-3 .tooltip,
#contact-us-icon-link-calendar-3 .tooltip,
#contact-us-icon-link-email-4 .tooltip,
#contact-us-icon-link-chat-4 .tooltip,
#contact-us-icon-link-calendar-4 .tooltip,
#contact-us-icon-link-email-5 .tooltip,
#contact-us-icon-link-chat-5 .tooltip,
#contact-us-icon-link-calendar-5 .tooltip,
#contact-us-icon-link-email-6 .tooltip,
#contact-us-icon-link-chat-6 .tooltip,
#contact-us-icon-link-calendar-6 .tooltip,
#contact-us-icon-link-email-7 .tooltip,
#contact-us-icon-link-chat-7 .tooltip,
#contact-us-icon-link-calendar-7 .tooltip,
#contact-us-icon-link-email-8 .tooltip,
#contact-us-icon-link-chat-8 .tooltip,
#contact-us-icon-link-calendar-8 .tooltip,
#contact-us-icon-link-email-9 .tooltip,
#contact-us-icon-link-chat-9 .tooltip,
#contact-us-icon-link-calendar-9 .tooltip,
#contact-us-icon-link-email-10 .tooltip,
#contact-us-icon-link-chat-10 .tooltip,
#contact-us-icon-link-calendar-10 .tooltip {
    visibility: hidden;
    opacity: 0;
    background-color: var(--color-primary);
    color: #FFFFFF;
    font-family: Verdana, sans-serif;
    font-size: calc(13px * var(--lang-font-scale, 1));
    font-weight: 600;
    text-align: center;
    padding: 8px 14px;
    border-radius: 6px;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

[id^="contact-us-icon-link-"]:hover .tooltip,
#contact-us-icon-link-email-1:hover .tooltip,
#contact-us-icon-link-chat-1:hover .tooltip,
#contact-us-icon-link-calendar-1:hover .tooltip,
#contact-us-icon-link-email-2:hover .tooltip,
#contact-us-icon-link-chat-2:hover .tooltip,
#contact-us-icon-link-calendar-2:hover .tooltip,
#contact-us-icon-link-email-3:hover .tooltip,
#contact-us-icon-link-chat-3:hover .tooltip,
#contact-us-icon-link-calendar-3:hover .tooltip,
#contact-us-icon-link-email-4:hover .tooltip,
#contact-us-icon-link-chat-4:hover .tooltip,
#contact-us-icon-link-calendar-4:hover .tooltip,
#contact-us-icon-link-email-5:hover .tooltip,
#contact-us-icon-link-chat-5:hover .tooltip,
#contact-us-icon-link-calendar-5:hover .tooltip,
#contact-us-icon-link-email-6:hover .tooltip,
#contact-us-icon-link-chat-6:hover .tooltip,
#contact-us-icon-link-calendar-6:hover .tooltip,
#contact-us-icon-link-email-7:hover .tooltip,
#contact-us-icon-link-chat-7:hover .tooltip,
#contact-us-icon-link-calendar-7:hover .tooltip,
#contact-us-icon-link-email-8:hover .tooltip,
#contact-us-icon-link-chat-8:hover .tooltip,
#contact-us-icon-link-calendar-8:hover .tooltip,
#contact-us-icon-link-email-9:hover .tooltip,
#contact-us-icon-link-chat-9:hover .tooltip,
#contact-us-icon-link-calendar-9:hover .tooltip,
#contact-us-icon-link-email-10:hover .tooltip,
#contact-us-icon-link-chat-10:hover .tooltip,
#contact-us-icon-link-calendar-10:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Make sure the Elementor container that holds the very last icons doesn’t restrict width */
.elementor-element-806ba85,
.elementor-element[data-id="806ba85"] {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* ===================== CONTACT US BIG BUTTONS (ID-specific) ===================== */

/* FORCE CTA BIG BUTTON STYLING */
a.cta-big-button,
#cta-big-button-1, #cta-big-button-2, #cta-big-button-3, #cta-big-button-4, #cta-big-button-5,
#cta-big-button-6, #cta-big-button-7, #cta-big-button-8, #cta-big-button-9, #cta-big-button-10,
#cta-big-button-11, #cta-big-button-12, #cta-big-button-13, #cta-big-button-14, #cta-big-button-15,
#cta-big-button-16, #cta-big-button-17, #cta-big-button-18, #cta-big-button-19, #cta-big-button-20 {
    display: inline-block !important;
    font-family: "Averia Libre", sans-serif !important;
    font-size: calc(13.5pt * var(--lang-font-scale, 1)) !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background-color: var(--color-highlight) !important; /* 2026-09-27: matches the two_col card borders */
    padding: 0.75em 2.5em !important;
    border-radius: 9999px !important;
    border: 2px solid var(--color-highlight) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-highlight) 40%, transparent) !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
    line-height: 1.4 !important;
    text-align: center !important;
    min-width: 180px !important;
}

/* Hover */
a.cta-big-button:hover,
#cta-big-button-1:hover, #cta-big-button-2:hover, #cta-big-button-3:hover, #cta-big-button-4:hover,
#cta-big-button-5:hover, #cta-big-button-6:hover, #cta-big-button-7:hover, #cta-big-button-8:hover,
#cta-big-button-9:hover, #cta-big-button-10:hover, #cta-big-button-11:hover, #cta-big-button-12:hover,
#cta-big-button-13:hover, #cta-big-button-14:hover, #cta-big-button-15:hover, #cta-big-button-16:hover,
#cta-big-button-17:hover, #cta-big-button-18:hover, #cta-big-button-19:hover, #cta-big-button-20:hover {
    background-color: var(--color-highlight) !important;
    border-color: var(--color-highlight) !important;
    filter: brightness(1.1) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--color-highlight) 50%, transparent) !important;
    color: #FFFFFF !important;
}

/* Wrapper */
.cta-big-button-wrapper,
#cta-big-button-wrapper-1, #cta-big-button-wrapper-2, #cta-big-button-wrapper-3, #cta-big-button-wrapper-4,
#cta-big-button-wrapper-5, #cta-big-button-wrapper-6, #cta-big-button-wrapper-7, #cta-big-button-wrapper-8,
#cta-big-button-wrapper-9, #cta-big-button-wrapper-10, #cta-big-button-wrapper-11, #cta-big-button-wrapper-12,
#cta-big-button-wrapper-13, #cta-big-button-wrapper-14, #cta-big-button-wrapper-15, #cta-big-button-wrapper-16,
#cta-big-button-wrapper-17, #cta-big-button-wrapper-18, #cta-big-button-wrapper-19, #cta-big-button-wrapper-20 {
    width: 100% !important;
    text-align: center !important;
    margin: 30px 0 40px 0 !important;
    padding: 0 !important;
}

/* Download PDFs Button */
#download-pdfs-button-1, #download-pdfs-button-2, #download-pdfs-button-3, #download-pdfs-button-4,
#download-pdfs-button-5, #download-pdfs-button-6, #download-pdfs-button-7, #download-pdfs-button-8,
#download-pdfs-button-9, #download-pdfs-button-10 {
    background-color: var(--color-primary-dark) !important;   /* Dark green */
    border-color: var(--color-primary-dark) !important;
}

#download-pdfs-button-1:hover, #download-pdfs-button-2:hover, #download-pdfs-button-3:hover,
#download-pdfs-button-4:hover, #download-pdfs-button-5:hover, #download-pdfs-button-6:hover,
#download-pdfs-button-7:hover, #download-pdfs-button-8:hover, #download-pdfs-button-9:hover,
#download-pdfs-button-10:hover {
    background-color: var(--color-link) !important;   /* Blue on hover */
    border-color: var(--color-link) !important;
}


/* Responsive tweaks – smaller screens */
@media (max-width: 767px) {
    [id^="contact-us-icons-"].contact-us-icons {
        gap: 1.2em !important;
        padding: 1em 0 !important;
    }
    [id^="contact-us-icons-"] .contact-us-icon {
        width: 46px !important;
        height: 46px !important;
    }
    [id^="contact-us-icon-link-"] .tooltip {
        font-size: calc(11px * var(--lang-font-scale, 1)) !important;
        padding: 6px 10px !important;
    }
    .contact-us-big-button{
        font-size: calc(12.5pt * var(--lang-font-scale, 1)) !important;
        padding: 0.65em 1.8em !important;
        
    }
}

@media (max-width: 480px) {
    [id^="contact-us-icons-"].contact-us-icons {
        gap: 1em !important;
    }
    [id^="contact-us-icons-"] .contact-us-icon {
        width: 42px !important;
        height: 42px !important;
    }
    .contact-us-big-button{
        font-size: calc(12.5pt * var(--lang-font-scale, 1)) !important;
        padding: 0.65em 1.8em !important;
        
    }
}

/* ===================== 2026-09-28 (Syndesi last page) =====================
   The ID rules above use !important, so these add :not(#_) to get ID-level
   specificity and win without depending on the button's counter number.
   Loaded on the web page and inlined into the print/PDF render. */

/* wpautop() can insert <br> inside the button when it sits in another
   shortcode's content; hide them so the button isn't "fat". */
a.cta-big-button br { display: none !important; }

/* Last page: stacked buttons, all the same width. */
.brochure-last-page .cta-big-button-wrapper:not(#_) {
    margin: 14px 0 !important;
}
.brochure-last-page a.cta-big-button:not(#_) {
    width: 15em !important;
    min-width: 0 !important;
    padding: 0.75em 1em !important;
    box-sizing: border-box !important;
}

/* [CTA_big_button audience="employer|employee"] (optional).
   To change a colour later, edit only these two variables; they point at
   the global palette in globals.css. */
:root {
    --cta-employer-color: var(--color-primary);   /* teal */
    --cta-employee-color: var(--color-highlight); /* gold (same as default) */
}
a.cta-big-button.cta-big-button--employer:not(#_) { --cta-color: var(--cta-employer-color); }
a.cta-big-button.cta-big-button--employee:not(#_) { --cta-color: var(--cta-employee-color); }
a.cta-big-button.cta-big-button--employer:not(#_),
a.cta-big-button.cta-big-button--employee:not(#_) {
    background-color: var(--cta-color) !important;
    border-color: var(--cta-color) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cta-color) 40%, transparent) !important;
}
a.cta-big-button.cta-big-button--employer:not(#_):hover,
a.cta-big-button.cta-big-button--employee:not(#_):hover {
    background-color: var(--cta-color) !important;
    border-color: var(--cta-color) !important;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--cta-color) 50%, transparent) !important;
}