/* Wrapper row for buttons + text (replaces your inline style) */
.pathway-btn {
  display: inline-flex;
  gap: 6px;               /* was 5px inline */
  align-items: center;
  flex-wrap: wrap;        /* nice on tight layouts */
}

/* Base sheet button */
.sheet-btn{
  --btn-size: 30px;                                 /* default size 30px */
  --btn-bg: rgba(150,115,166,0.6);                  /* #9673A6 @ 60% */
  --btn-bg-hover: rgba(150,115,166,1);
  --btn-fg: #fff;
  --btn-bd: #fff;
  --btn-radius: 6px;

  display:inline-flex; align-items:center; justify-content:center;
  width:var(--btn-size); height:var(--btn-size);
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--btn-radius);
  text-decoration:none;
  line-height:1; position:relative; cursor:pointer;
  transition: background .2s ease-in-out, transform .05s ease-in-out;
}

/* Keep the icon/text white in ALL link states, even with W3.css */
.sheet-btn,
.sheet-btn:link,
.sheet-btn:visited,
.sheet-btn:hover,
.sheet-btn:active,
.sheet-btn:focus {
  color:#fff !important;
  text-decoration:none !important;
}

/* Hover/active behaviour */
.sheet-btn:hover { background:var(--btn-bg-hover); }
.sheet-btn:active { transform: translateY(1px); }

/* Icon via pseudo-element (FA5 Free Solid) */
.sheet-btn::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 18px; /* looks right inside 30px */
  content:""; display:block;
}

/* Icon modifiers */
.is-up::before       { content:"\f106"; } /* angle-up   */
.is-down::before     { content:"\f107"; } /* angle-down */
.is-left::before     { content:"\f104"; } /* angle-left */
.is-right::before    { content:"\f105"; } /* angle-right */
.is-question::before { content:"\f128"; } /* question   */
.is-info::before     { content:"\f05a"; } /* info-circle */
.is-check::before    { content:"\f00c"; } /* check */

/* Shape variant: circle */
.sheet-btn--circle   { --btn-radius:50%; }

/* (Optional) quick size variants */
.sheet-btn--sm { --btn-size:24px; }
.sheet-btn--lg { --btn-size:36px; }
.sheet-btn--xl { --btn-size:42px; }

/* ===== Base .sheet-btn already defined above ===== */

/* Transparent (takes parent bg colour) but purple on hover */
.sheet-btn--transparent {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(150,115,166,1); /* Purple hover */
}

/* Black */
.sheet-btn--black {
  --btn-bg: rgba(0,0,0,0.6);
  --btn-bg-hover: rgba(0,0,0,1);
}

/* Grey */
.sheet-btn--grey {
  --btn-bg: rgba(102,102,102,0.6);
  --btn-bg-hover: rgba(102,102,102,1);
}

/* Blue */
.sheet-btn--blue {
  --btn-bg: rgba(108,142,191,0.6);
  --btn-bg-hover: rgba(108,142,191,1);
}


/* Video buttons */
.sheet-btn--video {
  --btn-bg: rgba(0,115,170,0.4);
  --btn-bg-hover: rgba(0,115,170,1);
	font-weight: bold;
	font-size: 14px;
}
/* NHS Blue */
.sheet-btn--nhs-blue {
  --btn-bg: rgba(0,94,184,0.6);
  --btn-bg-hover: rgba(0,94,184,1);
}

/* Green */
.sheet-btn--green {
  --btn-bg: rgba(130,179,102,0.6);
  --btn-bg-hover: rgba(130,179,102,1);
}

/* Orange */
.sheet-btn--orange {
  --btn-bg: rgba(215,155,0,0.6);
  --btn-bg-hover: rgba(215,155,0,1);
}

/* Yellow */
.sheet-btn--yellow {
  --btn-bg: rgba(214,182,86,0.6);
  --btn-bg-hover: rgba(214,182,86,1);
}

/* Pink */
.sheet-btn--pink {
  --btn-bg: rgba(184,84,80,0.6);
  --btn-bg-hover: rgba(184,84,80,1);
}

/* Purple */
.sheet-btn--purple {
  --btn-bg: rgba(150,115,166,0.6);
  --btn-bg-hover: rgba(150,115,166,1);
}
/* ---------- ICON VIA <i> SUPPORT (optional) ---------- */
/* If you place an <i> inside the button, hide the ::before pseudo-icon */
.sheet-btn.has-icon::before { content: none !important; }

/* Tidy the <i> so it centres perfectly inside the button box */
.sheet-btn.has-icon > i {
  font-size: calc(var(--btn-size) * 0.6); /* ~18px for 30px btn */
  line-height: 1;
  display: inline-block;
  pointer-events: none; /* clicks go to the button link */
}

/* Optional: spin animation for loaders */
.sheet-btn .is-spin,
.sheet-btn.has-icon .fa-spinner {
  animation: crx-spin 1s linear infinite;
}
@keyframes crx-spin { to { transform: rotate(360deg); } }

/* ---------- TEXT MODE (letters/numbers via data-text) ---------- */
/* Use up to 2 characters; we pull from the data-text attribute */
.sheet-btn.text-mode::before {
  content: attr(data-text);
  font-family: inherit;       /* not Font Awesome */
  font-weight: 700;
  font-size: calc(var(--btn-size) * 0.55); /* scales with size variants */
  letter-spacing: 0.5px;      /* helps 2-char balance */
}

/* Ensure text stays centred like icons */
.sheet-btn.text-mode {
  text-transform: none;       /* keep original casing */
}

/* Slightly larger text when the badge is circular */
.sheet-btn.sheet-btn--circle.text-mode::before {
  font-size: calc(var(--btn-size) * 0.60);
  letter-spacing: 0.2px; /* tighter for 2 chars */
}

/* Optional: stronger outline/ring for a badge look */
.sheet-btn.badge-outline {
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}

/* Optional: filled + outline hover pop for badges */
.sheet-btn.badge-outline:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

/* Optional: use tabular numbers so 1/2-digit badges align nicely */
.sheet-btn.text-mode {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}