/**
 * Theme Name: Mapa Sonoro de Rio Claro
 * Description: Este tema foi desenvolvido para o Mapa Sonoro de Rio Claro.
 * Version: 1.0
 * Author: Sofia Tomic, Mário Neto e Breno Goya
 */

/* =====/ Fonts /===== */

@font-face {
  font-family: 'Helvetica Now Display';
  font-display: swap;
  font-style: normal;
  font-weight: normal;
  src: url('./assets/fonts/HELVETICANOWDISPLAY-REGULAR.OTF') format('opentype');
}

@font-face {
  font-family: 'Helvetica Now Display';
  font-display: swap;
  font-style: normal;
  font-weight: bold;
  src: url('./assets/fonts/HELVETICANOWDISPLAY-BOLD.OTF') format('opentype');
}

@font-face {
  font-family: 'Helvetica Now Display';
  font-display: swap;
  font-style: italic;
  font-weight: bold;
  src: url('./assets/fonts/HELVETICANOWDISPLAY-BOLDITA.OTF') format('opentype');
}

@font-face {
  font-family: 'Helvetica Now Display';
  font-display: swap;
  font-style: italic;
  font-weight: normal;
  src: url('./assets/fonts/HELVETICANOWDISPLAY-REGULAR.OTF') format('opentype');
}

/* =====/ Settings /===== */

:root {
  /* Fonts */
  --font-family: 'Helvetica Now Display', 'Helvetica', 'Arial', sans-serif;
  --font-size-base: 1.5rem;
  --line-height-base: calc(1.375 * var(--font-size-base));
  --font-size-md: calc(1.25 * var(--font-size-base));
  --line-height-md: calc(1.125 * var(--font-size-md));

  /* Utils */
  --space-base: 1.6rem;
  --default-toogle-icon-height: 1.6rem;
  --button-background-color: black;
  --button-height: calc(3.25 * var(--space-base));
  --button-bottom-position: calc(2 * var(--space-base));

  /* Default border */
  --border-radius-base: 0.6rem;
  --border-color-base: white;
  --border-size-base: 0.1rem;

  /* Title */
  --title-font-size: 2rem;
  --title-top-position: calc(2.5 * var(--space-base));
  --title-width: 12ch;

  /* About section */
  --about-width: 96vw;
  --about-top-position: calc(var(--button-height) + 4 * var(--space-base));
  --about-bottom-position: calc(2 * var(--space-base));

  /* Marker page */
  --marker-page-content-margin-top: 1.125em;
  --transition-timing-function-smooth: cubic-bezier(0.62, 0.16, 0.13, 1.01);
}

@media screen and (min-width: 400px) {
  :root {
    --title-width: 26ch;
    --title-top-position: calc(3.125 * var(--space-base));
  }
}

@media screen and (min-width: 600px) {
  :root {
    --about-width: 64ch;
  }
}

@media screen and (min-width: 900px) {
  :root {
    --about-width: 48ch;
    --font-size-base: 1.6rem;
    --title-font-size: 2.25rem;
    --title-top-position: calc(2.85 * var(--space-base));
  }
}

/* =====/ Reset /===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 1 rem = 10px */
html {
  font-size: 62.5%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: 700;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

button svg {
  display: block;
}

/* =====/ Base /===== */

/* Google Map changes the font for anything inside it. */
body,
.popup,
button {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-base);
}

/* =====/ Map /===== */

html,
body,
#map {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* =====/ Map / InfoWindow /===== */

.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after,
.gm-style .gm-style-iw-tc::after {
  background: black;
}

.gm-style .gm-style-iw-c {
  border: 1px solid white;
}

.gm-ui-hover-effect > span {
  background-color: white;
}

.gm-style .gm-style-iw-tc {
  top: 1px;
}

/**
 * ANIMATION FOR MARKER ICONS
 */

/* .IPAZAH-content-container.HJDHPx-interactive img */

#map .msrc-marker-icon {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: transparent;
  animation: pulse 1.5s infinite;
}

#map .msrc-marker-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border: 0.5px solid white;
  border-radius: 50%;
  background-color: white;
}

