/* mobile styles */

/* Base desktop / tablet styling */
.highlight-box {
  background-color: #fff; 
  border: 1px solid #b9d5f1;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .highlight-box {
    border-radius: 12px; /* slightly smaller rounding */
    padding: 1rem 1rem; /* reduce padding to save space */
  }
}

/* Home page heading responsive styles */
.home-heading { font-weight: 900; font-size: 1.9rem; }
@media screen and (min-width: 768px) { .home-heading { font-size: 2.2rem; }  }

/* Home hero responsive styles */
.home-hero {
    background-color: #f4faff;
    position: relative;
    padding-top: 2rem;
    padding-bottom: 15.3rem;
    overflow: visible;
}

/* LCP background image positioned as HTML element for PageSpeed optimization */
.hero-background-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.home-hero .container {
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 380px) {
    .home-hero { padding-bottom: 15.5rem; } 
}

@media screen and (min-width: 390px) {
    .home-hero { padding-bottom: 16rem; } 
}

@media screen and (min-width: 400px) {
    .home-hero { padding-bottom: 17rem; } 
}

@media screen and (min-width: 420px) {
    .home-hero { padding-bottom: 18rem; } 
}

@media screen and (min-width: 500px) {
    .home-hero { padding-bottom: 19rem; } 
}

/* tablet */
@media screen and (min-width: 768px) {
    .home-hero { padding-bottom: 17rem; }
}

@media screen and (min-width: 900px) {
    .home-hero { padding-bottom: 19rem; }
}

/* desktop */
@media screen and (min-width: 1024px) {
    .home-hero {
        padding-top: 5rem;
        padding-bottom: 11rem;
    }
    
    .hero-background-image img {
        object-position: top;
    }
}

@media screen and (min-width: 1620px) {
    .home-hero {
        padding-top: 6rem;
        padding-bottom: 15rem;
    }
}

/* Home page search form styles */
.search-autocomplete {
    position: relative;
}

.search-autocomplete .responsive-input {
    padding: 1.5rem 1rem 1.5rem 1rem;
}

.search-autocomplete .button.is-primary {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    .search-autocomplete .button.is-primary {
        display: none;
    }
}