/* --------------------- */
/* Homepage Overrides     */
/* --------------------- */

/* Remove global layout constraints */
body.homepage {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  
  /* Typography fixes for homepage */
  body.homepage h1,
  body.homepage h2,
  body.homepage h3,
  body.homepage p,
  body.homepage a {
    color: #fef6e4 !important;
    text-align: left !important;
    margin:0; 
    padding:0; 
    font-weight:400;
  }

  body.homepage h1{line-height:.8em;font-size:7em;}
  body.homepage h2{font-size:2em;}
  body.homepage h3{margin:1em 0; font-size:1.3em;}
  body.homepage p{margin-top:2em;}

  /* Hero section styling */
  .hero {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 10vh !important;
    width: 100vw !important;
    height: 100vh !important;
    background-image: url("/images/hopkins-bg.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: #fef6e4 !important;
    position: relative !important;
    text-align: left !important;
  }
  
  /* Background overlays */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 33, 71, 0.85);
    z-index: 1;
  }
  
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/paper-texture.png");
    background-repeat: repeat;
    background-size: auto;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
  }
  
  /* Inner hero content layout */
  .hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    margin: 0;
    width: 70vw;
  }
  
  /* Hero button overrides */
  .hero-content .button {
    background-color: #fef6e4 !important;
    color: #002147 !important;
    border: 2px solid #002147 !important; 
    padding: 0.5rem 1rem;
  }
  
  .hero-content .button:hover {
    background-color: transparent !important;
    color: #fef6e4 !important;
    border-color: #fef6e4 !important;
  }
  
/* --------------------- */
/* Responsive Adjustments */
/* --------------------- */

@media (max-width: 600px) {
    .hero {
      background-image: none !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
    }
  
    .hero-content {
      width: 90vw;
      padding: 1rem;
    }
  
    body.homepage h1 {
      font-size: 3.5em; /* 50% of 7em */
    }
  
    body.homepage h2 {
      font-size: 1.5em;
      line-height: 1.4em;
    }
  }