/* ============================================
   INITIALISE Interactive Partners Map
   ============================================ */


/* ── Shortcode wrapper ───────────────────── */
.initialise-partners-map-wrap {
    max-width:   100%;
    margin:      0 0 40px 0;
    font-family: var(--ff-sans-normal, 'Lato', sans-serif);
}


/* ── Header ──────────────────────────────── */
.partners-map-header {
    text-align:    center;
    padding:       40px 30px 30px;
    background:    linear-gradient(135deg, var(--clr-blue, #0273b0) 0%, #013d5e 100%);
    /* border-radius: 14px; */
    margin-bottom: 20px;
    color:         #fff;
    position: relative;
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-direction: column;
}

.partners-map-title {
    font-family:   var(--ff-serif, 'Montserrat', serif);
    font-size:     var(--fs-600, 1.6rem);
    font-weight:   700;
    color:         #fff;
    margin:        0 0 8px 0;
}

.partners-map-subtitle {
    font-size: var(--fs-200, 1.2rem);
    color:     rgba(255, 255, 255, 0.85);
    margin:    0 0 24px 0;
}


/* ── Stats bar ───────────────────────────── */
.partners-stats-bar {
    display:         flex;
    justify-content: center;
    gap:             16px;
    flex-wrap:       wrap;
}

.partner-stat-item {
    text-align:    center;
    background:    rgba(255, 255, 255, 0.15);
    border:        1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding:       14px 24px;
    min-width:     90px;
    backdrop-filter: blur(4px);
}

.stat-num {
    display:     block;
    font-family: var(--ff-serif, 'Montserrat', serif);
    font-size:   var(--fs-700, 1.7rem);
    font-weight: 700;
    color:       #fff;
    line-height: 1;
}

.stat-lab {
    display:        block;
    font-size:      var(--fs-50, 0.7rem);
    color:          rgba(255, 255, 255, 0.8);
    margin-top:     5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ── Partner dots nav ────────────────────── */
.partner-dots-nav {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    justify-content: center;
    margin-bottom:   16px;
}

.partner-dot {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    padding:      7px 14px;
    background:   #fff;
    border:       1px solid rgba(2, 115, 176, 0.25);
    border-radius: 30px;
    font-size:    var(--fs-50, 0.7rem);
    font-weight:  700;
    color:        var(--clr-blue, #0273b0);
    cursor:       pointer;
    transition:   all 0.2s ease;
    font-family:  var(--ff-sans-normal, inherit);
}

.partner-dot:hover {
    background:  var(--clr-blue, #0273b0);
    color:       #fff;
    transform:   translateY(-2px);
    box-shadow:  0 4px 10px rgba(2, 115, 176, 0.3);
}

.partner-dot.active {
    background:   var(--clr-orange, #f29102);
    border-color: var(--clr-orange, #f29102);
    color:        #fff;
    transform:    translateY(-2px);
    box-shadow:   0 4px 10px rgba(242, 145, 2, 0.3);
}

.partner-dot-all {
    background:  var(--clr-light, #f6fafc);
    border-color: #ccc;
    color:       #666;
}

.partner-dot-all:hover {
    background:  #cc0000;
    border-color: #cc0000;
    color:       #fff;
}

.partner-dot-flag {
    font-size: 1.1em;
    line-height: 1;
}


/* ── Active filter banner ────────────────── */
.partners-active-banner {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    flex-wrap:     wrap;
    gap:           10px;
    padding:       14px 20px;
    background:    rgba(242, 145, 2, 0.08);
    border:        1px solid rgba(242, 145, 2, 0.3);
    border-left:   5px solid var(--clr-orange, #f29102);
    border-radius: 0 10px 10px 0;
    margin-bottom: 20px;
    animation:     bannerSlideIn 0.3s ease;
}

@keyframes bannerSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.active-banner-text {
    font-size: var(--fs-200, 1.2rem);
    color:     var(--clr-dark, #1c1c1a);
}

.partners-clear-btn {
    background:    var(--clr-orange, #f29102);
    color:         #fff;
    border:        none;
    padding:       7px 16px;
    border-radius: 6px;
    font-size:     var(--fs-100, 0.9rem);
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.2s ease;
    font-family:   var(--ff-sans-normal, inherit);
}

.partners-clear-btn:hover {
    background: #d17d00;
}


/* ── Floating map tooltip ────────────────── */
.map-region-tooltip {
    position:   absolute;
    z-index:    9999;
    pointer-events: none;

    background:    rgba(1, 28, 51, 0.94);
    color:         #fff;
    padding:       12px 16px;
    border-radius: 10px;
    font-size:     var(--fs-100, 0.9rem);
    font-family:   var(--ff-sans-normal, inherit);
    max-width:     260px;
    box-shadow:    0 6px 20px rgba(0, 0, 0, 0.3);
    border:        1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);

    /* Arrow */
    transform: translateX(-50%);
}

.map-region-tooltip::after {
    content:       '';
    position:      absolute;
    top:           100%;
    left:          50%;
    transform:     translateX(-50%);
    border:        6px solid transparent;
    border-top-color: rgba(1, 28, 51, 0.94);
}

.tooltip-header {
    font-size:     var(--fs-50, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:         rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.tooltip-partner-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.4;
}

.tooltip-partner-row:last-child {
    border-bottom: none;
}

.tooltip-flag {
    font-size: 1.1em;
    flex-shrink: 0;
}

.tooltip-name {
    font-size: var(--fs-100, 0.9rem);
    color:     #fff;
}

.tooltip-click-hint {
    display:    block;
    margin-top: 8px;
    font-size:  var(--fs-50, 0.7rem);
    color:      rgba(255, 255, 255, 0.5);
    text-align: center;
}


/* ============================================
   SVG MAP - applied to existing SVG on page
   ============================================ */

/* Wrapper added by JS around SVG */
.map-svg-wrapper {
    position: relative;
    width:    100%;
}

.map-svg-wrapper svg {
    width:   100%;
    height:  auto;
    display: block;
}

/* Interactive regions */
.map-interactive-link {
    cursor: pointer;
    outline: none;
}

.map-interactive-link path {
    transition: filter 0.2s ease;
}

/* Hover state (JS sets fill directly due to inline style conflict) */
.map-interactive-link:hover path,
.map-interactive-link.region-hovered path {
    filter: brightness(1.3) drop-shadow(0 0 4px rgba(242, 145, 2, 0.6));
}

/* Active/selected state */
.map-interactive-link.region-active path {
    filter: brightness(1.3) drop-shadow(0 0 6px rgba(242, 145, 2, 0.8));
}

/* Pulse animation for interactive regions on page load */
@keyframes mapPulse {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.3) drop-shadow(0 0 6px rgba(242, 145, 2, 0.5)); }
    100% { filter: brightness(1); }
}

.map-interactive-link.pulse-intro path {
    animation: mapPulse 1s ease-in-out;
}


/* ============================================
   PARTNER BLOCKS (existing Gantry g-blocks)
   ============================================ */

/* Base state - added by JS to all partner blocks */
.partner-interactive-block {
    transition:  opacity      0.35s ease,
                 box-shadow   0.35s ease,
                 transform    0.35s ease,
                 filter       0.35s ease;
    border-radius: 8px;
}

/* Highlighted partner */
.partner-interactive-block.partner-highlighted {
    opacity:     1 !important;
    box-shadow:  0 0 0 4px var(--clr-orange, #f29102),
                 0 6px 25px rgba(242, 145, 2, 0.25) !important;
    transform:   translateY(-3px) scale(1.005);
    z-index:     5;
    position:    relative;
    filter:      none !important;
}

/* Highlighted label badge */
.partner-interactive-block.partner-highlighted::before {
    content:       '● Selected';
    position:      absolute;
    top:           -12px;
    right:         10px;
    background:    var(--clr-orange, #f29102);
    color:         #fff;
    font-size:     0.7rem;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 10px;
    z-index:       10;
    font-family:   var(--ff-sans-normal, sans-serif);
}

/* Dimmed partners */
.partner-interactive-block.partner-dimmed {
    opacity: 0.25 !important;
    filter:  grayscale(60%) !important;
    transform: scale(0.99);
}

/* Scroll target highlight (brief flash when scrolled to) */
.partner-interactive-block.partner-scroll-target {
    animation: partnerScrollFlash 1.5s ease;
}

@keyframes partnerScrollFlash {
    0%   { box-shadow: 0 0 0 0 rgba(242, 145, 2, 0); }
    30%  { box-shadow: 0 0 0 8px rgba(242, 145, 2, 0.4); }
    100% { box-shadow: 0 0 0 4px var(--clr-orange, #f29102); }
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .partners-map-header {
        padding: 24px 16px 20px;
    }

    .partners-map-title {
        font-size: var(--fs-400, 1.4rem);
    }

    .partners-map-subtitle {
        font-size: var(--fs-100, 0.9rem);
    }

    .partners-stats-bar {
        gap: 10px;
    }

    .partner-stat-item {
        padding: 10px 16px;
        min-width: 75px;
    }

    .partner-dots-nav {
        gap: 5px;
    }

    .partner-dot {
        padding: 5px 10px;
        font-size: 0.65rem;
    }

    .partners-active-banner {
        flex-direction: column;
        align-items:    flex-start;
    }
}