/* ============================================================================
   Where We Do Section - Template Component Styles
   ========================================================================== */

   .where-we-do-section {
    background: #0059A5;
    position: relative;
    padding: var(--where-we-do-spacing-top, 80px) 0 var(--where-we-do-spacing-bottom, 80px);
    color: var(--where-we-do-heading-color, white);
    overflow: hidden;
}

/* Override container styles for this section */
.where-we-do-section .container {
    position: relative;
    z-index: 3;
}

.where-we-do-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--where-we-do-column-gap, 80px);
    align-items: center;
    position: relative;
}

/* Left column - Content */
.where-content-column {
    position: relative;
    z-index: 4;
}

/* Where sub-heading styling now handled by global sub-heading-text.css */

/* Where sub-heading ::before now handled by global sub-heading-text.css */

.where-heading {
    font-size: clamp(2rem, 4vw, var(--where-we-do-heading-size, 48px));
    font-weight: var(--heading-weight, 700);
    line-height: var(--heading-line-height, 1.2);
    color: var(--where-we-do-heading-color, #ffffff);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: var(--heading-font, inherit);
}

.where-paragraph {
    font-size: var(--where-we-do-paragraph-size, 18px);
    line-height: var(--line-height-base, 1.7);
    color: var(--where-we-do-paragraph-color, rgba(255, 255, 255, 0.9));
    margin-bottom: 2rem;
    max-width: 90%;
    font-family: var(--body-font, inherit);
}

.where-actions {
    margin-top: 2rem;
}

.where-btn {
    /* Uses global button styling completely */
    text-decoration: none !important;
}

.where-btn svg {
    transition: transform 0.3s ease;
}

.where-btn:hover svg {
    transform: translateX(4px);
}

/* Right column - Image */
.where-image-column {
    position: relative;
}

.where-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    display: block;
}

/* Hotspot Container */
.hotspot-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.hotspot-wrap img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

/* Hotspot Pin Button */
.where-hotspot {
    --x: 50%;
    --y: 50%;
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: unset;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    outline: none;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.where-hotspot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: unset;
    background: url('https://www.cooltranz.co.nz/wp-content/uploads/2025/09/Icon-fa-solid-truck-fast.png') no-repeat center center;
    background-size: 35px 25px;
}
.where-hotspot.buttonblue::before{
    background:url('https://www.cooltranz.co.nz/wp-content/uploads/2025/10/Icon-fa-solid-truck-fast.svg') no-repeat center center !important; 
     background-size: 30px 20px !important;
}

/* Pulse animation for visibility */
.where-hotspot::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, 0.45);
    animation: hotspot-pulse 1.6s infinite;
}

@keyframes hotspot-pulse {
    0% { 
        transform: scale(0.85); 
        opacity: 0.8; 
    }
    70% { 
        transform: scale(1.3); 
        opacity: 0; 
    }
    100% { 
        opacity: 0; 
    }
}

/* Hover effects for hotspot */
.where-hotspot:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.where-hotspot:hover::before {
    background-size: 35px 25px;
}

/* Tooltip on hover/focus */
.where-hotspot[data-title] .hotspot-tip {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%, -100%);
    background: rgba(17, 17, 17, 0.95);
    color: #fff;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    translate: 0 4px;
    transition: opacity 0.18s ease, translate 0.18s ease;
    z-index: 15;
}

.where-hotspot:focus .hotspot-tip,
.where-hotspot:hover .hotspot-tip {
    opacity: 1;
    translate: 0 0;
}

.hotspot-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(17, 17, 17, 0.95);
}

/* Info card shown on click */
.hotspot-info-card {
    position: absolute;
    min-width: 100px;
    max-width: min(60ch, 50%);
    padding: 0.9rem 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transform: translate(-50%, 12px);
    z-index: 20;
}

.hotspot-info-card h4 {
    margin: 0 0 0.25rem!important;
    font-size: 1rem;
    color: var(--heading-color, #333);
    font-weight: var(--heading-weight, 600);
}

.hotspot-info-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #000;
    line-height: 1.4;
}

.hotspot-info-card .hotspot-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #000;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.hotspot-info-card .hotspot-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Click-off backdrop */
.hotspot-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.hotspot-backdrop.active {
    pointer-events: all;
}

/* Accessibility: visible focus */
.where-hotspot:focus-visible {
    outline: 3px solid var(--primary-color, #0a84ff);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .where-we-do-content {
        gap: calc(var(--where-we-do-column-gap, 80px) * 0.5);
    }
}

@media (max-width: 992px) {
    .where-we-do-section {
        padding: calc(var(--where-we-do-spacing-top, 80px) * 0.75) 0 calc(var(--where-we-do-spacing-bottom, 80px) * 0.75);
    }
    
    .where-we-do-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .where-content-column {
        order: 1;
    }
    
    .where-image-column {
        order: 2;
        display: none;
    }
    
    /* Where sub-heading responsive styles now handled by global sub-heading-text.css */
    
    .where-paragraph {
        max-width: 100%;
    }
    
    .where-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    /* Hide hotspots on mobile since image is hidden */
    .where-hotspot {
        display: none;
    }
}

@media (max-width: 480px) {
    .where-we-do-section {
        padding: calc(var(--where-we-do-spacing-top, 80px) * 0.5) 0 calc(var(--where-we-do-spacing-bottom, 80px) * 0.5);
    }
    
    .where-we-do-section .container {
        padding: 0 var(--page-px, 16px);
    }
    
    .where-heading {
        font-size: clamp(1.5rem, 6vw, calc(var(--where-we-do-heading-size, 48px) * 0.8));
        margin-bottom: 1rem;
    }
    
    .where-paragraph {
        font-size: calc(var(--where-we-do-paragraph-size, 18px) * 0.9);
        margin-bottom: 1.5rem;
    }
}