/*
  Global styles for Ernest Bernin’s personal website.
  The stylesheet defines the visual appearance, layout, and responsive behavior
  of the site. It makes use of the Montserrat font family loaded via
  Google Fonts and leverages flexbox for layout.
*/

/* Reset and box sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body and typography */
body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: #333;
  scroll-behavior: smooth;
}

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.navbar .logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: #063970;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: #063970;
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #1f77b4;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #063970;
}

/* Hero section */
.hero {
  background-image: url('../images/hero.png');
  background-size: cover;
  background-position: center;
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding-top: 60px; /* ensures content is not hidden under fixed nav */
  color: #fff;
}

/* Overlay for readability */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 400;
}

.button {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: #063970;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.button:hover {
  background: #1f77b4;
}

/* Generic section styling */
.section {
  padding: 4rem 0;
}

.section-alt {
  background: #f9f9f9;
}

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

/* Page header for inner pages */
.page-hero {
  padding-top: 96px; /* account for fixed nav */
  padding-bottom: 2rem;
  background: linear-gradient(135deg, rgba(6, 57, 112, 0.10), rgba(31, 119, 180, 0.06));
}

.page-hero h1 {
  text-align: center;
  color: #063970;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.page-hero p {
  text-align: center;
  color: #444;
  max-width: 760px;
  margin: 0.5rem auto 0;
}

.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 700;
  color: #063970;
}

.section p, .section ul, .section ol {
  max-width: 800px;
  margin: 0 auto 1rem;
  line-height: 1.7;
}

.section ul, .section ol {
  padding-left: 1.2rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-around;
}

.card {
  background: #fff;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 250px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  background: #f0f4f8;
}

.card-body {
  padding: 1.25rem 1.5rem;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-link:focus-visible {
  outline: 3px solid rgba(31, 119, 180, 0.45);
  outline-offset: 4px;
  border-radius: 10px;
}

.meta {
  color: #5b6b7b;
  font-size: 0.95rem;
  margin: 0.25rem 0 0.75rem;
}

.text-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: #1f77b4;
  font-weight: 600;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

/* Carousel */
.carousel {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 0.5rem;
  align-items: center;
}

.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0.25rem 0.5rem;
}

.carousel-track::-webkit-scrollbar {
  height: 10px;
}

.carousel-btn {
  border: 0;
  background: rgba(6, 57, 112, 0.10);
  color: #063970;
  border-radius: 10px;
  height: 44px;
  width: 44px;
  cursor: pointer;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
}

.carousel-btn:hover {
  background: rgba(6, 57, 112, 0.18);
}

.carousel .card {
  min-width: 280px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Grids for inner pages */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Footer */
footer {
  background: #063970;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    right: 1rem;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    margin-left: 0;
  }
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .hero-content p {
    font-size: 1.2rem;
  }
  .cards {
    flex-direction: column;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}