/* ════════════════════════════════════════════════════════════════════
 * FUNCTIONAL PAGES - contact, careers, press, search, 404, 500
 * Reuses tokens.css + homepage.css + guide.css + hub.css. Adds error
 * pages (centered, minimal) + search results + careers/contact bits.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Contact / press method cards (reuse hub .hcard) ── */
.fn-icon{ width:44px; height:44px; border-radius:var(--radius-md); background:var(--brand-purple-light); color:var(--brand-purple); display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); }
.fn-icon svg{ width:22px; height:22px; }

/* code-style boilerplate box (press) */
.boilerplate{ background:var(--bg-dark); border-radius:var(--radius-lg); padding:var(--space-6); overflow-x:auto; }
.boilerplate pre{ margin:0; font-family:var(--font-mono); font-size:var(--text-body-sm); line-height:var(--leading-relaxed); color:var(--text-on-dark); white-space:pre-wrap; }

/* ── Careers role list ── */
.role-list{ display:flex; flex-direction:column; gap:var(--space-4); max-width:880px; margin-inline:auto; }
.role-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:720px){ .role-card{ grid-template-columns:1fr auto; align-items:center; } }
.role-main h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.role-tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.role-tag{ font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:2px var(--space-2); }
.role-tag.comp{ color:var(--brand-purple-hover); background:var(--brand-purple-light); border-color:#ddd6fe; }
.role-main p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin:0; }
.role-card .btn{ white-space:nowrap; }

/* ── Search ── */
.search-header{ background:var(--bg); padding-block:var(--space-12) var(--space-6); border-bottom:1px solid var(--border-subtle); }
.search-header-inner{ max-width:720px; margin-inline:auto; }
.search-header h1{ font-size:var(--text-h2); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-5); }
.search-box{ position:relative; margin-bottom:var(--space-5); }
.search-box input{ width:100%; font-family:var(--font-body); font-size:var(--text-body-lg); color:var(--text-primary); background:var(--bg); border:1px solid var(--border-default); border-radius:var(--radius-full); padding:var(--space-3) var(--space-5) var(--space-3) var(--space-10); min-height:54px; }
.search-box input:focus{ outline:none; border-color:var(--brand-blue); box-shadow:var(--shadow-focus-ring); }
.search-box svg{ position:absolute; left:var(--space-4); top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--text-tertiary); }
.results{ max-width:720px; margin-inline:auto; }
.result{ display:block; padding:var(--space-5) 0; border-bottom:1px solid var(--border-subtle); text-decoration:none; color:inherit; }
.result:hover{ text-decoration:none; }
.result:hover .result-title{ color:var(--brand-blue); }
.result-badge{ display:inline-block; font-size:10px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); background:var(--brand-purple-light); border-radius:var(--radius-sm); padding:2px var(--space-2); margin-bottom:var(--space-2); }
.result-title{ font-size:var(--text-h4); margin-bottom:var(--space-1); }
.result-url{ font-family:var(--font-mono); font-size:var(--text-caption); color:var(--text-tertiary); margin-bottom:var(--space-2); }
.result-excerpt{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); }
.result-excerpt mark{ background:var(--brand-purple-light); color:var(--brand-purple-hover); padding:0 2px; border-radius:2px; }
.result-date{ font-size:var(--text-caption); color:var(--text-tertiary); margin-top:var(--space-2); }
.no-results{ max-width:720px; margin-inline:auto; text-align:center; padding-block:var(--space-8); }
.no-results h2{ font-size:var(--text-h3); margin-bottom:var(--space-3); }
.no-results p{ color:var(--text-secondary); margin-bottom:var(--space-8); }

/* ── Error pages (404 / 500) ── */
.error-wrap{ min-height:calc(100vh - 65px - 120px); display:flex; align-items:center; justify-content:center; padding:var(--space-12) var(--space-5); background:var(--bg); }
.error-inner{ max-width:600px; width:100%; text-align:center; }
.error-code{ font-family:var(--font-mono); font-size:clamp(80px,16vw,140px); font-weight:var(--weight-black); line-height:1; letter-spacing:var(--tracking-tighter); }
.error-code.grad{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.error-code.danger{ color:var(--color-danger); }
.error-inner h1{ font-size:var(--text-h2); letter-spacing:var(--tracking-tight); margin:var(--space-4) 0 var(--space-3); }
.error-inner > p{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-8); }
.error-actions{ display:grid; grid-template-columns:1fr; gap:var(--space-3); max-width:420px; margin:0 auto var(--space-8); }
@media (min-width:480px){ .error-actions.c2{ grid-template-columns:1fr 1fr; } }
.error-search{ position:relative; max-width:420px; margin:0 auto; }
.error-search input{ width:100%; font-size:var(--text-body); border:1px solid var(--border-default); border-radius:var(--radius-full); padding:var(--space-3) var(--space-5) var(--space-3) var(--space-10); min-height:48px; }
.error-search input:focus{ outline:none; border-color:var(--brand-blue); box-shadow:var(--shadow-focus-ring); }
.error-search svg{ position:absolute; left:var(--space-4); top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--text-tertiary); }

/* minimal header for error pages */
.mini-header{ position:sticky; top:0; z-index:var(--z-sticky); background:rgba(255,255,255,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border-subtle); }
.mini-header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-4); }
.mini-back{ font-size:var(--text-body-sm); font-weight:var(--weight-medium); color:var(--text-secondary); text-decoration:none; }
.mini-back:hover{ color:var(--text-primary); }