/* --- CONTACT THE MAINLAND – Page-specific styles --- */

.contact-hero {
  text-align: center;
  margin-top: var(--space-10);
  margin-bottom: var(--space-8);
}
.contact-hero-desc {
  font-size: var(--font-size-lg);
  color: var(--color-warning);
  margin: 0 auto;
}

/* Contact form (message in a bottle) */
.contact-form-card {
  margin-top: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
#bottle-form {
  display: grid;
  gap: var(--space-5);
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bottle-send-btn {
  background: linear-gradient(90deg, var(--color-primary) 80%, var(--color-warning) 100%);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: var(--space-2);
  transition: background var(--transition), transform var(--transition);
}
.bottle-send-btn:hover,
.bottle-send-btn:focus-visible {
  background: linear-gradient(90deg, var(--color-success) 80%, var(--color-warning) 100%);
  transform: scale(1.045) rotate(-2deg);
}
.form-status {
  font-size: var(--font-size-sm);
  min-height: 28px;
  padding-top: var(--space-2);
  color: var(--color-warning);
}

/* Emergency Beacon */
#emergency-beacon {
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
}
.beacon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.beacon-btn {
  background: var(--color-surface);
  border-radius: var(--radius-round);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-2);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-success);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  outline: none;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  border: 1.5px solid var(--color-gray-700);
  min-height: 92px;
  text-align: center;
}
.beacon-btn:focus-visible,
.beacon-btn:hover {
  background: var(--color-warning);
  color: var(--color-background);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px) scale(1.03);
}
.beacon-icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
  transition: transform var(--transition);
}

/* Island HQ */
.hq-card {
  margin-top: var(--space-12);
}
.hq-card p,
.logbook-desc {
  margin: 0 auto;
}
.hq-flex {
  gap: var(--space-8);
}
.hq-info {
  min-width: 250px;
  flex: 2 1 300px;
}
.hq-map {
  flex: 2 1 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hq-socials {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  margin-top: var(--space-2);
  justify-content: center;
}
.hq-socials a {
  text-decoration: none;
  color: var(--color-success);
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: color var(--transition);
}
.hq-socials a:hover,
.hq-socials a:focus-visible {
  color: var(--color-warning);
}
.island-map-embed {
  position: relative;
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  max-width: 250px;
}
.map-img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.map-marker {
  position: absolute;
  left: 62%;
  top: 42%;
  transform: translate(-50%,-50%);
  font-size: 2.1rem;
}
.map-desc {
  font-size: var(--font-size-xs);
  text-align: center;
  color: var(--color-gray-300);
}

/* Logbook */
.logbook-card {
  margin-top: var(--space-16);
}
.logbook-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  margin-top: var(--space-3);
}
.logbook-status {
  font-size: 1.4rem;
  margin-right: var(--space-2);
  vertical-align: middle;
}
.log-status-success { color: var(--color-success); }
.log-status-pending { color: var(--color-warning); }
.log-status-info { color: var(--color-primary); }
.logbook-message a {
  color: var(--color-primary);
}
.logbook-message a:hover {
  text-decoration: underline;
}

/* Newsletter – Join Crew */
.join-crew-card {
  margin-top: var(--space-12);
  background: linear-gradient(90deg, rgba(49,133,70,0.04) 80%, rgba(225,167,76,0.13) 100%);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-lg);
}
.newsletter-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  align-items: stretch;
  justify-content: center;
}
#newsletter-email {
  max-width: 320px;
}
.join-crew-btn {
  white-space: nowrap;
}

/* Dispatch hours / support team */
.dispatch-card {
  margin-top: var(--space-12);
  text-align: center;
}
.dispatch-list {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  font-size: var(--font-size-base);
  margin-bottom: var(--space-6);
}
.dispatch-list li {
  background: var(--color-gray-800);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-warning);
}
.rescue-crew-row {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  align-items: flex-end;
}
.rescue-operator {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--font-size-base);
}
.rescue-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 10px 0 rgba(49,133,70,0.08);
  border: 2.5px solid var(--color-gray-700);
  background: var(--color-surface);
}
.rescue-title {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
}
h2 {
  text-align: center;
}
/* Broadcasts section */
.broadcasts-card {
  margin-top: var(--space-14, 56px);
  background: linear-gradient(115deg, rgba(49,133,70,0.12) 65%, rgba(225,167,76,0.10));
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
}
.broadcasts-list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.broadcast {
  background: var(--color-surface);
  border-left: 6px solid var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  gap: var(--space-4);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition);
}
.broadcasts-list p {
  margin: 0 auto;
}
.broadcast-title {
  color: var(--color-warning);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-tight);
}
.broadcast-icon {
  font-size: 2.1rem;
  min-width: 2.2em;
  margin-right: var(--space-2);
}
.broadcast-critical { border-left-color: var(--color-danger); }
.broadcast-info { border-left-color: var(--color-primary); }
.broadcast-good { border-left-color: var(--color-warning); }

/* Responsive */
@media (max-width: 900px) {
  .hq-flex,
  .newsletter-row,
  .rescue-crew-row {
    flex-direction: column !important;
    align-items: stretch;
    gap: var(--space-5);
  }
  .hq-map,
  .hq-info {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .contact-form-card,
  .broadcasts-card,
  .dispatch-card {
    padding: var(--space-4) !important;
  }
  .dispatch-list {
    flex-direction: column;
    gap: var(--space-3);
  }
  .beacon-grid {
    grid-template-columns: 1fr 1fr;
  }
  .rescue-crew-row {
    gap: var(--space-5);
    flex-direction: column !important;
  }
}