:root {
  --logo-w: clamp(170px, calc(151.6px + 6vw), 240px);

  /* 238/32 = 178/24 approximately */
  --logo-ratio: 238 / 32;

  --shadow-orange: 0px 10px 22px 0px #ff8c0026;
  --brand-orange: #ff4202;
  --icon-filter-orange: brightness(0) saturate(100%) invert(34%) sepia(75%) saturate(4270%) hue-rotate(359deg) brightness(101%)
    contrast(101%);

  --vendor-size: clamp(110px, 14vw, 220px);
  --vendor-radius: clamp(10px, 1.2vw, 16px);
  --vendor-img-radius: calc(var(--vendor-radius) + 1px);

  --nav: 40px;
}

@media (min-width: 1024px) {
  :root {
    --nav: 86px;
  }
}

/* ---------------------------------------------------------------------- */
/* ========== Reusable logo component ========== */
.site-logo {
  display: inline-block;
  width: var(--logo-w);
  aspect-ratio: var(--logo-ratio);
  flex-shrink: 0;
}

.site-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* ---------------------------------------------------------------------- */
/* ========== Solid and broken lines ========== */
.dashed-8 {
  width: 100%;
  border-bottom: 0.5px dashed transparent;
  border-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.2) 0 8px, transparent 8px 16px) 1;
}

.solid-8 {
  width: 100%;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}

/* Switch divider from horizontal to vertical) */
@media (min-width: 1024px) {
  .solid-8-dir {
    width: 0;
    border-bottom: 0;
    border-inline-start: 0.5px solid rgba(0, 0, 0, 0.2);
    align-self: stretch;
  }
}

/* ---------------------------------------------------------------------- */
/* ========== Hover utilities (shared) ========== */
:is(.hover-accent-fill, .hover-accent-outline, .hover-white) {
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

:is(.hover-accent-fill, .hover-accent-outline, .hover-white) img:not(.no-hover-filter) {
  transition: filter 150ms ease;
}

/* 1) Accent Fill (bg orange + text white + icon white) */
.hover-accent-fill:hover {
  background-color: var(--brand-orange);
  color: #ffffff;
  box-shadow: var(--shadow-orange);
}

.hover-accent-fill:hover img:not(.no-hover-filter) {
  /* white */
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 2) Accent Outline (bg white + text orange + icon orange)*/
.hover-accent-outline:hover {
  background-color: #ffffff;
  color: var(--brand-orange);
  box-shadow: 0 0 0 1.5px var(--brand-orange), var(--shadow-orange);
}

.hover-accent-outline:hover img:not(.no-hover-filter) {
  /* #ff4202 */
  filter: brightness(0) saturate(100%) invert(33%) sepia(76%) saturate(3920%) hue-rotate(358deg) brightness(103%) contrast(101%);
}

/* 3) White Hover (bg white + shadow only) */
.hover-white:hover {
  background-color: #ffffff;
  box-shadow: var(--shadow-orange);
}

/* ---------------------------------------------------------------------- */
/* ========== Link show more ========== */
.link-showMore {
  font-size: 12px;
  color: #ff4202;
  font-weight: 500;
  transition: 150ms;
}

@media (min-width: 1024px) {
  .link-showMore {
    font-size: 16px;
  }
}

.link-showMore:hover,
.link-showMore:focus {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* ========== Orange CTA (shared base) ========== */
.cta-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 100px;
  text-transform: uppercase;
  white-space: nowrap;

  cursor: pointer;
  transition: 200ms ease;

  /* Size */
  height: 42px;
  padding-inline: 32px;
  gap: 10px;

  /* Typography */
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}

.outline-orange {
  color: #ff4201;
  border: 1px solid #ff4201;
  background-color: transparent;

  &:hover {
    background-color: #ff4201;
    color: #fff;
    box-shadow: var(--shadow-orange);
  }
}

.solid-orange {
  color: #fff;
  background-color: #ff4201;
  border: 1px solid #ff4201;

  &:hover {
    background-color: transparent;
    color: #ff4201;
    box-shadow: var(--shadow-orange);
  }
}

/* Responsive (small screens) */
@media (max-width: 768px) {
  .cta-orange {
    /* height: 40px; */
    font-size: 13px;
    padding-inline: 26px;
  }
}

/* ---------------------------------------------------------------------- */
/* ========== Page decorative glow ========== */
.page-glow {
  position: relative;
  overflow: hidden;
}

.page-glow::before {
  content: "";
  position: absolute;
  top: -160px;
  inset-inline-start: -160px;
  width: 410px;
  height: 410px;
  border-radius: 9999px;
  background: #ff410210;
  filter: blur(184px);
  pointer-events: none;
}

/* keep content above */
.page-glow > * {
  position: relative;
}

/* ========== Page decorative swoosh (SVG) ========== */
.page-swoosh {
  position: relative;
  overflow: hidden;
}

    .page-swoosh::after {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        /* responsive size */
        width: clamp(100px, 35.348%, 550px);
        height: auto;
        aspect-ratio: 509 / 323;
        background: url("/Themes/TradeLink/Content/assets/icons/corner-swoosh.svg") no-repeat;
        background-size: contain;
        background-position: top right;
        pointer-events: none;
        z-index: 0;
    }

/* keep content above */
.page-swoosh > * {
  position: relative;
  z-index: 1;
}

/* optional mirror for RTL */
[dir="rtl"] .page-swoosh::after {
  transform: scaleX(-1);
  background-position: top left;
}

/* ---------------------------------------------------------------------- */
/* ========== Card hover ========== */
.card-hover {
  transition: box-shadow 300ms ease;
  will-change: transform, box-shadow;
}

.card-hover:hover {
  box-shadow: 0 10px 16px -4px rgba(0, 0, 0, 0.1);
}