/*
 * CBMG WebLab Design System — semantic contract.
 *
 * This file intentionally loads after all route/module styles. Theme Editor
 * emits values as semantic custom properties; components consume the roles
 * below instead of being targeted from PHP with selector-specific !important
 * overrides. Default token values preserve the approved v1.20.0 composition.
 */

:root {
  /* Spacing rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-section: clamp(110px,12vw,190px);
  --space-section-statement: 120px;
  --space-section-closing: 140px;
  --space-content-start: 90px;
  --space-content-end: 140px;

  /* Geometry */
  --radius-none: 0;
  --radius-control: 4px;
  --border-width: 1px;
  --border-hairline: var(--border-width) solid var(--line);
  --control-min-target: 44px;
  --action-min-height: 52px;

  /* Semantic surfaces */
  --surface-page: var(--paper);
  --surface-panel: var(--surface);
  --surface-inverse: var(--graphite);
  --surface-footer: var(--footer-surface);
  --surface-project: var(--project-surface);

  /* Interaction states */
  --action-bg: var(--blue);
  --action-text: var(--on-primary);
  --action-hover-bg: var(--graphite);
  --action-hover-text: var(--inverse-text);
  --interactive-accent: var(--mid);
  --interactive-focus: var(--focus-ring);
  --shadow-elevated: 0 28px 70px rgba(var(--shadow-ink-rgb),.16);
  --shadow-hover: 0 18px 40px rgba(var(--shadow-black-rgb),.18);
  --motion-fast: .18s;
  --motion-base: .22s;
  --motion-slow: .32s;

  /* Typography role aliases. Runtime values are emitted by Theme Editor. */
  --type-body-family: var(--font-body);
  --type-title-family: var(--font-title);
  --type-subtitle-family: var(--font-subtitle);
  --type-header-family: var(--font-header, var(--font-body));
  --type-mega-family: var(--font-mega, var(--font-body));
  --type-audience-family: var(--font-audience, var(--font-body));
  --type-footer-family: var(--font-footer, var(--font-body));
  --type-ui-family: var(--font-ui, var(--font-body));

  --type-body-size: var(--base-font-size);
  --type-body-leading: var(--body-line-height);
  --type-body-weight: var(--body-weight,400);
  --type-body-tracking: var(--body-letter-spacing-adjust,0em);

  --type-title-scale: var(--title-scale, var(--heading-scale,1));
  --type-title-leading-scale: var(--title-line-height-scale,1);
  --type-title-tracking-adjust: var(--title-letter-spacing-adjust,0em);

  --type-subtitle-scale: var(--subtitle-scale,1);
  --type-subtitle-leading-scale: var(--subtitle-line-height-scale,1);
  --type-subtitle-tracking-adjust: var(--subtitle-letter-spacing-adjust,0em);

  --type-ui-scale: var(--ui-scale,1);
  --type-ui-weight: var(--ui-weight,650);
  --type-ui-leading: var(--ui-line-height,1.4);
}

/* Base roles */
body {
  background:var(--surface-page);
  color:var(--ink);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
}

h1,h2,h3,h4,h5,h6,
.brand,.display,.statement blockquote,
.wl-page-hero-copy h1,.wl-section-head h2,.wl-system-fallback h2,
.wl-service-card h3,.wl-package-card h3,.wl-hub-card h2,.wl-article-title h1,
.home-hub-head h2,.home-hub-card h3,.closing-action-copy h2,
.idea-sheet h3,.design-copy strong,.final-copy strong,.frontend-copy strong,
.build-step-copy strong,.build-stage-footer strong {
  font-family: var(--type-title-family);
}

.hero-lead,.section-description,.inner-hero>div>p:last-child,
.wl-page-lead,.wl-section-head>p:last-child,
.home-hub-head-side>p,.hub-intro-content,.closing-action-copy>p:last-child,
.closing-hint-content,.mega-index p,.footer-top p {
  font-family: var(--type-subtitle-family);
}

