/**
 * Navbar weather chip — layout and typography.
 * Gradient classes come from weather-gradients.css via summary.id.
 */

.weather-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  width: fit-content;
  max-width: 100%;
  /* 6px pad + no layout border — height stays 48 with icon 36 */
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  /* Avoid overflow:hidden — with max-width it can square-cut the right radius (nav-colored sliver) */
  overflow: visible;
  box-shadow: none;
  background-clip: border-box;
  background-origin: border-box;
  color: var(--weather-ui-text, #e1e3e9);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

/* Real hairline border without competing with gradient overflow clipping */
.weather-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(225, 227, 233, 0.08);
  pointer-events: none;
  z-index: 1;
}

.weather-chip:hover,
.weather-chip:focus {
  color: var(--weather-ui-text, #e1e3e9);
  text-decoration: none;
  opacity: 0.92;
}

.weather-chip__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
}

.weather-chip__icon img {
  display: block;
  width: 36px;
  height: 36px;
}

.weather-chip__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1 1 auto;
  height: 36px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.weather-chip__location {
  display: flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  height: 16px;
  margin: 0;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.weather-chip__city {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.weather-chip__state {
  flex: 0 0 auto;
}

.weather-chip__details {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.weather-chip__temp {
  flex: 0 0 auto;
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
}

.weather-chip__feels {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--weather-ui-text-toned, #c2c6d3);
  font-size: 12px;
  line-height: 16px;
}

.weather-chip__feels-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.weather-chip__feels-value {
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-weight: 400;
}

.weather-chip__precip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--weather-ui-text-toned, #c2c6d3);
  font-size: 12px;
  line-height: 16px;
}

.weather-chip__precip i {
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.weather-chip__precip-value {
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.weather-chip--loading .weather-chip__icon-placeholder {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(225, 227, 233, 0.08);
  animation: weather-chip-pulse 1.5s ease-in-out infinite;
}

.weather-chip--loading .weather-chip__text {
  height: auto;
  gap: 6px;
  justify-content: center;
}

.weather-chip--loading .weather-chip__skeleton-bar {
  border-radius: 4px;
  background: rgba(225, 227, 233, 0.14);
  animation: weather-chip-pulse 1.5s ease-in-out infinite;
}

.weather-chip--loading .weather-chip__skeleton-bar--location {
  width: 80px;
  height: 10px;
}

.weather-chip--loading .weather-chip__skeleton-bar--details {
  width: 60px;
  height: 14px;
  background: rgba(225, 227, 233, 0.1);
}

@keyframes weather-chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-chip--loading .weather-chip__icon-placeholder,
  .weather-chip--loading .weather-chip__skeleton-bar {
    animation: none;
  }
}

.weather-chip-nav-item {
  display: flex;
  align-items: center;
  overflow: visible;
  /* Figma: 24px between chip and login/avatar — gap handled on .locationButton in nav-handoff.css */
  margin-right: 0;
}

.weather-chip-nav-item > div {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 220px;
  overflow: visible;
}

/* Beat #mainnav .navbar-nav a { padding: 4px 25px } which balloons the chip */
#mainnav .navbar-nav .weather-chip-nav-item a.weather-chip,
#mainnav .navbar-nav .weather-chip-nav-item a.weather-chip:hover,
#mainnav .navbar-nav .weather-chip-nav-item a.weather-chip:focus,
#mainnav .navbar-nav .weather-chip-nav-item a.weather-chip:active {
  position: relative;
  width: fit-content;
  max-width: 220px;
  height: 48px;
  padding: 6px 8px 6px 6px;
  margin: 0;
  font-weight: 400;
  line-height: normal;
  border: 0;
  border-radius: 8px;
  overflow: visible;
  box-shadow: none;
  background-clip: border-box;
  background-origin: border-box;
  text-decoration: none;
  color: var(--weather-ui-text, #e1e3e9);
}

#mainnav .navbar-nav .weather-chip-nav-item a.weather-chip:hover,
#mainnav .navbar-nav .weather-chip-nav-item a.weather-chip:focus,
#mainnav .navbar-nav .weather-chip-nav-item a.weather-chip:active {
  opacity: 0.92;
}

@media (max-width: 991px) {
  #mainnav .weather-chip-nav-item {
    display: none;
  }
}