/*
 * Contacts section style.
 *
 * Companion stylesheet for includes/contacts-section.php (optional title +
 * static map image with an overlaid directions button + optional business
 * info). Kept in its own file so the whole section (markup + style) can be
 * copied together into another template.
 *
 * Ported from Templates/oleificio-gallura/style/includes/contacts-section.css.
 * gallura has no generic ".darkGreen"-style text-color utility class, so
 * the icon/heading accent color is set directly here via the template's
 * own CSS custom property (--green, defined in style/main.css :root)
 * instead of relying on $contactsAccentClass.
 *
 * Height values (55vh desktop / 300px mobile) match the old iframe embed
 * this section replaces (see the removed rules in style/contact.css).
 *
 * Renamed contacts-section.css -> contacts-section-v2.css: this asset is
 * served with `Cache-Control: public, max-age=31536000` (1 year) with no
 * cache-busting query string appended by doCMS, so browsers keep serving
 * a stale cached copy indefinitely after any content change. Renaming
 * forces a fresh, never-cached URL (see Templates/gallura/pages/contact.php).
 */

section#contacts {
    padding: 3em 0;
    text-align: center;
}

section#contacts div.title {
    margin-bottom: 1.5em;
}

section#contacts div.title i {
    color: var(--green);
    margin-bottom: .5em;
}

section#contacts div#map {
    height: 55vh;
    overflow: hidden;
    position: relative;
}

section#contacts div#map img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section#contacts div#map a.button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5em;
    margin: 0 auto;
    width: fit-content;
}

@media screen and (max-width: 768px) {
    section#contacts div#map {
        height: 300px;
    }
}