/* Utility classes */

.margin-block-600 {
  margin-block: var(--size-600);
}
.margin-bottom-600 {
  margin-bottom: var(--size-600);
}
.margin-top-400 {
  margin-top: var(--size-400);
}
.fs-city {
  font-size: 2em;
}

.fs-weather {
  font-size: 2em;
}

.fs-weather-small {
  font-size: 1.5em;
}

.no-wrap {
  white-space: nowrap;
}

/* .wrap {
flex-wrap: wrap;
} */
/* .wrap > button {
  margin: 0;
} */
/* card-weather */

.cities-block {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); */
  grid-template-columns: 1fr 1fr;
  gap: var(--size-400);
}

@media (max-width: 60em) {
  .cities-block {
    grid-template-columns: 1fr;
  }
}

.card-weather {
  padding: 1em 1em 0 1em;
  background-color: #0666b2;
}
.temp-middle-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-items: center;
  align-items: center;
}
.city-location {
  display: flex;
  align-items: center;
  gap: 1em;
}

.city-location > img {
  width: var(--font-size-medium);
  aspect-ratio: 1;
  object-fit: contain;
}

.add-city {
  width: calc(2 * var(--font-size-big));
  aspect-ratio: 1;
  object-fit: contain;
  margin-inline: auto;
  fill: none;
  stroke: var(--color-text-white);
  cursor: pointer;
}
.add-city:hover {
  stroke: var(--color-main-accent);
}

.daily-temperatura {
  margin-top: var(--size-400);
  display: grid;
  gap: var(--size-200);
}

.today-degrees {
  display: flex;
  align-items: center;
}

.today-degrees > img {
  width: calc(2 * var(--font-size-medium));
  aspect-ratio: 1;
  object-fit: contain;
}

.icon-large {
  width: 7rem;
  aspect-ratio: 1;
  object-fit: contain;
}

.icon-medium {
  width: 4rem;
  aspect-ratio: 1;
  object-fit: contain;
}

@media (min-width: 75em) {
  .icon-large {
    width: 9rem;
  }
}

@media (min-width: 67em) {
  .icon-medium {
    width: 6rem;
  }
}

.current-day {
  --color-day-backgound: #e02e46;

  width: min-content;
  margin-inline: auto;
  padding: 0.5em 1em;
  border-radius: 100vmax;
  background-color: var(--color-day-backgound);

  font-weight: var(--font-weight-bold);
}

.weather-conditions {
  display: grid;
  gap: var(--size-200);
}

.weather-conditions img {
  width: calc(1.5 * var(--font-size-text));
  aspect-ratio: 1;
  object-fit: contain;
}
.weather-conditions > div {
  display: flex;
  gap: var(--size-300);
}

.temp-forcast {
  /* display: grid;
  grid-template-columns: repeat(5,1fr); */
  display: flex;
  justify-content: space-around;
  gap: var(--size-600);
  padding: 1em;
  border-radius: 3em 3em 0 0;
  background-image: linear-gradient(#05548f, #065fa3);
}

.temp-forcast > * {
  flex: 1;
  /* flex-shrink: 0; */
}

.card-day {
  display: flex;
  flex-direction: column;
  /* justify-content: start; */
  align-items: center;
}

.x-close {
  margin-left: auto;
  font-size: var(--size-500);
  cursor: pointer;
}
.x-close:hover,
.x-close:focus-visible {
  color: var(--color-main-accent);
}

.no-geo-coordinates {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  margin: auto;
  width: 45%;
  height: calc(1.5 * var(--size-900));
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: var(--size-300);
  visibility: hidden;
}
.no-geo-coordinates[data-no-geo-coordinates] {
  visibility: visible;
  animation: no-geo-animation 3000ms ease-in-out;
}

@keyframes no-geo-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ----- Cities navigation ----- */
.cities-list {
  /* display: flex; */
  gap: var(--size-400);
  color: var(--color-text-white);
  font-weight: var(--font-weight-bold);
  /* font-size: var(--font-size-nav); */
}

/* .cities-list a {
  text-decoration: none;
} */

/* a {
  color: var(--color-text-white);
  text-decoration: none;
} */

/* .cities-list:hover::before,
.cities-list:focus-visible::before {
  content: '';
  position: absolute;
  top: var(--size-700);
  left: 0;
  width: 100%;
  height: var(--size-300);
  background-color: var(--color-main-accent);
} */

.cities-navigation ul {
  display: grid;
}
.cities-navigation ul li {
  position: relative;
  font-size: var(--size-450);
}

.cities-navigation ul li:hover::after,
.cities-navigation ul li:focus-visible::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--size-200));
  left: calc(-1 * var(--size-500));
  width: 138%;
  height: var(--size-700);
  background-color: var(--color-outline-on-dark);
  z-index: -1;
}

.cities-navigation ul li:hover,
.cities-navigation ul li:focus-visible {
  cursor: pointer;
}
/* .cities-navigation ul li:hover::before,
.cities-navigation ul li:focus-visible::before {
  content: '';
  position: absolute;
  top: var(--size-700);
  left: 0;
  width: 100%;
  height: var(--size-300);
  background-color: var(--color-main-accent);
} */
@media (min-width: 46em), (min-width: 67em) {
  .cities-navigation ul li {
    font-size: var(--size-450);
  }
}
.cities-navigation {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  padding: var(--size-700) var(--size-900) var(--size-500) var(--size-500);
  background-color: var(--color-main-body);
  transform: translateX(-100%);
  transition: 350ms;
}

.cities-navigation[data-visible] {
  transform: translateX(0);
}

.primary-header[data-overlay]::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgb(0, 0, 0, 0.6);
}

/* ----- TEMP ------ */
/* .border-line {
  border: 2px dashed firebrick;
} */