/* ==========================================================================
   The Riding Kid Club — shared navigation / action-link styling
   --------------------------------------------------------------------------
   One source of truth for the gold treatment on navigation and button-style
   links (header brand link, header actions, back links, call-to-action
   links). Loaded after each page's own <style> block so every page matches.
   Ordinary paragraph hyperlinks, form controls, the crest and Penelope
   artwork are deliberately not touched.
   ========================================================================== */
:root{
  --rk-nav-gold:#D4AF37;
  --rk-nav-gold-dark:#9C6B18;
  --rk-nav-gold-mid:#E8C158;
  --rk-nav-gold-light:#FCEBB6;
  --rk-nav-gold-ink:#7A5210;
  --rk-nav-ink:#0F0D0A;
  --rk-nav-ivory:#FFFDF6;
  --rk-nav-border:1.5px;
  --rk-nav-radius:999px;
  --rk-nav-tint:rgba(212,175,55,0.14);
  --rk-nav-ease:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* ---- Outlined gold links on dark backgrounds --------------------------- */
.brand-mini,
.hdr-btn-outline,
.btn.btn-outline,
.back-link,
.rk-nav-link{
  border:var(--rk-nav-border) solid var(--rk-nav-gold);
  border-radius:var(--rk-nav-radius);
  color:var(--rk-nav-gold-light);
  background-color:transparent;
  text-decoration:none;
  transition:var(--rk-nav-ease);
}
.back-link,
.rk-nav-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter', sans-serif; font-weight:700; font-size:13px; letter-spacing:.02em;
  text-transform:none; line-height:1.2; padding:10px 18px; white-space:nowrap;
}
.brand-mini{padding:5px 18px 5px 6px;}
.brand-mini span{color:var(--rk-nav-gold-light);}

.brand-mini:hover,
.hdr-btn-outline:hover,
.btn.btn-outline:hover,
.back-link:hover,
.rk-nav-link:hover{
  border-color:var(--rk-nav-gold-light);
  color:var(--rk-nav-gold-light);
  background-color:var(--rk-nav-tint);
  transform:translateY(-2px);
}

/* ---- Outlined gold links on light (ivory / parchment) backgrounds ------ */
.to-top-link,
.rk-nav-link--light{
  border:var(--rk-nav-border) solid var(--rk-nav-gold);
  border-radius:var(--rk-nav-radius);
  color:var(--rk-nav-gold-ink);
  background-color:var(--rk-nav-ivory);
  text-decoration:none;
  transition:var(--rk-nav-ease);
}
.to-top-link:hover,
.rk-nav-link--light:hover{
  border-color:var(--rk-nav-gold-dark);
  color:var(--rk-nav-gold-ink);
  background-color:var(--rk-nav-gold-light);
  transform:translateY(-2px);
}

/* ---- Solid gold call-to-action links / buttons ------------------------- */
.hdr-btn-gold,
.btn.btn-gold,
a.btn:not(.btn-outline):not(.btn-gold){
  border:var(--rk-nav-border) solid var(--rk-nav-gold-dark);
  border-radius:var(--rk-nav-radius);
  background-image:linear-gradient(120deg, var(--rk-nav-gold-dark) 0%, var(--rk-nav-gold) 22%, var(--rk-nav-gold-mid) 45%, var(--rk-nav-gold-light) 58%, var(--rk-nav-gold) 72%, var(--rk-nav-gold-dark) 100%);
  background-size:220% 100%; background-position:80% 0;
  color:#241505;
  transition:transform .18s ease, box-shadow .18s ease, background-position .6s ease;
}
.hdr-btn-gold:hover,
.btn.btn-gold:hover,
a.btn:not(.btn-outline):not(.btn-gold):hover{
  background-position:0% 0;
  transform:translateY(-2px);
}
/* The ink-on-gold variant used on the gold "Join" band keeps its own look */
.on-gold .btn.btn-gold{background-image:none; border-color:var(--rk-nav-ink); color:var(--rk-nav-gold-light);}
.on-gold .btn.btn-outline{border-color:rgba(33,26,17,0.55); color:var(--rk-nav-ink);}
.on-gold .btn.btn-outline:hover{border-color:var(--rk-nav-ink); color:var(--rk-nav-ink); background-color:rgba(15,13,10,0.08);}

/* ---- Keyboard focus: dark inner ring + gold outer ring reads on any bg -- */
.brand-mini:focus-visible,
.hdr-btn:focus-visible,
.btn:focus-visible,
.back-link:focus-visible,
.to-top-link:focus-visible,
.rk-nav-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--rk-nav-ink), 0 0 0 5px var(--rk-nav-gold);
}

/* ---- Small screens: brand shows the crest only, so drop its frame ------- */
@media (max-width:480px){
  .brand-mini{border-color:transparent; padding:0; background-color:transparent;}
  .brand-mini:hover{border-color:transparent; background-color:transparent; transform:none;}
  .back-link, .rk-nav-link{padding:8px 12px; font-size:12px;}
}
@media (prefers-reduced-motion: reduce){
  .brand-mini, .hdr-btn, .btn, .back-link, .to-top-link, .rk-nav-link{transition:none;}
  .brand-mini:hover, .hdr-btn:hover, .btn:hover, .back-link:hover, .to-top-link:hover, .rk-nav-link:hover{transform:none;}
}