/* Title role — tracking, leading and optional global weight override. */
.display { letter-spacing:calc(-.067em + var(--type-title-tracking-adjust)); line-height:calc(1.01 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,650); }
.inner-hero h1 { letter-spacing:calc(-.065em + var(--type-title-tracking-adjust)); line-height:calc(1.03 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,620); }
.wl-page-hero-copy h1,.wl-article-title h1 { letter-spacing:calc(-.065em + var(--type-title-tracking-adjust)); line-height:calc(.98 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,610); }
.wl-article-title h1 { line-height:calc(.99 * var(--type-title-leading-scale)); }
.section-intro h2,.closing h2 { letter-spacing:calc(-.055em + var(--type-title-tracking-adjust)); font-weight:var(--type-title-weight-override,610); }
.section-intro h2 { line-height:calc(1.08 * var(--type-title-leading-scale)); }
.closing h2 { line-height:calc(1.12 * var(--type-title-leading-scale)); }
.wl-section-head h2 { letter-spacing:calc(-.05em + var(--type-title-tracking-adjust)); line-height:calc(1.04 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,610); }
.wl-service-card h3,.wl-package-card h3 { letter-spacing:calc(-.05em + var(--type-title-tracking-adjust)); line-height:calc(1.04 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,610); }
.wl-hub-card h2 { letter-spacing:calc(-.05em + var(--type-title-tracking-adjust)); line-height:calc(1.08 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,610); }
.home-hub-head h2 { letter-spacing:calc(-.055em + var(--type-title-tracking-adjust)); line-height:calc(1.08 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,610); }
.home-hub-card h3 { letter-spacing:calc(-.04em + var(--type-title-tracking-adjust)); line-height:calc(1.12 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,610); }
.closing-action-copy h2 { letter-spacing:calc(-.055em + var(--type-title-tracking-adjust)); line-height:calc(1.06 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,610); }
.statement blockquote { letter-spacing:calc(-.05em + var(--type-title-tracking-adjust)); line-height:calc(1.2 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,560); }
.service-row h3 { letter-spacing:calc(-.035em + var(--type-title-tracking-adjust)); font-weight:var(--type-title-weight-override,620); }
.project-copy h3 { line-height:calc(1.35 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,570); }
.process-grid h3 { letter-spacing:calc(-.03em + var(--type-title-tracking-adjust)); font-weight:var(--type-title-weight-override,610); }
.content-prose h2,.content-prose h3,.wp-page-content h2,.wp-page-content h3 { letter-spacing:calc(-.035em + var(--type-title-tracking-adjust)); line-height:calc(1.2 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,700); }
.content-card .entry-title { letter-spacing:calc(-.045em + var(--type-title-tracking-adjust)); line-height:calc(1.15 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,700); }
.wl-system-fallback h2 { letter-spacing:calc(-.045em + var(--type-title-tracking-adjust)); line-height:calc(1.08 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,700); }
.idea-sheet h3 { letter-spacing:calc(-.055em + var(--type-title-tracking-adjust)); line-height:calc(1.02 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,600); }
.design-copy strong,.final-copy strong { letter-spacing:calc(-.05em + var(--type-title-tracking-adjust)); line-height:calc(1.02 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,600); }
.frontend-copy strong { letter-spacing:calc(-.05em + var(--type-title-tracking-adjust)); line-height:calc(1 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,600); }
.build-step-copy strong { letter-spacing:calc(-.035em + var(--type-title-tracking-adjust)); line-height:calc(1.28 * var(--type-title-leading-scale)); font-weight:var(--type-title-weight-override,600); }
.build-stage-footer strong { letter-spacing:calc(-.02em + var(--type-title-tracking-adjust)); font-weight:var(--type-title-weight-override,600); }

/* Subtitle role */
.hero-lead,.section-description,.inner-hero>div>p:last-child,
.wl-page-lead,.wl-section-head>p:last-child,
.home-hub-head-side>p,.hub-intro-content,.closing-action-copy>p:last-child,.closing-hint-content {
  letter-spacing:var(--type-subtitle-tracking-adjust);
  font-weight:var(--type-subtitle-weight-override,400);
}
.mega-index p,.footer-top p {
  letter-spacing:calc(-.035em + var(--type-subtitle-tracking-adjust));
}
.mega-index p { font-weight:var(--type-subtitle-weight-override,var(--type-mega-weight)); }
.footer-top p { font-weight:var(--type-subtitle-weight-override,var(--type-footer-weight)); }

/* Header role */
.site-header,.site-header button,.site-header a {
  font-family:var(--type-header-family);
  font-weight:var(--type-header-weight);
  line-height:var(--type-header-leading);
}
.mega-trigger { font-size:calc(10px * var(--type-header-scale)); }
.header-brief { font-size:calc(11px * var(--type-header-scale)); }
.brand { font-size:calc(12px * var(--type-header-scale)); }
.brand-tagline { font-size:calc(8px * var(--type-header-tagline-scale)); }

