/**
 * zeitkalk.css — Design tokens + self-hosted font faces for the zeitkalk
 * template pack (German Arbeitszeit/Payroll calculator hub).
 *
 * Enqueued only when zerobloat_get_active_template() === 'zeitkalk'
 * (see zerobloat.php enqueue_assets()). Tokens mirror every value in
 * templates/zeitkalk/dna.json's colors/typography/radius/shadow sections
 * — this file is the CSS side of that JSON, kept in sync by hand.
 */

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../../../assets/fonts/fira-sans/fira-sans-600-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../../assets/fonts/fira-sans/fira-sans-700-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../../../../assets/fonts/source-sans-3/source-sans-3-latin.woff2') format('woff2');
}

:root {
    /* Colors — dna.json "colors" */
    --zk-primary: #1B4B6E;
    --zk-primary-dark: #12344C;
    --zk-accent: #C46A1E;
    --zk-warning: #B3261E;
    --zk-text: #1A1A1A;
    --zk-text-muted: #5A5A5A;
    --zk-text-light: #8A8A85;
    --zk-surface: #FFFFFF;
    --zk-surface-alt: #F2F2F0;
    --zk-border: #D8D8D4;
    --zk-dark-bg: #12344C;
    --zk-dark-surface: #1B4B6E;

    /* Typography — dna.json "typography" */
    --zk-font-heading: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --zk-font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --zk-font-mono: 'Source Sans 3', ui-monospace, 'Cascadia Code', monospace;
    --zk-size-base: 16px;
    --zk-lh-body: 1.6;
    --zk-lh-heading: 1.2;
    --zk-ls-heading: -0.005em;

    /* Layout — dna.json "layout" */
    --zk-container-max: 1360px;
    --zk-container-pad: clamp(16px, 3vw, 40px);
    --zk-site-max: 1920px;

    /* Radius — dna.json "radius" (sharp/minimal, Neue Sachlichkeit) */
    --zk-radius-sm: 2px;
    --zk-radius-md: 3px;
    --zk-radius-lg: 4px;
    --zk-radius-xl: 6px;
    --zk-radius-pill: 999px;

    /* Shadow — dna.json "shadow" (resting state is flat; shadows are hover-only) */
    --zk-shadow-sm: none;
    --zk-shadow-md: 0 2px 8px rgba(27, 75, 110, 0.10);
    --zk-shadow-lg: 0 4px 16px rgba(27, 75, 110, 0.14);
    --zk-shadow-xl: 0 8px 32px rgba(27, 75, 110, 0.18);

    /* Motion — dna.json "motion" */
    --zk-motion-fast: 100ms;
    --zk-motion-normal: 200ms;
    --zk-motion-slow: 300ms;
    --zk-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: var(--zk-font-body);
    color: var(--zk-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--zk-font-heading);
    font-weight: 700;
    line-height: var(--zk-lh-heading);
    letter-spacing: var(--zk-ls-heading);
}

/* Footer brand/tagline band — sits above footers/footer-lite's own nav +
   copyright row. Flat, no gradient, matches the dark-slate token from
   dna.json's dark-bg/dark-surface values. */
/* Colored header — the plain white default header-lite reads as invisible/
   generic; a solid slate-blue bar gives the same visual confidence real
   German fintech sites commit to (Sparkasse red, ING orange, N26 black),
   rather than a thin token accent nobody notices. */
.zb-header-lite {
    background: var(--zk-primary, #1B4B6E) !important;
    border-bottom: none !important;
}
.zb-header-lite__brand-name {
    color: #fff !important;
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
}
.zb-header-lite__menu a {
    color: #D9E4EC !important;
}
.zb-header-lite__menu a:hover,
.zb-header-lite__menu .current-menu-item > a,
.zb-header-lite__menu .current_page_item > a {
    color: #fff !important;
}
.zb-header-lite__menu .current-menu-item > a::after,
.zb-header-lite__menu .current_page_item > a::after {
    background: var(--zk-accent, #C46A1E) !important;
}
/* Hamburger button keeps its own white background + gray icon lines by
   default (good contrast against the blue header bar) — no override
   needed; forcing the lines white too (as an earlier pass did) made them
   invisible against the button's own white background. */

/* footer-lite's menu list has no flex-wrap — fine for its original 2-3
   link use case, but this niche's footer carries 9 links (7 tools +
   Impressum + Datenschutz) and forces the page 1100px+ wide without this. */
.zb-footer-lite__menu {
    flex-wrap: wrap;
}

.zk-footer-top {
    background: var(--zk-dark-bg, #12344C);
    margin-top: 64px;
}
.zk-footer-top__inner {
    padding: 32px 0 24px 0;
}
.zk-footer-top__brand {
    font-family: var(--zk-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: #fff;
    margin: 0 0 6px 0;
}
.zk-footer-top__tagline {
    font-size: 0.9375rem;
    color: #C7D4DD;
    max-width: 560px;
    margin: 0;
}
.zk-footer-top + .zb-footer-lite {
    margin-top: 0;
    border-top-color: rgba(255, 255, 255, 0.15);
    background: var(--zk-dark-bg, #12344C);
}
.zk-footer-top + .zb-footer-lite .zb-footer-lite__brand,
.zk-footer-top + .zb-footer-lite .zb-footer-lite__copyright {
    color: #C7D4DD;
}
.zk-footer-top + .zb-footer-lite .zb-footer-lite__menu a {
    color: #C7D4DD;
}
.zk-footer-top + .zb-footer-lite .zb-footer-lite__menu a:hover {
    color: var(--zk-accent, #C46A1E);
}