/*
 * Retrolux help-center skin.
 *
 * Mirrors the marketing site's design language
 * (retrolux-site/src/styles/tokens.css): warm paper surfaces, ink text,
 * teal brand accents, a leaf selection highlight, and upright Poppins type.
 *
 * Scoped to body.portal-brand-retrolux, which the custom portal layout adds
 * only for the "retrolux" portal. Other portals on this install keep the
 * stock Chatwoot help center.
 *
 * Assets live beside this file: logo.png, logo-dark.png, favicon.svg,
 * apple-touch-icon.png and fonts/poppins-latin-*.woff2.
 */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/brand/retrolux/fonts/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/brand/retrolux/fonts/poppins-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/brand/retrolux/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/brand/retrolux/fonts/poppins-latin-700-normal.woff2') format('woff2');
}

html body.portal-brand-retrolux {
  /* Tokens lifted from retrolux-site/src/styles/tokens.css. */
  --rlx-bg: #f6f3ec;
  --rlx-surface: #fbf9f4;
  --rlx-surface-2: #ece6da;
  --rlx-text: #0c1b22;
  --rlx-text-2: #16333d;
  --rlx-muted: #58676c;
  --rlx-muted-2: #7c8a8e;
  --rlx-line: #d9ded8;
  --rlx-line-strong: #c3ccc5;
  --rlx-brand: #0b7189;
  --rlx-brand-dark: #075468;
  --rlx-brand-bright: #1aa7c8;
  --rlx-leaf-bright: #a2d75d;
  --rlx-hero-from: #dff2f6;
  --rlx-hero-to: #f6f3ec;
  --rlx-radius-card: 12px;
  --rlx-radius-control: 8px;
  --rlx-shadow-card: 0 24px 60px -36px rgb(12 27 34 / 0.28), 0 2px 8px rgb(12 27 34 / 0.05);
  --rlx-shadow-lift: 0 30px 70px -40px rgb(12 27 34 / 0.35);
  --rlx-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Chatwoot's runtime portal tokens, repointed at the brand palette. */
  --dynamic-portal-color: var(--rlx-brand);
  --dynamic-portal-color-soft: color-mix(in srgb, var(--rlx-brand) 12%, transparent);
  --dynamic-portal-color-faint: color-mix(in srgb, var(--rlx-brand) 5%, transparent);
  --dynamic-hover-color: var(--rlx-brand-dark);
  --dynamic-hover-bg-color: color-mix(in srgb, var(--rlx-brand) 6%, var(--rlx-bg));
  --dynamic-portal-bg: var(--rlx-hero-from);
  --dynamic-portal-bg-gradient: linear-gradient(to bottom, transparent, var(--rlx-hero-to));

  color-scheme: light;
  background-color: var(--rlx-bg);
  color: var(--rlx-text);
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: normal;
}

html.dark body.portal-brand-retrolux {
  --rlx-bg: #0c1b22;
  --rlx-surface: #16333d;
  --rlx-surface-2: #214852;
  --rlx-text: #f6f3ec;
  --rlx-text-2: #ece6da;
  --rlx-muted: #a7b7bb;
  --rlx-muted-2: #84979b;
  --rlx-line: #214852;
  --rlx-line-strong: #2d5b66;
  --rlx-brand: #1aa7c8;
  --rlx-brand-dark: #63d3ea;
  --rlx-brand-bright: #63d3ea;
  --rlx-hero-from: #16333d;
  --rlx-hero-to: #0c1b22;
  --rlx-shadow-card: 0 24px 60px -36px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.35);
  --rlx-shadow-lift: 0 30px 70px -40px rgb(0 0 0 / 0.7);

  color-scheme: dark;
  background-color: var(--rlx-bg);
}

html body.portal-brand-retrolux,
html body.portal-brand-retrolux button,
html body.portal-brand-retrolux input,
html body.portal-brand-retrolux select,
html body.portal-brand-retrolux textarea {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html body.portal-brand-retrolux #portal .font-inter,
html body.portal-brand-retrolux #portal .font-default {
  font-family: inherit;
}

