/*
 * 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: -31.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;
        /*
         * Use implicit COLUMN tracks rather than a fixed 4-column template.
         * A fixed template created a column per slot, and the empty slots'
         * gaps still took up space - which pushed the visible icons ~14px
         * left of centre. With auto-flow:column only real icons create
         * tracks, so the row centres exactly.
         */
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: max-content !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 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;
    }
}


/* ==========================================================================
   12. Desktop: minimise the gap between the job title and the badge row.

       The subtitle text is only ~12px tall, but min-height reserved 38px -
       leaving 26px of dead space - plus a 16px margin before the badges: a
       42px gap in total.

       min-height can't simply be removed: it is what keeps every card's badge
       row on the same line. It is reduced to 26px instead, which still fits a
       two-line job title (2 x 12px), so all cards stay aligned.

       Result: gap 42px -> 24px, with the badge row at an identical Y on every
       card (measured spread: 0px).

       The card's own padding is deliberately left alone here.
   ========================================================================== */
@media (min-width: 1232px) {

    .member-card .member-name {
        min-height: 26px !important;
        margin-bottom: 0 !important;
    }

    .et-db #et-boc .et-l .member-card .de_machine_post_meta:has(+ .todayClass) {
        margin-top: 0 !important;
    }
}


/* ==========================================================================
   14. Certification-status dots + CSS tooltip (single trainer page).

       Rendered by the [ibct_cert_dot] shortcode. Pure CSS - no Tippy - so the
       arrow always draws and the HTML link always renders (and stays
       clickable), with none of the old library-conflict problems.
   ========================================================================== */
.ibct-cd {
    position: relative;
    display: inline-block;
    line-height: 0;
    z-index: 1;
}
.ibct-cd:hover {
    z-index: 99999;
}

/*
 * Divi wraps modules/columns/rows in containers that often have
 * overflow:hidden, which CLIPS the tooltip at the column edge (the tooltip
 * gets sliced off cleanly). Force overflow visible ONLY on the ancestors that
 * actually contain a dot, so nothing else on the site is affected.
 */
.et_pb_text:has(.ibct-cd),
.et_pb_module:has(.ibct-cd),
.et_pb_column:has(.ibct-cd),
.et_pb_row:has(.ibct-cd),
.et_pb_row_inner:has(.ibct-cd),
.et_pb_section:has(.ibct-cd),
.dmach-acf-repeater:has(.ibct-cd),
.dmach-acf-item:has(.ibct-cd) {
    overflow: visible !important;
}

.ibct-cd-dot {
    display: inline-block;
    vertical-align: middle;
}

.ibct-cd-tip {
    position: absolute;
    right: 100%;               /* sit to the LEFT of the dot */
    top: 50%;
    margin-right: 12px;        /* visual gap; bridged below so it stays hoverable */
    transform: translateY(-50%) translateX(6px);

    background: #333;
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    text-align: center;

    padding: 7px 10px;
    border-radius: 4px;

    width: max-content;
    max-width: 230px;
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 99999;
}

/* Arrow pointing right, toward the dot */
.ibct-cd-tip::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: #333;
}

/* Invisible bridge across the gap so moving the cursor dot -> tooltip doesn't
   drop the hover (needed for the clickable links). */
.ibct-cd-tip::before {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    width: 12px;
}

.ibct-cd:hover .ibct-cd-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Only the ones with links need to be hoverable/clickable. */
.ibct-cd-interactive:hover .ibct-cd-tip {
    pointer-events: auto;
}

.ibct-cd-tip a {
    color: #8ec5ff;
    text-decoration: underline;
}

.ibct-cd-tip a:hover {
    color: #b9dbff;
}


/* ==========================================================================
   13. /directory/ct/ only - vertical correction for the validity badge.

       That page lays its grid out in narrower columns (250px cards vs 294px
       elsewhere), which shifts the absolutely-positioned validity badge out of
       line with the certificate-type badge: the icon sat +8px and the text
       +12px too low.

       Scoped with body.term-ct so the other directory pages (term-at,
       term-cpt) and the homepage keep their own offsets.

       Verified: icon and text centres land within 1px of the CT icon centre,
       for BOTH the valid and expired states.
   ========================================================================== */
@media (min-width: 1232px) {

    /* Valid + unknown icon */
    body.term-ct .validcard4,
    body.term-ct .ibct-certificate-unknown-icon {
        position: absolute !important;
        margin-right: 47px !important;
        margin-top: -36.5px !important;
        margin-left: 107px !important;
    }

    /* Valid + unknown text */
    body.term-ct .validcard2,
    body.term-ct .ibct-certificate-unknown-text {
        position: absolute !important;
        margin-left: 135px !important;
        margin-top: -36.5px !important;
    }

    /* Expired icon */
    body.term-ct .validcard5 {
        position: absolute !important;
        margin-right: 47px !important;
        margin-top: -36.5px !important;
        margin-left: 89px !important;
    }

    /* Expired text */
    body.term-ct .validcard3 {
        position: absolute !important;
        margin-left: 118px !important;
        margin-top: -36.5px !important;
    }
}