header {
      display: grid;
      grid-template-rows: 0.25fr 0.25fr 0.25fr;
      grid-template-columns: 1fr;
      justify-content: space-between;
      align-items: right;
      justify-items: end;
      gap: 0.5rem;
      padding: 10px;
      background-color: rgb(28, 134, 255);
    }

    nav ul {

      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-flex;      
    }


    nav li {

      margin-right: 20px;
    }

    nav a:hover {
      text-decoration: underline;
    }

    
    .banner {

      background-color: white;
      grid-column: 1/-1;
      display: grid;
      place-items: center;
    }


    .postmain {

      background-color: white;
      grid-area: 2/2/2/2;
     
    }

    .border-top {
      border-top: 1px solid black; 
    }

    .border-right {

      border-right: 1px solid black;
    
    }

/* Mobile nav toggle - hidden in desktop view */ 
.nav-toggle {
display: none;
background: none; 
border: none;
font-size: 1.8rem;
color: white;
cursor: pointer;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  nav ul {
    display: none;
    flex-direction: column; 
    width: 100%;
  }

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

  nav li {
    margin-right: 0;
    margin-bottom: 10px;
    text-align: center;
  }

  /* General mobility readability */
  body {
    font-size: 0.95rem;
  }

  table {
    display: block;
    overflow-x: auto; 
    white-space: nowrap;
  }

  form input, form select, form textarea, form button {
    width: 100%;
    max-width: 400px;
  }
}


@media (max-width: 768px) {

  /* hide table headers on mobile */
  .admin-table thead {
    display: none;
  }

  /* stack each row as a card */
  .admin-table tr {
    display: block;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 0.75rem;
  }

  /* each cell becomes its own line with a label */
  .admin-table td {
    display: block;
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 40%; 
    word-break: break-all;
  }

  /* label each cell using data-label attribute */
  .admin-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    font-weight: 800;
    margin-right: 0.5rem;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* stack forms vertically */
  .admin-table td form {
    display: block;
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .admin-table td form select,
  .admin-table td form button {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
  }
}