:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  --rounded-btn: 0.5rem;
  --rounded-box: 1rem;
  --rounded-badge: 1.9rem;
  --ua-fs-h1: 1.875rem;
  --ua-fs-h1-md: 3rem;
  --ua-fs-h2: 1.5rem;
  --ua-fs-h2-md: 1.875rem;
  --ua-fs-h3: 1.25rem;
  --ua-fs-h3-md: 1.5rem;
  --ua-fs-h4: 1rem;
  --ua-fs-h4-md: 1rem;
  --ua-fs-body: 1rem;
  --ua-fs-body-md: 1rem;
  --ua-fs-table: 0.875rem;
  --ua-fs-table-md: 0.875rem;
  --ua-home-space: 24px;
  --ua-home-space-lg: 48px;
}

body { font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); }

/* UA Nav hover effects (site-scoped) */
.ua-nav-links {
  --ua-nav-hover-bg: var(--color-base-200, var(--b2));
  --ua-nav-hover-fg: var(--color-base-content, var(--bc));
  --ua-nav-hover-border: var(--color-base-200, var(--b2));
}

.ua-nav-links[data-ua-nav-hover-color="base-100"] {
  --ua-nav-hover-bg: var(--color-base-100, var(--b1));
  --ua-nav-hover-fg: var(--color-base-content, var(--bc));
  --ua-nav-hover-border: var(--color-base-100, var(--b1));
}
.ua-nav-links[data-ua-nav-hover-color="base-200"] {
  --ua-nav-hover-bg: var(--color-base-200, var(--b2));
  --ua-nav-hover-fg: var(--color-base-content, var(--bc));
  --ua-nav-hover-border: var(--color-base-200, var(--b2));
}
.ua-nav-links[data-ua-nav-hover-color="base-300"] {
  --ua-nav-hover-bg: var(--color-base-300, var(--b3));
  --ua-nav-hover-fg: var(--color-base-content, var(--bc));
  --ua-nav-hover-border: var(--color-base-300, var(--b3));
}

.ua-nav-links[data-ua-nav-hover-color="primary"] {
  --ua-nav-hover-bg: var(--color-primary, var(--p));
  --ua-nav-hover-fg: var(--color-primary-content, var(--pc));
  --ua-nav-hover-border: var(--color-primary, var(--p));
}
.ua-nav-links[data-ua-nav-hover-color="secondary"] {
  --ua-nav-hover-bg: var(--color-secondary, var(--s));
  --ua-nav-hover-fg: var(--color-secondary-content, var(--sc));
  --ua-nav-hover-border: var(--color-secondary, var(--s));
}
.ua-nav-links[data-ua-nav-hover-color="accent"] {
  --ua-nav-hover-bg: var(--color-accent, var(--a));
  --ua-nav-hover-fg: var(--color-accent-content, var(--ac));
  --ua-nav-hover-border: var(--color-accent, var(--a));
}
.ua-nav-links[data-ua-nav-hover-color="neutral"] {
  --ua-nav-hover-bg: var(--color-neutral, var(--n));
  --ua-nav-hover-fg: var(--color-neutral-content, var(--nc));
  --ua-nav-hover-border: var(--color-neutral, var(--n));
}
.ua-nav-links[data-ua-nav-hover-color="info"] {
  --ua-nav-hover-bg: var(--color-info, var(--in));
  --ua-nav-hover-fg: var(--color-info-content, var(--inc));
  --ua-nav-hover-border: var(--color-info, var(--in));
}
.ua-nav-links[data-ua-nav-hover-color="success"] {
  --ua-nav-hover-bg: var(--color-success, var(--su));
  --ua-nav-hover-fg: var(--color-success-content, var(--suc));
  --ua-nav-hover-border: var(--color-success, var(--su));
}
.ua-nav-links[data-ua-nav-hover-color="warning"] {
  --ua-nav-hover-bg: var(--color-warning, var(--wa));
  --ua-nav-hover-fg: var(--color-warning-content, var(--wac));
  --ua-nav-hover-border: var(--color-warning, var(--wa));
}
.ua-nav-links[data-ua-nav-hover-color="error"] {
  --ua-nav-hover-bg: var(--color-error, var(--er));
  --ua-nav-hover-fg: var(--color-error-content, var(--erc));
  --ua-nav-hover-border: var(--color-error, var(--er));
}

.ua-nav-link {
  position: relative;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.ua-nav-link:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ua-nav-hover-bg) 70%, transparent) !important;
  outline-offset: 2px;
}

/* ------------------ NONE ------------------ */
.ua-nav-links[data-ua-nav-hover-style="none"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="none"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="none"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="none"] .ua-nav-link:active {
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ------------------ SOFT BG ------------------ */
.ua-nav-links[data-ua-nav-hover-style="soft_bg"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="soft_bg"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="soft_bg"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="soft_bg"] .ua-nav-link:active {
  background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 18%, transparent) !important;
}

/* ------------------ SOLID BG ------------------ */
.ua-nav-links[data-ua-nav-hover-style="solid_bg"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="solid_bg"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="solid_bg"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="solid_bg"] .ua-nav-link:active {
  background-color: var(--ua-nav-hover-bg) !important;
  color: var(--ua-nav-hover-fg) !important;
}

