/* ══════════════════════════════════════════
   Hover Card Plugin v2.0.1
   All internals use <span> so display:inline-block
   never creates block-level layout leakage.
══════════════════════════════════════════ */

/* WRAPPER — inline-block gives us position:relative */
.hc-wrap {
    position: relative !important;
    display: inline-block !important;
    vertical-align: baseline !important;
    line-height: inherit !important;
    cursor: default;
    margin: 0 !important;
    padding: 0 !important;
}


span.hc-tagsblue {
    display: flex !important;
    align-items: center !important;
}


/* TRIGGER WORD — frontend: coloured underline per theme */
.hc-trigger {
    display: inline !important;
    border-bottom: 1.5px solid;
    padding-bottom: 1px;
    /* cursor: help; */
    line-height: inherit !important;
}

    .hc-card {
        background: #fff !important;
        border-color: #2c3a384a !important;
    }

/* Frontend color themes */
.hc-trigger-teal   { color: #0A7A6E; border-color: #0BAFA0; }
.hc-trigger-blue   { color: #185FA5; border-color: #378ADD; }
.hc-trigger-green  { color: #3B6D11; border-color: #639922; }
.hc-trigger-purple { color: #534AB7; border-color: #7F77DD; }
.hc-trigger-amber  { color: #854F0B; border-color: #BA7517; }
.hc-trigger-coral  { color: #993C1D; border-color: #D85A30; }

/* ──────────────────────────────────────────
   CARD SHELL
   • position:absolute takes it out of flow
   • display:block (inside absolute it is fine — no flow impact)
   • visibility toggle so children never paint outside
────────────────────────────────────────── */
.hc-card {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    position: absolute !important;
    display: block !important;       /* block is fine — absolute removes from flow */
    bottom: calc(100% + 4px) !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;

    background: #ffffff !important;
    border: 1px solid #e2e0da !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #1a1a18 !important;
    text-align: left !important;
    white-space: normal !important;
    float: none !important;

    transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* Arrow — default: points DOWN (card is above trigger) */
.hc-card::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 8px solid transparent !important;
    border-top-color: #0BAFA0 !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
}
.hc-card::before {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 9px solid transparent !important;
    border-top-color: #e2e0da !important;
    margin-top: 1px !important;
    display: block !important;
    padding: 0 !important;
}

/* Arrow — flipped: points UP (card is below trigger) */
.hc-card[data-flip="down"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-top-color: transparent !important;
    border-bottom-color: #0BAFA0 !important;
    margin-top: 0 !important;
}
.hc-card[data-flip="down"]::before {
    top: auto !important;
    bottom: 100% !important;
    border-top-color: transparent !important;
    border-bottom-color: #e2e0da !important;
    margin-top: 0 !important;
    margin-bottom: 1px !important;
}

/* SHOW on hover/focus */
.hc-wrap:hover .hc-card,
.hc-wrap:focus .hc-card,
.hc-wrap:focus-within .hc-card {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ──────────────────────────────────────────
   INNER WRAPPER — padding lives here
────────────────────────────────────────── */
.hc-card-inner {
    display: block !important;
    padding: 14px 14px 14px 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ──────────────────────────────────────────
   HEAD ROW
────────────────────────────────────────── */
.hc-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 0 17px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.hc-logo {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    margin: 0 !important; padding: 0 !important;
}

.hc-logo-img-wrap {
    display: inline-block !important;
    width: 42px !important; height: 42px !important;
    margin: 0 !important; padding: 0 !important;
}

.hc-logo-img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

.hc-logo-initials {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    margin: 0 !important; padding: 0 !important;
    box-sizing: border-box !important;
}

.hc-color-teal   { background: #D5F2EF !important; color: #0A7A6E !important; }
.hc-color-blue   { background: #E6F1FB !important; color: #185FA5 !important; }
.hc-color-green  { background: #EAF3DE !important; color: #3B6D11 !important; }
.hc-color-purple { background: #EEEDFE !important; color: #534AB7 !important; }
.hc-color-amber  { background: #FAEEDA !important; color: #854F0B !important; }
.hc-color-coral  { background: #FAECE7 !important; color: #993C1D !important; }

.hc-head-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
}

.hc-title {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a18 !important;
    line-height: 1.25 !important;
    margin: 0 !important; padding: 0 !important;
}

/* TAGS */
.hc-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 0 !important; padding: 0 !important;
}

.hc-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.hc-tag-teal   { background: #D5F2EF !important; color: #0A7A6E !important; }
.hc-tag-blue   { background: #E6F1FB !important; color: #185FA5 !important; }
.hc-tag-green  { background: #EAF3DE !important; color: #3B6D11 !important; }
.hc-tag-purple { background: #EEEDFE !important; color: #534AB7 !important; }
.hc-tag-amber  { background: #FAEEDA !important; color: #854F0B !important; }
.hc-tag-coral  { background: #FAECE7 !important; color: #993C1D !important; }

/* LOCATION */
.hc-location {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    color: #4a4a46 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
}

    .hc-location {
        color: rgb(10, 160, 171) !important;
    font-size: 11px !important;
    padding: 2px 10px !important;
    border: 1px solid rgb(10 160 171 / 54%);
    background: rgb(10 160 171 / 9%) !important;
    border-radius: 20px;
    }

.hc-location-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #0BAFA0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important; padding: 0 !important;
}

/* SUB-LOCATION */
.hc-subloc {
    display: block !important;
    font-size: 12px !important;
    color: #4a4a46 !important;
    line-height: 1.5 !important;
    margin: 8px 0 11px 0 !important;
    padding-top: 11px !important;
    /* font-style: italic !important; */
    border-top: 1px solid #e1e1e1 !important;
}

.hc-subloc{
    display: flex !important;
    align-items: center;
    /* justify-content: center; */
}

.hc-subloc img{
    width: 7px;
    margin-right: 8px;
}

/* DESCRIPTION */
.hc-desc {
    display: block !important;
    font-size: 12px !important;
    color: #4a4a46 !important;
    line-height: 1.65 !important;
    margin: 0 0 10px 0 !important;
    /* padding: 0 !important; */
    border-top: 1px solid #e1e1e1;
    padding-top: 13px;
}

/* EXTRA WIDGET ROW */
.hc-extra {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #edecea !important;
    border-bottom: 1px solid #e1e1e1 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;

}

.hc-extra-label {
    display: inline-block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    color: #9c9a92 !important;
    text-transform: uppercase !important;
    margin: 0 !important; padding: 0 !important;
}

.hc-extra-value {
    display: inline-block !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    color: rgb(10, 160, 171) !important;
    font-size: 12px !important;
    padding: 2px 10px !important;
    border: 1px solid rgb(10 160 171 / 54%);
    background: rgb(10 160 171 / 9%) !important;
    border-radius: 20px;
}

/* VIEW FULL PROFILE BUTTON */
.hc-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #0BAFA0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 11px 14px !important;
    margin: 6px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 12px !important;
    line-height: 1 !important;
    transition: background 0.15s ease;
    cursor: pointer;
}
.hc-link:hover,
.hc-link:focus {
    background: #099487 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.hc-link-arrow {
    font-size: 15px !important;
    opacity: 0.9;
}
.hc-d-flex-card{
    display: flex;
    align-items: center;
    gap: 10px;
}
.hc-tagsteal{
    display: flex;
    justify-content: center;
    align-items: center;
}

.hc-tags img{
    font-size: 10px;
    height: 10px;
    width: 10px;
}

.hc-tags img {
    font-size: 12px;
    height: 10px;
    width: 12px;
    margin-right: 5px;
}

.hc-tags{
    color: rgb(74 74 74) !important;
    font-size: 11px !important;
    padding: 2px 10px !important;
    border: 1px solid rgb(74 74 74 / 48%) !important;
    background: rgb(74 74 74 / 5%) !important;
    border-radius: 20px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .hc-card         { background: #fff !important; border-color: #2c3a3825 !important; }
    .hc-card::before { border-top-color: #2c3a38 !important; }
    .hc-title        { color: #000 !important; }
    .hc-desc         { color: #4a4a46 !important; }
    .hc-extra        { border-top-color: #e1e1e1 !important; }
    .hc-extra-label  { color: #6a6860 !important; }
}

/* Small screens */
@media (max-width: 480px) {
    .hc-card {
        width: 325px !important;
        min-width: 325px !important;
        max-width: 325px !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* ──────────────────────────────────────────
   EDITOR ONLY: hc-trigger spans with data-color
   attributes are the raw unhydrated format spans
   that only exist in the Gutenberg editor.
   Show them as blue underlined links so editors
   can easily recognise hovercard-linked text.
   These rules have NO effect on the frontend
   because hydration replaces data-color spans
   with hc-trigger-{color} class spans.
────────────────────────────────────────── */
.hc-trigger[data-color="teal"],
.hc-trigger[data-color="blue"],
.hc-trigger[data-color="green"],
.hc-trigger[data-color="purple"],
.hc-trigger[data-color="amber"],
.hc-trigger[data-color="coral"],
.hc-trigger:not([class*="hc-trigger-"]) {
    color: #1a6ef5 !important;
    border-bottom: none !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-thickness: 1px !important;
    cursor: pointer !important;
}