html body.portal-brand-retrolux #portal ::selection {
  background-color: var(--rlx-leaf-bright);
  color: #0c1b22;
}

html body.portal-brand-retrolux #portal :focus-visible {
  outline: 3px solid var(--rlx-brand-bright);
  outline-offset: 3px;
}

html body.portal-brand-retrolux #portal .max-w-5xl {
  max-width: 76rem;
}

/* Header: paper-toned, translucent, with a hairline rule like the site. */
html body.portal-brand-retrolux #portal > main > header[class] {
  background-color: color-mix(in srgb, var(--rlx-bg) 92%, transparent);
  border-bottom: 1px solid var(--rlx-line);
  box-shadow: none;
}

@media (min-width: 640px) {
  html body.portal-brand-retrolux #portal > main > header[class] {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (max-width: 639px) {
  html body.portal-brand-retrolux #portal > main > header[class] {
    background-color: var(--rlx-bg);
  }
}

html body.portal-brand-retrolux #portal header #toggle-appearance,
html body.portal-brand-retrolux #portal header #appearance-dropdown,
html body.portal-brand-retrolux #portal header #mobile-appearance-dropdown {
  display: none;
}

html body.portal-brand-retrolux #portal header div:has(> #toggle-appearance),
html body.portal-brand-retrolux #portal header div:has(> #mobile-appearance-dropdown),
html body.portal-brand-retrolux #portal header div:has(> #mobile-appearance-dropdown) + span.h-px {
  display: none;
}

html body.portal-brand-retrolux #portal > main > header a[href^='/hc/retrolux']:not(:has(img)) {
  width: 132px;
  height: 40px;
  background: url('/brand/retrolux/logo.png') left center / contain no-repeat;
}

html body.portal-brand-retrolux #portal > main > header a[href^='/hc/retrolux']:not(:has(img)) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html.dark body.portal-brand-retrolux #portal > main > header a[href^='/hc/retrolux']:not(:has(img)) {
  background-image: url('/brand/retrolux/logo-dark.png');
}

html body.portal-brand-retrolux #portal header #toggle-appearance svg,
html body.portal-brand-retrolux #portal header #appearance-dropdown svg {
  stroke: currentColor;
}

html body.portal-brand-retrolux #portal #appearance-dropdown,
html body.portal-brand-retrolux #portal .fixed.inset-0 {
  background-color: var(--rlx-surface);
  border-color: var(--rlx-line);
  box-shadow: var(--rlx-shadow-card);
}

/* Hero band: sky-to-paper wash with the site's faint orbit rings. */
html body.portal-brand-retrolux #portal-bg {
  background: linear-gradient(180deg, var(--rlx-hero-from) 0%, var(--rlx-hero-to) 100%);
  box-shadow: none;
}

html body.portal-brand-retrolux #portal-bg-gradient {
  position: relative;
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rlx-line);
  background-image:
    radial-gradient(
      circle at 110% 50%,
      transparent 16.75rem,
      color-mix(in srgb, var(--rlx-brand) 14%, transparent) 16.8rem 16.85rem,
      transparent 16.9rem
    ),
    radial-gradient(
      circle at 110% 50%,
      transparent 9.75rem,
      color-mix(in srgb, var(--rlx-brand) 14%, transparent) 9.8rem 9.85rem,
      transparent 9.9rem
    );
  background-repeat: no-repeat;
}

@media (max-width: 1023px) {
  html body.portal-brand-retrolux #portal-bg-gradient {
    background-image: none;
  }
}

@media (min-width: 768px) {
  html body.portal-brand-retrolux #portal-bg-gradient {
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
  }
}

html body.portal-brand-retrolux #portal-bg-gradient h1 {
  max-width: 22ch;
  color: var(--rlx-text);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

