/* ------------------------------------------------------------------
 * rockabulls.at -- light in-theme restyle (sharpen, don't replace).
 *
 * Reinforces the existing HalfTone / Fifties identity:
 *  - harmonizes the off-brand default-blue content links into the coral
 *    palette, with a turquoise hover that echoes the page's own teal
 *    halftone backdrop (the classic 50s coral x turquoise pairing)
 *  - makes the ticket-style buttons feel tactile (uppercase; the offset
 *    shadow "presses" on click)
 *  - adds the accessibility floor: visible keyboard focus, reduced motion
 *
 * Loaded last so it overrides the theme. Non-destructive: remove the
 * <link> in index.html to revert completely.
 * ------------------------------------------------------------------ */

:root {
  --rb-coral:      #e37655; /* theme accent, kept as-is for fills */
  --rb-coral-ink:  #bf553a; /* darker coral -- legible link text on cream */
  --rb-teal:       #1f7a7e; /* echoes the body background #a8c8ca */
}

/* --- Content links: coral, not browser-blue ----------------------- */
#main #band .lead a,
#posts-list .entry-right-data .excerpt a {
  color: var(--rb-coral-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
#main #band .lead a:hover,
#posts-list .entry-right-data .excerpt a:hover {
  color: var(--rb-teal);
  text-decoration-thickness: 2px;
}

/* The band's affiliate links opt out of underline (the icon carries the
 * "external" meaning) -- just bring their color into the palette. */
#main #band .lead a.aff-link        { color: var(--rb-coral-ink); }
#main #band .lead a.aff-link:hover  { color: var(--rb-teal); }

/* --- Buttons: tactile vintage ticket ------------------------------ */
.link-button {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: bold;
}
.link-button:active {
  transform: translate(2px, 2px);          /* press into the offset shadow */
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .12);
}

/* --- Accessibility floor ------------------------------------------ */
a:focus-visible,
.link-button:focus-visible {
  outline: 2px solid var(--rb-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}