/**
 * @file
 * The Nerd Lab over Olivero: a warm graph-paper page, the lab's gradient
 * (violet, pink, orange), and "sticker" cards (an ink outline and an offset
 * shadow in a colour of their own).
 *
 * The catalog's components (software_download_portal) take their colours
 * from its --dl-* tokens: they are redefined here for a light page.
 */

/* ------------------------------------------------------------------ tokens */

/* html:root outweighs the :root of the module's stylesheet, whatever the
   order the two are loaded in. */
html:root {
  --nl-ink: #1b1530;
  --nl-ink-soft: #4a4361;
  --nl-paper: #fffaf3;
  --nl-grid-line: rgba(124, 58, 237, 0.07);
  --nl-violet: #7c3aed;
  --nl-pink: #ec4899;
  --nl-orange: #fb923c;
  --nl-yellow: #facc15;
  --nl-lime: #84cc16;
  --nl-cyan: #06b6d4;
  --nl-gradient: linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%);
  --nl-radius: 22px;
  --nl-outline: 2px solid var(--nl-ink);

  --dl-bg: var(--nl-paper);
  --dl-surface: #fff;
  --dl-surface-raised: #f6f2ff;
  --dl-text: var(--nl-ink);
  --dl-muted: #5f5876;
  --dl-border: #e8e0f6;
  --dl-accent: var(--nl-violet);
  --dl-accent-alt: #0e7490;
  --dl-accent-green: #15803d;
  --dl-accent-orange: #d97706;
  --dl-accent-pink: #be185d;
  --dl-glow: rgba(124, 58, 237, 0.22);
  --dl-radius: var(--nl-radius);
  --dl-radius-sm: 12px;

  /* Olivero's text colours, a touch warmer. */
  --color-text-neutral-medium: var(--nl-ink-soft);
  --color-text-neutral-loud: var(--nl-ink);
}

/* ------------------------------------------------------------------ page */

body {
  background-color: var(--nl-paper);
  background-image:
    linear-gradient(var(--nl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nl-grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}

.page-wrapper,
.social-bar {
  background: transparent;
}

h1,
h2,
h3 {
  color: var(--nl-ink);
}

::selection {
  background: var(--nl-yellow);
  color: var(--nl-ink);
}

/* ------------------------------------------------------------------ header */

.site-header {
  border-bottom: 5px solid transparent;
  border-image: var(--nl-gradient) 1;
}

.site-branding {
  background-image: var(--nl-gradient);
}

.site-branding__logo img {
  border-radius: 14px;
  box-shadow: 0 6px 16px -6px rgba(27, 21, 48, 0.55);
  transform: rotate(-6deg);
  transition: transform 200ms ease;
}

.site-branding__logo:hover img {
  transform: rotate(4deg) scale(1.06);
}

.site-branding__name {
  letter-spacing: 0.01em;
}

/* The page title, where the page carries its own heading (nerdlab.theme). */
.nerdlab-title--own-heading {
  display: none;
}

/* Olivero's breadcrumb says only "Home" on the catalog, the front page, and
   repeats the catalog's own trail on a software's page. */
.path-frontpage .region--breadcrumb,
.path-telechargements .region--breadcrumb {
  display: none;
}

/* Olivero hyphenates everything: in cards and short texts, words stay whole. */
.download-hero,
.software-card,
.software-detail,
.nl-hero {
  hyphens: manual;
}

/* ------------------------------------------------------------------ language menu */

/* Olivero's secondary navigation stretches its blocks to the header's
   height: the menu sits in the middle, like the search and account links. */
.menu--language-interface {
  align-items: center;
}

.lang-switcher {
  position: relative;
}

.lang-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  list-style: none;
  color: var(--nl-ink);
  border: var(--nl-outline);
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 2px 2px 0 var(--nl-ink);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.lang-switcher__current::-webkit-details-marker {
  display: none;
}

.lang-switcher__current:hover,
.lang-switcher[open] .lang-switcher__current {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--nl-pink);
}

.lang-switcher__list {
  position: absolute;
  z-index: 100;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: var(--nl-outline);
  border-radius: 16px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--nl-violet);
}

