/* assets/arrow-override.css */
/* ---- Global arrow config ---- */
:root{
  --arrow-size: 1.15em;
  --arrow-shift: 2px;
  --arrow-baseline: -0.24em;
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.u-arrow-ic{
  display:inline-block;
  width:var(--arrow-size);
  height:var(--arrow-size);
  vertical-align: var(--arrow-baseline);
  background-color: currentColor;
  -webkit-mask-image: var(--arrow-mask);
          mask-image: var(--arrow-mask);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition: transform .2s ease;
  margin-left:.25em;
}
a:hover .u-arrow-ic,
button:hover .u-arrow-ic { transform: translateX(var(--arrow-shift)); }

/* Normalize theme pseudo-element arrows */
.link--arrow::after,
.button--arrow::after,
.btn--arrow::after,
.cta--arrow::after,
[data-icon="arrow"]::after{
  content:"";
  display:inline-block;
  width:var(--arrow-size);
  height:var(--arrow-size);
  margin-inline-start:.25em;
  vertical-align: var(--arrow-baseline);
  background-color: currentColor !important;
  background-image:none !important;
  -webkit-mask-image: var(--arrow-mask);
          mask-image: var(--arrow-mask);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition: transform .2s ease;
}
a:hover.link--arrow::after,
.button--arrow:hover::after,
.btn--arrow:hover::after,
.cta--arrow:hover::after,
[data-icon="arrow"]:hover::after{ transform: translateX(var(--arrow-shift)); }

/* Inline SVG arrows → hide + repaint with our mask */
a:has(> svg[class*="arrow"]),
a:has(> svg[class*="chevron"]),
button:has(> svg[class*="arrow"]),
button:has(> svg[class*="chevron"]){ position:relative; }
a:has(> svg[class*="arrow"]) > svg[class*="arrow"],
a:has(> svg[class*="chevron"]) > svg[class*="chevron"],
button:has(> svg[class*="arrow"]) > svg[class*="arrow"],
button:has(> svg[class*="chevron"]) > svg[class*="chevron"]{ display:none !important; }
a:has(> svg[class*="arrow"])::after,
a:has(> svg[class*="chevron"])::after,
button:has(> svg[class*="arrow"])::after,
button:has(> svg[class*="chevron"])::after{
  content:"";
  display:inline-block;
  width:var(--arrow-size);
  height:var(--arrow-size);
  margin-inline-start:.25em;
  vertical-align: var(--arrow-baseline);
  background-color: currentColor;
  -webkit-mask-image: var(--arrow-mask);
          mask-image: var(--arrow-mask);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition: transform .2s ease;
}
a:hover:has(> svg[class*="arrow"])::after,
a:hover:has(> svg[class*="chevron"])::after,
button:hover:has(> svg[class*="arrow"])::after,
button:hover:has(> svg[class*="chevron"])::after{
  transform: translateX(var(--arrow-shift));
}

/* Optional: tiny Safari nudge */
@supports (-webkit-touch-callout: none){
  :root{ --arrow-baseline: -0.26em; }
}