/* ==========================================================================
   Link system

   Base:
   - a                     => default text link

   Text modifiers:
   - .xs                   => shared xs text preset
   - .sm                   => shared sm text preset
   - .lg                   => shared lg text preset
   - .hub                  => navigation / footer hub link
   - .clean                => no underline / bottom decoration
   - .light                => force light treatment

   Neutral media roles:
   - .logo                 => brand/logo link
   - .img                  => linked image / badge
   - .partner              => muted partner-logo link
   ========================================================================== */

:root {
  /* base */
  --link-color: var(--wp--preset--color--warm-brown);
  --link-font-family: var(--body-font-family);
  --link-font-weight: 450;
  --link-font-style: var(--body-font-style);
  --link-letter-spacing: var(--letter-spacing-standalone);
  --link-line-height: var(--body-line-height);
  --link-text-transform: none;
  --link-transition: opacity 0.2s ease, text-decoration-color 0.2s ease, color 0.2s ease;
  --link-transition-clean: opacity 0.28s ease, text-decoration-color 0.45s ease, color 0.28s ease;
  --link-decoration-thickness: 0.09em;
  --link-underline-offset: 0.45em;

  /* size variants */
  --link-font-size-xs: var(--font-size-xs);
  --link-font-weight-xs: 400;
  --link-letter-spacing-xs: var(--letter-spacing-standalone);
  --link-font-size-sm: var(--font-size-sm);
  --link-font-size: var(--font-size-base);
  --link-font-size-lg: var(--font-size-lg);
  --link-font-size-hub: var(--font-size-lg);

  /* dark variants */
  --link-decoration-color-dark: color-mix(in srgb, currentColor 28%, transparent);
  --link-decoration-color-dark-hover: color-mix(in srgb, currentColor 14%, transparent);
  --link-decoration-color-clean-dark-hover: var(--link-decoration-color-dark-hover);
  --link-hover-opacity-dark: 0.6;

  /* light variants */
  --link-decoration-color-light: color-mix(in srgb, currentColor 56%, transparent);
  --link-decoration-color-light-hover: color-mix(in srgb, currentColor 36%, transparent);
  --link-decoration-color-clean-light-hover: var(--link-decoration-color-light-hover);
  --link-hover-opacity-light: 0.8;

  /* hub variants */
  --link-font-weight-hub: 500;
  --link-letter-spacing-hub: var(--letter-spacing-standalone);
  --link-line-height-hub: 1.25;
  --link-text-transform-hub: uppercase;

  /* partner variants */
  --link-partner-opacity: 0.45;
}