html body.portal-brand-retrolux #portal-bg-gradient p {
  max-width: 42rem;
  color: var(--rlx-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Search: a cream control with a soft lift, teal focus ring. */
html body.portal-brand-retrolux #search-wrap [class~='rounded-lg'] {
  background-color: var(--rlx-surface);
  border-color: var(--rlx-line-strong);
  border-radius: var(--rlx-radius-control);
  box-shadow: 0 2px 8px rgb(12 27 34 / 0.06);
}

html body.portal-brand-retrolux #search-wrap input {
  color: var(--rlx-text);
}

html body.portal-brand-retrolux #search-wrap input::placeholder {
  color: var(--rlx-muted-2);
}

html body.portal-brand-retrolux #portal #search-wrap input:focus-visible,
html body.portal-brand-retrolux #portal input[class~='rounded-lg']:focus-visible {
  outline: none;
}

html body.portal-brand-retrolux #portal input[class~='rounded-lg'] {
  background-color: var(--rlx-surface);
  border-color: var(--rlx-line-strong);
  border-radius: var(--rlx-radius-control);
  color: var(--rlx-text);
}

html body.portal-brand-retrolux #portal input[class~='rounded-lg']::placeholder {
  color: var(--rlx-muted-2);
}

html body.portal-brand-retrolux #portal input:focus {
  --tw-ring-color: var(--rlx-brand);
}

html body.portal-brand-retrolux #search-wrap .absolute > div {
  background-color: var(--rlx-surface);
  border-color: var(--rlx-line);
  border-radius: var(--rlx-radius-card);
  box-shadow: 0 24px 48px -12px rgb(12 27 34 / 0.35), 0 4px 12px rgb(12 27 34 / 0.12);
}

html.dark body.portal-brand-retrolux #search-wrap .absolute > div {
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.4);
}

/* Cards: category blocks, featured articles and result rows. */
html body.portal-brand-retrolux #portal div[class~='border-solid'][class~='rounded-lg'] {
  background-color: var(--rlx-surface);
  border-color: var(--rlx-line);
  border-radius: var(--rlx-radius-card);
}

html body.portal-brand-retrolux #portal #category-block {
  padding: 1.5rem 1.25rem;
  box-shadow: 0 1px 2px rgb(12 27 34 / 0.04);
  transition:
    border-color 200ms var(--rlx-ease),
    box-shadow 200ms var(--rlx-ease),
    transform 200ms var(--rlx-ease);
}

html body.portal-brand-retrolux #portal #category-block:hover {
  border-color: var(--rlx-brand);
  box-shadow: var(--rlx-shadow-lift);
  transform: translateY(-2px);
}

html body.portal-brand-retrolux #portal #category-name {
  color: var(--rlx-text);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html body.portal-brand-retrolux #portal #category-name a:hover {
  color: var(--rlx-brand);
}

html body.portal-brand-retrolux #portal #category-item {
  color: var(--rlx-text-2);
  transition:
    background-color 150ms var(--rlx-ease),
    color 150ms var(--rlx-ease);
}

html body.portal-brand-retrolux #portal #category-item:hover {
  background-color: var(--dynamic-hover-bg-color);
  color: var(--rlx-brand);
}

html body.portal-brand-retrolux #portal #category-item span svg {
  color: var(--rlx-muted-2);
}

html body.portal-brand-retrolux #portal #category-item:hover span svg {
  color: var(--rlx-brand);
}

html body.portal-brand-retrolux #portal a {
  transition: color 150ms var(--rlx-ease);
}

html body.portal-brand-retrolux #portal a:hover {
  color: var(--rlx-brand);
}

/* Footer attribution. */
html body.portal-brand-retrolux #portal > main > footer {
  margin-top: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--rlx-line);
  background-color: var(--rlx-surface);
}

