/* =======================================================
   Buttons.css — shared button styles
   (expects global CSS variables to be defined)
   ======================================================= */

/* ---- Design tokens for buttons ---- */
:root {
  --btn-radius: 0.6vmin;
  --btn-pad-y: 1.6vmin;
  --btn-pad-x: 2.8vmin;
  --btn-shadow: rgba(0, 0, 0, 0.4) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0 0.3vmin 0.5vmin -0.15vmin,
    rgba(0, 0, 0, 0.2) 0 -0.2vmin 0 inset;
  --btn-shadow-press: rgba(0, 0, 0, 0.5) 0 -0.25vmin 0 inset;
  --btn-focus: var(--yellow-colour, #ffe74c);
}

/* =========================
   Simple / primary button
   ========================= */
.simpleButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 0;
  border-radius: var(--btn-radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  background: var(--dark-colour);
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5vmin;
  line-height: 1;

  box-shadow: var(--btn-shadow);
  transition: filter 0.15s ease, transform 0.02s ease, box-shadow 0.15s ease;
}

.simpleButton p {
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.simpleButton svg {
  width: 2.5vmin;
  height: auto;
  fill: currentColor;
}

/* States */
.simpleButton:hover {
  filter: brightness(1.08);
}
.simpleButton:active {
  transform: translateY(0.1vmin);
  box-shadow: var(--btn-shadow-press);
}
.simpleButton:focus-visible {
  outline: 0.35vmin solid var(--btn-focus);
  outline-offset: 0.2vmin;
}
.simpleButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

/* Utility: spacer (keeps layout, avoids interaction) */
.dummyBtn {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* =========================
   Variants (same markup)
   ========================= */

.smallButton {
  padding: 1vmin 1.5vmin;
  border-radius: 0.5vmin;
  font-weight: 300;
  font-size: 1.25vmin;
}

.greenButton {
  background: var(--green-colour) !important;
  color: var(--white-colour);
}
.blueButton {
  background: var(--blue-colour) !important;
  color: var(--white-colour);
}
.redButton {
  background: var(--red-colour) !important;
  color: var(--white-colour);
}
.greenButton {
  background: var(--green-colour) !important;
  color: var(--white-colour);
}
.whiteButton {
  background: var(--white-colour) !important;
  color: var(--dark-colour);
}
.whiteButton p {
  color: inherit;
}

/* Outline (ghost) */
.outlineButton {
  background: transparent !important;
  color: var(--dark-colour) !important;
  border: 0.25vmin solid var(--dark-colour) !important;
  box-shadow: none !important;
}
.outlineButton p {
  color: inherit !important;
}

/* Block helper (full-width when needed) */
.simpleButton.block {
  display: flex;
  width: 100%;
}

/* =========================
   Circular icon button
   ========================= */
.circleButton {
  background: var(--dark-colour);
  color: #fff;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 1.5vmin; /* controls size */
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: filter 0.15s ease, transform 0.02s ease, box-shadow 0.15s ease;
}
.circleButton svg {
  width: 2.5vmin;
  height: auto;
  fill: #fff;
}
.circleButton:hover {
  filter: brightness(1.08);
}
.circleButton:active {
  transform: translateY(0.1vmin);
  box-shadow: var(--btn-shadow-press);
}
.circleButton:focus-visible {
  outline: 0.35vmin solid var(--btn-focus);
  outline-offset: 0.2vmin;
}
.circleButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

.smallCircleButton {
  padding: 0.75vmin;
}

.smallCircleButton svg {
  width: 2vmin;
}

/* Specific icon color tweak for your menu buttons */
#mobile-menu-btn,
#close-menu-btn {
  background: var(--dark-colour);
}
#mobile-menu-btn svg,
#close-menu-btn svg {
  fill: var(--light-colour);
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .simpleButton,
  .circleButton {
    transition: none;
  }
}

.verticalBuffer {
  height: 100%;
  width: 2vmin;
}