/*
 * IBCT Certificate Badge Fix - styles (moved into the plugin).
 *
 * This is the full content of the old global.tooltip-style.css, plus a small
 * "hide until ready" rule so no wrong/placeholder badge can flash before the
 * plugin draws the correct one. You can delete the standalone
 * global.tooltip-style.css file - the plugin loads this instead.
 *
 * Compatibility:
 * - Older Tippy.js markup (.tippy-tooltip)
 * - Newer Tippy.js markup (.tippy-box)
 */


/* ==========================================================================
   0. No-flash: keep the badge slot invisible until the plugin fills it.
   ========================================================================== */
.todayClass .dmach-acf-value:not(.ibct-ready) {
    visibility: hidden;
}


/* ==========================================================================
   1. Certificate badge positioning and colors
   ========================================================================== */

/* Valid/expired/unknown ID-card icons */
.validcard4,
.validcard5,
.ibct-certificate-unknown-icon {
    font-size: 20px;
    margin-right: 6.5px;
    margin-bottom: 10px !important;
    color: #242484;
}

/* Status text */
.validcard2,
.validcard3,
.ibct-certificate-unknown-text {
    position: absolute;
    margin-top: 4px !important;
}

.validcard2 {
    color: green;
}

.validcard3 {
    color: red;
}

.ibct-certificate-unknown-text {
    color: #666;
}


/* Desktop positioning */
@media (min-width: 1232px) {

    /* Valid */
    .validcard4 {
        position: absolute !important;
        margin-right: 47px !important;
        margin-top: -31.5px !important;
        margin-left: 107px !important;
    }

    .validcard2 {
        position: absolute !important;
        margin-left: 135px !important;
        margin-top: -30.5px !important;
    }

    /* Expired */
    .validcard5 {
        position: absolute !important;
        margin-right: 47px !important;
        margin-top: -31.5px !important;
        margin-left: 89px !important;
    }

    .validcard3 {
        position: absolute !important;
        margin-left: 118px !important;
        margin-top: -30.5px !important;
    }

    /* Unknown - uses the valid-state alignment */
    .ibct-certificate-unknown-icon {
        position: absolute !important;
        margin-right: 47px !important;
        margin-top: -31.5px !important;
        margin-left: 107px !important;
    }

    .ibct-certificate-unknown-text {
        position: absolute !important;
        margin-left: 135px !important;
        margin-top: -27.5px !important;
    }
}


/* ==========================================================================
   2. Tippy tooltip base formatting
   ========================================================================== */

/* Older Tippy versions */
.tippy-tooltip {
    text-align: center;
}

/* Newer Tippy versions */
.tippy-box .tippy-content {
    text-align: center;
}


/* ==========================================================================
   3. Tooltip themes - older Tippy.js markup
   ========================================================================== */

/* Expired - top */
.tippy-tooltip.tomato-theme {
    color: #fff;
    background-color: red;
}

/* Valid - top */
.tippy-tooltip.valid-theme {
    color: #fff;
    background-color: green;
}

/* Expired - left/card icon */
.tippy-tooltip.tomatoCard-theme {
    color: #fff;
    background-color: red;
}

/* Valid - left/card icon */
.tippy-tooltip.validCard-theme {
    color: #fff;
    background-color: green;
}

/* Unknown */
.tippy-tooltip.unknown-theme,
.tippy-tooltip.unknownCard-theme {
    color: #fff;
    background-color: #666;
}


/* Older Tippy arrow colors */
.tippy-tooltip.tomato-theme[data-placement^='top'] .tippy-arrow {
    border-top-color: red;
}

.tippy-tooltip.valid-theme[data-placement^='top'] .tippy-arrow {
    border-top-color: green;
}

.tippy-tooltip.tomatoCard-theme[data-placement^='left'] .tippy-arrow {
    border-left-color: red;
}

.tippy-tooltip.validCard-theme[data-placement^='left'] .tippy-arrow {
    border-left-color: green;
}

.tippy-tooltip.unknown-theme[data-placement^='top'] .tippy-arrow {
    border-top-color: #666;
}

.tippy-tooltip.unknownCard-theme[data-placement^='left'] .tippy-arrow {
    border-left-color: #666;
}


/* ==========================================================================
   4. Tooltip themes - newer Tippy.js markup
   ========================================================================== */

/* Expired */
.tippy-box[data-theme~='tomato'],
.tippy-box[data-theme~='tomatoCard'] {
    color: #fff;
    background-color: red;
}

/* Valid */
.tippy-box[data-theme~='valid'],
.tippy-box[data-theme~='validCard'] {
    color: #fff;
    background-color: green;
}

/* Unknown */
.tippy-box[data-theme~='unknown'],
.tippy-box[data-theme~='unknownCard'] {
    color: #fff;
    background-color: #666;
}


