/* ===================================================================
   BUTTONS: one finish for every button on the site.

   actions.css already gives every button its shape and size and reads its
   colours from --action-* custom properties. This file sets those
   properties (so every page-specific rule that uses them follows), then
   adds the finishing touches: a soft lilac gradient with a highlight for
   main actions, a tinted outline for secondary ones, bolder labels, and
   clear hover, press and keyboard-focus states. Sizes are unchanged, so
   the 48px/44px touch targets and 15px labels the deploy checks require
   still hold.
   =================================================================== */

:root:not(.a11y-high-contrast) body #main,
:root:not(.a11y-high-contrast) body header {
  --action-fill: linear-gradient(180deg, #e2c9f9 0%, #bd92ea 100%);
  --action-hover-fill: linear-gradient(180deg, #ecdafc 0%, #c9a2f0 100%);
  --action-ink: #170b29;
  --action-border: rgba(255, 255, 255, 0.2);
  --action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -12px rgba(189, 146, 234, 0.85);
}
:root:not(.a11y-high-contrast) body #main .action-secondary,
:root:not(.a11y-high-contrast) body #main .next-gig-actions .gig-dir {
  --action-fill: rgba(207, 166, 255, 0.08);
  --action-hover-fill: rgba(207, 166, 255, 0.17);
  --action-ink: #f5edfc;
  --action-border: rgba(207, 166, 255, 0.46);
  --action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Labels: a touch bolder and evenly set. */
:root:not(.a11y-high-contrast) body #main :is(.button, .next-gig-actions .gig-dir),
:root:not(.a11y-high-contrast) body header .nav > .nav-book {
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease !important;
}

/* Hover: secondary outlines brighten; main actions lift slightly. */
:root:not(.a11y-high-contrast) body #main :is(.action-secondary, .next-gig-actions .gig-dir):hover {
  border-color: rgba(207, 166, 255, 0.8) !important;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root:not(.a11y-high-contrast) body #main .button:not(.action-secondary):hover,
  :root:not(.a11y-high-contrast) body header .nav > .nav-book:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 26px -12px rgba(189, 146, 234, 0.95) !important;
  }
}

/* Press: a small, quick give so taps feel acknowledged. */
@media (prefers-reduced-motion: no-preference) {
  :root:not(.a11y-high-contrast) body #main :is(.button, .next-gig-actions .gig-dir):active,
  :root:not(.a11y-high-contrast) body header .nav > .nav-book:active,
  :root:not(.a11y-high-contrast) body #main #upcoming .gig-row .gig-links a:active {
    transform: translateY(1px) scale(0.99) !important;
  }
}

/* Keyboard focus: one clear ring everywhere. */
:root:not(.a11y-high-contrast) body #main :is(.button, .next-gig-actions .gig-dir, .action-link):focus-visible,
:root:not(.a11y-high-contrast) body header .nav > .nav-book:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

/* Supporting text links ("Full diary on Lemonrock", "See live dates"):
   brighter and bolder, with an underline on hover. */
:root:not(.a11y-high-contrast) body #main .action-link:not(.gig-details):not(.gig-dir) {
  color: #e9d6ff !important;
  font-weight: 700 !important;
}
:root:not(.a11y-high-contrast) body #main .action-link:not(.gig-details):not(.gig-dir):hover {
  color: #fff !important;
  text-decoration-line: underline !important;
}

/* Next gig on phones: the same stacked pair, a little less bulky. */
@media (max-width: 900px) {
  :root:not(.a11y-high-contrast) body #main .next-gig .next-gig-actions .button,
  :root:not(.a11y-high-contrast) body #main .next-gig .next-gig-actions .gig-dir {
    min-height: 50px !important;
    padding-block: 12px !important;
    border-radius: 999px !important;
  }
}

/* High contrast and forced colours keep their own plain buttons. */
@media (forced-colors: active) {
  :root:not(.a11y-high-contrast) body #main :is(.button, .next-gig-actions .gig-dir),
  :root:not(.a11y-high-contrast) body header .nav > .nav-book {
    border: 1px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
    box-shadow: none !important;
  }
}

/* The Next gig card sets its own button colours; give it the same finish. */
:root:not(.a11y-high-contrast) body #main .next-gig .next-gig-actions :is(.button, .gig-dir) {
  border: 1px solid var(--action-border) !important;
  background: var(--action-fill) !important;
  color: var(--action-ink) !important;
  box-shadow: var(--action-shadow) !important;
}
:root:not(.a11y-high-contrast) body #main .next-gig .next-gig-actions :is(.button, .gig-dir):hover {
  background: var(--action-hover-fill) !important;
}
/* In the Next gig card "Gig details" is marked secondary but shown as the
   main action (visual-polish.css); keep that, with the new finish. */
:root:not(.a11y-high-contrast):not(.a11y-simplify-backgrounds) body #main .next-gig-actions > .button.action-secondary {
  --action-fill: linear-gradient(180deg, #e2c9f9 0%, #bd92ea 100%);
  --action-hover-fill: linear-gradient(180deg, #ecdafc 0%, #c9a2f0 100%);
  --action-ink: #170b29;
  --action-border: rgba(255, 255, 255, 0.2);
  --action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -12px rgba(189, 146, 234, 0.85);
}
:root:not(.a11y-high-contrast):not(.a11y-simplify-backgrounds) body #main .next-gig-actions > .gig-dir.action-secondary {
  --action-fill: rgba(207, 166, 255, 0.08);
  --action-hover-fill: rgba(207, 166, 255, 0.17);
  --action-ink: #f5edfc;
  --action-border: rgba(207, 166, 255, 0.46);
  --action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}