/* Kaamrade Public Site - shared design tokens as plain CSS.
   Mirrors frontend/src/style/muiTheme.js's palette so the vanilla public
   site and the authenticated React SPA feel like one product. */

:root {
  --color-primary: #2DA127;
  --color-primary-dark: #1F7A1B;
  --color-hero-bg: #173B15;
  --color-darkest: #0F2A0D;
  --color-accent: #F08710;
  --color-surface: #FBF8F1;
  --color-surface-white: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text-primary: #0F172A;
  --color-text-secondary: #64748B;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #CBD5E1;

  --status-amber-text: #B45309;
  --status-amber-bg: #FEF3C7;
  --status-emerald-text: #047857;
  --status-emerald-bg: #D1FAE5;
  --status-blue-text: #1D4ED8;
  --status-blue-bg: #DBEAFE;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.15);

  --font-family: 'Satoshi', 'Arial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--color-surface);
  color: var(--color-text-primary);
  line-height: 1.5;
  /* Sticky footer - without this, the footer sits right after whatever
     little content a page has (e.g. jobs.html with zero results) instead
     of pinned to the bottom of the viewport, making its position look
     wildly inconsistent page to page. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.navbar, .footer { flex-shrink: 0; }

.page-content { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  padding: 0 24px;
}

/* Full-canvas sections - no max-width grid constraint, edge-to-edge. */
.section {
  width: 100%;
  padding: 48px 24px;
}

.section--dark {
  background: var(--color-hero-bg);
  color: var(--color-text-on-dark);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover { background: var(--color-primary-dark); }

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  /* Explicit, not inherited - same reasoning as .job-card: chips render
     inside the dark hero section's category-chips row, which would
     otherwise pass down white text onto this always-light background. */
  color: var(--color-text-primary);
}

.badge--verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--status-emerald-text);
  background: var(--status-emerald-bg);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* --- Navbar --- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar__logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.navbar__logo img { height: 32px; }

.navbar__links { display: flex; align-items: center; gap: 24px; }
.navbar__links a { font-weight: 500; color: var(--color-text-secondary); }
.navbar__links a:hover { color: var(--color-primary); }
/* Higher specificity than ".navbar__links a" above - without this, the
   descendant selector's color wins over .btn--primary's, rendering the
   Sign Up button's text nearly invisible (gray-on-green). */
.navbar__links a.btn--primary { color: #fff; }
.navbar__links a.btn--primary:hover { color: #fff; }

.navbar__toggle { display: none; }

@media (max-width: 720px) {
  .navbar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-surface-white);
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    gap: 16px;
  }
  .navbar__links.is-open { display: flex; }
  .navbar__toggle { display: block; background: none; border: none; font-size: 24px; cursor: pointer; }
}

/* --- Footer --- */
.footer {
  background: var(--color-darkest);
  color: var(--color-text-on-dark-muted);
  padding: 40px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.footer a { color: var(--color-text-on-dark-muted); }
.footer a:hover { color: #fff; }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* --- Job card (flex-wrap row, no grid system) --- */
.job-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.job-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  width: 340px;
  flex: 1 1 340px;
  max-width: 420px;
  transition: box-shadow 150ms ease, transform 150ms ease;
  /* Explicit (not inherited) - without this, a .job-card placed inside
     .section--dark (white text on a dark background) renders invisible
     white-on-white text, since the card itself is always light. */
  color: var(--color-text-primary);
  /* .job-card-row's default align-items:stretch makes every card in a row
     the same height - without flex-column + the footer's margin-top:auto
     below, cards with more/less content (longer titles, more skill chips,
     the org "Verified" badge) just left their "View Details" button
     wherever their own content happened to end, so rows looked staggered
     instead of aligned. */
  display: flex;
  flex-direction: column;
}
.job-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.job-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.job-card__logo { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface); }
.job-card__company { font-size: 13px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; }
.job-card__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 12px; color: var(--color-text-secondary); }
.job-card__skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.job-card__new-badge { background: var(--status-amber-bg); color: var(--status-amber-text); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 11px; font-weight: 700; }
.job-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.job-card__actions { display: flex; align-items: center; gap: 8px; }
.job-card__icon-btn { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--color-text-secondary); padding: 4px; display: inline-flex; align-items: center; gap: 4px; }
.job-card__icon-btn:hover { color: var(--color-primary); }
.job-card__icon-btn.is-saved { color: var(--color-accent); }

/* --- Hero --- */
.hero {
  background: var(--color-hero-bg);
  color: #fff;
  padding: 72px 24px;
  text-align: center;
}
.hero h1 { font-size: 40px; font-weight: 700; margin: 0 0 12px; }
.hero p { font-size: 18px; color: var(--color-text-on-dark-muted); margin: 0 0 32px; }

.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-lg);
}
.search-bar input {
  flex: 1 1 200px;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: var(--color-text-primary);
}
.search-bar button { flex: 0 0 auto; }

.category-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }

@media (max-width: 560px) {
  .hero { padding: 48px 20px; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 15px; }
  .search-bar button { flex: 1 1 100%; justify-content: center; }
}

/* --- Company profile cover/logo --- */
.company-cover { width: 100%; height: 220px; object-fit: cover; background: var(--color-surface-white); border-radius: var(--radius-lg); }
.company-header { position: relative; margin-bottom: 60px; }
.company-logo { width: 96px; height: 96px; border-radius: var(--radius-md); border: 4px solid #fff; object-fit: cover; background: #fff; position: absolute; bottom: -48px; left: 24px; box-shadow: var(--shadow-card); }
.company-stats { display: flex; flex-wrap: wrap; gap: 24px; margin: 16px 0 32px; }
.company-stat { text-align: center; }
.company-stat strong { display: block; font-size: 20px; }
.company-stat span { font-size: 12px; color: var(--color-text-secondary); }

/* --- Reviews --- */
.review-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; color: var(--color-text-primary); }
.review-card__stars { color: var(--color-accent); font-size: 15px; }
.review-card__hr-response { background: var(--color-surface); border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 12px; }
.rating-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rating-bar__track { flex: 1; height: 6px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.rating-bar__fill { height: 100%; background: var(--color-accent); }

.empty-state { text-align: center; color: var(--color-text-secondary); padding: 40px 0; }