/* File: CSS/css_header_footer.css
   FULL REWRITE

   Fix in this step:
   - FORCE a reliable header layout:
       * Logo header = row 1, column 1
       * TopNav header (#TopNav) = row 1, column 2
   - Remove the float-based interaction that can “steal” space and visually
     wipe out the nav (LogoImg was floating and can bleed into the next header).
   - Make TopNav clearly visible and centered.
   - Footer continues to span full width.

   This is CSS-only. Your JS can keep injecting into #TopNav as-is.
*/

/* ---------- TOP ROW: LOGO + TOP NAV ---------- */

/* All header elements live on the first grid row */
header {
  grid-row: 1;
  background: black;
  padding: 0;
}

/* The logo header is the FIRST header in your HTML.
   It already has inline grid-column:1, but we enforce it anyway. */
article > header:first-of-type {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

/* The TopNav header is the header with id="TopNav" */
#TopNav {
  grid-column: 2;
  grid-row: 1;

  /* Make the injected links visible and centered */
  display: flex;
  justify-content: center;
  align-items: flex-end;

  /* Your old padding was pushing the nav down and making it feel “missing”.
     This keeps the same general vertical position but is safer. */
  padding: 110px 1rem 0 1rem;

  white-space: nowrap;
  overflow: visible;
}

/* Logo image: STOP FLOATING (floats can bleed across siblings) */
.LogoImg {
  height: 150px;
  width: 150px;

  /* No float */
  float: none;

  /* Keep it on the left with a little breathing room */
  margin: 0 50px 0 0;
}

/* ---------- LINKS (HEADER + FOOTER) ---------- */

a {
  color: white;
  padding-right: 15px;
  font-size: 16px;
  text-decoration: none;
}

a:visited {
  color: #96d5d1;
  font-size: 16px;
  text-decoration: underline;
}

a:hover {
  color: white;
  font-size: 16px;
  text-decoration: underline;
}

/* ---------- DROPDOWN MENU (TOP NAV) ---------- */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;

  background-color: black;

  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

  padding-top: 1rem;
  padding-bottom: 5px;

  z-index: 9999;

  color: white;
  font-size: 16px;
  overflow: visible;
}

.dropdown-content a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  display: block;
  padding: 6px 12px;
}

.dropdown-content a:hover {
  font-size: 16px;
  color: red;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* ---------- FOOTER ---------- */

footer {
  grid-column: 1 / -1;
  background: black;
  padding: 1rem;
  text-align: center;
}