/*
 * Porter & Blade — Design System
 * Tech / Data-driven dark editorial.
 * Monochrome canvas + signal-green data accent.
 *
 * This file:
 *  1. Defines all CSS custom properties (design tokens)
 *  2. Sets base/reset styles
 *  3. Provides color utility classes (Tailwind CDN doesn't know our custom colors)
 *  4. Provides custom utility classes (bg-grid, label-mono, signal-dot, ticker, etc.)
 *  5. Provides accordion & job-listing component styles
 */

/* ─── Google Fonts fallback (also enqueued via WP) ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
    --radius: 0.25rem;

    /* Canvas */
    --background:    oklch(0.14 0.005 250);
    --foreground:    oklch(0.97 0.005 250);
    --surface:       oklch(0.18 0.006 250);
    --surface-2:     oklch(0.22 0.008 250);

    --card:            oklch(0.18 0.006 250);
    --card-foreground: oklch(0.97 0.005 250);

    --primary:            oklch(0.97 0.005 250);
    --primary-foreground: oklch(0.14 0.005 250);

    --secondary:            oklch(0.24 0.008 250);
    --secondary-foreground: oklch(0.97 0.005 250);

    --muted:            oklch(0.22 0.008 250);
    --muted-foreground: oklch(0.65 0.012 250);

    --accent:            oklch(0.28 0.01 250);
    --accent-foreground: oklch(0.97 0.005 250);

    --destructive:            oklch(0.6 0.22 25);
    --destructive-foreground: oklch(0.98 0 0);

    --border: oklch(0.28 0.008 250);
    --input:  oklch(0.28 0.008 250);
    --ring:   oklch(0.85 0.18 145);

    /* Signal — data accent green */
    --signal:            oklch(0.85 0.19 145);
    --signal-foreground: oklch(0.14 0.005 250);

    /* Brand accents */
    --spitzbub: oklch(0.78 0.16 55);
    --revolor:  oklch(0.7 0.1 200);

    /* Gradients & shadows */
    --gradient-radial:  radial-gradient(circle at 30% 20%, oklch(0.22 0.02 145 / 0.4), transparent 60%);
    --gradient-signal:  linear-gradient(135deg, oklch(0.85 0.19 145), oklch(0.78 0.18 165));
    --shadow-glow:      0 0 60px -10px oklch(0.85 0.19 145 / 0.4);
    --shadow-elevated:  0 24px 60px -20px oklch(0 0 0 / 0.6);

    --grid-line: oklch(1 0 0 / 0.04);
}

/* ─── Base Styles ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html {
    background-color: var(--background);
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.02em;
}

code, kbd, pre, .font-mono {
    font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ─── Background Color Utilities ─────────────────────────────────────────────── */
.bg-background     { background-color: var(--background) !important; }
.bg-foreground     { background-color: var(--foreground) !important; }
.bg-surface        { background-color: var(--surface) !important; }
.bg-surface-2      { background-color: var(--surface-2) !important; }
.bg-card           { background-color: var(--card) !important; }
.bg-muted          { background-color: var(--muted) !important; }
.bg-accent         { background-color: var(--accent) !important; }
.bg-signal         { background-color: var(--signal) !important; }
.bg-border         { background-color: var(--border) !important; }
.bg-destructive    { background-color: var(--destructive) !important; }

/* Opacity variants */
.bg-background-80  { background-color: oklch(0.14 0.005 250 / 0.8) !important; }
.bg-surface-30     { background-color: oklch(0.18 0.006 250 / 0.3) !important; }
.bg-surface-40     { background-color: oklch(0.18 0.006 250 / 0.4) !important; }
.bg-surface-50     { background-color: oklch(0.18 0.006 250 / 0.5) !important; }
.bg-accent-40      { background-color: oklch(0.28 0.01 250 / 0.4) !important; }

/* Hover states */
.hover\:bg-accent:hover       { background-color: var(--accent) !important; }
.hover\:bg-accent-40:hover    { background-color: oklch(0.28 0.01 250 / 0.4) !important; }
.hover\:bg-signal:hover       { background-color: var(--signal) !important; }

/* ─── Text Color Utilities ───────────────────────────────────────────────────── */
.text-foreground          { color: var(--foreground) !important; }
.text-background          { color: var(--background) !important; }
.text-muted-foreground    { color: var(--muted-foreground) !important; }
.text-card-foreground     { color: var(--card-foreground) !important; }
.text-signal              { color: var(--signal) !important; }
.text-signal-foreground   { color: var(--signal-foreground) !important; }
.text-destructive         { color: var(--destructive) !important; }

.hover\:text-signal:hover    { color: var(--signal) !important; }
.hover\:text-foreground:hover{ color: var(--foreground) !important; }

/* ─── Border Color Utilities ─────────────────────────────────────────────────── */
.border-border           { border-color: var(--border) !important; }
.border-signal           { border-color: var(--signal) !important; }
.border-input            { border-color: var(--input) !important; }

