/* ============================================================
   CampingCR — Clima (Weather) styles
   ============================================================ */

/* ---------- Weather Card (current conditions) ---------- */
.weather-card {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  color: var(--color-white);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.weather-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.weather-temp {
  font-size: 4rem;
  font-weight: 800;
  font-family: var(--font-heading);
  line-height: 1;
}
.weather-desc { font-size: 1rem; opacity: .85; text-transform: capitalize; }
.weather-main-icon { font-size: 5rem; line-height: 1; flex-shrink: 0; }
.weather-detail {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .975rem;
  opacity: .85;
}

/* ---------- City selector ---------- */
.weather-city-select {
  max-width: 220px;
}

/* ---------- Forecast items ---------- */
.weather-forecast-item {
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  text-align: center;
  flex: 1;
  min-width: 72px;
}
.weather-forecast-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin: .4rem 0;
  display: block;
}
.weather-forecast-high {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white);
}
.weather-forecast-low {
  font-size: .925rem;
  color: rgba(255,255,255,.52);
}

/* ---------- Recommendation card ---------- */
.weather-recommendation {
  border-left: 4px solid var(--color-gray);
  background: var(--color-light-gray);
  transition: background .25s ease, border-color .25s ease;
}

/* Matches badge-difficulty / danger-pill semantic palette */
.weather-recommendation--excellent {
  background: #D1FAE5;
  border-left-color: #065F46;
}
.weather-recommendation--acceptable {
  background: var(--color-info-light);
  border-left-color: var(--color-info);
}
.weather-recommendation--caution {
  background: #FEF3C7;
  border-left-color: #92400E;
}
.weather-recommendation--not-recommended {
  background: #FEE2E2;
  border-left-color: #991B1B;
}
.weather-recommendation--unknown {
  background: var(--color-light-gray);
  border-left-color: var(--color-gray);
}

/* ---------- Season tip cards ---------- */
.weather-season-card {
  border-left: 4px solid transparent;
}
.weather-season-card--dry {
  background: #E8F5E9;
  border-left-color: var(--color-primary);
}
.weather-season-card--rainy {
  background: #E3F2FD;
  border-left-color: #1976D2;
}
.weather-season-card--storm {
  background: #FCE4EC;
  border-left-color: #C62828;
}
.weather-season-title--rainy {
  color: #1976D2;
}

/* ---------- Loading & fallback states ---------- */
.weather-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: .65rem;
  text-align: center;
}
.weather-loading p { margin: 0; font-size: .9rem; }

.weather-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  gap: .4rem;
  text-align: center;
  opacity: .8;
}
.weather-fallback p   { margin: 0; font-size: .9rem; }
.weather-fallback small { font-size: .925rem; opacity: .7; }

/* ---------- Responsive ---------- */
@media (max-width: 576px) {
  .weather-temp { font-size: 3rem; }
  .weather-forecast-item { padding: .6rem .75rem; }
  .weather-forecast-high { font-size: .95rem; }
}

/* ============================================================
   Tides widget
   ============================================================ */
.tide-grid {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.tide-day-card {
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  flex: 1;
  min-width: 155px;
}
.tide-day-header {
  background: var(--color-primary);
  color: var(--color-white);
  padding: .55rem .9rem;
  font-size: .925rem;
  font-weight: 600;
  text-transform: capitalize;
}
.tide-day-events { padding: .4rem .75rem; }

.tide-event {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--color-light-gray);
}
.tide-event:last-child { border-bottom: none; }

.tide-event__info { display: flex; flex-direction: column; }
.tide-event__label {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tide-event__time { font-size: .925rem; color: var(--color-gray); }
.tide-event__height { font-size: .975rem; font-weight: 700; white-space: nowrap; }

/* High tide — same blue hue as "acceptable" recommendation level */
.tide-event--high .tide-event__label,
.tide-event--high .tide-event__height { color: var(--color-info); }
.tide-icon--high { color: var(--color-info); font-size: .9rem; }

/* Low tide — muted */
.tide-event--low .tide-event__label,
.tide-event--low .tide-event__height { color: var(--color-gray); }
.tide-icon--low { color: var(--color-gray); font-size: .9rem; }

/* Footer: attribution + disclaimer */
.tide-footer {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--color-light-gray);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1.5;
}
.tide-station {
  display: block;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: .35rem;
}
.tide-disclaimer {
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: .925rem;
}
.tide-copyright { color: var(--color-gray); }

/* No-coast note */
.tide-no-coast {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--color-light-gray);
  border-left: 3px solid var(--color-gray);
  border-radius: var(--radius-sm);
  color: var(--color-gray);
  font-size: .9rem;
}
.tide-no-coast i { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

/* ---------- Tide help (collapsible explainer) ---------- */
.tide-help {
  margin-bottom: 1rem;
  background: var(--color-light-gray);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tide-help__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem 1rem;
  font-size: .925rem;
  font-weight: 600;
  color: var(--color-dark);
  user-select: none;
}
.tide-help__summary::-webkit-details-marker { display: none; }
.tide-help__summary::marker { display: none; }
.tide-help__summary::after {
  content: '›';
  font-size: 1rem;
  color: var(--color-gray);
  flex-shrink: 0;
  transition: transform .18s ease;
}
.tide-help[open] > .tide-help__summary::after {
  transform: rotate(90deg);
}
.tide-help__list {
  margin: 0;
  padding: 0 1rem .75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  border-top: 1px solid var(--color-white);
}
.tide-help__list li {
  font-size: .925rem;
  color: var(--color-gray);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 576px) {
  .tide-day-card { min-width: 130px; }
  .tide-day-header { padding: .45rem .7rem; font-size: .85rem; }
  .tide-event__label { font-size: .8rem; }
  .tide-help__summary { font-size: .85rem; padding: .6rem .85rem; }
  .tide-help__list { padding: 0 .85rem .6rem 1.4rem; }
  .tide-help__list li { font-size: .85rem; }
}