/* The contact page's map, in that page's hand: its cream, its field frames
   (a line on all four sides, 8px corners, paper-white fill) and its Montserrat.
   The colours are styles.css's and Contact.module.css's, repeated here because
   this page stands on its own in a frame. */

/* The map's labels. MapLibre asks for a family by the style's font name and
   takes the weight and slant from that name (style.json has no glyphs), so the
   three names are declared over the same files: Latin, and Latin Extended for
   č, ć, đ, š and ž. */
@font-face {
  font-family: 'Montserrat Regular';
  font-weight: 100 900;
  src: url('/map/fonts/montserrat-latin-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat Regular';
  font-weight: 100 900;
  src: url('/map/fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat Medium';
  font-weight: 100 900;
  src: url('/map/fonts/montserrat-latin-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat Medium';
  font-weight: 100 900;
  src: url('/map/fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat Italic';
  font-style: italic;
  font-weight: 100 900;
  src: url('/map/fonts/montserrat-latin-wght-italic.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat Italic';
  font-style: italic;
  font-weight: 100 900;
  src: url('/map/fonts/montserrat-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --paper: #f6f0e6;
  --text: #2a211c;
  --muted: #5e534b;
  --accent: #9c4f2e;
  --field-fill: #fffaf2;
  --field-line: #8d8074;
  --field-radius: 8px;
  --font: 'Montserrat Regular', Arial, Helvetica, sans-serif;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
}
#map {
  width: 100%;
  height: 100%;
}
.maplibregl-map {
  font: inherit;
}
#status,
.fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 24px;
  background: var(--paper);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
#status[hidden] {
  display: none;
}

/* The two zoom buttons: one field, a hairline between its halves. */
.maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 12px 12px 0 0;
}
.maplibregl-ctrl-group,
.maplibregl-ctrl-group:not(:empty) {
  overflow: hidden;
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  background: var(--field-fill);
  box-shadow: none;
}
.maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
  background-color: transparent;
  color: var(--text);
  transition: color 200ms ease;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--field-line);
}
/* The signs are drawn in the button's own colour, so they can take the accent. */
.maplibregl-ctrl button .maplibregl-ctrl-icon,
.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon {
  background: currentColor;
  mask: center / 12px 12px no-repeat;
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button:disabled {
  color: var(--field-line);
  cursor: default;
}
.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon {
  opacity: 0.6;
}
.maplibregl-ctrl button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
@media (hover: hover) {
  .maplibregl-ctrl-group button:not(:disabled):hover {
    background-color: transparent;
    color: var(--accent);
  }
}

.maplibregl-ctrl-attrib {
  border-radius: 4px 0 0;
  background: rgb(246 240 230 / 88%);
  color: var(--muted);
  font-size: 10px;
}
.maplibregl-ctrl-attrib a {
  color: inherit;
}
.maplibregl-ctrl-attrib a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.location-marker {
  width: 36px;
  height: 43px;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgb(42 33 28 / 28%));
}
.location-marker svg {
  display: block;
  width: 100%;
  height: 100%;
}
.maplibregl-marker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The villa's name and address, in a field's frame. */
.maplibregl-popup-content {
  padding: 12px 34px 12px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  background: var(--field-fill);
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.55;
}
.maplibregl-popup-content strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
/* It stands clear of the marker, so it needs no tip pointing at it. */
.maplibregl-popup-tip {
  display: none;
}
.maplibregl-popup-close-button {
  top: 1px;
  right: 1px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 0 7px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.maplibregl-popup-close-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
@media (hover: hover) {
  .maplibregl-popup-close-button:hover {
    background-color: transparent;
    color: var(--accent);
  }
}

/* "Use two fingers to move the map": the text's brown over the cream. */
.maplibregl-cooperative-gesture-screen {
  padding: 24px;
  background: rgb(42 33 28 / 62%);
  color: #fffaf2;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .maplibregl-ctrl-group button,
  .maplibregl-cooperative-gesture-screen {
    transition: none;
  }
}