/* Design fixes — v20260523 */

:root {
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --blue-600: #0284c7;
  --blue-500: #0ea5e9;
  --blue-400: #38bdf8;
  --blue-100: #e0f2fe;
  --blue-50: #f0f9ff;
}

html { font-size: 17px; }

body,
.btn,
input,
textarea,
.nav-desktop a,
.section-subtitle,
.trust-item span,
.trip-body p,
.faq-answer p,
.why-card p {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

h1, h2, h3, h4,
.section-title,
.trip-body h3,
.why-card h3,
.faq-question,
.mobile-nav a,
.trip-price,
.captain-avatar {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Headings — readable, not ultra-wide */
.hero h1 {
  font-size: clamp(1.875rem, 4.5vw, 2.875rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
}

.section-title {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.trip-body h3,
.why-card h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

/* Remove gold/coral — unified blue palette */
.text-accent {
  color: #7dd3fc !important;
  font-weight: 700 !important;
}

.hero-badge {
  color: #f0f9ff !important;
  background: rgba(12, 25, 41, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

.hero-badge .stars {
  color: #38bdf8 !important;
}

section:not(.species-section):not(.boat-section):not(.cta-section) .section-label {
  color: var(--blue-600) !important;
  letter-spacing: 0.12em !important;
}

.section-label--light {
  color: #7dd3fc !important;
}

.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(12, 25, 41, 0.82) 0%,
    rgba(12, 25, 41, 0.55) 45%,
    rgba(12, 25, 41, 0.88) 100%
  ) !important;
}

.hero-tagline {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  max-width: 36rem;
  margin-inline: auto;
}

/* Unified buttons */
.btn-primary,
a.btn-primary {
  background: var(--blue-600) !important;
  background-image: none !important;
  border-color: var(--blue-600) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(2, 132, 199, 0.35) !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
a.btn-primary:hover {
  background: #0369a1 !important;
  background-image: none !important;
  border-color: #0369a1 !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4) !important;
}

.btn-teal {
  background: var(--blue-600) !important;
  border-color: var(--blue-600) !important;
  color: #fff !important;
}

.btn-secondary {
  background: #fff !important;
  color: var(--blue-600) !important;
  border: 2px solid var(--blue-600) !important;
  font-weight: 600 !important;
}

.btn-secondary:hover {
  background: var(--blue-50) !important;
}

.btn-outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.cta-section .btn-outline {
  border-color: #fff !important;
}

/* Smaller, subtler icons */
.feature-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin-bottom: 0.625rem !important;
  border-radius: 10px !important;
  background: var(--blue-100) !important;
  border: 1px solid #bae6fd !important;
}

.why-card .feature-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 0 0.875rem !important;
}

.feature-icon > svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

.why-card .feature-icon > svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

.feature-icon > svg use {
  stroke: #0369a1 !important;
}

.why-card:hover .feature-icon,
.trust-item:hover .feature-icon {
  background: var(--blue-100) !important;
  border-color: #7dd3fc !important;
  transform: none !important;
  box-shadow: none !important;
}

.why-card:hover .feature-icon > svg use,
.trust-item:hover .feature-icon > svg use {
  stroke: #0284c7 !important;
}

.trust-item strong {
  font-weight: 600 !important;
}

.trip-badge {
  background: var(--blue-600) !important;
  color: #fff !important;
}

.trip-card.featured {
  border-color: var(--blue-500) !important;
}

.trip-price {
  font-weight: 700 !important;
  font-size: 1.75rem !important;
}

/* Species section — dark bg + readable text */
.species-section {
  background: linear-gradient(145deg, #0c1929 0%, #0f2847 50%, #0e4d6e 100%) !important;
  color: #f1f5f9 !important;
}

.species-section .section-label {
  color: #7dd3fc !important;
}

.species-section .section-title {
  color: #ffffff !important;
}

.species-section .section-subtitle {
  color: rgba(241, 245, 249, 0.9) !important;
}

.species-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.species-card h3 {
  color: #ffffff !important;
}

.species-card p {
  color: rgba(241, 245, 249, 0.85) !important;
}

/* Boat section — ensure dark bg + readable text */
.boat-section {
  background: linear-gradient(145deg, #0c1929 0%, #0f2847 45%, #0e4d6e 100%) !important;
  color: #f1f5f9 !important;
}

.boat-section .section-title {
  color: #ffffff !important;
}

.boat-section .section-subtitle {
  color: rgba(241, 245, 249, 0.9) !important;
}

.boat-section .section-label,
.boat-section .section-label--light {
  color: #7dd3fc !important;
}

.boat-spec strong {
  color: #e0f2fe !important;
}

.boat-spec span {
  color: rgba(241, 245, 249, 0.8) !important;
  opacity: 1 !important;
}

.boat-section .amenity-tag {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.captain-avatar {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  border-color: var(--blue-500) !important;
}

.review-stars {
  color: var(--blue-500) !important;
}

.nav-desktop a:hover,
.cta-contact a:hover,
.footer-links a:hover {
  color: var(--blue-400) !important;
}

.why-card {
  padding: 1.5rem !important;
}

.why-card p {
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
}

/* Light sections only — dark sections override below */
section:not(.species-section):not(.boat-section):not(.cta-section) .section-subtitle {
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

.review-card blockquote {
  font-style: normal !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
}

.faq-question {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
}

.included-item .check {
  width: 24px !important;
  height: 24px !important;
  font-size: 0.75rem !important;
  background: var(--blue-600) !important;
}

.step-card::before {
  background: var(--blue-600) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  width: 40px !important;
  height: 40px !important;
}