/* ============================================================================
   HiRE — Grove Editorial theme  (base: ux-variants/04-controls.html · Variant B)
   ----------------------------------------------------------------------------
   Purely visual layer. Loaded LAST in partials/head.ejs so it re-skins the
   shared shell (hire.css), public surface (public-surface.css) and workspace
   (workspace.css) by (a) overriding their design tokens and (b) adding a thin
   layer of Editorial component polish. No markup / functional changes.
   Fonts: DM Sans (text + headings — covers Latin & Cyrillic consistently),
   JetBrains Mono (numbers/labels), Syne (the "HiRE." brand lockup only).
   ========================================================================== */

:root {
  /* ---- Grove palette ---- */
  --g-ink: #14291f;
  --g-soft: #4f6a5c;
  --g-faint: #85998e;
  --g-green: #1f8a5b;
  --g-green-deep: #146844;
  --g-green-soft: #d8f0e4;
  --g-orange: #f06a2b;
  --g-orange-deep: #d45318;
  --g-orange-soft: #ffe4d4;
  --g-bg: #f3f8f4;
  --g-paper: #ffffff;
  --g-line: rgba(20, 41, 31, 0.10);
  --g-line-2: rgba(20, 41, 31, 0.16);
  --g-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --g-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  /* Headings use DM Sans too — it covers Latin AND Cyrillic, so EN/UK match.
     Syne is reserved for the compact "HiRE." brand lockup only (Latin-only). */
  --g-display: "DM Sans", system-ui, -apple-system, sans-serif;
  --g-brand: "Syne", "DM Sans", sans-serif;
  --g-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Bridge: hire.css tokens ---- */
  --hire-teal: #1f8a5b;
  --hire-teal-dark: #146844;
  --hire-blue: #1f8a5b;
  --hire-bg: #f3f8f4;
  --hire-sidebar: #eaf3ec;
  --hire-border: rgba(20, 41, 31, 0.12);
  --hire-text: #14291f;
  --hire-muted: #4f6a5c;
  --hire-radius: 10px;
  --hire-shadow: 0 14px 34px -26px rgba(20, 41, 31, 0.55);

  /* ---- Bridge: public-surface.css tokens ---- */
  --pub-teal: #1f8a5b;
  --pub-teal-soft: #d8f0e4;
  --pub-navy: #14291f;
  --pub-slate-600: #4f6a5c;
  --pub-slate-500: #5c7568;
  --pub-slate-400: #85998e;
  --pub-border: rgba(20, 41, 31, 0.12);
  --pub-bg: #f3f8f4;

  font-family: var(--g-sans);
}

/* =========================================================================
   1. Global type + background
   ========================================================================= */
body,
body.page {
  font-family: var(--g-sans);
  color: var(--g-ink);
  -webkit-font-smoothing: antialiased;
}

body.page {
  background:
    radial-gradient(ellipse 75% 55% at 8% -8%, rgba(31, 138, 91, 0.14), transparent 52%),
    radial-gradient(ellipse 55% 45% at 100% 4%, rgba(240, 106, 43, 0.10), transparent 50%),
    linear-gradient(180deg, #e8f3ec 0%, #f3f8f4 42%, #f7faf6 100%);
  background-attachment: fixed;
}

/* the public blob pseudo-elements would fight the Grove gradient — retire them */
body.page:not(.page--workspace)::before,
body.page:not(.page--workspace)::after { content: none; display: none; }

h1, h2, h3, h4 {
  font-family: var(--g-display);
  letter-spacing: -0.03em;
  color: var(--g-ink);
}

a { color: var(--g-green-deep); }
a:hover { color: var(--g-green); }

::selection { background: var(--g-green-soft); color: var(--g-green-deep); }

/* =========================================================================
   2. Shared shell — top nav / logo (public topnav from hire.css/topnav.ejs)
   ========================================================================= */
.topnav {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--g-line);
}
.topnav.topnav--pub { border-bottom: 1px solid var(--g-line); }

.logo,
.logo__hi, .logo__mark, .logo__re {
  font-family: var(--g-brand);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--g-ink);
}
.logo__period { color: var(--g-orange); }
.logo__tag { color: var(--g-faint); font-family: var(--g-mono); font-weight: 600; letter-spacing: 0.08em; }

.topnav__links a { color: var(--g-soft); font-weight: 500; }
.topnav__links a:hover { color: var(--g-green-deep); }
.topnav__auth { color: var(--g-soft); font-weight: 600; }
.topnav__user { color: var(--g-ink); font-weight: 600; }

.btn--nav-join {
  border-radius: 10px;
  background: var(--g-green);
  border-color: var(--g-green);
  font-weight: 700;
}
.btn--nav-join:hover { background: var(--g-green-deep); border-color: var(--g-green-deep); }

/* language dropdown */
.lang-drop__toggle { color: var(--g-soft); }
.lang-drop__toggle:hover { color: var(--g-ink); }
.lang-drop__menu { border-color: var(--g-line); border-radius: 10px; box-shadow: 0 16px 40px -28px rgba(20, 41, 31, 0.6); }
.lang-drop__item.is-active,
.lang-switch a.is-active { color: var(--g-green-deep); }
.lang-switch a:hover { color: var(--g-ink); }

/* =========================================================================
   3. Buttons (.btn family — public/auth/landing)
   ========================================================================= */
