/* ===== Compact Top Navigation (Helvetica, dropdowns above everything) ===== */

.topnav {
  /* layout */
  display: flex;
  align-items: center;
  gap: 0.25rem;

  /* visuals */
  background-color: #333;

  /* compact sizing */
  padding: 6px 10px;        /* was ~14px 16px */

  /* important for dropdowns to escape the bar and sit above other content */
  overflow: visible;
  position: relative;
  z-index: 100000;          /* lift nav (and its dropdowns) above images/sections */
  box-sizing: border-box;
}

.topnav a,
.topnav .dropbtn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;         /* Regular */
  display: block;
  color: #f2f2f2;
  text-align: center;

  /* compact sizing */
  padding: 8px 10px;
  font-size: 1.25rem;       /* was 1.5rem */
  line-height: 1.1;

  text-decoration: none;
}

/* Hover/active states */
.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #ddd;
  color: #000;
}

.topnav a.active {
  background-color: #4CAF50;
  color: #fff;
}

/* Hide the burger icon by default (shown via your JS on small screens) */
.topnav .icon { display: none; }

/* Social/media icons sizing to match compact height */
.topnav img {
  height: 24px;             /* was 35px */
  width: auto;
  vertical-align: middle;
  display: inline-block;
}

/* ===== Dropdowns ===== */

.dropdown {
  position: relative;
  overflow: visible;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  background-color: inherit;
  margin: 0;
}

/* Menu panel */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;                /* below the button */
  left: 0;

  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);

  z-index: 1000000;         /* ensure it appears above EVERYTHING */
}

.dropdown-content a {
  float: none;
  color: #000;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;         /* Regular */
}

.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown on hover (desktop) */
.dropdown:hover .dropdown-content { display: block; }

/* ===== Responsive tweaks ===== */

@media screen and (min-width: 601px) {
  span#gSecond {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) { display: none; }
  .topnav a.icon { display: block; margin-left: auto; }

  .topnav { padding: 6px 8px; }
  .topnav a, .topnav .dropbtn {
    font-size: 1.1rem;
    padding: 8px 8px;
  }
  .topnav img { height: 22px; }

  span#gSecond {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .topnav.responsive { position: relative; }
  .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { display: block; text-align: left; }
  .dropdown { display: none; }
}