/* BN Layout - Custom overrides */

/* ------------------------------------------------ */
/* Felipa typography for headings + site title */
/* ------------------------------------------------ */

h1, h2, h3,
.site-title,
.site-title a {
  font-family: "Felipa", cursive;
  letter-spacing: 1px;
}


/* ------------------------------------------------ */
/* Header / Navigation Bar */
/* ------------------------------------------------ */

.container-header {
  background: #b73a2c;
  padding: 14px 0;
  position: relative;
}
.container-header {
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.05) 35%,
      rgba(0,0,0,0.08) 100%
    ),
    linear-gradient(#c54332, #a92e22);

  padding: 14px 0;
  position: relative;
}
.container-header {
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25);
}


/* ------------------------------------------------ */
/* Navigation Menu */
/* ------------------------------------------------ */

.mod-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}


/* Menu links */

.mod-menu .nav-link,
.mod-menu a {
  font-family: "Felipa", cursive;
  font-size: 2rem;                 /* H2 visual size */
  color: #ffffff !important;
  letter-spacing: 1px;
  padding: 12px 10px;
  text-decoration: none;
}


/* Hover effect */

.mod-menu .nav-link:hover,
.mod-menu a:hover {
  color: #ffe5c2 !important;
}


/* Remove default active underline */

.mod-menu .nav-link.active {
  border-bottom: none;
}


/* ------------------------------------------------ */
/* Social Icons */
/* ------------------------------------------------ */

.social-icons {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.social-icons a {
  color: #ffffff;
  font-size: 24px;
  margin-left: 20px;
  text-decoration: none;
}

.social-icons a:hover {
  color: #ffe5c2;
}


/* ------------------------------------------------ */
/* Responsive adjustments */
/* ------------------------------------------------ */

@media (max-width: 768px) {

  .mod-menu {
    gap: 24px;
  }

  .mod-menu .nav-link,
  .mod-menu a {
    font-size: 1.4rem;
  }

  .social-icons {
    right: 15px;
  }

}