/* ============================================================
   DPx Talent - public site polish layer
   ------------------------------------------------------------
   Loaded AFTER /css/jobs.css on the public pages (index, jobs,
   job, apply, 404). Brings the admin's Moorly-inspired design
   language to the public side without changing the brand: a
   soft gradient wash, glass cards with an inset top sheen, a
   two-layer shadow, soft tinted chips, and one shared ease.
   The admin pages load css/admin-v2.css instead, not this file.
   ============================================================ */

:root {
  --pub-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pub-card: rgba(255, 255, 255, 0.86);
  --pub-rim: rgba(255, 255, 255, 0.95);
  --pub-line: rgba(21, 55, 60, 0.1);
  --pub-shadow: 0 1px 1px rgba(16, 48, 54, 0.04), 0 12px 32px -18px rgba(16, 48, 54, 0.32);
  --pub-shadow-lg: 0 2px 6px rgba(16, 48, 54, 0.06), 0 32px 70px -26px rgba(16, 48, 54, 0.4);
  --pub-teal: #157a6b;
  --pub-teal-soft: rgba(42, 188, 166, 0.16);
}

/* ---------- page wash: soft teal-to-sand gradient ---------- */

body {
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(238, 206, 138, 0.5), transparent 62%),
    radial-gradient(800px 520px at -10% 30%, rgba(42, 188, 166, 0.16), transparent 60%),
    linear-gradient(165deg, #e2f1ec 0%, #ecf3ef 55%, #f7efe0 100%);
  background-attachment: fixed;
}

/* ---------- header: dark glass ---------- */

.site-header {
  background: rgba(13, 29, 32, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-nav .nav-link {
  border-radius: 999px;
  padding: 7px 14px;
  transition: background 0.25s var(--pub-ease), color 0.25s var(--pub-ease);
}
.site-nav .nav-link:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }

/* ---------- hero entrance: title, copy and CTAs rise in ---------- */

@keyframes pub-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.hero h1, .hero p, .hero-ctas,
.detail-hero .back-link, .detail-hero h1, .detail-hero .job-meta,
.detail-hero > .container > .btn, .board-count {
  animation: pub-rise 0.7s var(--pub-ease) backwards;
}
.hero p, .detail-hero h1 { animation-delay: 0.1s; }
.hero-ctas, .detail-hero .job-meta, .board-count { animation-delay: 0.2s; }
.detail-hero > .container > .btn { animation-delay: 0.3s; }

/* ---------- shared glass card recipe ---------- */

.toolbar,
.job-card,
.why-cell,
.process-grid li,
.aside-panel,
.apply-success {
  background: var(--pub-card);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 0 var(--pub-rim), var(--pub-shadow);
}
.apply-success { border-color: var(--accent-line); }
.empty-state {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}

/* Why/process cards: Moorly-style tinted tiles that lift on hover */
.why-cell,
.process-grid li {
  transition: transform 0.35s var(--pub-ease), box-shadow 0.35s var(--pub-ease);
}
.why-cell:hover,
.process-grid li:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 0 var(--pub-rim), var(--pub-shadow-lg);
}
/* rotating desk-card tints (cell 1 is the photo feature cell) */
.why-grid .why-cell:nth-child(2) { background: linear-gradient(145deg, rgba(190, 231, 225, 0.85), rgba(255, 255, 255, 0.92) 70%); }
.why-grid .why-cell:nth-child(3) { background: linear-gradient(145deg, rgba(240, 227, 190, 0.8), rgba(255, 255, 255, 0.92) 70%); }
.why-grid .why-cell:nth-child(4) { background: linear-gradient(145deg, rgba(190, 214, 240, 0.8), rgba(255, 255, 255, 0.92) 70%); }
.why-grid .why-cell:nth-child(5) { background: linear-gradient(145deg, rgba(214, 219, 219, 0.7), rgba(255, 255, 255, 0.92) 70%); }

/* Job cards: lift + deeper shadow on hover, brand ease */
.job-card {
  transition: transform 0.35s var(--pub-ease), box-shadow 0.35s var(--pub-ease),
    border-color 0.35s var(--pub-ease);
}
.job-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 0 var(--pub-rim), var(--pub-shadow-lg);
}
.job-card .view {
  display: inline-block;
  transition: transform 0.3s var(--pub-ease);
}
.job-card:hover .view { transform: translateX(5px); }
/* The entrance (.reveal.in) and the hover share the transform, so the
   card keeps one transition that covers both */