/* Newer Tippy arrow colors - top */
.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: red;
}

.tippy-box[data-theme~='valid'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: green;
}

.tippy-box[data-theme~='unknown'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #666;
}


/* Newer Tippy arrow colors - left */
.tippy-box[data-theme~='tomatoCard'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: red;
}

.tippy-box[data-theme~='validCard'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: green;
}

.tippy-box[data-theme~='unknownCard'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #666;
}


/* ==========================================================================
   5. "Tada" animation for expired certificates
   ========================================================================== */

@keyframes tada {
    0% {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}


/* Older Tippy markup */
.tippy-tooltip[data-animation='tada'][data-state='visible'],
.tippy-tooltip[data-animation='tada'][data-state='hidden'] {
    animation: tada 1s;
}


/* Newer Tippy markup */
.tippy-box[data-animation='tada'][data-state='visible'],
.tippy-box[data-animation='tada'][data-state='hidden'] {
    animation: tada 1s;
}


/* ==========================================================================
   6. "Scale" animation (ease in / ease out) for valid + unknown tooltips.
      Tippy's core CSS moves opacity/transform on show/hide, but the transform-
      origin and hidden-state transform for the "scale" animation live in a
      separate Tippy stylesheet that isn't loaded here. Without them the valid
      tooltips just pop in. These rules restore the smooth ease in/out.
   ========================================================================== */

.tippy-box[data-animation='scale'] {
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tippy-box[data-animation='scale'][data-placement^='top'] {
    transform-origin: bottom;
}

.tippy-box[data-animation='scale'][data-placement^='bottom'] {
    transform-origin: top;
}

.tippy-box[data-animation='scale'][data-placement^='left'] {
    transform-origin: right;
}

.tippy-box[data-animation='scale'][data-placement^='right'] {
    transform-origin: left;
}

.tippy-box[data-animation='scale'][data-state='hidden'] {
    transform: scale(0.5);
    opacity: 0;
}

/* Older Tippy markup fallback */
.tippy-tooltip[data-animation='scale'] {
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tippy-tooltip[data-animation='scale'][data-state='hidden'] {
    transform: scale(0.5);
    opacity: 0;
}


/* ==========================================================================
   7. Mobile / tablet: tighten the trainer card so it isn't so tall.
      Scoped to .member-card and to screens below the desktop breakpoint
      (desktop layout at min-width:1232px is left untouched).
   ========================================================================== */
@media (max-width: 1231px) {

    /* Trim the card's own top/bottom padding. */
    .member-card {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .member-card .et_pb_row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .member-card .flip-image-thumbnail {
        margin-bottom: 6px !important;
    }

    /*
     * Social icons block was the biggest space waster: Divi renders it as a
     * 1-column grid on mobile so the icons stack vertically, and it forces each
     * item to width:100% via a high-specificity ID rule. We change the grid to
     * place the icons side by side in a centered row. The selector is prefixed
     * with ".et-db #et-boc .et-l" to match Divi's specificity so it wins.
     */
    .et-db #et-boc .et-l .member-card .members-social-icons .grid-posts {
        display: grid !important;
        grid-template-columns: repeat(4, max-content) !important;
        grid-auto-flow: row !important;
        justify-content: center !important;
        gap: 8px 14px !important;
    }

    .et-db #et-boc .et-l .member-card .members-social-icons .grid-posts > .et_pb_de_mach_acf_item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .member-card .members-social-icons .et_pb_de_mach_archive_loop {
        margin-bottom: 0 !important;
    }

    .member-card .de_machine_repeater {
        margin-top: 2px !important;
        margin-bottom: 6px !important;
    }

    /* Bottom cluster: certificate type, validity badge, country. */
    .member-card .de_machine_post_meta {
        margin-bottom: 6px !important;
    }

    .member-card .todayClass {
        margin-bottom: 6px !important;
    }

    /* Remove Divi's grid-alignment min-height on the subtitle (it reserved
       ~50px even for a one-line job title) and give it a small, even gap. The
       natural margin below the name already provides breathing space. */
    .et-db #et-boc .et-l .member-card .et_pb_column .et_pb_de_mach_acf_item.member-name {
        min-height: 0 !important;
        margin-bottom: 10px !important;
    }
    .member-card .member-name .et_pb_module_inner {
        padding-top: 0 !important;
    }

    /* Validity badge flows inline on mobile so it reads as a clean icon+text
       unit (on desktop it stays absolutely positioned over the photo). */
    .member-card .validcard2,
    .member-card .validcard3,
    .member-card .ibct-certificate-unknown-text {
        position: static !important;
        margin: 0 0 0 3px !important;
    }
    .member-card .validcard4,
    .member-card .validcard5,
    .member-card .ibct-certificate-unknown-icon {
        margin-bottom: 0 !important;
    }

    /* Certificate type (AT/CPT/CT) and the validity badge on ONE centered row.
       We target the certificate-type module as "the post_meta immediately
       before the validity slot" via :has(), so it works whether the module
       class carries the Theme-Builder _tb_body suffix (archive pages) or not
       (homepage grid), and regardless of its numeric index. The #et-boc prefix
       is needed to beat Divi's width:100% ID rule.
       (Browsers without :has() simply leave the two badges stacked.) */
    .member-card .et_pb_column {
        text-align: center !important;
    }
    .et-db #et-boc .et-l .member-card .de_machine_post_meta:has(+ .todayClass),
    .et-db #et-boc .et-l .member-card .et_pb_column > .todayClass {
        display: inline-block !important;
        width: auto !important;
        vertical-align: middle !important;
        margin: 0 10px 6px !important;
    }
}