/* Opacity variants */
.border-border-60        { border-color: oklch(0.28 0.008 250 / 0.6) !important; }
.border-border-50        { border-color: oklch(0.28 0.008 250 / 0.5) !important; }

.focus\:border-signal:focus  { border-color: var(--signal) !important; outline: none !important; }

/* ─── Shadow Utilities ───────────────────────────────────────────────────────── */
.hover\:shadow-glow:hover { box-shadow: var(--shadow-glow) !important; }
.shadow-elevated          { box-shadow: var(--shadow-elevated); }

/* ─── Font Family Utilities ──────────────────────────────────────────────────── */
.font-display { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.font-mono    { font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace; }
.font-sans    { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }

/* ─── Custom Utility Classes ─────────────────────────────────────────────────── */

/* Grid overlay backgrounds */
.bg-grid {
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
}

.bg-grid-fine {
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Mono label — used for section counters, tags, caps headings */
.label-mono {
    font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

/* Signal dot — pulsing green indicator */
.signal-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--signal);
    box-shadow: 0 0 12px var(--signal);
    flex-shrink: 0;
}

/* Horizontal fade mask for ticker */
.fade-mask-x {
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* Scrolling ticker */
.ticker {
    display: flex;
    white-space: nowrap;
    animation: pb-ticker 40s linear infinite;
}

@keyframes pb-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* antialiased helper */
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Site Header ────────────────────────────────────────────────────────────── */
.pb-site-header {
    background-color: oklch(0.14 0.005 250 / 0.8);
    border-bottom-color: oklch(0.28 0.008 250 / 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* ─── Job Accordion ──────────────────────────────────────────────────────────── */
.job-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease-out, padding 0.2s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.job-item.is-open .job-content {
    max-height: 3000px;
    transition: max-height 0.5s ease-in;
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
}

/* Arrow icon rotation */
.job-arrow {
    display: inline-block;
    font-family: "DM Mono", monospace;
    transition: transform 0.2s ease;
}

.job-item.is-open .job-arrow {
    transform: rotate(90deg);
}

/* Text state toggle */
.job-text-open   { display: inline; }
.job-text-close  { display: none; }
.job-item.is-open .job-text-open  { display: none; }
.job-item.is-open .job-text-close { display: inline; }

/* Status text color when open */
.job-status-label { color: var(--muted-foreground); transition: color 0.15s; }
.job-item.is-open .job-status-label { color: var(--signal); }
.job-trigger:hover .job-status-label { color: var(--signal); }

/* Trigger hover */
.job-trigger { background: none; border: none; cursor: pointer; width: 100%; text-align: left; }
.job-trigger:hover { background-color: oklch(0.28 0.01 250 / 0.4); }

/* ─── Contact Form ───────────────────────────────────────────────────────────── */
.pb-form-input {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid var(--border);
    background-color: var(--background);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

.pb-form-input:focus {
    border-color: var(--signal);
}

.pb-form-input::placeholder {
    color: var(--muted-foreground);
}

.pb-field-error {
    font-size: 0.75rem;
    color: var(--destructive);
    margin-top: 0.25rem;
    display: block;
    min-height: 1em;
}

/* Success/error messages */
.pb-form-message {
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    display: none;
}
.pb-form-message.is-success { display: block; background-color: oklch(0.22 0.04 145 / 0.4); color: var(--signal); border: 1px solid oklch(0.85 0.19 145 / 0.3); }
.pb-form-message.is-error   { display: block; background-color: oklch(0.22 0.04 25 / 0.3);  color: var(--destructive); border: 1px solid oklch(0.6 0.22 25 / 0.3); }

/* ─── Responsive Helpers ─────────────────────────────────────────────────────── */
/* These supplement Tailwind CDN where custom classes are needed */
@media (max-width: 767px) {
    .md-hidden-custom { display: none !important; }
}

/* ─── Legal / Prose Content (Impressum, Datenschutz) ────────────────────────── */
.pb-legal-content {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--muted-foreground);
}

.pb-legal-content h1,
.pb-legal-content h2,
.pb-legal-content h3,
.pb-legal-content h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--foreground);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.pb-legal-content h2 { font-size: 1.25rem; }
.pb-legal-content h3 { font-size: 1.0625rem; }
.pb-legal-content h4 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }

.pb-legal-content p  { margin-bottom: 1rem; }

.pb-legal-content a {
    color: var(--signal);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pb-legal-content a:hover { opacity: 0.8; }

.pb-legal-content ul,
.pb-legal-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.pb-legal-content ul { list-style: disc; }
.pb-legal-content ol { list-style: decimal; }
.pb-legal-content li { margin-bottom: 0.25rem; }

.pb-legal-content strong { color: var(--foreground); font-weight: 600; }

.pb-legal-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

/* ─── Radix / accordion animation fallback ───────────────────────────────────── */
@keyframes accordion-down {
    from { height: 0; }
    to   { height: var(--radix-accordion-content-height, auto); }
}
@keyframes accordion-up {
    from { height: var(--radix-accordion-content-height, auto); }
    to   { height: 0; }
}