.job-card.reveal.in {
  transition: opacity 0.6s var(--pub-ease), transform 0.35s var(--pub-ease),
    box-shadow 0.35s var(--pub-ease), border-color 0.35s var(--pub-ease);
}

/* ---------- soft chips: strong text on a tint (was solid teal) ---------- */

.chip {
  background: var(--pub-teal-soft);
  color: var(--pub-teal);
  font-weight: 700;
}

/* ---------- buttons: soft glow + lift ---------- */

.btn {
  transition: transform 0.25s var(--pub-ease), box-shadow 0.25s var(--pub-ease),
    background 0.2s ease, border-color 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #14967f, #0c6f61);
  box-shadow: 0 10px 22px -10px rgba(15, 133, 115, 0.65);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #17a289, #0d7668);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(15, 133, 115, 0.7);
}
.btn-ghost { background: rgba(255, 255, 255, 0.75); }
.btn-ghost:hover { background: #ffffff; transform: translateY(-1px); box-shadow: var(--pub-shadow); }
/* keep the press feedback (this must follow the hover rules) */
.btn:active { transform: translateY(1px) scale(0.99); box-shadow: none; }

/* ---------- hero pills (detail + jobs hero): frosted glass ---------- */

.detail-hero .job-meta span {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--pub-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.back-link {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--pub-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.25s var(--pub-ease), box-shadow 0.25s var(--pub-ease),
    color 0.2s ease;
}
.back-link:hover { transform: translateY(-1px); box-shadow: var(--pub-shadow-lg); border-color: rgba(255, 255, 255, 0.95); }

/* ---------- process steps: gradient number tiles, one tint each ---------- */

.step-num {
  width: 36px;
  height: 36px;
  font-size: 15px;
  background: linear-gradient(145deg, rgba(190, 231, 225, 0.95), rgba(190, 231, 225, 0.45));
  color: var(--pub-teal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 10px -4px rgba(16, 48, 54, 0.25);
}
.process-grid li:nth-child(2) .step-num { background: linear-gradient(145deg, rgba(240, 227, 190, 0.95), rgba(240, 227, 190, 0.45)); color: #9a6a1b; }
.process-grid li:nth-child(3) .step-num { background: linear-gradient(145deg, rgba(190, 214, 240, 0.95), rgba(190, 214, 240, 0.45)); color: #2b5fa8; }
.process-grid li:nth-child(4) .step-num { background: linear-gradient(145deg, rgba(222, 222, 222, 0.9), rgba(222, 222, 222, 0.4)); color: #5b6b70; }

/* ---------- forms: glassy fields, smooth focus ---------- */

.toolbar input[type="search"],
.toolbar select,
.field input,
.field select,
.field textarea {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--pub-line);
  transition: box-shadow 0.25s var(--pub-ease), border-color 0.25s var(--pub-ease);
}
.file-drop { background: rgba(255, 255, 255, 0.65); }
.apply-section {
  background: transparent;
  border-top: 1px solid var(--pub-line);
}
.elig-item {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--pub-shadow);
}

/* ---------- reveals: brand ease, deeper travel ---------- */

.reveal { transform: translateY(26px); }
.reveal.in {
  transition: opacity 0.7s var(--pub-ease), transform 0.7s var(--pub-ease);
}

/* ---------- responsive fixes for the glass back-link ---------- */

@media (max-width: 1024px) {
  /* jobs.css turns the back-link white-on-photo here; the glass pill
     keeps its own contrast, so restore the dark text */
  .back-link { color: var(--text); text-shadow: none; }
  .back-link:hover { color: var(--text); }
}

@media (max-width: 640px) {
  /* tighter pills so the signed-in HR nav fits beside the logo */
  .site-nav .nav-link { padding: 5px 9px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .job-card, .job-card.reveal.in, .btn, .back-link, .site-nav .nav-link, .reveal.in,
  .why-cell, .process-grid li {
    transition: none;
  }
  .reveal { transform: none; }
  .job-card:hover, .btn-primary:hover, .btn-ghost:hover, .back-link:hover,
  .why-cell:hover, .process-grid li:hover, .job-card:hover .view {
    transform: none;
  }
  .hero h1, .hero p, .hero-ctas,
  .detail-hero .back-link, .detail-hero h1, .detail-hero .job-meta,
  .detail-hero > .container > .btn, .board-count {
    animation: none;
  }
}