/*
 * map.css – Karten-Styles für Online-Demo JG
 * Plugin : online-demo-jg | Version: 1.0.0
 */

/* ===================================================================
   GLOBALE CSS-VARIABLEN (JG-Farben)
   =================================================================== */

:root {
    --odj-yellow: #ffcc00;
    --odj-orange: #f39100;
    --odj-red:    #e30613;
}

/* ===================================================================
   FULLSCREEN CONTAINER
   =================================================================== */

#odj-map-wrapper {
    width:    100%;
    height:   55vh;
    position: relative;
    overflow: hidden;
}

/* Wenn WP-Adminbar sichtbar ist, wird der Offset korrigiert */
.admin-bar #odj-map-wrapper {
    height: 55vh;
}

#odj-map {
    width:      100%;
    height:     100%;
    background: #f8f8f8;
}

/* Lade-Indikator: mittig positioniert, wird via JS ausgeblendet */
.odj-map-loading {
    position:         absolute;
    top:              50%;
    left:             50%;
    transform:        translate(-50%, -50%);
    background:       rgba(255, 255, 255, 0.92);
    padding:          0.9rem 2rem;
    border-radius:    6px;
    font-size:        1rem;
    font-weight:      500;
    color:            #333;
    z-index:          1000;
    pointer-events:   none;
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.15);
    white-space:      nowrap;
}

/* ===================================================================
   LEAFLET OVERRIDES
   =================================================================== */

.leaflet-container {
    font-family: inherit;
    font-size:   0.95rem;
}

/* Popup ohne Spitze (tip), mit abgerundeten Ecken */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow:    0 4px 16px rgba(0, 0, 0, 0.2);
    padding:       0;
    overflow:      hidden;
}

.leaflet-popup-content {
    margin: 0;
}

/* Popup-Spitze ausblenden – wir positionieren Popups direkt am Marker */
.leaflet-popup-tip-container {
    display: none;
}

/* Zoom-Buttons an das JG-Design angleichen */
.leaflet-control-zoom a {
    font-weight: 700;
    color:       #333;
}

.leaflet-control-zoom a:hover {
    background-color: var(--odj-yellow);
    color:            #333;
}

/* Attribution kleiner und halbtransparent */
.leaflet-control-attribution {
    font-size:  10px;
    opacity:    0.75;
    background: rgba(255, 255, 255, 0.8);
}

/* ===================================================================
   MARKER / SCHILD
   Struktur:
     <div class="odj-marker odj-marker--[guest|member]">
       <div class="odj-marker__schild" style="background: [heatColor]">
         <span class="odj-marker__artikel">Art. N</span>
       </div>
       <div class="odj-marker__stab"></div>
     </div>
   =================================================================== */

/* Leaflet setzt position:absolute auf DivIcon-Wrapper */
.odj-marker {
    transform-origin: bottom center;
    cursor:           pointer;
    /* Animation wird inline via JS gesetzt (delay, duration) */
    animation-name:   odj-wippen;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.odj-marker__schild {
    width: 52px;
    height: 52px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.odj-marker__name {
    font-size: 7px;
    font-weight: 600;
    display: block;
    text-align: center;
    padding: 3px;
    line-height: 1.2;
    word-break: break-word;
    max-width: 48px;
}

.odj-marker:hover .odj-marker__schild {
    transform: scale(1.3) !important;
}

.odj-marker__stab {
    width:      3px;
    height:     20px;
    background: #555;
    margin:     0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.odj-marker__art-nr {
    font-size:   11px;
    font-weight: 700;
    display:     block;
    line-height: 1.2;
}

.odj-marker__art-name {
    font-size:   7px;
    display:     block;
    line-height: 1.1;
    opacity:     0.92;
    text-align:  center;
    word-break:  break-word;
}

/* Visuelle Unterscheidung Gast vs. Mitglied */
.odj-marker--guest  .odj-marker__schild { opacity: 0.85; }
.odj-marker--member .odj-marker__schild { opacity: 1.0; }

/* ===================================================================
   WIPP-ANIMATION
   Jeder Marker wippt mit leicht zufälliger Dauer/Verzögerung,
   die via JS als style.animationDelay / style.animationDuration gesetzt wird.
   =================================================================== */

@keyframes odj-wippen {
    0%,  100% { transform: rotate(-2.5deg); }
    50%        { transform: rotate(2.5deg);  }
}

/* ===================================================================
   POPUP
   Struktur:
     <div class="odj-popup">
       <div class="odj-popup__artikel">Art. N GG</div>
       <div class="odj-popup__statement">"…"</div>
       <img class="odj-popup__image" …>   (optional)
       <div class="odj-popup__meta">Gast | JG-Mitglied</div>
     </div>
   =================================================================== */

.odj-popup {
    max-width:   250px;
    padding:     12px 14px;
    font-size:   0.9rem;
    line-height: 1.5;
    color:       #222;
}

.odj-popup__name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #333;
}

.odj-popup__artikel {
    font-weight:     700;
    font-size:       0.75rem;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    color:           #888;
    margin-bottom:   6px;
}

.odj-popup__statement {
    font-style:    italic;
    border-left:   3px solid var(--odj-yellow);
    padding-left:  8px;
    margin:        8px 0;
    color:         #222;
    word-break:    break-word;
}

.odj-popup__image {
    width:         100%;
    border-radius: 4px;
    margin-top:    8px;
    display:       block;
    /* loading="lazy" wird im HTML-String gesetzt */
}

.odj-popup__meta {
    font-size:   0.75rem;
    color:       #999;
    margin-top:  6px;
    text-align:  right;
}

/* ===================================================================
   STADTLABELS
   =================================================================== */

.odj-city-label {
    font-size: 10px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
                 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.odj-state-label {
    background:   transparent !important;
    border:       none !important;
    box-shadow:   none !important;
    font-size:    10px;
    color:        #555;
    font-weight:  500;
    pointer-events: none;
}

.leaflet-bistum-pane {
    z-index: 650 !important;
}

/* Leaflet Selektions-Highlight entfernen */
.leaflet-interactive:focus {
    outline: none !important;
}
.leaflet-interactive {
    outline: none !important;
}
/* Blauen Klick-Rahmen der Bundesländer deaktivieren */
path.leaflet-interactive:focus {
    outline: none !important;
    stroke: inherit !important;
}