/* 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;
}
/* 1. Define the sticky note colors */
:root {
  --color-yellow: #feff9c;
  --color-blue: #b3e5fc;
  --color-red: #ffcdd2;
}

/* 2. Base style for your custom sticky note */
.custom-sticky-note {
  --note-rotate: 0deg;
  --note-color: var(--color-yellow);
  
  background-color: var(--note-color);
  padding: 30px;            /* Increased padding for a bigger note appearance */
  margin: 25px auto;        /* Adds comfortable spacing above and below */
  width: 100%;              /* Allows it to beautifully fill standard text areas or columns */
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.15);
  
  /* Smooth 3D tilt effect */
  transform: perspective(1px) rotate(var(--note-rotate));
  transition: transform 0.15s ease;
}

/* 3. Fun hover effect when a reader mouses over it */
.custom-sticky-note:hover {
  transform: perspective(1px) rotate(0deg) scale(1.03);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
}

/* 4. Style the Title inside the note */
.sticky-note-content strong {
  display: block;
  font-family: "Comic Sans MS", "Chalkboard SE", sans-serif; /* Casual handwriting vibe */
  font-size: 1.4rem;        /* Made larger */
  color: #2b2b2b;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15); /* Cute dashed separator line */
  padding-bottom: 6px;
}

/* 5. Style the Main Body Text inside the note */
.sticky-note-content p {
  font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: 1.15rem;       /* Made larger and easier to read */
  line-height: 1.6;
  color: #333333;
  margin: 0;
}
/* Fix text overflow for both single line and column layouts */
.sticky-note-content {
  box-sizing: border-box;  /* Ensures padding doesn't push text outward */
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;  /* Force breaks on long words if columns get narrow */
}