/* TODO: migrate to SCSS */


/* ================================================
   HEADER
   ================================================ */

.header__language {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

/* Logout icon */
.status-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.status-icon--circle {
  border: 2px solid lightgreen;
  border-radius: 100%;
  background: green;
}

.status-icon.status-icon--logout svg {
  display: flex;
}

/* Hide logout label visually */
.nav-link--logout span {
  position: absolute;
  top: -500px;
}


/* ================================================
   FOOTER
   ================================================ */

.mm-footer__legal a {
  color: white;
}

.mm-footer__legal .col-auto a {
  position: relative;
}

.mm-footer__legal .col-auto:not(:last-child) a::after {
  content: "|";
  position: absolute;
  right: -1rem;
  color: white;
}

.node-25 .mm-intro__picture.mm-intro__picture--background.h-100 {
  background-position: bottom;
}


/* ================================================
   VISOR
   ================================================ */

.block--iframe-visor-block iframe {
  height: 40rem;
}


/* ================================================
   HOME
   ================================================ */

.block--type-intro-video .mm-intro-video__branding {
  display: flex;
  -moz-column-gap: unset;
  column-gap: unset;
  max-width: 90%;
}

.mm-intro-video__author {
  color: #fff;
  text-align: right;
  font-size: 0.6rem;
  padding: 0rem 0.8rem;
  padding-bottom: 0.5rem;
  margin: 0;
}

.paragraph--view-mode--default .mm-card .mm-card__info {
  min-height: 10rem !important;
  width: 100%;
}

@media (max-width: 767.98px) {
  .path-frontpage .paragraph--view-mode--default .mm-card {
    max-width: 27rem;
  }
}

@media (min-width: 768px) and (max-width: 954px) {
  .paragraph--view-mode--default .mm-card .mm-card__info {
    height: 12rem !important;
  }
}

@media (min-width: 1199px) and (max-width: 1500px) {
  .paragraph--view-mode--default .mm-card .mm-card__info {
    max-height: 10.5rem;
  }
}

/* Carousel */
.block--type-carousel-block .slick-autoplay-toggle-button {
  bottom: 0;
  left: 0;
  margin-bottom: 1rem;
  margin-left: 1rem;
  padding: 0.10rem 0.40rem 0rem;
  background-color: #333;
  border-radius: 5px;
  color: #fff;
  opacity: 1;
}

/* Cards layout */
.paragraph.paragraph--type--card.paragraph--view-mode--default,
.paragraph.paragraph--type--card.paragraph--view-mode--default a,
.paragraph.paragraph--type--card.paragraph--view-mode--default a .mm-card {
  height: 100%;
}

.paragraph.paragraph--type--card.paragraph--view-mode--default a .mm-card {
  display: flex;
  flex-direction: column;
}

.paragraph.paragraph--type--card.paragraph--view-mode--default a .mm-card .mm-card__info {
  flex-grow: 1;
}


/* ================================================
   Seguimiento y avances
   ================================================ */
.block--marmenor-imgauxseccionseguimientoyavances .field--name-field-img-field{
  text-align: center;
}

/* ================================================
   DSS
   ================================================ */

/* DSS — Redes de control / Escenarios de cambio climático */

.mm-card.aux-style-dss {
  display: flex;
  flex-wrap: wrap;
}

.mm-card.aux-style-dss .mm-card__background {
  flex: 1;
  min-width: 15rem;
  min-height: 50vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.mm-card.aux-style-dss .mm-card__logo {
  position: absolute;
  top: -1rem;
  left: -1rem;
  display: flex;
  justify-content: center;
}

.mm-card.aux-style-dss .mm-card__logo img {
  height: 4rem;
  align-self: center;
}

.mm-card.aux-style-dss .mm-card__info {
  flex: 1;
  min-width: 300px;
  padding: 1rem;
  min-height: fit-content;
  align-self: end;
}

.paragraph.paragraph--type--card.paragraph--view-mode--dss-medidas-complementarias {
  display: flex;
  justify-content: center;
}

.block-cards-block--seguimiento .mm-card .mm-card__info {
  min-width: 15rem;
}

.block-basic--dss.block--marmenor-dssquemodelosseutilizan-2 .block__content {
  border-bottom: unset;
}

/* DSS — Iconos de modelos */

.paragraph--type--card .mm-card {
  width: 100%;
}

.mm-model .mm-model__list .image-wrapper-style-data {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem;
  text-align: center;
}

.block--marmenor-modelodelmarmenor .mm-model .mm-model__list .image-wrapper-style-data img {
  max-width: 1rem;
}

.mm-model .mm-model__list .image-wrapper-style-data img {
  max-width: 3rem;
}

.mm-model .mm-model__list .image-name {
  font-size: 0.8rem;
  color: #333;
  align-self: flex-end;
}

.mm-model .mm-model__list img[data-alt="Clorofila"],
.mm-model .mm-model__list img[data-alt="Turbidez"],
.mm-model .mm-model__list img[data-alt="Indicadores de biodiversidad"] {
  width: 1rem;
}

.mm-model .mm-model__list div#img-check .image-name {
  margin: 0;
}

.paragraph--view-mode--control-data p.image-name {
  align-self: center !important;
}

.node-26 .page__content .block-block-content {
  margin-top: 0;
}

/* DSS — Reeditada */

.paragraph--view-mode--control-data .mm-model--control-data {
  background-color: transparent;
  border: unset;
  padding: unset;
}

.mm-model--data-container {
  background-color: #fff;
  border: 3px solid #245499;
  padding: 1.6rem;
}

.paragraph--view-mode--control-data .mm-model {
  padding: unset;
  margin: unset;
}

.row.mm-model--data-container {
  margin: 1rem 2rem;
}

.display--dss-modelo-de-aguas.block--model-block .field--name-field-link {
  text-align: end;
  text-decoration: underline;
  margin: unset;
  padding: unset;
  max-width: 91%;
  padding-top: 1rem;
  font-size: 0.8rem;
}

.node-25 .block-basic--dss .block__content {
  border-bottom: unset;
  padding: unset;
}

.block--model-block.display--dss-modelo-de-aguas.block-model-block--dss-modelo-de-aguas {
  padding: 0;
}

@media (min-width: 768px) {
  .block--model-block.display--dss-modelo-de-aguas.block-model-block--dss-modelo-de-aguas {
    padding: 3rem;
  }
}

.mm-model--data-container .field--name-field-model-subtitle {
  font-family: "Barlow Condensed", Sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #245499;
  text-align: center;
}

.block--model-block.display--dss-modelo-de-aguas.block-model-block--dss-modelo-de-aguas.block--marmenor-modelizacionymodelos-2:before {
  background-image: url(/themes/custom/marmenor/src/assets/icons/arrow-down.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 3rem;
  margin: 0 auto 6px;
  text-align: center;
  width: 3rem;
}

.mm-model--control-data .mm-model__title .h3,
.mm-model--control-data .mm-model__title h3 {
  font-weight: 500;
  text-align: left;
}

/* DSS — Evaluación de la recuperación del sistema socioecológico */

.special-style h2 {
  color: #214e8d;
  font-weight: 600;
}

/* Read more links (used in DSS) */

.read-more-links .text-expanded {
  display: none;
}

.read-more-links:not(.collapsed) .text-expanded {
  display: inline;
}

.read-more-links:not(.collapsed) .text-collapsed {
  display: none;
}


/* ================================================
   EVENTS (node--event--full)
   ================================================ */

.mm-pagtitle__right.flex-grow-1 {
  background-size: cover;
}

.event .event__col {
  padding: 1.5rem;
}

.event h2,
.handouts--title {
  color: #245499;
  font-size: 1.4rem;
  font-weight: 600;
}

.event .event__col--1 {
  background-color: #E3EBF6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event .event__col--2 {
  background-color: #C0CDE0;
}

.event .event__col--3 {
  background-color: #F3F5F8;
}

.event .event__col--4 {
  border-left: 2px solid #557EBD;
}

.event__date-label,
.event__location,
.event__googlemaps a {
  color: #000000;
  font-size: 1rem;
  font-weight: 600;
}

.event__location,
.event__googlemaps {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
}

.event__location-icon {
  width: 0.75rem;
}

.event__googlemaps .event__location-icon {
  width: 1rem;
}

.event .event__piece--gallery .field--name-field-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.30rem;
}

.event__piece {
  margin-bottom: 1.6rem;
}

/* Handouts */

.paragraph--type--handouts:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  transition: .3s;
}

.paragraph--type--handouts .handouts--fields {
  display: flex;
  flex-wrap: wrap;
}

.paragraph--handouts__container {
  background: #F4F4F4;
  margin-bottom: 1rem;
}

.paragraph--handouts__container .handouts--text {
  padding: 1rem;
  width: 55%;
}

.paragraph--handouts__container .handouts__img {
  width: 45%;
}

@media (max-width: 767.98px) {
  .paragraph--handouts__container .handouts__img {
    display: none;
    width: unset;
  }
  .paragraph--handouts__container .handouts--text {
    width: 100%;
  }
}

/* Video cards */

.paragraph--type--video-card,
.mm-vcard {
  height: 100%;
}

.mm-vcard {
  background: #F4F4F4;
}

.mm-vcard--link:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  transition: .3s;
}

.mm-vcard__picture {
  position: relative;
}

.mm-vcard__date {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: 1;
  background-color: #1C244B;
  padding: 0 0.6rem;
  color: white;
  margin-top: -7px;
}

.mm-vcard .mm-vcard__title {
  color: #245499;
  font-size: 1.4rem;
  font-weight: 600;
}

.mm-vcard .mm-vcard__body {
  padding: 1rem;
}