/* ------------------ PILL ------------------ */
.ua-nav-links[data-ua-nav-hover-style="pill"] .ua-nav-link {
  border-radius: 9999px;
}
.ua-nav-links[data-ua-nav-hover-style="pill"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="pill"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="pill"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="pill"] .ua-nav-link:active {
  background-color: var(--ua-nav-hover-bg) !important;
  color: var(--ua-nav-hover-fg) !important;
}

/* ------------------ BORDERED ------------------ */
.ua-nav-links[data-ua-nav-hover-style="bordered"] .ua-nav-link {
  border: 2px solid color-mix(in oklab, var(--color-base-content, var(--bc)) 18%, transparent) !important;
}
.ua-nav-links[data-ua-nav-hover-style="bordered"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="bordered"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="bordered"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="bordered"] .ua-nav-link:active {
  border-color: color-mix(in oklab, var(--ua-nav-hover-border) 55%, transparent) !important;
  background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 8%, transparent) !important;
}

/* ------------------ OUTLINE ------------------ */
.ua-nav-links[data-ua-nav-hover-style="outline"] .ua-nav-link {
  border: 1px solid transparent !important;
  background-color: transparent !important;
}
.ua-nav-links[data-ua-nav-hover-style="outline"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="outline"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="outline"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="outline"] .ua-nav-link:active {
  border-color: color-mix(in oklab, var(--ua-nav-hover-border) 70%, transparent) !important;
}

/* ------------------ NEON ------------------ */
.ua-nav-links[data-ua-nav-hover-style="neon"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="neon"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="neon"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="neon"] .ua-nav-link:active {
  background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 8%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ua-nav-hover-bg) 25%, transparent) !important;
}

/* ------------------ GLOW ------------------ */
.ua-nav-links[data-ua-nav-hover-style="glow"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="glow"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="glow"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="glow"] .ua-nav-link:active {
  background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 10%, transparent) !important;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--ua-nav-hover-bg) 22%, transparent),
    0 8px 24px color-mix(in oklab, var(--ua-nav-hover-bg) 18%, transparent) !important;
}

/* ------------------ LIFT + SHADOW ------------------ */
.ua-nav-links[data-ua-nav-hover-style="lift_shadow"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="lift_shadow"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="lift_shadow"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="lift_shadow"] .ua-nav-link:active {
  transform: translateY(-1px) !important;
  background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 10%, transparent) !important;
  box-shadow: 0 10px 24px color-mix(in oklab, var(--color-base-content, var(--bc)) 10%, transparent) !important;
}

/* ------------------ SCALE ------------------ */
.ua-nav-links[data-ua-nav-hover-style="scale"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="scale"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="scale"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="scale"] .ua-nav-link:active {
  transform: scale(1.04) !important;
  background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 10%, transparent) !important;
}

/* ------------------ UNDERLINE ------------------ */
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link {
  background-color: transparent !important;
}
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:active,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:active {
  background-color: transparent !important;
}
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link::after,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--ua-nav-hover-bg);
  transform: scaleX(0);
  transition: transform 160ms ease;
}
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link::after {
  transform-origin: left;
}
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link::after {
  transform-origin: center;
}
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:hover::after,
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:focus::after,
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:focus-visible::after,
.ua-nav-links[data-ua-nav-hover-style="underline"] .ua-nav-link:active::after,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:hover::after,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:focus::after,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:focus-visible::after,
.ua-nav-links[data-ua-nav-hover-style="underline_center"] .ua-nav-link:active::after {
  transform: scaleX(1);
}

/* ------------------ BOTTOM BAR ------------------ */
.ua-nav-links[data-ua-nav-hover-style="bottom_bar"] .ua-nav-link {
  background-color: transparent !important;
}
.ua-nav-links[data-ua-nav-hover-style="bottom_bar"] .ua-nav-link::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.2rem;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--ua-nav-hover-bg);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.ua-nav-links[data-ua-nav-hover-style="bottom_bar"] .ua-nav-link:hover::after,
.ua-nav-links[data-ua-nav-hover-style="bottom_bar"] .ua-nav-link:focus::after,
.ua-nav-links[data-ua-nav-hover-style="bottom_bar"] .ua-nav-link:focus-visible::after,
.ua-nav-links[data-ua-nav-hover-style="bottom_bar"] .ua-nav-link:active::after {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------ LEFT BAR ------------------ */
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link {
  background-color: transparent !important;
}
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 9999px;
  background-color: var(--ua-nav-hover-bg);
  opacity: 0;
  transform: scaleY(0.6);
  transition: opacity 160ms ease, transform 160ms ease;
}
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:hover::before,
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:focus::before,
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:focus-visible::before,
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:active::before {
  opacity: 1;
  transform: scaleY(1);
}
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:hover,
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:focus,
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:focus-visible,
.ua-nav-links[data-ua-nav-hover-style="left_bar"] .ua-nav-link:active {
  background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 10%, transparent) !important;
}



