/**
 * STYLES.CSS - Core Layout and Structure
 *
 * This file contains layout, sizing, and positioning.
 * DO NOT put colors, fonts, or client-specific styling here.
 * Those belong in theme.css for easy customization.
 *
 * This file should rarely change between clients.
 */

/* ========================================
   RESET AND BASE STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrolling, map fills viewport */
}

/* ========================================
   MAP CONTAINER (FULL SCREEN)
   ======================================== */

.map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Map stays in background */
}

/* ========================================
   FLOATING UI LAYOUT - DESKTOP/TABLET (>600px)
   ======================================== */

/* Chamber Logo - Top Left */
.chamber-logo-container {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    width: 200px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.chamber-logo-img {
    display: block;
    height: 75px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

/* Banner Container Base Styles */
.banner-container {
    position: fixed;
    z-index: 100;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.banner-link {
    display: flex;
    justify-content: center;
}

.banner-img {
    display: block;
    width: auto;
    height: auto;
    max-height: 85px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Banner 1 - Top Center */
.banner1-container {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 728px;
    width: calc(100% - 400px); /* Leave room for logo on left */
}

/* Banner 2 (Slideshow) - Below Banner 1 */
.banner2-container {
    top: 105px; /* Below banner1 */
    left: 50%;
    transform: translateX(-50%);
    max-width: 728px;
    width: calc(100% - 400px);
}

.banner-slideshow {
    position: relative;
    width: 100%;
}

/* Slideshow Items */
.slideshow-item {
    display: none;
    width: 100%;
}

.slideshow-item.active {
    display: flex;
    justify-content: center;
    animation: fadeIn 0.5s ease-in-out;
}

.slideshow-item img {
    display: block;
    width: auto;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Advertisers Toggle Button - Below Chamber Logo */
.advertisers-toggle {
    position: fixed;
    top: 105px; /* Below chamber logo */
    left: 10px;
    z-index: 100;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #b71c1c;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.advertisers-toggle:hover {
    background-color: #8b0000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.toggle-icon {
    font-size: 16px;
}

.toggle-arrow {
    font-size: 12px;
    transition: transform 0.2s;
}

/* Business Panel - Dropdown below Advertisers button */
.business-panel {
    position: fixed;
    top: 155px; /* Below advertisers button */
    left: 10px;
    z-index: 99;
    width: 280px;
    max-height: 0;
    overflow: hidden;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.business-panel.open {
    max-height: calc(100vh - 180px);
    opacity: 1;
    overflow-y: auto;
}

.panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    background: white;
}

.panel-title {
    margin: 0;
    font-size: 16px;
}

.business-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.business-list-item {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
}

.business-list-item:hover {
    background-color: #f5f5f5;
}

.business-list-item.active {
    background-color: #e6f2ff;
    border-left: 3px solid #0066cc;
    padding-left: 13px;
}

.business-list-item:last-child {
    border-bottom: none;
}

/* ========================================
   FLOATING DOLPH MAP LOGO (Bottom Right)
   ======================================== */

.dolph-logo-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dolph-logo-floating:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.dolph-logo-img {
    display: block;
    height: 60px;
    width: auto;
    max-width: 325px;
    object-fit: contain;
}

/* ========================================
   MAPBOX MARKER BOUNCE ANIMATION
   ======================================== */

/* Bounce animation keyframes */
@keyframes marker-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Apply bounce animation to the SVG inside markers (not the marker container) */
/* Also scale down the marker size */
.mapboxgl-marker svg {
    animation: marker-bounce 1s ease-in-out infinite;
    transform-origin: bottom center;
    scale: 0.75;
}

/* Pause animation on hover for better click targeting */
.mapboxgl-marker:hover svg {
    animation-play-state: paused;
}

/* ========================================
   MAPBOX POPUP CUSTOMIZATION
   ======================================== */

/* Style the Mapbox popup content */
.mapboxgl-popup-content {
    padding: 0;
    border-radius: 8px;
    max-width: 360px;
    overflow: hidden;
}

/* Business card image in popup */
.popup-business-card {
    margin: 0;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.business-card-img {
    width: 100%;
    height: auto;
    max-height: 400px; /* Will be dynamically adjusted based on available space */
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Popup content area - add padding to text elements */
.popup-title,
.popup-category,
.popup-address,
.popup-phone,
.popup-description,
.popup-buttons {
    margin-left: 12px;
    margin-right: 12px;
}

/* First element (title) gets top padding */
.mapboxgl-popup-content > .popup-title:first-child {
    margin-top: 12px;
}

/* Buttons get bottom margin before image */
.popup-buttons {
    margin-bottom: 12px;
}

/* If image is last child, no extra bottom margin needed */
.mapboxgl-popup-content > .popup-business-card:last-child {
    margin-bottom: 0;
}

/* If no image, last element gets bottom padding */
.mapboxgl-popup-content > *:last-child:not(.popup-business-card) {
    margin-bottom: 15px;
}

/* Close button styling */
.mapboxgl-popup-close-button {
    font-size: 20px;
    padding: 8px;
    right: 5px;
    top: 5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Popup anchor (the arrow/tip) */
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: #fff;
}

/* Ensure popups appear above all UI elements */
/* The popup needs to break out of the map's stacking context */
.mapboxgl-map .mapboxgl-popup {
    z-index: 9999 !important;
}

.mapboxgl-popup {
    z-index: 9999 !important;
}

.mapboxgl-popup-content {
    z-index: 9999 !important;
}

/* Give map controls layer a higher z-index to allow popups above fixed UI */
.mapboxgl-control-container {
    z-index: 50 !important;
}

/* Make map canvas lower so it doesn't create stacking issues */
.mapboxgl-canvas {
    z-index: 0 !important;
}

/* ========================================
   RESPONSIVE DESIGN - TABLET (601px - 900px)
   ======================================== */

@media (max-width: 900px) {
    .banner1-container,
    .banner2-container {
        width: calc(100% - 240px);
    }

    .chamber-logo-img {
        height: 50px;
        max-width: 150px;
    }

    .advertisers-toggle {
        top: 80px;
    }

    .business-panel {
        top: 130px;
    }
}

/* ========================================
   RESPONSIVE DESIGN - SMALL SCREENS (Phones <=600px)
   ======================================== */

@media (max-width: 600px) {
    /* Mobile Layout: Stack elements vertically
       Banner 1 at top, then slideshow + logo side by side */

    /* Banner 1 - Full width at top */
    .banner1-container {
        top: 10px;
        left: 10px;
        right: 10px;
        width: auto;
        transform: none;
        max-width: none;
    }

    .banner-img {
        max-height: 60px;
    }

    /* Row container for slideshow + logo (via flexbox positioning) */
    /* Banner 2 (Slideshow) - Left side of row */
    .banner2-container {
        top: 80px; /* Below banner1 */
        left: 10px;
        right: auto;
        width: calc(100% - 100px); /* Leave room for logo */
        transform: none;
        max-width: none;
    }

    .slideshow-item img {
        max-height: 50px;
    }

    /* Chamber Logo - Right side, next to slideshow */
    .chamber-logo-container {
        top: 80px; /* Same row as slideshow */
        left: auto;
        right: 10px;
        padding: 5px;
    }

    .chamber-logo-img {
        height: 40px;
        max-width: 70px;
    }

    /* Advertisers Button - Below slideshow row */
    .advertisers-toggle {
        top: 145px;
        left: 10px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .toggle-text {
        display: inline; /* Keep text visible on mobile */
    }

    /* Business Panel - Below button */
    .business-panel {
        top: 190px;
        left: 10px;
        right: 10px;
        width: auto;
    }

    .business-panel.open {
        max-height: calc(100vh - 220px);
    }

    /* Smaller Dolph logo */
    .dolph-logo-img {
        height: 35px;
    }

    .dolph-logo-floating {
        padding: 5px;
    }
}

/* Very small phones (<=400px) */
@media (max-width: 400px) {
    .banner-img {
        max-height: 50px;
    }

    .slideshow-item img {
        max-height: 40px;
    }

    .chamber-logo-img {
        height: 32px;
        max-width: 60px;
    }

    .banner2-container {
        width: calc(100% - 85px);
    }

    .advertisers-toggle {
        top: 130px;
    }

    .business-panel {
        top: 175px;
    }

    .dolph-logo-img {
        height: 30px;
    }
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE LANDSCAPE
   ======================================== */

@media (max-width: 900px) and (orientation: landscape) {
    /* Landscape: Keep desktop-like layout but smaller */
    .chamber-logo-container {
        top: 5px;
        left: 5px;
        padding: 4px;
    }

    .chamber-logo-img {
        height: 35px;
    }

    .banner1-container {
        top: 5px;
    }

    .banner2-container {
        top: 70px;
    }

    .banner-img,
    .slideshow-item img {
        max-height: 55px;
    }

    .advertisers-toggle {
        top: 55px;
        left: 5px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .business-panel {
        top: 95px;
        left: 5px;
        max-width: 250px;
    }

    .business-panel.open {
        max-height: calc(100vh - 110px);
    }

    /* Smaller Dolph logo in landscape */
    .dolph-logo-floating {
        bottom: 5px;
        right: 5px;
        padding: 4px;
    }

    .dolph-logo-img {
        height: 30px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide element (used by JavaScript) */
.hidden {
    display: none !important;
}

/* Loading state (can be used for loading spinners) */
.loading {
    opacity: 0.6;
    pointer-events: none;
}