/* Add logo after the top left title
/* Make the header title link act like a flexbox so text + logo sit side by side */
#header h1 a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none; /* optional: remove underline */
}

/* Add the logo after the text */
#header h1 a::after {
  content: "";
  display: inline-block;
  width: 39px;  /* adjust */
  height: 40px; /* adjust */
  background: url("/images/ieadmap_logo.png") no-repeat center / contain;
}


/* Replace title with logo
/* Hide the text and replace it with a logo background */
/* Replace h2 text with logo (accessible) */
#banner h2 {
  display: inline-block;
  background: url("/images/ieadmap_logo_bg.png") no-repeat center / contain;
  text-indent: -9999px;  /* hide text visually but keep for screen readers */
  overflow: hidden;
  white-space: nowrap;
  
  /* Mobile-first: default height and width */
  width: 200px;
  height: 200px;    /* adjust based on logo aspect ratio */
  padding-bottom: 20vh; /* less space below all content */

}

/* Tablets and up */
@media (min-width: 768px) {
  #banner h2 {
    width: 300px;
    height: 300px;
    padding-bottom: 10vh; /* less space below all content */

  }
}

/* Desktop and up */
@media (min-width: 1200px) {
  #banner h2 {
    width: 400px;
    height: 400px;
    padding-bottom: 500px; /* less space below all content */
  }
  #banner { /*Padding after banner*/
  padding: 180px 0; /* could be large by default */
}

}


/* Default banner (desktop/tablet) */
#banner {
  background-image: url("/images/banner_orla.png");
  background-size: cover;
  background-position: center;
}

/* Smartphone override (max-width ~768px) */
@media (max-width: 768px) {
  #banner {
    background-image: url("/images/banner_orla.png");
  }
}