/* Mega-menu role */
.mega-panel,.mega-panel input,.mega-panel button,.mega-panel a,.mega-panel strong,
.mega-panel p,.mega-panel span,.mega-panel small,.mega-panel li {
  font-family:var(--type-mega-family);
  line-height:var(--type-mega-leading);
}
.mega-panel { font-weight:var(--type-mega-weight); }
.mega-menu-title strong { font-size:clamp(calc(20px * var(--type-mega-title-scale)),calc(1.8vw * var(--type-mega-title-scale)),calc(29px * var(--type-mega-title-scale))); letter-spacing:calc(-.04em + var(--type-title-tracking-adjust)); }
.mega-menu-list .sub-menu a,.mega-secondary li { font-size:calc(11px * var(--type-mega-submenu-scale)); }
.mega-menu-title small,.mega-menu-list .sub-menu a small { font-size:calc(9px * var(--type-mega-submenu-scale)); }
.mega-index p { font-size:clamp(calc(20px * var(--type-mega-intro-scale)),calc(2vw * var(--type-mega-intro-scale)),calc(31px * var(--type-mega-intro-scale))); }
.mega-contact a,.mega-search input { font-size:calc(14px * var(--type-mega-intro-scale)); }
.mega-index>span,.mega-label,.mega-index small,.mega-contact>span,.mega-contact small,
.mega-search label,.mega-signature,.mega-menu-number { font-size:calc(9px * var(--type-mega-meta-scale)); }

/* Audience role */
.audiences,.audiences a { font-family:var(--type-audience-family); font-weight:var(--type-audience-weight); line-height:var(--type-audience-leading); }
.audience-link strong { font-size:calc(11px * var(--type-audience-scale)); }
.audience-link .audience-index { font-size:calc(8px * var(--type-audience-scale)); }

/* Footer role */
.site-footer,.site-footer a,.site-footer button,.site-footer p,.site-footer span,
.site-footer strong,.site-footer b,.site-footer small {
  font-family:var(--type-footer-family);
  line-height:var(--type-footer-leading);
}
.site-footer { font-weight:var(--type-footer-weight); }
.footer-brand-widget p { font-size:clamp(calc(24px * var(--type-footer-title-scale)),calc(2.5vw * var(--type-footer-title-scale)),calc(38px * var(--type-footer-title-scale))); }
.footer-label { font-size:calc(9px * var(--type-footer-widget-scale)); }
.footer-links,.footer-links ul,.footer-contact-widget>a,.footer-contact-widget>span:not(.footer-label) { font-size:calc(12px * var(--type-footer-text-scale)); }
.footer-bottom { font-size:calc(9px * var(--type-footer-bottom-scale)); }
.footer-rating-summary strong { font-size:calc(28px * var(--type-footer-text-scale)); }
.footer-rating-summary strong small,.footer-rating-summary>span,.footer-like,.footer-share>button,.footer-engagement-status { font-size:calc(9px * var(--type-footer-text-scale)); }

/* UI/meta role. Only the legacy controlled set receives global size/weight
 * metrics; newer meta components inherit their approved local sizes while
 * consuming the same UI font role. */
.button,.text-link,.inline-cta,.eyebrow,.entry-meta,.hero-meta,
.build-step-index,.build-step-status,.project-copy p,.project-copy>span,
.process-grid>article>span,.wl-hub-card-meta,.wl-article-meta,.wl-gallery-filter,.wl-gallery-meta,
.wl-page-hero-index,.wl-page-hero-meta,.home-hub-meta,.home-hub-all,
.closing-route-label,.closing-route-stages {
  font-family:var(--type-ui-family);
}
.button,.text-link,.inline-cta,.eyebrow,.entry-meta,.hero-meta,
.build-step-index,.build-step-status,.project-copy p,.project-copy>span,
.process-grid>article>span,.wl-hub-card-meta,.wl-article-meta,.wl-gallery-filter,.wl-gallery-meta {
  font-size:calc(1em * var(--type-ui-scale));
  font-weight:var(--type-ui-weight);
  line-height:var(--type-ui-leading);
}

/* Core output consumes Theme semantic roles without depending on Core internals. */
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell { font-family:var(--type-body-family); }
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell h1,
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell h2,
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell h3,
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell h4,
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell strong { font-family:var(--type-title-family); }
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell button,
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell input,
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell textarea,
.core-page-content [data-cbmg-weblab-core] .cbmg-wl-shell select { font-family:var(--type-ui-family); }

