/* ──────────────────────────────────────────────────────────
   components.css — reusable visual components.
   Behaviour belongs in /js, not here.
   ────────────────────────────────────────────────────────── */

/* ── Nav ──────────────────────────────────────────────── */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(245, 242, 238, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: height var(--dur-state) var(--ease),
              background var(--dur-state) var(--ease),
              border-color var(--dur-state) var(--ease);
}

nav.site-nav.scrolled {
  height: 60px;
  border-bottom-color: var(--border-strong);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-logo img { height: 48px; width: auto; }

.nav-links {
  display: flex;
  gap: var(--space-8);
  list-style: none;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dur-hover) var(--ease);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur-state) var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 10px 24px;
  display: inline-block;
  transition: background var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.nav-cta:hover { background: var(--accent-bright); transform: translateY(-1px); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: all var(--dur-state) var(--ease);
}

.nav-mobile {
  display: none;
  position: fixed;
  top: 60px; left: 0; right: 0;
  background: rgba(245, 242, 238, 0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 999;
  padding: var(--space-6);
  flex-direction: column;
  gap: 0;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-hover) var(--ease);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--accent); }

@media (max-width: 899px) {
  nav.site-nav { padding: 0 var(--gutter); height: 60px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo img { height: 40px; }
}

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 16px var(--space-8);
  display: inline-block;
  transition: background var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-2px); }

.btn-ghost {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--text-muted);
  padding-bottom: 2px;
  transition: color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }

/* ── Footer ───────────────────────────────────────────── */
footer.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--space-5) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-left { display: flex; align-items: center; gap: var(--space-3); }
.footer-left img { height: 48px; width: auto; }
.footer-copy {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-muted);
}
.footer-links { display: flex; gap: var(--space-7); }
.footer-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-hover) var(--ease);
}
.footer-links a:hover { color: var(--accent); }

@media (max-width: 899px) {
  footer.site-footer {
    flex-direction: column;
    gap: var(--space-5);
    text-align: center;
    padding: var(--space-9) var(--gutter);
  }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
  .footer-left { flex-direction: column; gap: var(--space-3); }
}

/* ── Generic card ─────────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  padding: var(--space-8) var(--space-7);
  border-top: 2px solid transparent;
  transition: border-color var(--dur-state) var(--ease),
              background var(--dur-state) var(--ease);
}
.card:hover {
  border-color: var(--accent);
  background: var(--bg-section);
}

/* ── Inputs ───────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 14px 18px;
  outline: none;
  transition: border-color var(--dur-hover) var(--ease);
  width: 100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
}
/* Keyboard users also get an outline ring — the border-color alone is
   easy to miss when focus lands on an already-orange-bordered field. */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Apply-modal inputs (carry inline styles; replicate the border-color
   change on focus so we can drop the onfocus/onblur inline handlers). */
.apply-input:focus,
.news-filter-select:focus {
  border-color: var(--accent) !important;
}
.form-textarea { resize: vertical; min-height: 120px; }

.form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

/* Required-field asterisk in labels */
.form-required {
  color: var(--accent);
  margin-left: 4px;
}

/* Inline validation error message under a field */
.form-error {
  display: block;
  min-height: 1em;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--error);
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.form-error:empty { display: none; }

/* Invalid-field highlight (toggled by js/forms.js after blur) */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--error);
}

.form-submit {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 16px var(--space-8);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
  align-self: flex-start;
}
.form-submit:hover { background: var(--accent-bright); }

/* ── Ticker ───────────────────────────────────────────── */
.ticker-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1001;
  height: 36px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--accent-soft);
  display: flex;
  align-items: center;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.ticker-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent);
  padding: 0 var(--space-5);
  white-space: nowrap;
  border-right: 1px solid var(--accent-soft);
  flex-shrink: 0;
}
.ticker-track {
  display: flex;
  animation: ticker 28s linear infinite;
  white-space: nowrap;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--text-3);
  padding: 0 var(--space-6);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.ticker-item .up   { color: var(--success); }
.ticker-item .down { color: var(--error); }

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}
/* On phones the ticker stays visible but compacts a bit so it doesn't
   eat too much of the viewport: smaller font, smaller item gap, faster
   marquee (28s -> 22s feels right when fewer items fit on-screen). */
@media (max-width: 479px) {
  .ticker-bar { height: 32px; }
  .ticker-item { font-size: 11px; padding: 0 var(--space-4); }
  .ticker-label { display: none; }
  .ticker-track { animation-duration: 22s; }
}

/* ── Modal frame (used by apply modal) ────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(26, 23, 20, 0.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: var(--space-9);
  width: 100%;
  max-width: 520px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
}
@media (max-width: 899px) {
  .modal {
    padding: var(--space-7) var(--space-5);
    margin: var(--space-4);
    max-width: calc(100vw - 32px);
  }
}

/* ── Apply modal (careers) ────────────────────────────── */
.apply-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(26, 23, 20, 0.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.apply-overlay.open { display: flex; }
.apply-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: var(--space-9);
  width: 100%;
  max-width: 520px;
  position: relative;
}
.apply-modal-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.apply-modal-role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-7);
}
.apply-modal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: block;
}
.apply-drop-zone {
  border: 1px dashed var(--border);
  padding: 36px 24px;
  text-align: center;
  transition: border-color var(--dur-hover) var(--ease),
              background var(--dur-hover) var(--ease);
  margin-bottom: 8px;
}
/* Drop zone states (idle / dragover / has-file / error) */
.apply-drop-zone {
  position: relative;
}
.apply-drop-zone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.apply-drop-zone .apply-drop-icon {
  transition: color var(--dur-hover) var(--ease);
}

