/* Target the metronome container */
.metronome {
  text-align: center;  /* Center the content horizontally */
  background-color: #f8f8f8; /* Add a light gray background */
  border-radius: 10px;  /* Add some rounded corners */
  padding: 20px;  /* Add some padding for spacing */
  margin: 20px auto; /* Add some margin for better placement */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Add a slight shadow */
}

/* Style the heading */
.metronome h1 {
  font-size: 2em;  /* Increase the font size */
  margin-bottom: 10px;  /* Add some space below the heading */
}

/* Style the controls section */
.controls {
  display: flex;  /* Arrange elements in a row */
  justify-content: space-between; /* Distribute elements evenly */
  align-items: center; /* Vertically center elements */
  margin-top: 10px; /* Add some space above the controls */
}

/* Style the label */
.controls label {
  font-weight: bold;  /* Make the label text bold */
}

/* Style the input field */
#bpm {
  padding: 5px;  /* Add some padding to the input field */
  border: 1px solid #ccc;  /* Add a border to the input field */
  border-radius: 5px;  /* Add some rounded corners to the input field */
}

/* Style the buttons */
button {
  padding: 10px 20px; /* Add padding to the buttons */
  background-color: #3498db; /* Set a blue background color */
  color: white;  /* Set white text color */
  border: none;  /* Remove the border */
  border-radius: 5px;  /* Add rounded corners to the buttons */
  cursor: pointer; /* Change cursor to indicate clickability */
  margin: 0 5px; /* Add some margin between buttons */
}

/* Style the button hover effect */
button:hover {
  background-color: #2980b9; /* Change background color on hover */
}

.site-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 1. Underline all text links BUT ignore buttons */
a:not(.wp-block-button__link):not(.wp-element-button), 
a:link:not(.wp-block-button__link):not(.wp-element-button), 
a:visited:not(.wp-block-button__link):not(.wp-element-button) {
    text-decoration: underline !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. Explicitly tell buttons to have NO underline */
.wp-block-button__link, 
.wp-block-button {
    text-decoration: none !important;
}