/*------------------------------------------------------*/
/* Home banner styles */

/* logo image selection for light vs dark mode */
/* change images for dark mode */
/* paths are relative to this file */
:root {
    --banner-logo: url("../images/logo.png");
    --home-cover-image: url("../images/banner-map.png");
  }
  
  [data-md-color-scheme="slate"] {
    --banner-logo: url("../images/logo.png");
    --home-cover-image: url("../images/banner-map.png");
  }
  
  /** CONTAINERS AND GRID **/
  /* sets up the container for the banner row and adds an image */
  
  .banner-row-container {
    max-width: unset !important;
    margin: 0 !important;
    padding-top: .0rem !important;
    height: 40vh !important;
    min-height: 300px !important;
    /* background: linear-gradient(to bottom, var(--md-primary-fg-color), {{ config.home_gradient_hsla }} 99%, {{ config.home_gradient_hsla }} 99%); */
    /* This is used for the background gradient */
  
    /* background-image: url(img/bg08.jpg); */
    background-image: var(--home-cover-image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-clip: border-box;
    background-origin: padding-box;
    -moz-background-size: cover;
    background-size: cover;
    /* This stuff is used for the background image */
  }
  
  @media (max-width: 1025px) {
    .banner-row-container { background-attachment: scroll; }
  }
  
  /* Fill the container entirely */
  .banner-row {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns .banner-content to the bottom */
  }
  
  .banner-content-col {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  
  .banner-content-row {
    height: 100%;
    display: flex;
    align-items: flex-end;
  }
  
  /* Take up the bottom 70% of .banner-row */
  .banner-content {
    height: 70%;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
  }
  
  /* button configuration */
  .banner-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  
  /***** MAIN TAGLINE ****/
  
  /* makes the title area into a button-like box, comment out for plain text */
  .banner-title.md-typeset {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%; /* Ensure full width */
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid transparent;
    box-sizing: border-box;
  
  }
  
  /* logo display parameters */
  /* set display: none to remove logo display */
  .banner-logo {
    /* Ensure the logo maintains aspect ratio */
    background-image: var(--banner-logo); /* Use the variable here */
    background-size: cover; /* Adjust this as needed */
    background-repeat: no-repeat;
    background-position: left;
    width: 100px;
    height: 100px;
  }
  /* font size of main text */
  /* Ensure that the home tagline does not push the logo off-center */
  .home-tagline {
    flex-grow: 1;
    padding: 10px 10px; /* Add padding to the tagline if needed */
    font-size: clamp(1.75em, 3.5vw, calc(3em + 3.5vw));
  }
  
  @media (max-width: 700px) {
    .banner-logo {
      display: none;
    }
  }
  
  /* Media query for very small screens to adjust padding */
  @media (max-width: 400px) {
    .home-tagline {
      padding: 5px 5px;
    }
    .banner-title {
      padding-right: 5px;
    }
  }
  
  /**** BUTTONS ****/
  
  .banner-buttons .md-button {
    margin-top: .5rem;
    margin-right: .5rem;
    border-radius: 5px;
    transition: .2s ease-in-out;
    /* width: 100%; */
    
  }
  
  .banner-buttons .md-button:focus,
  .banner-buttons .md-button:hover {
    border-radius: 10px;
  }
  
  .banner-buttons .btn-margin {
    max-width: 20px;
  }
  
  .banner-button {
    width: 100%;
  }
  
  .banner-button .md-button {
    width: 100%;
    text-align: center;
    padding: 0.25rem 0 !important;
  }
  
  @media (max-width: 1025px) {
  
    .banner-content-col .margin {
      display: none;
      width: 0;
    }
    .banner-content {
      flex-direction: column;
      width: unset;
    }
    .banner-buttons {
      flex-direction: column;
      max-width: 100%;
    }
    .banner-button {
      width: 100%;
    }
    .banner-button .md-button {
      width: 100%;
      text-align: center;
    }
    .banner-img-container {
      display: none;
    }
  }
  /* Responsive styles */
  
  /*------------------------------------------------------*/