/* Delete button styling (match Janes) */
button.delete-button {
  background-color: #dc3545;
  color: white;
  border: none;
}

button.delete-button:hover {
  background-color: white;
  color: #dc3545;
  border: 1px solid #dc3545;
}

.btn-sweep {
  display: inline-block;
  text-decoration: none;
  color: var(--btn-sweep-color, #111);
  padding: 1.5rem 0 0.25rem 0; /* top, right, bottom(0), left */
  line-height: 1; /* keeps the text sitting on the bottom padding */
  background-color: var(--btn-sweep-bg, #fff);
  background-image: linear-gradient(var(--btn-sweep-overlay, #000), var(--btn-sweep-overlay, #000)); /* overlay color */
  background-repeat: no-repeat;
  background-position: left bottom; /* start from bottom */
  background-size: 100% 0%; /* collapsed initially */
  transition: background-size .7s ease, color .7s ease;
  border-bottom: 0.32rem solid var(--btn-sweep-border, #000);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  /* margin-right: 2rem; */
}

.btn-sweep:hover,
.btn-sweep:focus-visible {
  color: var(--btn-sweep-hover-color, #fff);
  background-size: 100% 100%; /* wipe up from bottom to top */
}

.btn-sweep h1,
.btn-sweep h2,
.btn-sweep h3,
.btn-sweep h4,
.btn-sweep h5,
.btn-sweep h6 {
  margin: 0;
}

/* Color variants */
.btn-sweep.black-sweep {
  --btn-sweep-color: #111;
  --btn-sweep-hover-color: #fff;
  --btn-sweep-overlay: #000;
  --btn-sweep-border: #000;
}

.btn-sweep.green-sweep {
  --btn-sweep-color: #111; /* black text */
  --btn-sweep-hover-color: #111; /* keep black on hover */
  --btn-sweep-overlay: #C7F901; /* green sweep */
  --btn-sweep-border: #C7F901; /* green underline */
}

/* White sweep: text starts white with white underline; on hover, white sweeps up and text turns black */
.btn-sweep.white-sweep {
  --btn-sweep-color: #fff;        /* initial: white text */
  --btn-sweep-hover-color: #000;  /* hover: black text */
  --btn-sweep-overlay: #fff;      /* sweep color: white */
  --btn-sweep-border: #fff;       /* underline: white */
  --btn-sweep-bg: transparent;    /* no base background */
}

/* Green top-to-bottom sweep variant (simple) */
.btn-sweep.green-top-sweep {
  --btn-sweep-color: #111;       /* rest: black text */
  --btn-sweep-hover-color: #fff; /* hover: white text */
  --btn-sweep-bg: #fff;          /* base background */
  --btn-sweep-overlay: #C7F901;  /* sweep color */
  --btn-sweep-border: #000;      /* rest border black */
  background-image: linear-gradient(#C7F901, #C7F901); /* force green overlay */
  background-position: left top;          /* sweep downward */
  background-size: 100% 0%;              /* collapsed at top */
  transition: background-size .7s ease, color .7s ease, border-top-color .7s ease;
  border-top: 0.32rem solid var(--btn-sweep-border);
  border-bottom: 0;
}

.btn-sweep.green-top-sweep:hover,
.btn-sweep.green-top-sweep:focus-visible {
  border-top-color: #C7F901;             /* hover: green top border */
  background-size: 100% 100%;            /* sweep to bottom */
}

.button-row { display: inline-flex; gap: 1.6rem; align-items: center; }