:root {
  --hero-image: url("images/default-banner.jpg");
}

body {
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #f7f6f2;
  color: #222;
}

h1, h2, h3, h4 {
  font-family: "Playfair Display", "Times New Roman", serif;
  letter-spacing: 0.02em;
}

.navbar {
  background-color: #fdfbf6;
}

.navbar-nav .nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.navbar-brand {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
    
.page-header {
  --hero-gradient: linear-gradient(
      to right,
      rgba(10, 34, 64, 0.88),
      rgba(10, 34, 64, 0.75)
    );

  background-image: var(--hero-gradient), var(--hero-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;   /* default */
  background-origin: padding-box;  /* default */
  background-clip: border-box;     /* default */
  color: #fdfbf6;
  padding: 4rem 0;
}

.btn-primary {
  background-color: #c48a3b;
  border-color: #c48a3b;
}

.btn-primary:hover {
  background-color: #aa7330;
  border-color: #aa7330;
}

.btn-outline-light {
  border-width: 1px;
}

.section-heading {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.9rem;
  color: #7a7a7a;
}

.card {
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.card-title {
  font-size: 1.15rem;
}

.bg-deep {
  background-color: #0a2240;
  color: #f7f6f2;
}

.bg-deep a.btn {
  color: #f8e1b6;
  text-decoration: none;
}

.bg-deep a {
  color: #c48a3b;
  text-decoration: none;
}

.bg-deep a:hover {
  text-decoration: underline;
}

footer {
  font-size: 0.9rem;
}

/* Make sure spacing looks good on smaller screens */
@media (max-width: 767.98px) {
  .hero {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 576px) {
  .navbar a {
      font-size: 1rem;
  }
}

@view-transition {
  navigation: auto;
}

@keyframes move-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

::view-transition-old(root) {
  animation: 0.4s ease-out both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}