/* JobbMatch-startsidan (se inc/jobbmatch.php) - bygger ovanpå de delade
   .ff-commerce-*-klasserna (rubrik m.m., se commerce.css) för
   sidskalet, egna .ff-jobbmatch__*-klasser för själva inloggnings-/
   teaserinnehållet. Inloggningskortet återanvänder samma blå-kort-med-
   grön-knapp-mönster som nyhetsbrevsrutan i kolumn 3 (.ff-module--
   newsletter, modules.css) för visuell konsekvens - "logga in"/
   "prenumerera" är samma sorts kompakta formulär-i-ett-kort.
   UPPFÖLJNING 2026-09-04, se inc/jobbmatch.php:s docblock. */

.ff-jobbmatch {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---- Övre raden: inloggning + CTA-kort ---- */
.ff-jobbmatch__top {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .ff-jobbmatch__top { grid-template-columns: 1fr; }
}

.ff-jobbmatch__login {
  background: var(--ff-blue);
  color: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ff-jobbmatch__login-heading {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
}
.ff-jobbmatch__login-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.ff-jobbmatch__alert {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  background: #ffffff;
}
.ff-jobbmatch__alert--error { color: #a6231f; }
.ff-jobbmatch__alert--success { color: var(--ff-green-dark); }

.ff-jobbmatch__login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-jobbmatch__login-form input {
  border: 0;
  padding: 12px 14px;
  font-size: 14px;
  outline: 0;
  width: 100%;
}
.ff-jobbmatch__login-form button {
  background: var(--ff-green);
  color: #fff;
  border: 0;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.ff-jobbmatch__login-form button:hover { background: var(--ff-green-hover); }

.ff-jobbmatch__login-links {
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}
.ff-jobbmatch__login-links a { color: #fff; }
.ff-jobbmatch__login-links span { margin: 0 6px; color: rgba(255, 255, 255, 0.5); }

.ff-jobbmatch__ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ff-jobbmatch__cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--ff-border);
  background: var(--ff-card-bg);
  padding: 20px 24px;
  text-decoration: none;
  transition: border-color var(--ff-transition-fast, 180ms ease);
}
.ff-jobbmatch__cta-card:hover { border-color: var(--ff-green); }
.ff-jobbmatch__cta-title {
  font-family: var(--ff-font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ff-dark);
  max-width: 40ch;
}
.ff-jobbmatch__cta-link {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ff-blue);
  white-space: nowrap;
}

.ff-jobbmatch__stat {
  margin: 0;
  padding: 14px 20px;
  background: var(--ff-hover-dropdown);
  border: 1px solid var(--ff-border-weak);
  font-size: 14px;
  color: var(--ff-body-copy);
}
.ff-jobbmatch__stat strong { color: var(--ff-dark); }

/* ---- Annonsteasers ---- */
.ff-jobbmatch__ads-heading {
  margin: 0 0 16px;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ff-dark);
}
.ff-jobbmatch__ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.ff-jobbmatch__ad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--ff-border);
  padding: 18px;
}
.ff-jobbmatch__ad-title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ff-dark);
}
.ff-jobbmatch__ad-excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ff-card-copy);
}
.ff-jobbmatch__ad-meta {
  margin: 0;
  display: flex;
  gap: 12px;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ff-text-meta);
  text-transform: uppercase;
}
.ff-jobbmatch__ad-lock {
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ff-blue);
}

@media (max-width: 700px) {
  .ff-jobbmatch__ads-grid { grid-template-columns: 1fr; }
  .ff-jobbmatch__cta-card { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- Appvyn (Inloggad, template-winder.php) ----
   Pluginet (jobbmatch/public/css/public.css) stylar hela app-vyns
   INNEHÅLL helt själv - det här ger bara containern samma vertikala
   rytm som övriga enkelsidor (.ff-single-shell: 32px topp / 72px
   botten), se template-winder.php:s docblock. */
.ff-jobbmatch-app {
  padding-top: 32px;
  padding-bottom: 72px;
}

/* RÄTTNING 2026-09-04 (kunden, skärmdump: "Svart text på svart
   bakgrund" på menyraden Pågående processer/Nya matchningar/Profil när
   inloggad): pluginets egen CSS (jobbmatch/public/css/public.css) ger
   .jobbmatch-navigation en mörkgrå bakgrund (background: #222) OCH
   .jobbmatch-nav-item svart text (color: #000 !important) - fungerande
   ihop bara för att GAMLA temats style.css hade en egen global
   ".jobbmatch-navigation { background: transparent !important; }" som
   nollställde pluginets mörka bakgrund (bekräftat i
   themes/forvaltarforum_theme/style.css). Den rättningen fanns bara i
   temats CSS, portades aldrig hit. Samma motgift här. */
.ff-jobbmatch-app .jobbmatch-navigation {
  background: transparent !important;
}