/* Guldkant från loggans ring: mörk mässing, varmt guld och ljusa reflexer.
   Kantreglerna gäller introduktionens knappar och behandlingskategorierna.
   Recensionskortens citattecken återanvänder gradienten i reviews.css. */
:root {
  --gold-edge-color: #b88a49;
  --gold-edge-gradient: linear-gradient(
    125deg,
    #93632e 0%,
    #c79755 12%,
    #f5d99e 22%,
    #fff3cc 28%,
    #b4803e 39%,
    #deb277 50%,
    #fff0bf 60%,
    #c18c48 72%,
    #91602b 83%,
    #dfb77d 94%,
    #f4dca6 100%
  );
}

/* Behåll befintlig border-box, fyllning, radie och tryckyta. */
.intro-actions > .button,
.category-tabs,
.category {
  position: relative;
  --gold-ring-width: 2px;
  --gold-ring-inset: -1px;
}

.intro-actions > .button,
.category-tabs,
.category[aria-pressed="true"],
.category:hover,
.category:focus-visible {
  border-color: var(--gold-edge-color);
}

/* Förhandsvisningens färgregler ska inte ersätta den valda metallkanten.
   Kantbredd 0 i panelen döljer även guldkanten. */
html[data-customized] .intro-actions > .button,
html[data-customized] .category-tabs,
html[data-customized] .category {
  --gold-ring-width: calc(var(--custom-border-width) * 2);
  --gold-ring-inset: calc(0px - var(--custom-border-width));
}
html[data-customized] .intro-actions > .button-secondary {
  border-color: var(--gold-edge-color);
}

/* Masken lämnar mitten genomskinlig så att knappens egna färger består. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .intro-actions > .button::before,
  .category-tabs::before,
  .category::before {
    content: "";
    position: absolute;
    inset: var(--gold-ring-inset);
    padding: var(--gold-ring-width);
    border-radius: inherit;
    background: var(--gold-edge-gradient);
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  .intro-actions > .button,
  .category-tabs,
  .category,
  .category[aria-pressed="true"],
  .category:hover,
  .category:focus-visible,
  html[data-customized] .intro-actions > .button-secondary {
    border-color: transparent;
  }

  .category::before { opacity: 0; }
  .category[aria-pressed="true"]::before,
  .category:hover::before,
  .category:focus-visible::before { opacity: 1; }
}

/* Behåll systemets tydliga kanter i Windows högkontrastläge. */
@media (forced-colors: active) {
  .intro-actions > .button,
  .category-tabs,
  .category[aria-pressed="true"],
  .category:hover,
  .category:focus-visible,
  html[data-customized] .intro-actions > .button-secondary {
    border-color: ButtonText;
  }
  .intro-actions > .button::before,
  .category-tabs::before,
  .category::before { display: none; }
}