.custom-login-wrapper {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 2rem;
    max-width: 400px;
    margin: 100px auto;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    text-align: left;
    box-sizing: border-box; /* ensures padding/margin don't add extra width */
}

#custom-login-form {
    display: flex;
    flex-direction: column;
    width: 100%; 
    box-sizing: border-box; /* fixes width calculation */
}

#custom-login-form label {
    font-weight: bold;
    margin-bottom: 0.4rem;
}

#custom-login-form input {
    width: 100%;
    box-sizing: border-box; /* fixes padding calculation */
    padding: 0.5rem;
    border-radius: 4px;
    border: none;
    margin-bottom: 1rem;
}

#custom-login-form button {
    align-self: center;
    background: #fff;
    color: #1c35c5;
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 0.5rem;
    transition: background 0.3s, color 0.3s;
}

#custom-login-form button:hover {
    background: rgb(179, 179, 179);
    color: #000;
}

/* Target only the home button in your top menu */
.menu-items-right li a.home-button {
    color: #ffffff; /* white */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

.menu-items-right li a.home-button:hover {
    color: rgb(179, 179, 179); /* gray on hover */
}

#custom-login-form label,
#custom-login-form input,
#custom-login-form input::placeholder {
    font-size: 19px;          /* or 1.2rem if you prefer relative units */
    line-height: 1.4;         /* keeps things nicely spaced */
}

@media (max-width: 768px){

  /* 1) Re-display the right-hand list */
  body.page-template-template-login .menu-items-right{
      display: inline-flex !important;  /* override the “none” */
      gap: 1rem;                        /* keep a little spacing */
      margin-left: auto;                /* push it to the right edge */
  }

  /* 2) Make sure no hamburger icon pops up on this page */
  body.page-template-template-login .mobile-menu-toggle{
      display: none !important;
  }

  /* 3) (Optional) if you’d like it centred instead of right-aligned:
  body.page-template-template-login .top-menu .menu-container{
      justify-content: center;
  } */
}