/* ==========================================================================
   8. Phones: make the card a narrower portrait rectangle, centered.
   ========================================================================== */
@media (max-width: 767px) {
    .member-card {
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ==========================================================================
   9. Misc site styles moved out of the homepage Custom CSS so the plugin is
      the single source (DSM typing-effect heading spacing). Site-wide.
   ========================================================================== */
.dsm_typing_effect_0 .dsm-typing-effect .dsm-typing-wrapper,
.dsm_typing_effect_1 .dsm-typing-effect .dsm-typing-wrapper {
    margin-right: 12px;
}


/* ==========================================================================
   10. Inline SVG id-card icon (mobile/tablet only).
       Font Awesome doesn't render reliably on some phones, which made the
       Valid/Expired id-card icon disappear. The script draws an inline SVG
       there instead; desktop still uses the Font Awesome glyph.
   ========================================================================== */
.validcard4 .ibct-idcard-svg,
.validcard5 .ibct-idcard-svg,
.ibct-certificate-unknown-icon .ibct-idcard-svg {
    vertical-align: -0.15em;
}


/* ==========================================================================
   11. Divi Machine "Custom CSS" moved into the plugin so there is a single
       source of truth. Delete it from the Divi Machine settings field.

       ONE behavioural change vs. the original: the "@media (hover: none)"
       block used to FORCE the social icons visible on every touch device
       (which is why they always showed on phones/tablets). They now stay
       hidden and only appear on hover, as intended.
   ========================================================================== */

/* Hide default Divi footer */
#main-footer {
    display: none;
}

/* Member card base - keep sizing and positioning predictable */
.member-card {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.member-card *,
.member-card *::before,
.member-card *::after {
    box-sizing: border-box;
}

/* Member images - preserve original proportions, no forced cropping */
.member-card img.featured-image.wp-post-image,
.member-card .secondary-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Social icons container - hidden until the card is hovered */
.member-card .members-social-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px;
    line-height: 1;
    opacity: 0 !important;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
    pointer-events: none;
}

.member-card .members-social-icons > * {
    margin: 0 !important;
    align-self: center !important;
}

.member-card .members-social-icons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0;
    line-height: 1 !important;
    vertical-align: middle;
}

/* Show social icons on card hover */
.member-card:hover .members-social-icons {
    opacity: 1 !important;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Member name area */
.member-card .member-name {
    min-height: 38px;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.member-card:hover .member-name {
    transform: translateY(-5px);
}

/* Member / post title - compact typography and long-name protection */
.entry-title.de_title_module.dmach-post-title {
    font-size: 19px !important;
    line-height: 1.15 !important;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Social icon sizing and alignment */
.member-card .dmach-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 25px;
    line-height: 1 !important;
    vertical-align: middle;
    transform: translateY(0) scale(1);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.member-card .dmach-icon:hover {
    transform: translateY(-2px) scale(1.15);
}

/* Single member page */
.single-member .dmach-icon {
    text-align: left;
}

/* Social links - stable hover without changing dimensions */
.social-link a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 20px;
    border-radius: 5px;
    transform: translateX(0);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.social-link a:hover {
    transform: translateX(8px);
    box-shadow: 0 2px 10px rgb(0 0 0 / 13%);
}

/* Responsive title size */
@media (max-width: 1231px) {
    .entry-title.de_title_module.dmach-post-title {
        font-size: 14px !important;
    }
}

/*
 * Touch devices: keep the social icons HIDDEN (they used to be forced visible
 * here). They reveal on hover, and most mobile browsers apply :hover on tap.
 * The space stays reserved so the card doesn't jump when they appear.
 */
@media (hover: none) {
    .member-card .members-social-icons {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(20px) !important;
        pointer-events: none !important;
    }

    .member-card:hover .members-social-icons {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .member-card .members-social-icons,
    .member-card .member-name,
    .member-card .dmach-icon,
    .social-link a {
        transition: none;
    }
}