/* Article body typography. */
html body.portal-brand-retrolux #portal #cw-article-content {
  --tw-prose-body: var(--rlx-text-2);
  --tw-prose-headings: var(--rlx-text);
  --tw-prose-links: var(--rlx-brand);
  --tw-prose-bold: var(--rlx-text);
  --tw-prose-counters: var(--rlx-muted);
  --tw-prose-bullets: var(--rlx-line-strong);
  --tw-prose-hr: var(--rlx-line);
  --tw-prose-quotes: var(--rlx-text-2);
  --tw-prose-quote-borders: var(--rlx-brand);
  --tw-prose-captions: var(--rlx-muted);
  --tw-prose-code: var(--rlx-text);
  --tw-prose-pre-code: #f6f3ec;
  --tw-prose-pre-bg: #0c1b22;
  --tw-prose-th-borders: var(--rlx-line-strong);
  --tw-prose-td-borders: var(--rlx-line);

  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
}

html.dark body.portal-brand-retrolux #portal #cw-article-content {
  --tw-prose-pre-bg: #16333d;
  --tw-prose-pre-code: #f6f3ec;
}

html body.portal-brand-retrolux #portal #cw-article-content :is(h1, h2, h3, h4) {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

html body.portal-brand-retrolux #portal #cw-article-content a {
  color: var(--rlx-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

html body.portal-brand-retrolux #portal #cw-article-content blockquote {
  border-inline-start: 3px solid var(--rlx-brand);
  border-radius: 0 8px 8px 0;
  background-color: var(--rlx-surface);
  padding: 0.75rem 1.25rem;
  font-style: normal;
}

html body.portal-brand-retrolux #portal #cw-article-content :not(pre) > code {
  border-radius: 4px;
  background-color: var(--rlx-surface-2);
  padding: 0.1em 0.35em;
  color: var(--rlx-text);
}

html body.portal-brand-retrolux #portal #cw-article-content pre {
  border: 1px solid var(--rlx-line);
  border-radius: 10px;
}

html body.portal-brand-retrolux #portal #cw-article-content th {
  background-color: var(--rlx-surface-2) !important;
  color: var(--rlx-text) !important;
}

html body.portal-brand-retrolux #portal #cw-article-content :is(th, td) {
  border-color: var(--rlx-line) !important;
}

/* Recolor the stock slate utilities inside this portal only. */
html body.portal-brand-retrolux #portal :is(.text-slate-900, .text-slate-800) {
  color: var(--rlx-text);
}

html body.portal-brand-retrolux #portal .text-slate-700 {
  color: var(--rlx-text-2);
}

html body.portal-brand-retrolux #portal :is(.text-slate-600, .text-slate-500) {
  color: var(--rlx-muted);
}

html.dark body.portal-brand-retrolux #portal :is(.text-slate-900, .text-slate-800, .text-slate-50, .text-white) {
  color: var(--rlx-text);
}

html.dark body.portal-brand-retrolux #portal :is(.text-slate-700, .text-slate-100) {
  color: var(--rlx-text-2);
}

html.dark body.portal-brand-retrolux #portal :is(.text-slate-600, .text-slate-400, .text-slate-300, .text-slate-200) {
  color: var(--rlx-muted);
}

html.dark body.portal-brand-retrolux #portal .text-slate-500 {
  color: var(--rlx-muted-2);
}

html body.portal-brand-retrolux #portal :is(.border-slate-50, .border-slate-100, .border-slate-200) {
  border-color: var(--rlx-line);
}

html body.portal-brand-retrolux #portal :is(.border-slate-700, .border-slate-800) {
  border-color: var(--rlx-line);
}

html body.portal-brand-retrolux #portal .bg-white {
  background-color: var(--rlx-surface);
}

html body.portal-brand-retrolux #portal :is(.bg-slate-50, .bg-slate-100) {
  background-color: var(--rlx-surface-2);
}

html.dark body.portal-brand-retrolux #portal :is(.bg-slate-50, .bg-slate-800, .bg-slate-900) {
  background-color: var(--rlx-surface);
}