#map .msrc-marker-icon:hover {
  animation: pulse 0.3s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    border-width: 0.1px;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: scale(1.5);
    border-width: 0.1px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
  }
  100% {
    transform: scale(0.8);
    border-width: 0.1px;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Keyboard shortcuts, Map data, Terms and a Report a map error buttons and Zoom in/out buttons */
.gm-style-cc,
.gm-style-cc button {
  display: none;
  pointer-events: none;
  visibility: hidden;
  user-select: none;
}

button.gm-ui-hover-effect {
  opacity: 1;
}

/* This is the InfoWindow root component */

.gm-style .gm-style-iw-c {
  padding: 0 !important;
}

@media screen and (max-width: 599px) {
  .gm-style .gm-style-iw-c {
    max-width: calc(100vw - var(--space-base) * 2) !important;
  }
}

@media screen and (min-width: 600px) {
  .gm-style .gm-style-iw-c {
    max-width: 440px !important;
  }
}

/**
 * -----------
 * Components
 * -----------
 */

.rich-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.rich-text {
  display: flex;
  flex-direction: column;
  gap: var(--line-height-base);
}

/* =====/ Map / Popup /===== */

.popup {
  background: black;
  color: white;
  padding: 0 var(--space-base) var(--space-base);
}

.popup {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.popup > * + * {
  margin-top: var(--line-height-base);
}

.popup__close-btn,
.popup__title {
  display: inline-block;
  vertical-align: middle;
}

.popup__close-btn {
  color: white;
  cursor: pointer;
  display: none;
  float: right;
}

.popup__title {
  font-size: var(--font-size-base);
  letter-spacing: 0.025em;
  line-height: var(--line-height-base);
  text-transform: uppercase;
}

.popup__audio,
.popup audio {
  display: block;
  width: 100%;
}

.popup.visible {
  opacity: 1;
  visibility: visible;
}

.popup a {
  text-decoration: underline;
}

@media screen and (min-width: 600px) {
  .popup {
    padding: 0 calc(2 * var(--space-base)) calc(2 * var(--space-base));
  }
}

/**
 * ------------------------------------------------------------
 * Audio
 * ------------------------------------------------------------
 */

.audio-playlist {
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--line-height-base));
  justify-content: stretch;
}

.audio-playlist audio {
  display: block;
  height: calc(2 * var(--space-base));
  width: 100%;
}

/* Hide markers container */
.markers {
  display: none;
}

/* Grid toggle button */

.markers-grid-toggle-button {
  cursor: pointer;
  display: block;
  position: absolute;
  top: calc(2 * var(--space-base));
  left: 0;
  padding: calc(1 * var(--space-base)) calc(0.875 * var(--space-base));
  border-top: var(--border-size-base) solid var(--border-color-base);
  border-right: var(--border-size-base) solid var(--border-color-base);
  border-bottom: var(--border-size-base) solid var(--border-color-base);
  border-left: none;
  border-radius: 0px var(--border-radius-base) var(--border-radius-base) 0px;
  height: var(--button-height);
  width: fit-content;
  z-index: 20;
  background-color: var(--button-background-color);
}

.markers-grid-toggle-button svg {
  height: 100%;
  width: auto;
}

.overlay {
  opacity: 0;
  inset: 0;
  position: fixed;
  background: black;
  pointer-events: none;
  z-index: -1;
  transition: all 0.5s var(--transition-timing-function-smooth);
}

.overlay.visible {
  opacity: 0.75;
  z-index: 10;
}

.markers-grid-scroll-wrapper {
  background: transparent;
  inset: 0;
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--transition-timing-function-smooth);
  visibility: hidden;
  z-index: -1;
}

.markers-grid-scroll-wrapper.visible {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  z-index: 11;
}

.markers-grid {
  display: grid;
  gap: calc(2 * var(--space-base));
  padding: calc(50px + 4 * var(--space-base)) calc(1 * var(--space-base))
    calc(2 * var(--space-base));
  position: relative;
}

.markers-grid .markers-grid-item {
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--space-base));
  align-items: flex-start;
}

.markers-grid-item:focus-visible {
  border-radius: 1px;
  outline: var(--border-size-base) solid var(--border-color-base);
  outline-offset: 8px;
}

.markers-grid-item .markers-grid-item__title {
  color: white;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  text-align: left;
}

@media screen and (max-width: 899px) {
  .markers-grid {
    padding-bottom: calc(4 * var(--space-base) + 52px);
  }
}

@media screen and (min-width: 600px) {
  .markers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  .markers-grid {
    grid-template-columns: repeat(4, 1fr);
    padding-left: 15vw;
    padding-right: 15vw;
  }

  .markers-grid .markers-grid-item {
    cursor: pointer;
  }
}

.markers-grid-is-open .markers-grid-toggle-button svg {
  transform: rotate(180deg);
}

.markers-grid-toggle-button.open svg {
  transform: rotate(180deg);
}

.markers-grid-is-open .overlay {
  opacity: 0.75;
  z-index: 10;
}

