/* Custom styles for forecast subpage */
  .forecast-hero {
  	position: relative;
  	padding-top: 140px;
  	padding-bottom: 60px;
  	overflow: hidden;
  }

  .forecast-hero-bg {
  	position: absolute;
  	inset: 0;
  	background:
  		radial-gradient(ellipse 80% 60% at 50% -20%, rgba(0, 212, 255, 0.1) 0%, transparent 60%),
  		linear-gradient(180deg, #0a1628 0%, #0d1b2e 100%);
  	z-index: 1;
  }

  .forecast-hero-content {
  	position: relative;
  	z-index: 2;
  }

  .forecast-grid-4 {
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
  	gap: 24px;
  	margin-bottom: 40px;
  }

  @media (max-width: 992px) {
  	.forecast-grid-4 {
  		grid-template-columns: repeat(2, 1fr);
  	}
  }

  @media (max-width: 576px) {
  	.forecast-grid-4 {
  		grid-template-columns: 1fr;
  	}
  }

  .forecast-card-detail {
  	background: var(--navy-card);
  	border: 1px solid var(--border);
  	border-radius: var(--radius);
  	padding: 24px;
  	display: flex;
  	flex-direction: column;
  	gap: 8px;
  	transition: var(--transition);
  }

  .forecast-card-detail:hover {
  	border-color: var(--border-hover);
  	transform: translateY(-2px);
  }

  .forecast-card-label {
  	font-size: 0.85rem;
  	color: var(--text-secondary);
  	font-weight: 500;
  }

  .forecast-card-value {
  	font-size: 1.8rem;
  	font-weight: 800;
  	color: var(--text-primary);
  	display: flex;
  	align-items: center;
  	gap: 10px;
  }

  .forecast-card-sub {
  	font-size: 0.85rem;
  	color: var(--text-muted);
  }

  .status-badge {
  	display: inline-flex;
  	align-items: center;
  	gap: 6px;
  	padding: 4px 12px;
  	border-radius: 100px;
  	font-size: 0.85rem;
  	font-weight: 700;
  	width: fit-content;
  }

  .section-forecast-title {
  	font-size: 1.5rem;
  	font-weight: 800;
  	margin-bottom: 24px;
  	border-bottom: 1px solid var(--border);
  	padding-bottom: 12px;
  	color: var(--text-primary);
  }

  /* Hourly scroll table */
  .hourly-table-wrap {
  	background: var(--navy-card);
  	border: 1px solid var(--border);
  	border-radius: var(--radius);
  	overflow-x: auto;
  	margin-bottom: 40px;
  }

  .hourly-table {
  	width: 100%;
  	border-collapse: collapse;
  	text-align: right;
  	min-width: 700px;
  }

  .hourly-table th,
  .hourly-table td {
  	padding: 16px 24px;
  	border-bottom: 1px solid var(--border);
  	font-size: 0.95rem;
  }

  .hourly-table th {
  	color: var(--text-secondary);
  	font-weight: 600;
  	background: rgba(13, 27, 46, 0.5);
  }

  .hourly-table tr:hover td {
  	background: rgba(0, 212, 255, 0.02);
  }

  .hourly-table tr.alert-row td {
  	background: rgba(245, 158, 11, 0.03);
  }

  /* Daily cards */
  .daily-grid {
  	display: grid;
  	grid-template-columns: repeat(7, 1fr);
  	gap: 16px;
  	margin-bottom: 60px;
  }

  @media (max-width: 1200px) {
  	.daily-grid {
  		grid-template-columns: repeat(4, 1fr);
  	}
  }

  @media (max-width: 768px) {
  	.daily-grid {
  		grid-template-columns: repeat(2, 1fr);
  	}
  }

  @media (max-width: 480px) {
  	.daily-grid {
  		grid-template-columns: 1fr;
  	}
  }

  .daily-card {
  	background: var(--navy-card);
  	border: 1px solid var(--border);
  	border-radius: var(--radius);
  	padding: 20px 16px;
  	text-align: center;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	gap: 8px;
  	transition: var(--transition);
  }

  .daily-card:hover {
  	border-color: var(--border-hover);
  	transform: translateY(-2px);
  }

  .daily-card-name {
  	font-weight: 700;
  	color: var(--text-primary);
  }

  .daily-card-date {
  	font-size: 0.8rem;
  	color: var(--text-muted);
  }

  .daily-card-icon {
  	font-size: 2rem;
  	margin-block: 8px;
  }

  .daily-card-temp {
  	font-weight: 600;
  	font-size: 0.95rem;
  }

  .daily-card-wind {
  	font-size: 0.85rem;
  	color: var(--teal);
  	font-weight: 700;
  }

  .daily-card-wave {
  	font-size: 0.85rem;
  	color: var(--blue-accent);
  	font-weight: 700;
  }

  /* Wind direction arrow */
  .wind-arrow {
  	display: inline-block;
  	font-size: 1rem;
  	transition: transform 0.5s ease;
  	color: var(--teal);
  }

  /* Marina links */
  .marina-links-card {
  	background: var(--navy-mid);
  	border: 1px solid var(--border);
  	border-radius: var(--radius);
  	padding: 32px;
  	margin-bottom: 60px;
  }

  .marina-links-grid {
  	display: grid;
  	grid-template-columns: repeat(6, 1fr);
  	gap: 16px;
  	margin-top: 20px;
  }

  @media (max-width: 992px) {
  	.marina-links-grid {
  		grid-template-columns: repeat(3, 1fr);
  	}
  }

  @media (max-width: 576px) {
  	.marina-links-grid {
  		grid-template-columns: repeat(2, 1fr);
  	}
  }

  .marina-link-btn {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	background: var(--navy-card);
  	border: 1px solid var(--border);
  	border-radius: var(--radius-sm);
  	padding: 12px;
  	text-decoration: none;
  	color: var(--text-secondary);
  	font-weight: 600;
  	transition: var(--transition);
  	text-align: center;
  }

  .marina-link-btn:hover,
  .marina-link-btn.active {
  	border-color: var(--teal);
  	color: var(--text-primary);
  	background: var(--teal-glow);
  }

  /* Back link */
  .back-home-link {
  	display: inline-flex;
  	align-items: center;
  	gap: 8px;
  	color: var(--text-secondary);
  	text-decoration: none;
  	font-size: 0.95rem;
  	margin-bottom: 24px;
  	transition: var(--transition);
  }

  .back-home-link:hover {
  	color: var(--teal);
  }