a {
  --link-current-color: var(--link-color);
  --link-current-size: var(--link-font-size);
  --link-current-weight: var(--link-font-weight);
  --link-current-letter-spacing: var(--link-letter-spacing);
  --link-current-line-height: var(--link-line-height);
  --link-current-text-transform: var(--link-text-transform);
  --link-current-decoration-color: var(--link-decoration-color-dark);
  --link-current-decoration-color-hover: var(--link-decoration-color-dark-hover);
  --link-current-decoration-color-clean-hover: var(--link-decoration-color-clean-dark-hover);
  --link-current-decoration-thickness: var(--link-decoration-thickness);
  --link-current-hover-opacity: var(--link-hover-opacity-dark);

  color: var(--link-current-color);
  font-family: var(--link-font-family);
  font-size: var(--link-current-size);
  font-weight: var(--link-current-weight);
  font-style: var(--link-font-style);
  letter-spacing: var(--link-current-letter-spacing);
  line-height: var(--link-current-line-height);
  text-transform: var(--link-current-text-transform);
  text-decoration-line: underline;
  text-decoration-color: var(--link-current-decoration-color);
  text-decoration-thickness: var(--link-current-decoration-thickness);
  text-underline-offset: var(--link-underline-offset);
  transition: var(--link-transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Inline links in paragraph copy should match body text spacing. */
p a {
  --link-current-letter-spacing: var(--body-letter-spacing);
  text-underline-offset: 0.3rem;
}

a:not(.card, .retailer):is(:hover, :focus-visible) {
  opacity: var(--link-current-hover-opacity);
  text-decoration-color: var(--link-current-decoration-color-hover);
}

a.xs {
  --link-current-size: var(--link-font-size-xs);
  --link-current-weight: var(--link-font-weight-xs);
  --link-current-letter-spacing: var(--link-letter-spacing-xs);
}

a.sm {
  --link-current-size: var(--link-font-size-sm);
}

a.lg {
  --link-current-size: var(--link-font-size-lg);
}

a.hub {
  --link-current-size: var(--link-font-size-hub);
  --link-current-weight: var(--link-font-weight-hub);
  --link-current-letter-spacing: var(--link-letter-spacing-hub);
  --link-current-line-height: var(--link-line-height-hub);
  --link-current-text-transform: var(--link-text-transform-hub);
}

a.logo,
a.img,
a.partner,
a.btn,
a.card {
  text-decoration: none;
}

a.clean {
  --link-current-decoration-thickness: 0;
  text-decoration-line: none;
  --link-current-decoration-color: transparent;
  --link-current-decoration-color-hover: transparent;
  transition: var(--link-transition-clean);
}

a.clean:is(:hover, :focus-visible) {
  --link-current-decoration-thickness: var(--link-decoration-thickness);
  text-decoration-line: underline;
  text-decoration-color: var(--link-current-decoration-color-clean-hover);
}

/* External-link suffix svg sized in em so it follows nav text scaling
   (.xs in footer, .lg in mobile menu, default in desktop) and skips the
   slide-on-hover used by standalone read-more links. */
a.clean > span + svg {
  inline-size: 0.81em;
  block-size: 0.81em;
  transform: none;
  transition: none;
}

a.clean:is(:hover, :focus-visible) > span + svg {
  transform: none;
}

a.light {
  --link-current-color: var(--wp--preset--color--white);
  --link-current-decoration-color: var(--link-decoration-color-light);
  --link-current-decoration-color-hover: var(--link-decoration-color-light-hover);
  --link-current-decoration-color-clean-hover: var(--link-decoration-color-clean-light-hover);
  --link-current-hover-opacity: var(--link-hover-opacity-light);
}

.section.brown a,
.hero a,
.footer a,
.site-footer a,
.site-mobile-nav.is-open a,
.site-header nav .group a {
  --link-current-color: var(--wp--preset--color--white);
  --link-current-decoration-color: var(--link-decoration-color-light);
  --link-current-decoration-color-hover: var(--link-decoration-color-light-hover);
  --link-current-decoration-color-clean-hover: var(--link-decoration-color-clean-light-hover);
  --link-current-hover-opacity: var(--link-hover-opacity-light);
}

a.logo,
a.img,
a.partner {
  color: inherit;
}

a.logo {
  display: inline-flex;
  align-items: center;
}

a.img,
a.partner {
  display: inline-block;
}

a.partner img {
  filter: grayscale(100%);
  opacity: var(--link-partner-opacity);
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}

a.partner:is(:hover, :focus-visible) img {
  filter: none;
  opacity: 1;
}

a > svg:first-child {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
}

a > span + svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  transform: translateX(0);
  transition: transform 0.26s ease;
}

.link-wrap {
  margin-top: calc(var(--text-block-gap-text, 0.5rem) * 3);
}

a:is(:hover, :focus-visible) > span + svg {
  transform: translateX(0.22rem);
}

/* Inline link variant — for links that sit within a sentence or other body
   copy. Removes the trailing-icon gap and hover translate so the icon hugs
   the label, and shrinks it ~10% so it doesn't clutter the line. */
a.inline {
  gap: 0.2em;
}

a.inline > svg:first-child {
  inline-size: 0.81em;
  block-size: 0.81em;
}

a.inline > span + svg {
  inline-size: 0.81em;
  block-size: 0.81em;
  transition: none;
}

a.inline:is(:hover, :focus-visible) > span + svg {
  transform: none;
}

/* Inline external link with CSS-rendered arrow icon. Use this variant when
   the link sits inside a core/paragraph — Gutenberg RichText hides inline
   <svg> in the visual editor. Mark the anchor with `class="inline external"`
   and omit the inline <svg>/<span> wrap. */
a.inline.external::after {
  content: '';
  display: inline-block;
  inline-size: 0.81em;
  block-size: 0.81em;
  margin-inline-start: 0.2em;
  background-color: currentColor;
  -webkit-mask: url('../svg/arrow-up-right.svg') no-repeat center / contain;
  mask: url('../svg/arrow-up-right.svg') no-repeat center / contain;
  vertical-align: -0.05em;
}

/* Supplier/link-list rows should visually match standalone text links even
   when the anchor is inside a flex row instead of its own paragraph. */
.row.link-list a > span {
  text-decoration-line: underline;
  text-decoration-color: var(--link-current-decoration-color);
  text-decoration-thickness: var(--link-current-decoration-thickness);
  text-underline-offset: var(--link-underline-offset);
}

.row.link-list a:is(:hover, :focus-visible) > span {
  text-decoration-color: var(--link-current-decoration-color-hover);
}