/* Weather Widget Styles */

#weather-widget {
  margin: var(--spacing-lg) 0;
}

/* Card Container */
.weather-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  max-width: 400px;
  margin: 0 auto;
  transition: var(--transition-standard);
}

.weather-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Header */
.weather-header {
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-md);
}

.weather-header h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3-mobile);
  color: var(--color-forest-green);
  margin: 0 0 var(--spacing-xs) 0;
  font-weight: 600;
}

@media (min-width: 768px) {
  .weather-header h3 {
    font-size: var(--fs-h3-desktop);
  }
}

.weather-date {
  font-size: var(--fs-small);
  color: var(--color-wood-brown);
  margin: 0;
  font-style: italic;
}

/* Main Weather Display */
.weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) 0;
}

.weather-icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 2px 4px rgba(43, 43, 43, 0.1));
}

.weather-emoji {
  font-size: 4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(43, 43, 43, 0.1));
}

.weather-range {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-wood-brown);
  margin: 0 0 var(--spacing-sm) 0;
}

.weather-temp {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

.temp-value {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--color-barn-red);
  line-height: 1;
}

.temp-unit {
  font-family: var(--font-body);
  font-size: var(--fs-h3-mobile);
  color: var(--color-wood-brown);
  margin-bottom: 0.25rem;
}

/* Details */
.weather-details {
  text-align: center;
  padding: var(--spacing-md) 0 0;
  border-top: 1px solid var(--border-color);
}

.weather-condition {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--color-forest-green);
  margin: 0 0 var(--spacing-sm) 0;
  font-weight: 600;
  text-transform: capitalize;
}

.weather-message {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-natural-black);
  margin: 0;
  line-height: var(--lh-body);
  font-style: italic;
}

/* Loading State */
.weather-loading {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-wood-brown);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

.weather-loading p {
  margin: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Error State */
.weather-error,
.weather-future {
  text-align: center;
  padding: var(--spacing-lg);
  background-color: var(--color-cream);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--color-wood-brown);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

.weather-error p,
.weather-future p {
  margin: 0;
  line-height: var(--lh-body);
}

/* Responsive Design */
@media (max-width: 479px) {
  .weather-card {
    padding: var(--spacing-md);
  }

  .weather-main {
    gap: var(--spacing-md);
  }

  .weather-icon {
    width: 70px;
    height: 70px;
  }

  .temp-value {
    font-size: 3rem;
  }
}

/* Tablet */
@media (min-width: 768px) {
  .weather-card {
    max-width: 500px;
    padding: var(--spacing-xl);
  }

  .weather-main {
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
  }

  .weather-icon {
    width: 100px;
    height: 100px;
  }

  .temp-value {
    font-size: 4rem;
  }
}

/* ===== WEATHER + SUBSCRIBE TWO-COLUMN LAYOUT ===== */
.weather-subscribe-row {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
  margin-top: var(--spacing-md);
}

.weather-subscribe-col {
  flex: 1;
}

/* Remove all card styling from weather widget in two-column layout */
.weather-subscribe-row .weather-card {
  background: none;
  border: none;
  box-shadow: none;
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: none;
  margin: 0;
}

.weather-subscribe-row .weather-card:hover {
  box-shadow: none;
  transform: none;
}

/* Shadow on the containing column, not the widget */
.weather-subscribe-row .weather-subscribe-col:first-child {
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
}

/* Compact the weather widget spacing */
.weather-subscribe-row .weather-header {
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.weather-subscribe-row .weather-main {
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-xs) 0;
  gap: var(--spacing-md);
}

.weather-subscribe-row .weather-details {
  padding-top: var(--spacing-sm);
}

.weather-subscribe-row #weather-widget {
  margin: 0;
}

@media (max-width: 767px) {
  .weather-subscribe-row {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
}

/* Off-Season (Hidden) */
#weather-widget[style*="display: none"] {
  display: none !important;
}

/* ===== CONDENSED WEATHER WIDGET (banner-row) ===== */
.weather-condensed {
  background-color: var(--color-cream, #FEF8F3);
  border: 3px solid var(--border-color, #D4C4B8);
  border-radius: var(--border-radius, 8px);
  padding: 0.95rem 1.25rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(197,165,90,0.15), inset 0 -1px 0 rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 125px;
}

.weather-condensed-title {
  font-family: var(--font-display, 'Lora', serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-wood-brown, #8B7355);
  line-height: 1.2;
}

.weather-condensed-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.weather-condensed-temp {
  font-family: var(--font-display, 'Lora', serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-wood-brown, #8B7355);
  line-height: 1;
}