/* Shared geometry/surface contract — numeric defaults mirror the approved UI. */
.section { padding-block:var(--space-section); }
.statement { padding-block:var(--space-section-statement); }
.closing { padding-block:var(--space-section-closing); }
.content-prose,.wp-page-content { padding-block:var(--space-content-start) var(--space-content-end); }
.site-header { border-bottom:var(--border-hairline); }
.mega-panel { background:var(--surface-page); border-color:var(--line); box-shadow:var(--shadow-elevated); }
.tools-rail,.page-numbers,.content-card,.comment-body { border-color:var(--line); }
.site-main form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea),
.site-main :where(.button,button[type="submit"],input[type="submit"]) { border-radius:var(--radius-control); }
.button { min-height:var(--action-min-height); background:var(--action-bg); color:var(--action-text); transition:background .2s,color .2s,transform .2s; }
.button:hover,.button:focus-visible { background:var(--action-hover-bg); color:var(--action-hover-text); }
.project-copy { background:var(--surface-project); }
.site-footer { background:var(--surface-footer); }
.dark { background:var(--surface-inverse); }
:focus-visible { outline-color:var(--interactive-focus); }

@media (max-width:680px) {
  :root {
    --space-section:90px;
    --space-section-statement:80px;
    --space-section-closing:90px;
  }
}

/* v1.23.0 — premium UI/UX polish.
 * This layer refines rhythm, system states and interaction quality without
 * changing the approved WebLab visual composition or brand palette. */
:root {
  --content-measure: 920px;
  --content-measure-narrow: 720px;
  --surface-soft: color-mix(in srgb,var(--surface) 74%,var(--paper));
  --surface-hover: color-mix(in srgb,var(--surface) 88%,var(--mid) 12%);
  --line-strong: color-mix(in srgb,var(--line) 72%,var(--mid));
}

::selection { background:var(--sky); color:var(--inverse-action-text); }
:target { scroll-margin-top:calc(var(--header-h) + 32px); }
:where(h1,h2,h3,h4,h5,h6,.display,.statement blockquote) { text-wrap:balance; }
:where(.hero-lead,.section-description,.wl-page-lead,.content-prose p,.wp-page-content p,.entry-summary) { text-wrap:pretty; }

/* Header / navigation — preserve geometry while removing interaction ambiguity. */
.site-header { isolation:isolate; transition:background-color var(--motion-base) ease,border-color var(--motion-base) ease; }
.mega-trigger,.header-brief,.brand { min-height:var(--control-min-target); }
.mega-menu-list > li > .mega-menu-row > a,
.mega-menu-list > li > a { position:relative; }
.mega-menu-list > .current-menu-item > .mega-menu-row > a,
.mega-menu-list > .current-menu-ancestor > .mega-menu-row > a,
.mega-menu-list > li.current-menu-item > a,
.mega-menu-list > li.current-menu-ancestor > a {
  box-shadow:inset 3px 0 0 var(--interactive-accent);
}
.mega-menu-list .sub-menu a { min-height:36px; align-items:center; }

/* Editorial content — improve reading rhythm without changing the page grid. */
.content-prose,.wp-page-content { max-width:var(--content-measure); }
.content-prose :where(p,ul,ol,blockquote,figure,table,pre),
.wp-page-content :where(p,ul,ol,blockquote,figure,table,pre) { max-width:100%; }
.content-prose :where(ul,ol),.wp-page-content :where(ul,ol) { padding-inline-start:1.35em; }
.content-prose li + li,.wp-page-content li + li { margin-top:.42em; }
.content-prose :where(hr),.wp-page-content :where(hr) { margin-block:2.8em; border:0; border-top:1px solid var(--line); }
.content-prose :where(figcaption),.wp-page-content :where(figcaption) { margin-top:10px; color:var(--gray); font-size:.78em; line-height:1.55; }
.content-prose :where(code):not(pre code),.wp-page-content :where(code):not(pre code) { padding:.12em .38em; border:1px solid var(--line); background:var(--surface); font-size:.88em; }
.content-prose :where(table),.wp-page-content :where(table) { width:100%; border-collapse:collapse; }
.content-prose :where(th,td),.wp-page-content :where(th,td) { padding:12px 14px; border-bottom:1px solid var(--line); text-align:start; vertical-align:top; }
.content-prose :where(th),.wp-page-content :where(th) { color:var(--ink); font-weight:680; background:var(--surface-soft); }
.content-prose a,.wp-page-content a { text-underline-offset:.2em; transition:color var(--motion-fast) ease,border-color var(--motion-fast) ease; }
.content-prose a:hover,.content-prose a:focus-visible,.wp-page-content a:hover,.wp-page-content a:focus-visible { color:var(--mid); }