/* UA Nav current + tap (site-scoped) */
/* Current (page courante): styles distincts desktop vs mobile */
.ua-nav-links[data-ua-nav-current-enabled="1"] .ua-nav-link[aria-current="page"] {
  font-weight: 600;
}

@media (min-width: 1024px) {
  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-desktop="current_soft_bg"] .ua-nav-link[aria-current="page"] {
    background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 18%, transparent) !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-desktop="current_solid_bg"] .ua-nav-link[aria-current="page"] {
    background-color: var(--ua-nav-hover-bg) !important;
    color: var(--ua-nav-hover-fg) !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-desktop="current_outline"] .ua-nav-link[aria-current="page"] {
    border: 1px solid color-mix(in oklab, var(--ua-nav-hover-border) 70%, transparent) !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-desktop="current_left_bar"] .ua-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 9999px;
    background-color: var(--ua-nav-hover-bg);
    opacity: 1;
    transform: scaleY(1);
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-desktop="current_left_bar"] .ua-nav-link[aria-current="page"] {
    background-color: transparent !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-desktop="current_underline"] .ua-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.35rem;
    height: 2px;
    border-radius: 9999px;
    background-color: var(--ua-nav-hover-bg);
    transform: scaleX(1);
    transform-origin: left;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-desktop="current_underline"] .ua-nav-link[aria-current="page"] {
    background-color: transparent !important;
  }
}

@media (max-width: 1023.98px) {
  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-mobile="m_current_soft"] .ua-nav-link[aria-current="page"] {
    background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 18%, transparent) !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-mobile="m_current_solid"] .ua-nav-link[aria-current="page"] {
    background-color: var(--ua-nav-hover-bg) !important;
    color: var(--ua-nav-hover-fg) !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-mobile="m_current_outline"] .ua-nav-link[aria-current="page"] {
    border: 1px solid color-mix(in oklab, var(--ua-nav-hover-border) 70%, transparent) !important;
    background-color: transparent !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-mobile="m_current_left_bar"] .ua-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 9999px;
    background-color: var(--ua-nav-hover-bg);
    opacity: 1;
    transform: scaleY(1);
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-mobile="m_current_left_bar"] .ua-nav-link[aria-current="page"] {
    background-color: transparent !important;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-mobile="m_current_underline"] .ua-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.3rem;
    height: 3px;
    border-radius: 9999px;
    background-color: var(--ua-nav-hover-bg);
    transform: scaleX(1);
    transform-origin: left;
  }

  .ua-nav-links[data-ua-nav-current-enabled="1"][data-ua-nav-current-style-mobile="m_current_underline"] .ua-nav-link[aria-current="page"] {
    background-color: transparent !important;
  }
}

/* Tap (mobile/touch): apply only on devices without hover */
@media (hover: none) {
  /* Ensure we never accidentally use *-content on soft taps */
  .ua-nav-links[data-ua-nav-tap-style="tap_soft_bg"] .ua-nav-link {
    color: var(--color-base-content, var(--bc));
  }
  .ua-nav-links[data-ua-nav-tap-style="tap_soft_bg"] .ua-nav-link:active,
  .ua-nav-links[data-ua-nav-tap-style="tap_soft_bg"] .ua-nav-link:focus {
    background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 18%, transparent) !important;
    color: var(--color-base-content, var(--bc)) !important;
  }

  .ua-nav-links[data-ua-nav-tap-style="tap_solid_bg"] .ua-nav-link:active,
  .ua-nav-links[data-ua-nav-tap-style="tap_solid_bg"] .ua-nav-link:focus {
    background-color: var(--ua-nav-hover-bg) !important;
    color: var(--ua-nav-hover-fg) !important;
  }

  .ua-nav-links[data-ua-nav-tap-style="tap_scale"] .ua-nav-link:active {
    transform: scale(0.98) !important;
  }

  .ua-nav-links[data-ua-nav-tap-style="tap_lift_shadow"] .ua-nav-link:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px color-mix(in oklab, var(--color-base-content, var(--bc)) 10%, transparent) !important;
  }

  .ua-nav-links[data-ua-nav-tap-style="tap_outline"] .ua-nav-link {
    border: 1px solid transparent !important;
  }
  .ua-nav-links[data-ua-nav-tap-style="tap_outline"] .ua-nav-link:active,
  .ua-nav-links[data-ua-nav-tap-style="tap_outline"] .ua-nav-link:focus {
    border-color: color-mix(in oklab, var(--ua-nav-hover-border) 70%, transparent) !important;
  }

  .ua-nav-links[data-ua-nav-tap-style="tap_ripple_fake"] .ua-nav-link {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0% 0%;
    background-image: radial-gradient(circle at center, color-mix(in oklab, var(--ua-nav-hover-bg) 22%, transparent) 0%, transparent 60%);
    transition: background-size 260ms ease, background-color 160ms ease, color 160ms ease;
  }
  .ua-nav-links[data-ua-nav-tap-style="tap_ripple_fake"] .ua-nav-link:active {
    background-size: 180% 180%;
    background-color: color-mix(in oklab, var(--ua-nav-hover-bg) 10%, transparent) !important;
  }
}