/* Center everything */
body {
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Style for your page title (the <h1> in your header) */
h1 {
  font-weight: normal;
  color: rgb(70, 70, 70);
  font-family: 'Georgia', serif;  /* or whatever font you like */
  margin-bottom: 0.5em;
}
/* Style for your post titles */
h2 {
  font-weight: normal;    /* not bold */
  color: green;
  margin-bottom: 0.25em;
}

/* Style for your subheadings */
h4 {
  font-weight: normal;         /* not bold */
  color: #666666;              /* a medium grey */
  font-family: 'Arial', sans-serif; /* or any clean, readable font */
  margin-top: 0;
}

/* Optional: ensure your articles don't stretch too wide on large screens */
.posts-list article {
  max-width: 600px;
  margin: 1em auto;
  padding: 0.5em;
}
/* make sure your nav link doesn't stretch too big */
nav a {
  display: inline-block;
}

/* size the home icon */
.home-icon {
  width: 64px;       /* pick whatever fits your header */
  height: auto;
  vertical-align: 100px;  /* centers it against any surrounding text */
}

/* Contact button: start invisible */
.contact-button {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  background-color: #007acc;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  transform-origin: center right;
  z-index: 1000;

  opacity: 0;
  pointer-events: none;
}

/* When we add .show, it fades in */
.contact-button.show {
  opacity: 1;
  pointer-events: auto;
}

/* On hover it still expands */
.contact-button.show:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Container sits in the upper right corner */
.contact-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

/* Your existing show/fade-in logic still applies here */
.contact-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #007acc;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  transform-origin: center right;
  opacity: 0;
  pointer-events: none;
}

.contact-button.show {
  opacity: 1;
  pointer-events: auto;
}
.contact-button.show:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Position dropdown absolutely relative to the container */
.contact-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem); /* just below the button */
  right: 0;
  display: none;             /* hidden by default */
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  white-space: nowrap;
}

/* Show it when you hover the container (or the button) */
.contact-container:hover .contact-dropdown {
  display: flex;
}

/* Style each link in the dropdown */
.contact-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: Arial, sans-serif;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.contact-dropdown a:hover {
  background: #f0f0f0;
}

/* ------------------------------
   CONTACT BUTTON + DROPDOWN
   ------------------------------ */
.contact-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  /* allow hover even while button itself is pointer-events:none */
  pointer-events: auto;
}

/* Base button */
.contact-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #007acc;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  transform-origin: center right;
  transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

/* show state (added by your JS) */
.contact-button.show {
  opacity: 1;
  pointer-events: auto;
}
.contact-button.show:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* dropdown menu */
.contact-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  white-space: nowrap;
}

/* reveal on hover of the whole container */
.contact-container:hover .contact-dropdown {
  display: flex;
}

/* dropdown links */
.contact-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: Arial, sans-serif;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.contact-dropdown a:hover {
  background: #f0f0f0;
}