.lang-switcher__list li {
  margin: 0;
}

.lang-switcher__list a {
  display: block;
  padding: 0.45rem 0.75rem;
  color: var(--nl-ink);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}

.lang-switcher__list a:hover,
.lang-switcher__list a:focus-visible {
  color: var(--nl-violet);
  background: var(--dl-surface-raised);
}

.lang-switcher__list .is-current a {
  color: #fff;
  background: var(--nl-violet);
}

/* In the mobile menu, the list opens in place. */
@media (max-width: 74.99rem) {
  .lang-switcher__list {
    position: static;
    margin-top: 0.6rem;
    box-shadow: none;
  }
}

/* ------------------------------------------------------------------ front page hero */

.nl-hero {
  position: relative;
  overflow: hidden;
  padding-block: 2.5rem 1.5rem;
}

.nl-hero::before {
  position: absolute;
  top: -12rem;
  right: -10rem;
  width: 36rem;
  height: 36rem;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.18) 0%, transparent 65%);
}

.nl-hero__inner {
  position: relative;
  display: grid;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .nl-hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.nl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.3rem 0.85rem;
  color: var(--nl-ink);
  border: var(--nl-outline);
  border-radius: 999px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--nl-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nl-hero__title {
  margin: 1.1rem 0 1rem;
  color: var(--nl-ink);
  font-size: clamp(2.3rem, 1.3rem + 4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.nl-hero__title span {
  color: transparent;
  background: var(--nl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.nl-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--nl-ink-soft);
  font-size: 1.15rem;
  line-height: 1.6;
}

.nl-hero__actions {
  margin-top: 1.6rem;
}

.nl-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border: var(--nl-outline);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.nl-button--primary {
  color: #fff;
  background: var(--nl-ink);
  box-shadow: 4px 4px 0 var(--nl-pink);
}

.nl-button--primary:hover,
.nl-button--primary:focus-visible {
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--nl-yellow);
}

.nl-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.nl-hero__facts li {
  margin: 0;
  padding: 0.4rem 0.85rem;
  color: var(--nl-ink);
  border: 1.5px solid;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.nl-hero__facts li:nth-child(1) { border-color: #a3e635; background: #f7fee7; }
.nl-hero__facts li:nth-child(2) { border-color: #67e8f9; background: #ecfeff; }
.nl-hero__facts li:nth-child(3) { border-color: #f9a8d4; background: #fdf2f8; }

.nl-hero__art svg {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-inline: auto;
}

/* The illustration's small motions. */
.nl-art__bubble,
.nl-art__atom-spin {
  transform-box: fill-box;
  transform-origin: center;
}

.nl-art__bubble {
  animation: nl-float 3.2s ease-in-out infinite alternate;
}

.nl-art__bubble--2 { animation-delay: -0.8s; }
.nl-art__bubble--3 { animation-delay: -1.6s; }
.nl-art__bubble--4 { animation-delay: -2.4s; }
.nl-art__bubble--5 { animation-delay: -1.2s; }

.nl-art__atom-spin {
  animation: nl-spin 24s linear infinite;
}

.nl-art__sparkle {
  animation: nl-twinkle 2.4s ease-in-out infinite alternate;
}

@keyframes nl-float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

@keyframes nl-spin {
  to { transform: rotate(360deg); }
}

@keyframes nl-twinkle {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-art__bubble,
  .nl-art__atom-spin,
  .nl-art__sparkle {
    animation: none;
  }
}

/* ------------------------------------------------------------------ catalog: shared "sticker" look */

.download-hero,
.download-filters,
.software-card,
.software-detail {
  border: var(--nl-outline);
  box-shadow: 6px 6px 0 var(--nl-ink);
}

.download-hero {
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(236, 72, 153, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(6, 182, 212, 0.14) 0%, transparent 60%),
    #fff;
  box-shadow: 8px 8px 0 var(--nl-violet);
}

/* On the front page the catalog's heading is an h2 (the hero has the h1). */
.download-hero :is(h1, h2) {
  margin: 0 0 0.6rem;
  color: var(--nl-ink);
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
}

.download-hero :is(h1, h2) span,
.software-detail h1 span {
  color: transparent;
  background: var(--nl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.download-hero__platforms {
  margin-top: 0.8rem;
}

.download-kicker {
  background: var(--nl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-stat__value {
  font-size: 2rem;
}

/* Search, sort and page size on one line; advanced filters and the buttons
   below. */
.download-filters {
  top: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 5px 5px 0 var(--nl-cyan);
}

.download-filters__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.6fr);
  align-items: end;
  gap: 0.85rem;
}

.download-filters__row > div {
  display: grid;
  gap: 0.35rem;
}

.download-filters input,
.download-filters select {
  width: 100%;
}

@media (max-width: 40rem) {
  .download-filters__row {
    grid-template-columns: 1fr 1fr;
  }

  .download-filters__search {
    grid-column: 1 / -1;
  }
}

.download-filters input,
.download-filters select {
  border: 1.5px solid var(--dl-border);
  background: #fff;
}

.catalog-results-count {
  color: var(--dl-muted);
  font-weight: 700;
}

/* ------------------------------------------------------------------ catalog cards */

/* Each card its own colour, in turn. */
.software-card {
  --card-color: var(--nl-violet);
  --card-cover: linear-gradient(120deg, #7c3aed, #ec4899);
  box-shadow: 6px 6px 0 var(--card-color);
}

:is(.download-grid, .discovery-grid) > .software-card:nth-child(5n + 2) {
  --card-color: var(--nl-cyan);
  --card-cover: linear-gradient(120deg, #06b6d4, #7c3aed);
}

:is(.download-grid, .discovery-grid) > .software-card:nth-child(5n + 3) {
  --card-color: var(--nl-orange);
  --card-cover: linear-gradient(120deg, #fb923c, #ec4899);
}

:is(.download-grid, .discovery-grid) > .software-card:nth-child(5n + 4) {
  --card-color: var(--nl-lime);
  --card-cover: linear-gradient(120deg, #84cc16, #06b6d4);
}

:is(.download-grid, .discovery-grid) > .software-card:nth-child(5n) {
  --card-color: var(--nl-yellow);
  --card-cover: linear-gradient(120deg, #facc15, #fb923c);
}

.software-card:hover {
  border-color: var(--nl-ink);
  box-shadow: 9px 9px 0 var(--card-color);
  transform: translate(-3px, -3px);
}

/* The accent bar becomes a cover, dotted like graph paper. */
.software-card__accent-bar {
  height: 88px;
  border-bottom: var(--nl-outline);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 1.6px) 0 0 / 16px 16px,
    var(--card-cover);
}

.software-card__header {
  flex-direction: column;
  gap: 0.6rem;
}

.software-card__icon {
  width: 64px;
  height: 64px;
  margin-top: -56px;
  border: var(--nl-outline);
  border-radius: 18px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--nl-ink);
  font-size: 2rem;
}

.software-card h2 {
  font-size: 1.25rem;
}

.software-card h2 a:hover {
  color: var(--nl-violet);
}

.software-card--compact {
  border-top: 10px solid var(--card-color);
}

.software-card__footer {
  border-top: 1.5px dashed var(--dl-border);
}

/* ------------------------------------------------------------------ buttons */

.software-btn {
  border: var(--nl-outline);
  box-shadow: 3px 3px 0 var(--nl-ink);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.software-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--nl-ink);
}

.software-btn--ghost {
  color: var(--nl-ink);
  background: #fff;
}

.software-btn--ghost:hover {
  color: var(--nl-violet);
  background: #fff;
}

.software-btn--disabled,
.software-btn--disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------ badges on a light page */

.badge--android { color: #166534; border-color: #86efac; background: #dcfce7; }
.badge--windows { color: #075985; border-color: #7dd3fc; background: #e0f2fe; }
.badge--linux { color: #854d0e; border-color: #fde047; background: #fef9c3; }
.badge--macos { color: #334155; border-color: #cbd5e1; background: #f1f5f9; }
.badge--ios { color: #9d174d; border-color: #f9a8d4; background: #fce7f3; }
.badge--web { color: #5b21b6; border-color: #c4b5fd; background: #ede9fe; }
.badge--arm { color: #991b1b; border-color: #fca5a5; background: #fee2e2; }
.badge--open_source { color: #166534; border-color: #86efac; background: #dcfce7; }
.badge--freeware { color: #155e75; border-color: #67e8f9; background: #cffafe; }
.badge--shareware { color: #92400e; border-color: #fcd34d; background: #fef3c7; }
.badge--proprietary { color: #991b1b; border-color: #fca5a5; background: #fee2e2; }
.badge--trial { color: #5b21b6; border-color: #c4b5fd; background: #ede9fe; }

.trust-badge {
  background: #fff;
}

.trust-badge--integrity { border-color: #86efac; background: #f0fdf4; }
.trust-badge--freshness { border-color: #67e8f9; background: #ecfeff; }
.trust-badge--open_source { border-color: #c4b5fd; background: #f5f3ff; }

/* ------------------------------------------------------------------ a software's page */

.software-detail {
  box-shadow: 10px 10px 0 var(--nl-violet);
}

.software-detail__hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--nl-outline);
  background:
    radial-gradient(circle, rgba(124, 58, 237, 0.12) 1.5px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(120deg, #f5f3ff 0%, #fdf2f8 55%, #fff7ed 100%);
}

/* Three bubbles, the lab's mark, in the hero's corner. */
.software-detail__hero::after {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  width: 90px;
  height: 70px;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 70%, var(--nl-cyan) 0 12px, transparent 13px),
    radial-gradient(circle at 60% 30%, var(--nl-pink) 0 18px, transparent 19px),
    radial-gradient(circle at 90% 80%, var(--nl-yellow) 0 9px, transparent 10px);
}

.software-detail h1 {
  color: var(--nl-ink);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
}

.software-sha {
  border: 1.5px dashed #86efac;
  background: #f0fdf4;
}

.software-sha__value {
  color: #166534;
}

.software-description-page {
  font-size: 1.02rem;
}

.dl-section-title h2 {
  color: var(--nl-ink);
}

.dl-section-title__line {
  height: 3px;
  border-radius: 3px;
  background: var(--nl-gradient);
  opacity: 0.5;
}

/* ------------------------------------------------------------------ footer */

/* The gradient runs along the top, over the left border Olivero gives the
   footer on wide screens (the width of its social bar), which takes the ink. */
.site-footer {
  background: var(--nl-gradient) top left / 100% 6px no-repeat, var(--nl-ink);
  background-origin: border-box;
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-footer {
    border-inline-start-color: transparent;
  }
}

.site-footer__inner {
  padding-block: 0.5rem 2rem;
}

.nl-footer {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem 1.5rem;
  color: #d9d3ee;
}

@media (min-width: 50rem) {
  .nl-footer {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.nl-footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nl-footer__logo {
  border-radius: 14px;
  transform: rotate(-6deg);
}

.nl-footer__name {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
}

.nl-footer__tagline {
  margin: 0;
  color: #b8b0d6;
}

.nl-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.nl-footer__nav a {
  color: #fff;
  border-bottom: 2px solid var(--nl-pink);
  font-weight: 700;
  text-decoration: none;
}

.nl-footer__nav a:hover {
  border-bottom-color: var(--nl-yellow);
}

.nl-footer__copy {
  grid-column: 1 / -1;
  margin: 0;
  color: #9d96bd;
  font-size: 0.85rem;
}