/* Native index/search/archive list consistency. */
.post-list > .content-card:first-child { border-top:1px solid var(--line); }
.content-card .entry-title a { transition:color var(--motion-fast) ease; }
.content-card .entry-title a:hover,.content-card .entry-title a:focus-visible { color:var(--mid); }
.content-card .entry-summary { max-width:68ch; }
.navigation.pagination .nav-links { flex-wrap:wrap; }
.page-numbers.current { cursor:default; }

/* Premium system/empty state shared by Search, Archive and generic Index. */
.wl-system-state {
  margin-block:clamp(48px,6vw,82px) clamp(96px,10vw,150px);
  min-height:300px;
  display:grid;
  grid-template-columns:minmax(72px,.22fr) minmax(0,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--surface-soft),transparent 72%);
}
.wl-system-state-index {
  padding:28px 26px 28px 0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:16px;
  color:var(--mid);
  border-right:1px solid var(--line);
  font-family:var(--type-ui-family);
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}
.wl-system-state-index i { width:1px; min-height:82px; background:linear-gradient(var(--mid),var(--line)); }
.wl-system-state-index small { color:var(--gray); writing-mode:vertical-rl; transform:rotate(180deg); }
.wl-system-state-copy { padding:clamp(42px,5vw,72px); align-self:center; }
.wl-system-state-copy .eyebrow { margin:0 0 18px; }
.wl-system-state-copy h2 {
  max-width:820px;
  margin:0;
  font-family:var(--type-title-family);
  font-size:clamp(calc(30px * var(--type-title-scale)),calc(3.5vw * var(--type-title-scale)),calc(54px * var(--type-title-scale)));
  line-height:calc(1.06 * var(--type-title-leading-scale));
  letter-spacing:calc(-.05em + var(--type-title-tracking-adjust));
  font-weight:var(--type-title-weight-override,610);
}
.wl-system-state-copy > p:not(.eyebrow) { max-width:var(--content-measure-narrow); margin:20px 0 0; color:var(--gray); }
.wl-system-state-copy .button { margin-top:28px; }
.inner-hero--system .system-hero-action { margin-top:34px; }
.inner-hero--system .system-hero-action .button { width:max-content; }
.error-hero > span { font-variant-numeric:tabular-nums; }

/* Footer / tools — compact, tactile on small screens without extra decoration. */
.footer-links a,.footer-bottom a { transition:color var(--motion-fast) ease; }
.tools-rail { transition:border-color var(--motion-fast) ease,background-color var(--motion-base) ease,box-shadow var(--motion-base) ease; }
.tools-rail:focus-within { border-color:var(--line-strong); }

/* Hover-only motion must not become a sticky touch state. */
@media (hover:none) {
  .button:hover,.audience-link:hover,.project-card a:hover,.wl-arrow-action:hover,.closing-project-link:hover { transform:none; }
  .tools-rail [data-tip]::before { display:none; }
}

@media (max-width:680px) {
  :root {
    --space-content-start:64px;
    --space-content-end:96px;
  }
  .post-list { padding-block:48px 96px; }
  .content-card { padding-block:34px; }
  .content-card .entry-summary { max-width:none; }
  .footer-top { padding-block:64px; }
  .footer-links a { min-height:44px; width:max-content; display:inline-flex; align-items:center; }
  .wl-page-managed-content { padding-block:56px 84px; }
  .wl-system-state {
    min-height:0;
    margin-block:36px 88px;
    grid-template-columns:1fr;
    background:var(--surface-soft);
  }
  .wl-system-state-index {
    padding:18px 0;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto;
    align-items:center;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .wl-system-state-index i { width:100%; height:1px; min-height:1px; }
  .wl-system-state-index small { writing-mode:horizontal-tb; transform:none; }
  .wl-system-state-copy { padding:36px 0 42px; }
  .wl-system-state-copy h2 { font-size:clamp(calc(28px * var(--type-title-scale)),calc(9vw * var(--type-title-scale)),calc(42px * var(--type-title-scale))); }
  .inner-hero--system { min-height:0; padding-block:64px 52px; gap:36px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-header,.content-card .entry-title a,.footer-links a,.footer-bottom a,.tools-rail { transition:none; }
}