/* ============================================================
   exeter-maps.css
   Location: /assets/css/exeter-maps.css
   Loaded after show-detail.css on show-map.php
   ============================================================ */

/* Large, full-width interactive map — deliberately NOT using an
   id ending in "-leaflet-map" so it doesn't inherit the small
   200px snippet-map sizing from show-detail.css used on
   attraction/accommodation/event detail pages. */
.exeter-full-map {
    width: 100%;
    height: 450px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    margin-bottom: 1.5rem;
    z-index: 1;
}

@media (max-width: 767px) {
    .exeter-full-map {
        height: 300px;
    }
}

/* ============================================================
   MAP PIN TOGGLES — show/hide nearby markers on the map itself
   ============================================================ */
.map-pin-toggles {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.map-pin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1.5px solid var(--bd);
    background: var(--wh);
    color: var(--mu);
}

.map-pin-toggle:hover {
    border-color: var(--pr);
    color: var(--pr);
}

.map-pin-toggle-acc.active {
    background: var(--pr);
    border-color: var(--pr);
    color: #fff;
}

.map-pin-toggle-att.active {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
}

/* ============================================================
   CUSTOM MAP PINS — used for nearby accommodation/attraction
   markers plotted on the large map
   ============================================================ */
.nearby-pin {
    background: transparent;
    border: none;
}

.nearby-pin-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    border: 2px solid #fff;
}

.nearby-pin-dot i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.8rem;
}

.nearby-pin-main-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--pr);
    box-shadow: 0 0 0 5px rgba(26, 82, 118, 0.22), 0 3px 10px rgba(0,0,0,0.4);
    border: 3px solid #fff;
}

.nearby-pin-main-dot i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 1.15rem;
}

/* ============================================================
   WHAT'S NEARBY — static two-column list
   ============================================================ */
.nearby-col-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mu);
    margin-bottom: 0.6rem;
}

.nearby-empty {
    font-size: 0.83rem;
    color: var(--mu);
    font-style: italic;
    margin: 0;
}

.nearby-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bd);
    border-radius: 8px;
    text-decoration: none;
    color: var(--tx);
    font-size: 0.85rem;
    transition: all 0.15s;
    margin-bottom: 0.5rem;
}

.nearby-item:last-child { margin-bottom: 0; }

.nearby-item:hover {
    border-color: var(--pr);
    background: var(--pr-l);
    color: var(--pr);
}

.nearby-item i {
    color: var(--ac);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.nearby-item-name {
    flex: 1;
    min-width: 0;
}

.nearby-item-dist {
    font-size: 0.75rem;
    color: var(--mu);
    flex-shrink: 0;
    white-space: nowrap;
}

.nearby-discover-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pr);
    text-decoration: none;
    margin-top: 0.5rem;
}

.nearby-discover-more:hover {
    color: var(--ac);
    text-decoration: underline;
}

.nearby-discover-more i {
    font-size: 0.7rem;
}

/* ============================================================
   INLINE LINKS within muted/disclaimer-style paragraphs
   ============================================================ */
.map-inline-link {
    color: var(--pr);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--bd);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.map-inline-link:hover {
    color: var(--ac);
    text-decoration-color: var(--ac);
}

/* ============================================================
   HEADER AD SLOT — fills blank space beside hero header text.
   Placeholder only until GDPR consent mode v2 is confirmed live.
   ============================================================ */
.detail-header-ad {
    flex-shrink: 0;
    width: 300px;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem 1rem 0;
}

.detail-header-ad-placeholder {
    width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px dashed var(--bd);
    border-radius: 8px;
    color: var(--mu);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}