.btn {
  border-radius: 10px;
  font-family: var(--g-sans);
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s var(--g-ease);
}
.btn--primary { background: var(--g-green); border-color: var(--g-green); color: #fff; }
.btn--primary:hover { background: var(--g-green-deep); border-color: var(--g-green-deep); }
.btn--outline { color: var(--g-green-deep); border-color: var(--g-line-2); background: #fff; }
.btn--outline:hover { background: var(--g-green-soft); border-color: transparent; }
.btn--muted { background: var(--g-green-soft); color: var(--g-green-deep); }
.btn--ghost { color: var(--g-green-deep); }

/* =========================================================================
   4. Cards, forms, tabs, tables, alerts (hire.css generic)
   ========================================================================= */
.card {
  border: 1px solid var(--g-line);
  border-radius: 14px;
  box-shadow: 0 18px 42px -34px rgba(20, 41, 31, 0.5);
}

.form input, .form select, .form textarea,
.site-footer__form input, .site-footer__form textarea {
  border: 1px solid var(--g-line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--g-ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--g-green);
  box-shadow: 0 0 0 4px rgba(31, 138, 91, 0.13);
}
.form label { color: var(--g-soft); font-weight: 600; }

.tabs, .profile-tabs, .faq-tabs { border-bottom: 1px solid var(--g-line); }
.tab.is-active,
.profile-tabs a.is-active { color: var(--g-green-deep); border-bottom-color: var(--g-green); }
.tab { color: var(--g-soft); }
.faq-tabs__link.is-active { color: var(--g-green-deep); background: var(--g-green-soft); }
.faq-tabs__link:hover { color: var(--g-green-deep); }

.data-table th, .data-table td { border-bottom: 1px solid var(--g-line); }
.data-table th { color: var(--g-faint); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.7rem; font-weight: 700; }

.alert { border-radius: 12px; }
.alert--warn { background: var(--g-orange-soft); border-color: rgba(212, 83, 24, 0.3); color: var(--g-orange-deep); }

.muted, .link-muted, .small.muted { color: var(--g-soft); }

/* =========================================================================
   5. Public surface — hero / portals / job cards / sections / auth / footer
   ========================================================================= */
.landing__hero-title { color: var(--g-soft); }

.portal { border: 1px solid var(--g-line); box-shadow: 0 16px 40px -30px rgba(20, 41, 31, 0.5); color: var(--g-ink); font-weight: 700; }
.portal:hover { box-shadow: 0 22px 46px -28px rgba(20, 41, 31, 0.4); border-color: rgba(31, 138, 91, 0.35); }

.mission h2, .section__title--center, .about__title,
.value-card h2, .value-card--compact h3, .showcase-card__title,
.benefits-block h2 { color: var(--g-green-deep); font-family: var(--g-display); }

.section--muted { background: rgba(216, 240, 228, 0.4); }
.section--growth { background: linear-gradient(180deg, rgba(216, 240, 228, 0.35) 0%, transparent 100%); }

.job-card, .showcase-card, .value-card, .growth-steps__item, .widget {
  border: 1px solid var(--g-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px -32px rgba(20, 41, 31, 0.5);
}
.job-card__salary { color: var(--g-green-deep); }
.job-card__title { font-family: var(--g-display); }

.growth-steps__num { background: var(--g-green); }
.value-card__badge { color: var(--g-green-deep); border-color: var(--g-line-2); }

.public-jobs__curve { background: linear-gradient(180deg, rgba(216, 240, 228, 0.55) 0%, transparent 100%); }

/* auth card */
.auth-card { border-radius: 16px; }

/* footer */
.site-footer { background: rgba(216, 240, 228, 0.45); border-top: 1px solid var(--g-line); }
.site-footer__toast { background: var(--g-green-soft); color: var(--g-green-deep); border-radius: 10px; }
.site-footer__nav a { color: var(--g-soft); }
.site-footer__nav a:hover { color: var(--g-green-deep); }

/* custom select (csel) */
.csel__toggle { border: 1px solid var(--g-line-2); border-radius: 10px; color: var(--g-ink); }
.csel__toggle:focus { border-color: var(--g-green); box-shadow: 0 0 0 4px rgba(31, 138, 91, 0.13); }
.csel__menu { border-color: var(--g-line); border-radius: 10px; }
.csel__item.is-active { background: var(--g-green-soft); color: var(--g-green-deep); }
.csel--status-open .csel__toggle { color: var(--g-green-deep); }

/* =========================================================================
   6. Workspace (legacy employer cabinet) — token override + Editorial polish
   ========================================================================= */
.page--workspace {
  --ws-card-border: rgba(20, 41, 31, 0.12);
  --ws-card-radius: 12px;
  --ws-card-shadow: 0 16px 40px -34px rgba(20, 41, 31, 0.5);
  --ws-surface: #f3f8f4;
  color: var(--g-ink);
  font-family: var(--g-sans);
  background:
    radial-gradient(ellipse 75% 55% at 8% -8%, rgba(31, 138, 91, 0.12), transparent 52%),
    radial-gradient(ellipse 55% 45% at 100% 4%, rgba(240, 106, 43, 0.08), transparent 50%),
    linear-gradient(180deg, #eaf3ec 0%, #f3f8f4 46%, #f7faf6 100%);
  background-attachment: fixed;
}
.page--workspace a { color: var(--g-green-deep); }
.page--workspace a:hover { color: var(--g-green); }
.ws-topnav { background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid var(--g-line); }
.ws-brand, .ws-brand__name { font-family: var(--g-brand); font-weight: 800; letter-spacing: -0.05em; color: var(--g-ink); }
.ws-brand__dot { color: var(--g-orange); }
.ws-brand__sub { font-family: var(--g-mono); color: var(--g-faint); letter-spacing: 0.06em; }

/* =========================================================================
   7. Numbers → mono (widgets / stats shared across shell)
   ========================================================================= */
.hirike-num, .hirike-big { font-family: var(--g-mono); letter-spacing: -0.02em; color: var(--g-green-deep); }
.widget h3 { font-family: var(--g-display); }

/* small utility harmonisation */
.badge { font-weight: 600; }
.empty-state__art { opacity: 0.35; }