/* ==========================================================================
   Beaches stylesheet
   Cornwall Online - www.cornwall-online.co.uk/beaches/css/beaches.css
   ========================================================================== */

:root {
  --beach-blue-dark: #0b3d55;
  --beach-blue: #1578a8;
  --beach-blue-light: #4fa8d8;
  --beach-sand: #f7f1e3;
  --beach-text: #21282d;
}

body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  color: var(--beach-text);
  background-color: #ffffff;
}

a {
  color: var(--beach-blue);
}
a:hover {
  color: var(--beach-blue-dark);
}

/* --------------------------------------------------------------------
   Page header banner - background image is set per page via inline
   style="background-image:url('images/<file>.jpg')" since every beach
   has its own hero photo.
   -------------------------------------------------------------------- */
.beach-header {
  background-color: var(--beach-blue-dark);
  background-size: cover;
  background-position: center;
  padding: 6rem 1rem;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.beach-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 30, 43, 0.5);
}
.beach-header .container {
  position: relative;
  z-index: 1;
}
.beach-header h1 {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.beach-header .lead {
  font-weight: 300;
}

/* --------------------------------------------------------------------
   Sub-page navigation (Introduction + each named beach)
   -------------------------------------------------------------------- */
nav.beach-subnav {
  background-color: var(--beach-sand);
}

/* --------------------------------------------------------------------
   Visitor Information cards
   -------------------------------------------------------------------- */
.visitor-info-card {
  height: 100%;
  border: 1px solid #dfe6ea;
  border-radius: 0.75rem;
}
.visitor-info-card .bi {
  color: var(--beach-blue);
}

.last-updated {
  font-size: 0.8rem;
  color: #6c757d;
}