/*
 * Component: Entrance Header
 * This is the single source of truth for the main page header.
*/
.enterance {
  width: 100%;
  background-color: var(--color-brand-dark-blue);
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 48px;
  font-weight: bold;
  color: var(--color-white);
  text-align: center;
  padding: 0 20px;
}

.enterance a {
  text-decoration: none;
  color: inherit;
}

.enterance .history {
  position: absolute;
  left: 2.5%;
  bottom: 0;
  background-color: var(--color-white);
  color: var(--color-brand-dark);
  padding: 8px 20px;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

body.ar .enterance .history {
  left: auto;
  right: 2.5%;
}

.enterance .history  a {
  text-decoration: none;
  color: var(--color-black);
}
.enterance .history a:hover { 
  text-decoration: underline;
}

/* --- Responsive Tweaks we found --- */
@media (max-width: 992px) {
  .enterance {
    font-size: 36px;
    height: 160px;
  }
}

@media (max-width: 600px) {
  .enterance {
    font-size: 28px;
    /* Note: Height was inconsistent, 175px or 350px. Standardizing to 175px */
    height: 175px; 
    padding-top: 25px;
  }

  .enterance .history {
    font-size: 12px;
    padding: 6px 14px;
  }
}