.markers-grid-is-open .markers-grid-scroll-wrapper {
  opacity: 1;
  z-index: 11;
  pointer-events: all;
  width: 100%;
}

.markers-grid-toggle-button svg.close {
  display: none;
}

.markers-grid-toggle-button .markers-grid-is-open svg.close {
  display: block;
}

.markers-grid-toggle-button .markers-grid-is-open svg.open {
  display: none;
}

.markers-grid img {
  aspect-ratio: 3 / 4;
  border-radius: var(--border-radius-base);
  border: var(--border-size-base) solid var(--border-color-base);
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Title */

.title {
  color: white;
  display: block;
  position: absolute;
  top: var(--title-top-position);
  right: var(--space-base);
  z-index: 20;
  font-size: var(--title-font-size);
  white-space: normal;
  pointer-events: all;
  text-transform: uppercase;
  line-height: 1;
  text-align: right;
  letter-spacing: 0.075rem;
  user-select: none;
  width: var(--title-width);
}

@media screen and (min-width: 400px) {
  .title {
    top: var(--title-top-position);
    width: var(--title-width);
  }
}

@media screen and (min-width: 900px) {
  .title {
    top: var(--title-top-position);
  }
}

/* About section */

.about {
  position: fixed;
  width: var(--about-width);
  z-index: 20;
  background-color: black;
  color: white;
  top: var(--about-top-position);
  bottom: var(--about-bottom-position);
  left: 0;
  border-top: var(--border-size-base) solid var(--border-color-base);
  border-right: var(--border-size-base) solid var(--border-color-base);
  border-bottom: var(--border-size-base) solid var(--border-color-base);
  border-radius: 0px var(--border-radius-base) var(--border-radius-base) 0px;
  border-left: none;
  transition: all 0.5s var(--transition-timing-function-smooth);
  transform: translateX(-100%);
  overflow: hidden;
  visibility: hidden;
}

.about__main {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  padding: 0 calc(2 * var(--space-base) + var(--default-toogle-icon-height))
    var(--space-base) var(--space-base);
}

.about__main > * + * {
  margin-top: var(--line-height-base);
}

.about__main iframe {
  aspect-ratio: 16 / 9;
  display: block;
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 600px) {
  .about {
    bottom: var(--about-bottom-position);
    border-radius: 0px var(--border-radius-base) 0px 0px;
    top: var(--about-top-position);
    width: var(--about-width);
  }

  .about__main {
    padding: 0 calc(2 * var(--space-base) + var(--default-toogle-icon-height))
      var(--space-base);
  }
}

@media screen and (min-width: 900px) {
  .about {
    width: var(--about-width);
  }
}

.about__wrapper {
  padding: 0;
  height: 100%;
  overflow-y: auto;
}

.about-is-open .about {
  transform: translateX(0);
  visibility: visible;
}

.about-toggle-button {
  cursor: pointer;
  display: block;
  position: absolute;
  bottom: var(--button-bottom-position);
  left: 0;
  padding: calc(1 * var(--space-base)) calc(0.875 * var(--space-base));
  border-top: var(--border-size-base) solid var(--border-color-base);
  border-right: var(--border-size-base) solid var(--border-color-base);
  border-bottom: var(--border-size-base) solid var(--border-color-base);
  border-radius: 0px var(--border-radius-base) var(--border-radius-base) 0px;
  border-left: none;
  height: var(--button-height);
  width: auto;
  z-index: 20;
  background-color: var(--button-background-color);
  color: white;
  text-transform: uppercase;
  font-size: var(--font-size-base);
  line-height: 1;
  letter-spacing: 0.025em;
}

.about-toggle-button svg {
  height: var(--default-toogle-icon-height);
  width: auto;
}

.about-toggle-button svg.close {
  display: none;
}

button.about-close-button {
  padding: var(--space-base);
}

.about-close-button svg {
  height: var(--default-toogle-icon-height);
}

.about__header-container {
  position: fixed;
  width: 100%;
  height: calc(2 * var(--space-base) + var(--line-height-base));
}

.about__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about__main-container {
  padding-top: calc(2 * var(--space-base) + var(--line-height-base));
}

@media screen and (min-width: 600px) {
  .about__main {
    margin-left: calc(3 * var(--space-base));
  }
}

.about__wrapper h2 {
  text-transform: uppercase;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  padding: var(--space-base);
}

.about__wrapper p {
  max-width: 75ch;
}

/* =====/ Marker page /===== */

/* Marker pages container */
.markers-pages {
  --z-index: 12;
  inset: 0;
  position: fixed;
  pointer-events: none;
  transition: opacity 0.5s var(--transition-timing-function-smooth);
  z-index: var(--z-index);
}

/* Individual marker page */
.marker-page {
  background-color: transparent;
  position: absolute;
  inset: 0;
  color: white;
  z-index: var(--z-index);
  opacity: 0;
  transition: opacity 0.5s var(--transition-timing-function-smooth);
  visibility: hidden;
}

/* When a marker page is visible */
.marker-page.visible {
  display: block;
  opacity: 1;
  z-index: var(--z-index);
  pointer-events: all;
  visibility: visible;
}

/* Marker page content */

.marker-page-container {
  overflow: hidden;
  height: 100vh;
}

.marker-page__main {
  display: grid;
  gap: calc(1 * var(--space-base));
  padding: calc(8.75 * var(--space-base)) var(--space-base) var(--space-base);
  overflow-y: auto;
  height: 100%;
}

/* Marker page video section */
.marker-page__video {
  width: 100%;
}

.marker-page__video iframe {
  background-color: #000;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  border: var(--border-size-base) solid var(--border-color-base);
  border-radius: var(--border-radius-base);
}

.marker-page__content {
  padding-bottom: calc(var(--about-bottom-position) + var(--button-height));
}

.marker-page__content > * + * {
  margin-top: var(--marker-page-content-margin-top);
}

.marker-page__content-description p {
  margin-top: var(--marker-page-content-margin-top);
}

.marker-page__content .audio-playlist {
  width: 100%;
  margin-top: var(--marker-page-content-margin-top);
}

.marker-page__content-address {
  margin-top: var(--marker-page-content-margin-top);
}

.marker-page__content-title {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.marker-page__content-description {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

button.marker-page-close-button {
  cursor: pointer;
  position: fixed;
  right: 0;
  bottom: var(--button-bottom-position);
  height: var(--button-height);
  width: auto;
  border-top: var(--border-size-base) solid var(--border-color-base);
  border-right: 0;
  border-bottom: var(--border-size-base) solid var(--border-color-base);
  border-left: var(--border-size-base) solid var(--border-color-base);
  border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
  z-index: 20;
  background-color: var(--button-background-color);
  padding: var(--space-base);
}

.marker-page-close-button svg {
  display: block;
  cursor: pointer;
  height: calc(0.75 * var(--space-base));
  width: auto;
  z-index: 13;
}

.markers-grid-item {
  outline-offset: 8px;
  transition: all 0.25s var(--transition-timing-function-smooth);
}

/* Media queries for larger screens */

@media screen and (min-width: 900px) {
  .marker-page__main {
    grid-template-columns: 1fr 400px;
    gap: calc(5 * var(--space-base));
    padding: 0 15vw;
  }

  .marker-page__video {
    padding-top: calc(6.25 * var(--space-base));
  }

  .marker-page__content {
    overflow: hidden;
    height: 100vh;
    padding-bottom: 0;
  }

  .marker-page__content > div {
    overflow-y: auto;
    height: 100%;
    padding-top: calc(6.25 * var(--space-base));
    padding-bottom: calc(
      var(--button-height) + var(--button-bottom-position) + var(--space-base)
    );
  }

  .markers-grid-item:hover {
    border-radius: 1px;
    outline: var(--border-size-base) solid var(--border-color-base);
  }
}

/**
 * ------------------------------------------------------------
 * Scrollbars
 * ------------------------------------------------------------
 */

/* Disable all scrollbars for Chrome, Edge, Safari and Firefox */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/**
 * ------------------------------------------------------------
 * SVGs
 * ------------------------------------------------------------
 */

svg.close {
  fill: white;
}

/**
 * ------------------------------------------------------------
 * Map / Enabling zooming with the mouse wheel
 * ------------------------------------------------------------
 */

.marker-content {
  display: none;
}

.gm-bundled-control.gm-bundled-control-on-bottom > div:first-child {
  left: -8px !important;
  top: -8px !important;
}

/**
 * ------------------------------------------------------------
 * Components > Scroll
 * ------------------------------------------------------------
 */

.scroll-wrapper {
  overflow: hidden;
}

.scroll {
  height: 100%;
  overflow-y: auto;
}

/**
 * ------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------
 */

.about-toggle-button:focus-visible,
.markers-grid-toggle-button:focus-visible,
.marker-page-close-button:focus-visible {
  background-color: gray;
  outline: none;
}

audio {
  display: block;
  height: 32px;
  width: calc(100% - 8px) !important;
  margin-left: 4px !important;
}

audio:focus-visible {
  border-radius: 20px;
  outline-color: white;
  outline-offset: 2px;
  outline-style: inset;
  outline-width: 1px;
}