/*
 * Axel Hoehnke site adapter for CyberCheckHamburg Design Kit.
 * Canonical kit sources live in static/vendor/cybercheck-design-kit/.
 * This file deliberately scopes component styling to existing site patterns:
 * loading the kit's generic .btn-primary/.hero/form selectors directly would
 * collide with Bootstrap and legacy pages.
 */

/* Existing persisted/backend value "executive" maps to the kit's "exec". */
[data-theme="executive"] {
  --bg: #FEFDF8;
  --surface: #f5f0e8;
  --surface-2: #ede6d6;
  --border: rgba(13,31,60,0.22);
  --text: #0D1F3C;
  --text-sub: rgba(13,31,60,0.78);
  --text-dim: rgba(13,31,60,0.66);
  --accent: #7a5010;
  --accent-solid: #7a5010;
  --tag-bg: rgba(183,121,31,0.08);
  --tag-border: rgba(183,121,31,0.2);
  --nav-bg: rgba(254,253,248,0.97);
  --card-bg: #f5f0e8;
  --card-hover: #ede6d6;
  --rule: rgba(13,31,60,0.08);
  --grid-line: rgba(183,121,31,0.04);
  --kpi-border: rgba(13,31,60,0.16);
  --step-bg: #FEFDF8;
  --logo-color: #7a5010;
}

/* Kit-to-site token aliases preserve the established Flask theme contract. */
:root {
  --font-primary: var(--sans);
  --font-mono: var(--mono);
}

[data-theme="light"],
[data-theme="dark"],
[data-theme="executive"] {
  --color-surface: var(--bg);
  --color-surface-emphasized: var(--surface);
  --color-surface-secondary: var(--surface-2);
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-sub);
  --color-text-tertiary: var(--text-dim);
  --color-border: var(--border);
  --color-accent-1: var(--accent);
  --color-nav-bg: var(--nav-bg);
  --color-nav-text: var(--text);
  --color-nav-border: var(--rule);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text-sub);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: -1;
}

/* Retire a legacy masking pseudo-element without changing page content. */
body::after { display: none !important; }

h1, h2, h3, h4, h5, h6,
.page-title, .section-heading, .section-heading-centered {
  font-family: var(--sans);
  letter-spacing: -0.02em;
}

h1, .page-title { font-weight: 900; }
h2, h3, .section-heading, .section-heading-centered { font-weight: 800; }

label, legend, .form-label, .footer-col-label, .footer-tier-label,
.nav-cta, .theme-btn {
  font-family: var(--mono);
}

:where(button, .btn, input, select, textarea, .card, .alert, .dropdown-menu) {
  border-radius: var(--radius) !important;
}

:where(input, select, textarea):focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--tag-bg) !important;
}

.site-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
}

.nav-link-item {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav-link-item:hover { color: var(--accent); opacity: 1; }

.nav-cta, .footer-cta {
  border-radius: var(--radius);
  font-family: var(--mono);
}

.site-footer { font-family: var(--sans); }

/* Shared kit rhythm and component treatment for the EN/DE profile homepages. */
.ah {
  --page-bg: var(--bg);
  --surface: var(--card-bg);
  --surface-2: var(--card-hover);
  --border: var(--rule);
  --text-main: var(--text);
  --text-muted: var(--text-sub);
}

[data-theme="light"] .ah,
[data-theme="dark"] .ah,
[data-theme="executive"] .ah {
  --accent: var(--accent-solid);
  --page-bg: var(--bg);
  --surface: var(--card-bg);
  --surface-2: var(--card-hover);
  --border: var(--rule);
  --text-main: var(--text);
  --text-muted: var(--text-sub);
}

.ah .ah-hero { padding: 8rem 2.5rem 5rem; }
.ah .ah-section { padding-top: 5rem; padding-bottom: 5rem; }
.ah .ah-h1 { line-height: 1.02; letter-spacing: -0.03em; }
.ah .ah-lead, .ah .section-sub, .ah .exec-summary p { line-height: 1.78; }

.ah :where(.btn-primary, .btn-secondary, .cta-btn, .cra-action, .cs-link-pdf,
  .cert-badge, .tech-pill, .profile-link-cch, .tl-outcome) {
  border-radius: var(--radius) !important;
}

.ah :where(.svc-card, .cert-panel, .cs-card, .tl-item) {
  background: var(--card-bg);
}

.ah :where(.svc-card, .cert-panel, .cs-card, .tl-item):hover {
  background: var(--card-hover);
}

.ah .btn-primary {
  background: var(--accent-solid);
  border: 1px solid var(--accent-solid) !important;
}

.ah .btn-secondary {
  background: transparent;
  border-color: var(--tag-border);
  color: var(--text-sub);
}

/* The CRA campaign is the intentional orange exception to one-accent usage. */
.ah .cra-teaser {
  --campaign-orange: #FF6B00;
  --campaign-orange-dark: #D94F00;
}

/* Contact pages already use safe page-level component namespaces. */
.ct {
  --page-bg: var(--bg);
  --surface: var(--card-bg);
  --border: var(--rule);
  --text-main: var(--text);
  --text-muted: var(--text-sub);
}

[data-theme="light"] .ct,
[data-theme="dark"] .ct,
[data-theme="executive"] .ct {
  --accent: var(--accent-solid);
  --page-bg: var(--bg);
  --surface: var(--card-bg);
  --border: var(--rule);
  --text-main: var(--text);
  --text-muted: var(--text-sub);
}

.ct .ct-hero { padding: 8rem 2.5rem 4rem; }
.ct :where(.channel-card, .channel-icon, .form-label, .form-input, .form-submit) {
  border-radius: var(--radius) !important;
}
.ct .channel-card { background: var(--card-bg); }
.ct .channel-card:hover { background: var(--card-hover); }
.ct .ct-lead, .ct .channel-body, .ct .form-sub { line-height: 1.7; }

/* Service landing pages inherit the kit without changing their HTML contract. */
.lp {
  background: var(--bg);
  color: var(--text-sub);
}

.lp-hero {
  position: relative;
  overflow: hidden;
  background: #0D1520;
  padding-top: 80px;
}

.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(96,165,250,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.lp-hero > * { position: relative; }
.lp-hero-tag, .lp-footer-label { font-family: var(--mono); }
.lp-hero h1 { font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; }
.lp-section { padding-top: 80px; padding-bottom: 80px; }
.lp-section h2, .lp-bottom-cta h2 { font-weight: 800; letter-spacing: -0.02em; }
.lp-section-lead, .lp-problem-text { line-height: 1.78; }

.lp :where(.lp-cta-btn, .lp-card, .lp-audience) {
  border-radius: var(--radius);
}

.lp .lp-card {
  background: var(--card-bg);
  border-color: var(--border);
}

.lp .lp-step-num {
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
}

.lp-cta-btn {
  background: var(--accent-solid);
  border: 1px solid var(--accent-solid);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .ah .ah-hero, .ct .ct-hero { padding-left: 1.25rem; padding-right: 1.25rem; }
  .ah .ah-section, .lp-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}