@media (max-width: 767px) {
  .wp-block-group[style*="header.jpg"] {
    background-size: 100% auto !important; /* smaller zoom than before */
    background-repeat: no-repeat !important;
    background-position: center 20% !important;
  }
}
@media (max-width: 767px) {
  /* Reduce top and bottom padding of header image container */
  .wp-block-group[style*="header.jpg"] {
    padding-top: 0rem !important;   /* adjust as needed */
    padding-bottom: 0rem !important; /* adjust as needed */
  }

  /* Optional: slightly reduce heading padding too */
  h2.wp-block-heading.has-foreground-color.has-text-color.has-link-color.has-montserrat-font-family {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}


/* ================================
   2. HEADER HEADING (reduce font size)
   ================================ */
@media (max-width: 767px) {
  h2.wp-block-heading.has-foreground-color.has-text-color.has-link-color.has-montserrat-font-family {
    font-size: 36px !important; /* was 49px on desktop */
    line-height: 1.2 !important;
    text-align: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ================================
   3. BUTTON ROUNDNESS (✅ already fixed, but kept consistent)
   ================================ */
@media (max-width: 767px) {
  .wp-block-button__link, button, .button {
    border-radius: 50px !important;
    padding: 0.8em 1.6em !important;
  }
}

/* ================================
   4. IMAGE LINKS NOT CLICKABLE ON MOBILE
   ================================ */
@media (max-width: 767px) {
  .wp-block-image a {
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
  }
  .wp-block-image img {
    pointer-events: auto !important;
  }

  /* If a transparent spacer is blocking the links */
  .wp-block-spacer {
    position: relative !important;
    z-index: 0 !important;
  }

  /* Ensure no overlapping parent container */
  .wp-block-columns {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Ensure different image is used on smartphone */
@media (max-width: 767px) {
  .wp-block-group[style*="header.jpg"] {
    background-image: url('https://thenailboutique.hr/wp-content/uploads/2025/11/header-mobile.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
		!important;
		background-size: 100% auto !important;
  }
}