/*
 * Wen Cheng brand foundation — inspected 2026-09-10.
 * Source colours and font assets: https://wencheng.handbuchonline.com/
 * Reference: /templates/bfive/css/user.css and homepage inline styles.
 * Load this file, then opt in with class="wc-brand" on a containing element.
 * All asset URLs are relative to this stylesheet; no old-site requests needed.
 */

@font-face {
  font-family: 'Wen Cheng Text';
  src: url('./fonts/DegularText-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Wen Cheng Text';
  src: url('./fonts/DegularText-Semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Wen Cheng Display';
  src: url('./fonts/DegularDisplay-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Verified source values. The logo blue is a sampled image colour. */
  --wc-blue: #164194;
  --wc-logo-blue: #0939b2;
  --wc-red: #d60d0d;
  --wc-red-hover: #c00b0b;
  --wc-ink: #343a40;
  --wc-white: #ffffff;

  /* Proposed application roles, surfaces and dimensions; not brand rules. */
  --wc-background: #f7f8fa;
  --wc-surface: var(--wc-white);
  --wc-text: var(--wc-ink);
  --wc-text-muted: #5d6570;
  --wc-border: #dfe3e8;
  --wc-action: var(--wc-blue);
  --wc-action-hover: #103374;
  --wc-on-action: var(--wc-white);
  --wc-focus: var(--wc-blue);
  --wc-selection-accent: var(--wc-red);
  --wc-selection-surface: #fff1f1;

  --wc-font-text: 'Wen Cheng Text', 'Helvetica Neue', Arial, sans-serif;
  --wc-font-heading: 'Wen Cheng Display', 'Helvetica Neue', Arial, sans-serif;
  --wc-text-label: 0.875rem;
  --wc-text-body: 1.125rem;
  --wc-text-title: clamp(2rem, 1.75rem + 1vw, 2.25rem);
  --wc-text-section: clamp(1.5rem, 1.375rem + 0.5vw, 1.75rem);
  --wc-leading-body: 1.6;
  --wc-leading-heading: 1.2;
  --wc-reading-width: 70ch;

  --wc-space-1: 0.25rem;
  --wc-space-2: 0.5rem;
  --wc-space-3: 0.75rem;
  --wc-space-4: 1rem;
  --wc-space-6: 1.5rem;
  --wc-space-8: 2rem;
  --wc-space-12: 3rem;
  --wc-radius: 0.5rem;
}

/* Scoped defaults: importing the file alone does not restyle the app. */
.wc-brand {
  color: var(--wc-text);
  background-color: var(--wc-background);
  font-family: var(--wc-font-text);
  font-size: 1rem;
  line-height: var(--wc-leading-body);
}

.wc-brand :where(button, input, textarea, select) {
  font: inherit;
}

.wc-brand :where(h1, h2, h3, h4, h5, h6) {
  color: var(--wc-text);
  font-family: var(--wc-font-heading);
  font-weight: 700;
  line-height: var(--wc-leading-heading);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.wc-brand :where(h1) {
  font-size: var(--wc-text-title);
}

.wc-brand :where(h2) {
  font-size: var(--wc-text-section);
}

.wc-brand :where(h3) {
  font-size: 1.25rem;
}

.wc-brand :where(strong, b) {
  font-weight: 600;
}

.wc-brand :where(a) {
  color: var(--wc-action);
  text-underline-offset: 0.2em;
}

.wc-brand :where(a:hover) {
  color: var(--wc-action-hover);
}

.wc-brand :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wc-focus);
  outline-offset: 3px;
}

/* Use an actual <img> with alt text; keep the supplied artwork intact. */
.wc-brand .wc-logo {
  display: block;
  inline-size: 3rem;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.wc-brand .wc-article {
  box-sizing: border-box;
  max-inline-size: var(--wc-reading-width);
  min-inline-size: 0;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--wc-text);
  background-color: var(--wc-surface);
  font-size: var(--wc-text-body);
  line-height: var(--wc-leading-body);
  overflow-wrap: break-word;
}

.wc-brand .wc-article > :where(p, ul, ol, blockquote) {
  margin-block: 0 var(--wc-space-6);
}

.wc-brand .wc-article > :where(h2, h3, h4) {
  margin-block: var(--wc-space-12) var(--wc-space-4);
}

.wc-brand .wc-article > :first-child {
  margin-block-start: 0;
}

.wc-brand .wc-article :where(ul, ol) {
  padding-inline-start: var(--wc-space-6);
}

.wc-brand .wc-article :where(li + li) {
  margin-block-start: var(--wc-space-2);
}

.wc-brand .wc-article :where(a) {
  text-decoration: underline;
}

.wc-brand .wc-nav-link {
  display: block;
  padding: var(--wc-space-3) var(--wc-space-4);
  border-inline-start: 3px solid transparent;
  border-radius: 0 var(--wc-radius) var(--wc-radius) 0;
  color: var(--wc-text);
  font-size: var(--wc-text-label);
  text-decoration: none;
}

.wc-brand .wc-nav-link[aria-current='page'] {
  border-inline-start-color: var(--wc-selection-accent);
  background-color: var(--wc-selection-surface);
  font-weight: 600;
}