/*
        LOCATIONS PAGE
    */

    p {
        font-size: var(--fs-md);
    }

    h2,
    h3,
    h4 {
        font-size: var(--fs-md);
    }

    @media (max-width: 768px) {

        h2,
        h3,
        h4,p {
            font-size: var(--fs-sm);
        }
    }

    #general-info p {
        margin-bottom: var(--space-2xl);
    }

    #general-info h2,
    h3,
    h4 {
        margin-top: var(--space-2xl);
        ;
    }

    .places {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-column-gap: var(--space-xl);
        margin-bottom: var(--space-2xl);
    }

    .places address {
        grid-column: 1 / 5;
    }

    /* stack addresses on mobile */
    @media (max-width: 768px) {
        .places {
            grid-template-columns: repeat(3, 1fr);
            grid-column: 1 / -1;
        }

        .places address:first-child,
        .places address:last-child {
            grid-column: 1 / -1;
            margin-bottom: var(--space-lg);
        }
    }

    #transport-info {
        grid-column: 1 / 6;
        color: var(--text-main);
    }

    #transport-info p {
        margin-bottom: var(--space-2xl);
    }

    #transport-info h4 {
        margin-top: var(--space-2xl);
    }

    @media (max-width: 768px) {
        #transport-info {
            font-size: var(--fs-sm);
            grid-column: 1 / -1;
        }
    }

    address {
        font-style: normal;
    }

    #map-container {
        grid-column: 1 / -1;
        width: 100%;
        height: 55vh;
    }
    #map {
        height: 100%;
    }

    /* custom map marker styles */
    .custom-marker {
        background: transparent;
        border: none;
    }

    .marker-pin {
        width: 1.5rem;
        height: 1.5rem;
        background-color: var(--accent);
        border: 1px solid var(--text-main);
        border-radius: 0;
        position: relative;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .marker-pin::after {
        content: '';
        position: absolute;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 0.5rem solid var(--text-main);
    }

    /* custom popup styles */
    .leaflet-popup-content-wrapper {
        background: var(--bg-main) !important;
        border-radius: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .leaflet-popup-tip {
        background: var(--bg-main) !important;
        border-top: none;
        border-right: none;
    }

    .custom-popup {
        color: var(--accent) !important;
        font-family: inherit;
        font-size: var(--fs-base);
        color: var(--text-main);
        margin: 0;
        background: var(--bg-main) !important;
        /* padding: 8px 12px; */
    }
    .gmaps-link a{
        font-size: var(--fs-xs);
        color: var(--accent) !important;
        text-decoration: none;
    }
    .gmaps-link a:hover{
        text-decoration: underline 2px solid;
    }

    .custom-popup strong {
        /* font-weight: bold; */
    }