/*
 Theme Name:   Redes Vivas
 Theme URI:    
 Description:  
 Author:       Cooperativa EITA
 Author URI:   http://eita.coop.br
 Template:     blocksy
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  redesvivas
*/

/*DEFAULT*/
h1,
.wp-block-heading h1 {
  --theme-font-size: var(--wp--preset--font-size--xxl);
  font-weight: 600;
  line-height: 1.25;
}
h2,
.wp-block-heading h2 {
  --theme-font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  line-height: 1.5;
}
h3,
.wp-block-heading h3 {
  --theme-font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.25;
}
h4,
.wp-block-heading h4 {
  --theme-font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  line-height: 1.3;
}
h5,
.wp-block-heading h5 {
  --theme-font-size: var(--wp--preset--font-size--normal);
  font-weight: 400;
  line-height: 1.5;
}
h6,
.wp-block-heading h6 {
  --theme-font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  line-height: 1.5;
}
p,
.wp-block-paragraph {
  --theme-font-size: var(--wp--preset--font-size--normal);
  font-weight: 400;
  line-height: 1.5;
}
figcaption,
.wp-element-caption {
  --theme-font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  line-height: 1.5;
}
/*END OF DEFAULT CSS*/

/*MAP*/
#custom-map {
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: 520px;
  border-radius: 8px;
  overflow: hidden;

  input {
    border: 2px solid var(--theme-palette-color-11);
    border-color: var(--theme-palette-color-11) !important;
  }

  .map-filters {
    background: var(--theme-palette-color-5);
    padding: 2rem;
    form {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: stretch;
    }

    h3 {
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.1;
      text-align: center;
    }

    a {
      display: flex;
      align-items: center;
      align-content: center;
      align-self: stretch;
      border-radius: 8px;
      background: var(--theme-palette-color-11);
      color: white;
      padding: 13px 0;
      justify-content: center;
      font-family: Roboto;
      font-size: 13px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      letter-spacing: 0.52px;
    }
  }
}

.map-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--theme-palette-color-11);
  border-radius: 12px;
  padding: 1.5rem;
  gap: 1rem;
  margin-bottom: 2rem;

  h4 {
    color: var(--theme-palette-color-10);
    font-family: Roboto;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
  }

  p {
    font-family: Roboto;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    color: var(--theme-palette-color-4);
    line-height: 1;
  }

  .bottom-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;

    a {
      display: flex;
      align-items: center;
      align-content: center;
      align-self: stretch;
      border-radius: 8px;
      background: var(--theme-palette-color-11);
      color: white;
      padding: 13px 1.75rem;
      justify-content: center;
      font-family: Roboto;
      font-size: 13px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      letter-spacing: 0.52px;
    }
  }
}

@media screen and (max-width: 600px) {
  #custom-map {
    display: flex;
    flex-direction: column;
  }
  .map-filters form {
    gap: 20px;
  }
  #map-content {
    height: 400px;
  }
  .map-card .bottom-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}