/* Dragover */
.apply-drop-zone.dragover {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.apply-drop-zone.dragover .apply-drop-icon { color: var(--accent-bright); }

/* Has-file */
.apply-drop-zone.has-file {
  border-style: solid;
  border-color: var(--success);
  background: rgba(46, 125, 50, 0.06);
}
.apply-drop-zone.has-file .apply-drop-icon { color: var(--success); }

/* Has-file remove (×) button */
.apply-drop-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: 0;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  display: none;
  transition: color var(--dur-hover) var(--ease);
}
.apply-drop-zone.has-file .apply-drop-remove { display: inline-block; }
.apply-drop-remove:hover { color: var(--text); }

/* Error */
.apply-drop-zone.is-error {
  border-color: var(--error);
  background: rgba(196, 40, 24, 0.06);
}
.apply-drop-zone.is-error .apply-drop-icon { color: var(--error); }
.apply-drop-icon {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--accent);
  margin-bottom: 10px;
}
.apply-drop-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.08em;
}
.apply-drop-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.apply-file-input { display: none; }
.apply-error {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--error);
  margin-top: 6px;
  min-height: 16px;
}
.apply-file-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
}
.apply-modal-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-7);
  align-items: center;
}
.apply-submit-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 13px var(--space-7);
  transition: background var(--dur-hover) var(--ease);
}
.apply-submit-btn:hover { background: var(--accent-bright); }
.apply-cancel-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-muted);
  border: none;
  transition: color var(--dur-hover) var(--ease);
}
.apply-cancel-btn:hover { color: var(--text); }
.apply-modal-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
}

@media (max-width: 899px) {
  .apply-modal {
    padding: var(--space-7) var(--space-5);
    margin: var(--space-4);
    max-width: calc(100vw - 32px);
  }
  .apply-modal-actions {
    flex-direction: column;
    gap: 10px;
  }
  .apply-submit-btn { width: 100%; text-align: center; }
}

/* ── Page-edge alignment on huge screens ──────────────────
   Sections cap at 1600px and centre (rule in layout.css). To keep
   the nav logo, every section heading, the footer logo, and the
   contact panel headings on one vertical line, expand the nav and
   footer horizontal padding by the same centring offset. */
@media (min-width: 1600px) {
  nav.site-nav,
  footer.site-footer {
    padding-left:  calc((100vw - 1600px) / 2 + var(--gutter));
    padding-right: calc((100vw - 1600px) / 2 + var(--gutter));
  }
}

/* ── Loading intro (Terminal Boot) ────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--text);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 300ms var(--ease);
  padding: 0 var(--gutter);
}
#intro.fade-out { opacity: 0; pointer-events: none; }

#intro .intro-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 320px;
  max-width: 520px;
}

#intro .intro-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
/* Preserve runs of spaces in the label so the dot column aligns;
   nowrap-via-pre also keeps every line on a single line. */
#intro .intro-line > span:nth-child(2) {
  white-space: pre;
}
#intro .intro-line.visible {
  opacity: 1;
  transform: translateX(0);
}

#intro .intro-prompt { color: var(--accent); }
#intro .intro-ok     { color: var(--success); margin-left: auto; }
#intro .intro-skip {
  position: absolute;
  bottom: var(--space-7);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
}

/* ── Contact form submit states ───────────────────────── */
.form-submit.is-disabled,
.form-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-submit.is-loading {
  position: relative;
  padding-right: calc(var(--space-8) + 28px);
}
.form-submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--space-6);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: form-spin 0.8s linear infinite;
}
@keyframes form-spin { to { transform: rotate(360deg); } }

.form-submit.shake {
  animation: form-shake 0.4s var(--ease);
}
@keyframes form-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX( 3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX( 5px); }
}

.form-submit-error {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--error);
  margin-bottom: var(--space-3);
}

/* Contact form success card (swap-in on success) */
.contact-form.is-sent > *:not(.contact-form-success) { display: none; }
.contact-form-success {
  display: none;
  text-align: center;
  padding: var(--space-9) 0;
  animation: form-fade-in 400ms var(--ease);
}
.contact-form.is-sent .contact-form-success { display: block; }
.contact-form-success-icon {
  font-family: var(--font-mono);
  font-size: 40px;
  color: var(--success);
  margin-bottom: var(--space-4);
}
.contact-form-success-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.contact-form-success-body {
  color: var(--text-3);
  font-size: var(--fs-body);
  max-width: 360px;
  margin: 0 auto;
}
@keyframes form-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .form-submit.is-loading::after { animation: none; border-top-color: #fff; }
  .form-submit.shake { animation: none; }
  .contact-form-success { animation: none; }
}

/* ── Country combobox ─────────────────────────────────── */
.combobox {
  position: relative;
}
.combobox-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 12px 16px;
  outline: none;
  color: var(--text);
  transition: border-color var(--dur-hover) var(--ease);
}
.combobox-input:focus { border-color: var(--accent); }
.combobox-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.combobox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: none;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}
.combobox-list[hidden] { display: none; }
.combobox-option {
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.combobox-option:hover,
.combobox-option.is-active {
  background: var(--bg-section);
}
.combobox-option .combobox-code {
  font-family: var(--font-mono);
  color: var(--text-3);
}

/* ── Mobile form tweaks (≤479px) ──────────────────────── */
@media (max-width: 479px) {
  .apply-drop-zone {
    padding: var(--space-5) var(--space-4);
  }
  .apply-drop-zone .apply-drop-text { font-size: 10px; }
  .apply-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .apply-submit-btn { width: 100%; text-align: center; }
  /* Country combobox stacks full-width above the phone input */
  .apply-phone-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .apply-phone-row .combobox { width: 100% !important; }
}