/* Basic styles for Team Map plugin */
.tm_wrapper { width:100%; }
.tm_image_wrap { position: relative; }
.tm_image { width: 100%; padding-top: 56.25%; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; }
.tm_image .tm_dot {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /* remove border/outline so dot is a pure color */
    box-shadow: none;
    z-index: 2;
}

.tm_image .tm_dot::after {
    /* pulsing ring that matches the dot color (inherits background-color)
       uses a larger element behind the dot so the dot remains crisp */
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
    animation: tm-pulse 1.8s infinite ease-out;
}

.tm_image .tm_dot:hover { transform: translate(-50%, -50%) scale(1.15); }
.tm_cards { display: none; margin-top: 16px; }
.tm_card { display: flex; gap: 12px; background: #fff; border-radius: 8px; padding: 12px; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border-left: 6px solid var(--accent, #2b90d9); margin-bottom: 10px; }
.tm_card_headshot { width: 64px; height:64px; object-fit:cover; border-radius:50%; }
.tm_card_name { margin: 0; font-size: 2rem; }
.tm_card_title { color: #666; font-size: 1.5rem; }
.tm_card_bio { margin-top: 6px; color: #444; font-size: 1.3rem; }

/* tooltip */
.tm_tooltip { position: absolute; background: #fff; border: 1px solid #ddd; padding: 8px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); z-index: 9999; max-width: 40rem; }
.tm_tooltip h4 { margin: 0 0 4px 0; font-size: 2rem; }
.tm_tooltip .title { color: #666; font-size: 1.5rem; margin-bottom: 6px; }
.tm_tooltip .bio { font-size: 1.3rem; color: #333; }

/* admin area small helpers */
.tm_member_row { background: #fff; border: 1px solid #eee; padding:12px; margin-bottom:12px; }
.tm_member_row h3 { margin: 0 0 8px 0; display:flex; gap:8px; align-items:center; }

/* pulsing keyframes for dot effect */
@keyframes tm-pulse {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1); opacity: 0.15; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* Responsive behavior */
@media (max-width: 768px) {
    /* Keep the main image visible on mobile and show the cards underneath */
    .tm_image { display: block; padding-top: 75%; /* allow taller image on narrow screens */ }
    .tm_cards {     
        grid-template-columns: repeat(1,1fr);
        display: grid; 
        gap: 12px;
    }
    .tm_card { align-items: flex-start; }
    /* slightly larger dots for touch interaction */
    .tm_image .tm_dot { width: 10px; height: 10px; }
    .tm_image .tm_dot::after { width: 30px; height: 30px; }
    /* ensure tooltip positioning works on stacked layout */
    /* keep .tm_tooltip as absolute so JS can position it relative to document */
}

/* admin preview dots (shown in admin image preview) */
.tm_admin_dot {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: default;
    box-shadow: none;
    z-index: 999;
    pointer-events: none;
}

.tm_admin_dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
}

/* admin tabs */
#tm_members_tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.tm_tab_button { background:#f3f3f3; border:1px solid #e1e1e1; padding:6px 10px; border-radius:4px; cursor:pointer; }
.tm_tab_button.active { background:#fff; border-bottom:2px solid var(--accent, #2b90d9); }