/* Buttons, one system on every redesigned page (15 Oct 2026, Charlie: "look out for buttons which feel AI").
   The audit counted 44 ghost pills with a 4% white fill and a 20% white border (hard to see, all alike), lime glows
   and 1-3px lifts on hover in eleven places, a drawn chevron, and four heights. The system now:
   - primary: the solid lime pill, one per view, for the main action (unchanged colour);
   - secondary: a clear white outline (60% white, 1.5px, set in pages/_kit.css) that fills lime on hover;
   - tertiary: text links ("Read more ›", the homepage services' "Find out more") stay links;
   - no glow and no lift on hover, one arrow icon, one height (48px), one weight (600).
   Loads after every other stylesheet (build.py), so it settles what the kit and page files left different.
   The words, including the "›" that is part of some live labels, are unchanged. */
:root {
  --wl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 1. no glow, no lift: buttons and button-like links stay where they are and only change colour */
html[data-wl-redesign] :is(a, button, input):is(.w-button, .button-hero-white, .button-highlight, .partner-button):hover,
html[data-wl-redesign] :is(a, button, input):is(.w-button, .button-hero-white, .button-highlight, .partner-button):focus-visible,
html[data-wl-redesign] p.wl-cta > a:hover,
html[data-wl-redesign] .wl-sd-stick .button-hero-white:hover {
  box-shadow: none !important;
  transform: none !important;
}
/* tiles and cards don't jump either (logo tiles, roster cards, event cards) */
html[data-wl-redesign] :is(.container-client-logo, .container-grid-channel-icons, .wl-ec-card):hover { transform: none !important; }

/* 2. secondary: the outline itself lives in pages/_kit.css (loaded before the page files, so a page that makes a
   button lime still wins); here only the arrow */
/* one arrow instead of the drawn chevron; it moves a little on hover */
html[data-wl-redesign="page"] :is(.button-hero-white, .button-highlight):not(.navigation)::after {
  width: 14px;
  height: 14px;
  border: 0;
  transform: none;
  background: currentColor;
  -webkit-mask: var(--wl-arrow) center / contain no-repeat;
          mask: var(--wl-arrow) center / contain no-repeat;
  transition: transform .25s var(--wl-ease);
}
html[data-wl-redesign="page"] :is(.button-hero-white, .button-highlight):not(.navigation):hover::after { transform: translateX(3px); }

/* 4. homepage and shared shell: same heights and weights */
html[data-wl-redesign] .section-dark-cloud .button-highlight { line-height: 48px; }
/* phones: the label may wrap; a 48px line-height made the wrapped pill 120px tall (15 Oct evening) */
@media screen and (max-width: 767px) { html[data-wl-redesign] .section-dark-cloud .button-highlight { line-height: 1.3; } }
html[data-wl-redesign] .section-dark-cloud .button-highlight:hover,
html[data-wl-redesign] .button-highlight.navigation:hover { background: #e6ff5c; }
/* the contact form's button said LET'S CONNECT in capitals (CSS only; the text is "Let's connect"), unlike every other button */
html[data-wl-redesign] .form .button-highlight { min-height: 48px; text-transform: none; letter-spacing: 0; }
/* "Read more ›" links: one weight (the audit found 500 and 600) */
html[data-wl-redesign] .link-read-more { font-weight: 600; }