/* ==========================================================================
   PAGE CONTACTS — Контакти
   ========================================================================== */

/* --- PAGE HEADER --- */

.contacts-page-header {
    padding-top: 160px;
    padding-bottom: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contacts-hero-desc { margin: 0 auto; }

/* --- MAP SECTION --- */

.map-section {
    width: 100%;
    height: 500px;
    position: relative;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.map-section iframe {
    /* Dark mode map via CSS filter */
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(85%) grayscale(20%);
    transition: filter 0.6s ease;
}

.map-section:hover iframe {
    /* Reveal original colors on hover */
    filter: none;
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 17, 28, 0.5);
    backdrop-filter: blur(3px);
    z-index: 10;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.map-section:hover .map-overlay { opacity: 0; }

/* --- ADDRESS ITEM VALUE --- */

.contacts-address {
    font-size: 13px;
    max-width: 250px;
}

/* ==========================================================================
   INLINE STYLES FROM contacts.html
   ========================================================================== */

.page-header {
            padding-top: 160px;
            padding-bottom: 40px;
            text-align: center;
        }

.map-section {
            width: 100%;
            height: 500px;
            position: relative;
            background: var(--bg-color);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

.map-section iframe {
            /* Перетворюємо стандартну карту на ідеальну темну (Dark Mode) за допомогою фільтрів */
            filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(85%) grayscale(20%);
            transition: filter 0.6s ease;
        }

.map-section:hover iframe {
            /* Повертаємо оригінальні кольори при наведенні */
            filter: none;
        }

.map-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(12, 17, 28, 0.5);
            backdrop-filter: blur(3px);
            z-index: 10;
            transition: opacity 0.4s ease;
            pointer-events: none;
            /* дозволяє клікам проходити на карту після зникнення */
        }

.map-section:hover .map-overlay {
            opacity: 0;
        }