/* Reset default list styling */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* horizontal by default */
}

/* Space out each menu item */
nav li {
  margin: 0; /* gap will control spacing */
}

/* Style the links */
nav a {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 4px;
}

/* Hover highlight */
nav a:hover {
  background-color: #0073e6;
  color: #fff;
}

/* Base layout */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* pushes footer down when content is short */
}

/* Footer base */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Branding: logo + title */
.branding {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* prevent overflow */
}

.branding h1 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header img {
  height: 120px;
  max-width: 100%;
}

/* Header container: single column, centered */
header {
  display: flex;
  flex-direction: column; /* stack branding and nav */
  align-items: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px;
  box-sizing: border-box;
  gap: 12px; /* space between branding and nav */
}

/* Nav: horizontal by default, centered */
nav ul {
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap; /* allow wrapping if needed */
}


/* Footer buttons container */

.footer-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}

.footer-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px; /* smaller than main CTAs */
  border-radius: 4px;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 13px; /* slightly smaller text */
  font-weight: 500;
  white-space: nowrap;
  flex: 0 0 auto;
  opacity: 0.85; /* makes them visually softer */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-buttons a svg {
  flex-shrink: 0;
}

/* Facebook button */
.footer-buttons a.facebook {
  background: #1877F2; /* official Facebook blue */
  color: #fff;
}

/* Google button */
.footer-buttons a.google {
  background: #DB4437; /* official Google red */
  color: #fff;
}

/* Hover: slight emphasis but still subtle */
.footer-buttons a:hover {
  opacity: 1;
  transform: translateY(-1px);
}



/* Mobile styles */
@media (max-width: 768px) {
  /* Keep logo + text side-by-side on mobile */
  .branding {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    .site-title {
    font-size: 1.5em; /* slightly smaller on small screens */
  }
  }

  /* Stack nav vertically on small screens */
  nav ul {
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
  }

  /* Footer buttons wrap and stretch evenly */
  .footer-buttons {
    flex-wrap: wrap;
  }
  .footer-buttons a {
    flex: 1 1 140px;
    justify-content: center;
  }
}
.page-content {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  box-sizing: border-box;

  /* These two lines neutralize the flex centering */
  align-self: stretch;     /* make it span full width of flex container */
  text-align: initial;     /* reset any inherited text centering */
}

.site-title {
  font-size: 1.4em;        /* roughly default H1 size */
  font-weight: bold;     /* match heading weight */
  margin: 0;             /* remove default paragraph spacing */
  line-height: 1.2;      /* tighter heading-like spacing */
}