/* Research & Insights Career Hub - Modern Professional Stylesheet */
/* Place this file at: themes/btt/static/css/style.css */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
  background: #f9fafb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo img {
  width: 32px;
  height: 32px;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}

.logo-subtitle {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.2;
}

.btn-primary {
  background: #043cf7;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

a.btn-primary {
  color: #fff;
  text-decoration: none;
}

/* Responsive Header */
@media (max-width: 768px) {
  .header {
    padding: 12px 16px;
  }

  .header-nav a {
    display: none;
  }

  .logo-title {
    font-size: 16px;
  }

  .logo-subtitle {
    font-size: 11px;
  }

  .btn-primary {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Content heading styles */
h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

/* Container */
.container {
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
}

/* Country Navigation */
.country-nav {
  background: white;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.country-nav h3 {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.recency-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.filter-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #043cf7;
}

.filter-label {
  font-size: 0.85rem;
  color: #4b5563;
  font-weight: 600;
}

.filter-label-suffix {
  font-size: 0.85rem;
  color: #4b5563;
  font-weight: 600;
}

.filter-toggle:hover .filter-label {
  color: #1a1a1a;
}

.days-selector {
  font-size: 0.85rem;
  color: #1a1a1a;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.days-selector:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
}

.days-selector:not(:disabled):hover {
  border-color: #043cf7;
}

.days-selector:not(:disabled):focus {
  outline: none;
  border-color: #043cf7;
  box-shadow: 0 0 0 3px rgba(4, 60, 247, 0.1);
}

.country-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.country-link {
  color: #4b5563;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1.25rem 0.3rem 1.25rem;
  border-radius: 10px;
  background: #f3f4f6;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.country-link:hover {
  background: #cdd8fd;
  color: #1a1a1a;
  border-color: #043cf7;
}

.country-link.active {
  background: #043cf7;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(4, 60, 247, 0.3);
}

/* Country Dropdown */
.country-dropdown {
  font-size: 0.9rem;
  color: #4b5563;
  font-weight: 600;
  padding: 0.5rem 1.25rem 0.3rem 1.25rem;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #f3f4f6;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.country-dropdown:hover {
  background: #cdd8fd;
  border-color: #043cf7;
}

.country-dropdown:focus {
  outline: none;
  border-color: #043cf7;
  box-shadow: 0 0 0 3px rgba(4, 60, 247, 0.1);
}

/* Country Header */
.country-header {
  margin-bottom: 2rem;
}

.country-header h2 {
  font-size: 2rem;
  color: #1a1a1a;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* Kanban Board */
.kanban-board {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  min-height: 500px;
}

.kanban-column {
  background: white;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}

.kanban-column[data-status="not-interested"] {
  background: #f4f0f0ff;
}

.kanban-column[data-status="not-interested"] .apply-link {
  display: none;
}

.kanban-column[data-status="not-interested"] .added-date {
  display: none;
}

.kanban-column[data-status="not-interested"] .column-header {
  background: #f4f0f0ff;
  border-bottom: 2px solid white;
}

.kanban-column:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.column-header {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  padding-top: 0;
  margin-top: 0;
}

.column-title {
  cursor: text;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  outline: none;
  position: relative;
}

.column-title:hover {
  background: rgba(4, 60, 247, 0.1);
}

.column-title:focus {
  background: rgba(4, 60, 247, 0.15);
  box-shadow: 0 0 0 2px rgba(4, 60, 247, 0.3);
}

.column-title::after {
  content: "✏️";
  opacity: 0;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  transition: opacity 0.2s ease;
}

.column-title:hover::after {
  opacity: 0.4;
}

.column-title:focus::after {
  display: none;
}

.job-count {
  background: #14a807;
  color: #fff;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(20, 168, 7, 0.25);
}

.drop-zone {
  flex: 1;
  min-height: 100px;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 0.5rem;
}

.drop-zone.drag-over {
  background: rgba(4, 60, 247, 0.12);
  border: 2px dashed #043cf7;
  border-radius: 8px;
}

.kanban-column.drag-over {
  background: rgba(4, 60, 247, 0.08);
  box-shadow: 0 0 0 3px #043cf7 inset;
}

/* Enhanced visual feedback on mobile */
@media (max-width: 768px) {
  .drop-zone.drag-over {
    border-width: 4px;
    background: linear-gradient(135deg, rgba(4, 60, 247, 0.25) 0%, rgba(3, 48, 199, 0.25) 100%);
  }

  .kanban-column.drag-over {
    box-shadow: 0 0 0 4px #043cf7 inset;
    background: rgba(4, 60, 247, 0.12);
  }
}

.kanban-column.drag-over .column-header {
  background: transparent;
}

/* Job Cards */
.job-card {
  background: #fafbfc;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  touch-action: pan-y; /* Allow vertical scrolling on mobile */
  -webkit-user-select: none;
  user-select: none;
}

/* Drag handle for mobile */
.drag-handle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 1.5rem;
  cursor: grab;
  padding: 0.5rem;
  display: none;
  touch-action: none;
  z-index: 5;
  line-height: 1;
}

@media (max-width: 768px) {
  .drag-handle {
    display: block;
  }

  .job-card {
    padding-right: 3rem; /* Make room for drag handle */
  }
}

.drag-handle:active {
  cursor: grabbing;
}

/* Touch dragging state for mobile */
.job-card.touch-dragging {
  opacity: 0.3;
  transform: scale(0.95);
}

/* Visual feedback when dragging over a card for reordering */
.job-card.drag-over-card {
  border-top: 3px solid #043cf7;
  margin-top: 0.5rem;
}

/* Ghost element for touch drag visual feedback */
.ghost-element {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
  border: 3px solid #043cf7 !important;
  background: white !important;
}

/* Improve touch target size on mobile */
@media (max-width: 768px) {
  .job-card {
    min-height: 80px; /* Ensure adequate touch target */
    padding: 1.25rem;
    margin-bottom: 1rem;
  }
}

/* Spiderweb effect for old job cards (>3 weeks) */
.job-card.old-job {
  position: relative;
  background: #f7f7f7;
  border-color: #d1d5db;
}

/* Dusty/aged background layer */
.job-card.old-job::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 30%, rgba(230, 230, 230, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(220, 220, 220, 0.3) 0%, transparent 25%),
    linear-gradient(135deg, rgba(235, 235, 235, 0.2) 0%, transparent 50%);
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
}

/* Enhanced spiderweb pattern overlay */
.job-card.old-job::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
        /* Web anchor point (spider location) */ radial-gradient(
      circle at 85% 15%,
      rgba(100, 100, 100, 0.35) 0%,
      rgba(100, 100, 100, 0.35) 2px,
      transparent 2.5px
    ),
    /* Concentric web circles */
      radial-gradient(circle at 85% 15%, transparent 15px, rgba(140, 140, 140, 0.4) 15px, rgba(140, 140, 140, 0.4) 16px, transparent 17px),
    radial-gradient(circle at 85% 15%, transparent 30px, rgba(130, 130, 130, 0.35) 30px, rgba(130, 130, 130, 0.35) 31px, transparent 32px),
    radial-gradient(circle at 85% 15%, transparent 45px, rgba(120, 120, 120, 0.3) 45px, rgba(120, 120, 120, 0.3) 46px, transparent 47px),
    radial-gradient(circle at 85% 15%, transparent 60px, rgba(110, 110, 110, 0.25) 60px, rgba(110, 110, 110, 0.25) 61px, transparent 62px),
    /* Radial web strands (spokes) */
      conic-gradient(
        from 0deg at 85% 15%,
        transparent 0deg,
        transparent 22deg,
        rgba(120, 120, 120, 0.35) 22.5deg,
        rgba(120, 120, 120, 0.35) 23deg,
        transparent 23.5deg,
        transparent 67deg,
        rgba(120, 120, 120, 0.35) 67.5deg,
        rgba(120, 120, 120, 0.35) 68deg,
        transparent 68.5deg,
        transparent 112deg,
        rgba(120, 120, 120, 0.35) 112.5deg,
        rgba(120, 120, 120, 0.35) 113deg,
        transparent 113.5deg,
        transparent 157deg,
        rgba(120, 120, 120, 0.35) 157.5deg,
        rgba(120, 120, 120, 0.35) 158deg,
        transparent 158.5deg,
        transparent 202deg,
        rgba(120, 120, 120, 0.35) 202.5deg,
        rgba(120, 120, 120, 0.35) 203deg,
        transparent 203.5deg,
        transparent 247deg,
        rgba(120, 120, 120, 0.35) 247.5deg,
        rgba(120, 120, 120, 0.35) 248deg,
        transparent 248.5deg,
        transparent 292deg,
        rgba(120, 120, 120, 0.35) 292.5deg,
        rgba(120, 120, 120, 0.35) 293deg,
        transparent 293.5deg,
        transparent 337deg,
        rgba(120, 120, 120, 0.35) 337.5deg,
        rgba(120, 120, 120, 0.35) 338deg,
        transparent 338.5deg,
        transparent 360deg
      ),
    /* Additional diagonal web strands for realism */
      linear-gradient(
        125deg,
        transparent 0%,
        transparent 48.5%,
        rgba(130, 130, 130, 0.25) 49%,
        rgba(130, 130, 130, 0.25) 49.5%,
        transparent 50%,
        transparent 100%
      ),
    linear-gradient(
      55deg,
      transparent 0%,
      transparent 48.5%,
      rgba(130, 130, 130, 0.25) 49%,
      rgba(130, 130, 130, 0.25) 49.5%,
      transparent 50%,
      transparent 100%
    );
  background-size: 100% 100%;
  pointer-events: none;
  border-radius: 12px;
  opacity: 0.8;
  z-index: 1;
}

/* Ensure card content stays above the web */
.job-card.old-job > * {
  position: relative;
  z-index: 2;
}

/* Optional: Add a subtle shadow/depth to old cards */
.job-card.old-job {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Reduce opacity slightly on the old card content to enhance the "old" feeling */
.job-card.old-job .job-title,
.job-card.old-job .company-and-location {
  opacity: 0.85;
}

/* Hidden state for filtered jobs */
.job-card.filtered-hidden {
  display: none;
}

/* Smaller cards in non-Found columns */
.kanban-column[data-status="not-interested"] .job-card,
.kanban-column[data-status="will-apply"] .job-card,
.kanban-column[data-status="applying"] .job-card,
.kanban-column[data-status="applied"] .job-card {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
}

.kanban-column[data-status="not-interested"] .job-card .job-title,
.kanban-column[data-status="will-apply"] .job-card .job-title,
.kanban-column[data-status="applying"] .job-card .job-title,
.kanban-column[data-status="applied"] .job-card .job-title {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.kanban-column[data-status="not-interested"] .job-card .company-and-location,
.kanban-column[data-status="will-apply"] .job-card .company-and-location,
.kanban-column[data-status="applying"] .job-card .company-and-location,
.kanban-column[data-status="applied"] .job-card .company-and-location {
  font-size: 0.7rem;
  margin-bottom: 0.4rem;
}

.kanban-column[data-status="not-interested"] .job-card .apply-link,
.kanban-column[data-status="will-apply"] .job-card .apply-link,
.kanban-column[data-status="applying"] .job-card .apply-link,
.kanban-column[data-status="applied"] .job-card .apply-link {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.kanban-column[data-status="not-interested"] .job-card .added-date,
.kanban-column[data-status="will-apply"] .job-card .added-date,
.kanban-column[data-status="applying"] .job-card .added-date,
.kanban-column[data-status="applied"] .job-card .added-date {
  font-size: 0.65rem;
  gap: 0.2rem;
}

.kanban-column[data-status="not-interested"] .job-card .added-date::before,
.kanban-column[data-status="will-apply"] .job-card .added-date::before,
.kanban-column[data-status="applying"] .job-card .added-date::before,
.kanban-column[data-status="applied"] .job-card .added-date::before {
  font-size: 0.7rem;
}

.job-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #043cf7;
  border-radius: 12px 12px 0 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.kanban-column[data-status="not-interesting"] .job-card::before,
.kanban-column[data-status="will-apply"] .job-card::before,
.kanban-column[data-status="applying"] .job-card::before,
.kanban-column[data-status="applied"] .job-card::before {
  height: 2px;
  border-radius: 8px 8px 0 0;
}

.job-card:hover::before {
  opacity: 1;
}

.job-card:active {
  cursor: grabbing;
}

.job-card:hover {
  border-color: #043cf7;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  background: white;
}

.job-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
  transform: rotate(2deg);
}

.job-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.company-and-location {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.company {
  color: #5d636eff;
}

.and-location {
  color: #828eabff;
}

.job-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.apply-link {
  background: #14a807;
  color: #fff;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-block;
  width: fit-content;
  box-shadow: 0 2px 6px rgba(20, 168, 7, 0.25);
}

.added-date {
  color: #9ca3af;
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.added-date::before {
  content: "🎯";
  font-size: 0.9rem;
}

/* Blog Styles */
.blog-container {
  margin: 0 auto;
  padding: 2rem 0;
}

.page-header {
  margin-bottom: 3rem;
  text-align: left;
}

.page-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.page-description {
  font-size: 1.1rem;
  color: #4b5563;
  line-height: 1.7;
}

/* Blog List Styles */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog-summary-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.blog-summary-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.blog-summary-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-summary-title a {
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-summary-title a:hover {
  color: #043cf7;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.blog-meta time {
  font-weight: 500;
}

.blog-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.blog-tag {
  background: #f3f4f6;
  color: #4b5563;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.blog-summary-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 1.25rem;
}

.read-more {
  color: #043cf7;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.read-more:hover {
  color: #3663f9;
  gap: 0.5rem;
}

/* Single Blog Post Styles */
.blog-post {
  background: white;
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.blog-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #f3f4f6;
}

.blog-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.blog-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #374151;
}

.blog-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

.blog-content h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.blog-content h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.blog-content p {
  margin-bottom: 1.5rem;
}

.blog-content ul,
.blog-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.blog-content li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.blog-content strong {
  font-weight: 700;
  color: #1a1a1a;
}

.blog-content em {
  font-style: italic;
}

.blog-content a {
  color: #043cf7;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}

.blog-content a:hover {
  color: #3663f9;
}

.blog-content blockquote {
  border-left: 4px solid #043cf7;
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #4b5563;
}

.blog-content code {
  background: #f3f4f6;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.9em;
  color: #e60023;
}

.blog-content pre {
  background: #1a1a1a;
  color: #f3f4f6;
  padding: 1.5rem;
  border-radius: 12px;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.blog-content pre code {
  background: none;
  padding: 0;
  color: #f3f4f6;
}

/* Table Styles for Blog Posts */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
}

.blog-content thead {
  background: #043cf7;
}

.blog-content thead th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 2px solid #3663f9;
}

.blog-content tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
}

.blog-content tbody tr:last-child {
  border-bottom: none;
}

.blog-content tbody tr:hover {
  background-color: #fffef8;
}

.blog-content tbody td {
  padding: 1rem 1.25rem;
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.6;
}

.blog-content tbody td:first-child {
  font-weight: 600;
  color: #1a1a1a;
}

/* Alternating row colors for better readability */
.blog-content tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

.blog-content tbody tr:nth-child(even):hover {
  background-color: #fffef8;
}

/* Responsive table styles */
@media (max-width: 768px) {
  .blog-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
  }

  .blog-content thead th,
  .blog-content tbody td {
    padding: 0.75rem 0.85rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .blog-content thead th,
  .blog-content tbody td {
    padding: 0.6rem 0.7rem;
    font-size: 0.875rem;
  }
}

.blog-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid #f3f4f6;
}

.back-link {
  color: #4b5563;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.back-link:hover {
  color: #043cf7;
  gap: 0.5rem;
}

/* Responsive Blog Styles */
@media (max-width: 768px) {
  .blog-container {
    padding: 1.5rem 0;
  }

  .blog-post {
    padding: 2rem 1.5rem;
  }

  .blog-title {
    font-size: 1.75rem;
  }

  .page-header h1 {
    font-size: 1.75rem;
  }

  .blog-summary-title {
    font-size: 1.4rem;
  }

  .blog-content {
    font-size: 1rem;
  }

  .blog-content h2 {
    font-size: 1.4rem;
  }

  .blog-content h3 {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .blog-container {
    padding: 1rem 0;
  }

  .blog-post {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .blog-title {
    font-size: 1.5rem;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }

  .blog-summary-title {
    font-size: 1.25rem;
  }

  .blog-summary-card {
    padding: 1.5rem;
  }

  .blog-content {
    font-size: 0.95rem;
  }
}

/* Save Notification */
.save-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #1a1a1a;
  color: white;
  padding: 1rem 1.75rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  display: none;
  align-items: center;
  gap: 0.75rem;
  z-index: 1000;
  animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.save-notification.show {
  display: flex;
}

@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.save-icon {
  width: 24px;
  height: 24px;
  color: #14a807;
  animation: bounce 0.6s ease;
  flex-shrink: 0;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus states for accessibility */
.country-link:focus,
.linkedin-link:focus {
  outline: 3px solid #043cf7;
  outline-offset: 2px;
}

.job-card:focus {
  outline: 2px solid #043cf7;
  outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .kanban-board {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
  }

  .tagline {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .header-actions {
    margin-top: 0.5rem;
    gap: 0.5rem;
  }

  .linkedin-link,
  .email-updates-btn,
  .submit-opportunity-btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }

  .linkedin-icon,
  .email-icon,
  .submit-icon {
    width: 16px;
    height: 16px;
  }

  .social-sharing {
    padding: 0.35rem 1rem;
    gap: 0.5rem;
  }

  .share-label {
    font-size: 0.75rem;
  }

  .share-buttons {
    gap: 0.35rem;
  }

  .share-button {
    width: 28px;
    height: 28px;
  }

  .share-button svg {
    width: 13px;
    height: 13px;
  }

  .kanban-board {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0.75rem;
  }

  .header {
    padding: 0.75rem 1rem;
  }

  .country-nav {
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
  }

  .nav-header {
    margin-bottom: 0.5rem;
  }

  .country-nav h3 {
    font-size: 0.7rem;
  }

  .country-links {
    gap: 0.4rem;
  }

  .country-link {
    padding: 0.4rem 0.875rem;
    font-size: 0.8rem;
  }

  .network-bg {
    display: none;
  }

  .network-node {
    width: 35px;
    height: 35px;
  }

  .save-notification {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.35rem;
    margin-bottom: 0.2rem;
  }

  .header {
    padding: 0.65rem 0.875rem;
  }

  .tagline {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .header-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.4rem;
    gap: 0.4rem;
  }

  .linkedin-link,
  .email-updates-btn,
  .submit-opportunity-btn {
    justify-content: center;
    font-size: 0.8rem;
    padding: 0.45rem 0.875rem;
  }

  .social-sharing {
    justify-content: center;
    padding: 0.3rem 0.875rem;
  }

  .container {
    padding: 0.5rem;
  }

  .country-nav {
    padding: 0.4rem 0.875rem;
    margin-bottom: 0.5rem;
  }

  .nav-header {
    margin-bottom: 0.4rem;
    gap: 0.5rem;
  }

  .country-nav h3 {
    font-size: 0.65rem;
  }

  .recency-filter {
    gap: 0.35rem;
  }

  .filter-label,
  .filter-label-suffix {
    font-size: 0.75rem;
  }

  .days-selector {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }

  .country-links {
    gap: 0.35rem;
  }

  .country-link {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
  }

  .job-title {
    font-size: 1rem;
  }

  .company-and-location {
    font-size: 0.85rem;
  }

  .kanban-column {
    padding: 0.75rem;
  }

  .job-card {
    padding: 0.75rem;
  }
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 540px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: #6b7280;
  transition: all 0.2s ease;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: #f3f4f6;
  color: #1a1a1a;
}

.modal-close svg {
  width: 24px;
  height: 24px;
}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s ease;
  color: #1a1a1a;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #043cf7;
  box-shadow: 0 0 0 3px rgba(4, 60, 247, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9ca3af;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-hint {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.35rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn-primary,
.btn-secondary {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  background: #14a807;
  color: #fff;
  flex: 1;
  box-shadow: 0 2px 8px rgba(20, 168, 7, 0.25);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 168, 7, 0.35);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.btn-secondary:hover {
  background: #e5e7eb;
}

.form-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 0.75rem;
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.spinner {
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
}

.spinner circle {
  stroke: currentColor;
  stroke-dasharray: 50;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 50;
  }
  50% {
    stroke-dashoffset: 12.5;
  }
  100% {
    stroke-dashoffset: 50;
  }
}
/* Twemoji flag styling for cross-platform support */
.country-link img.emoji,
.country-header img.emoji {
  height: 1.2em;
  width: 1.2em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  display: inline-block;
}

.country-link img.emoji {
  height: 1.5em;
  width: 1.5em;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
  font-family: "Inter", sans-serif;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: white;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: rgba(4, 60, 247, 0.3);
  background: #cdd8fd;
}

.pagination-link.prev::before {
  margin-right: 0.5rem;
}

.pagination-link.next::after {
  margin-left: 0.5rem;
}

.pagination-info {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

/* Job Detail Page Styles */
.job-detail-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.job-detail-post {
  background: white;
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.job-detail-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #f3f4f6;
}

.job-detail-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 2rem;
  letter-spacing: -0.5px;
}

.job-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.job-detail-field {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.job-detail-link-field {
  align-items: center;
}

.job-detail-label {
  font-weight: 700;
  color: #4b5563;
  min-width: 140px;
}

.job-detail-value {
  color: #1a1a1a;
  font-weight: 500;
}

.job-detail-apply-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #14a807;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(20, 168, 7, 0.25);
  transition: all 0.3s ease;
}

.job-detail-apply-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(20, 168, 7, 0.35);
}

.job-detail-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 2.5rem;
}

.job-detail-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.job-detail-content h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.job-detail-content p {
  margin-bottom: 1.5rem;
}

.job-detail-content ul,
.job-detail-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.job-detail-content li {
  margin-bottom: 0.75rem;
}

.job-detail-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid #f3f4f6;
}

/* Responsive Job Detail Styles */
@media (max-width: 768px) {
  .job-detail-container {
    padding: 1.5rem 1rem;
  }

  .job-detail-post {
    padding: 2rem 1.5rem;
  }

  .job-detail-title {
    font-size: 1.75rem;
  }

  .job-detail-field {
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
  }

  .job-detail-label {
    min-width: auto;
    font-size: 0.9rem;
  }

  .job-detail-value {
    font-size: 1rem;
  }

  .job-detail-content {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .job-detail-container {
    padding: 1rem 0.75rem;
  }

  .job-detail-post {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .job-detail-title {
    font-size: 1.5rem;
  }

  .job-detail-apply-link {
    font-size: 0.9rem;
    padding: 0.65rem 1.25rem;
  }
}

/* Categories Page Styles */
.categories-tree {
  display: grid;
  gap: 2rem;
}

.country-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.country-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f3f4f6;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
}

.category-item {
  margin: 0;
}

.category-link {
  display: block;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
}

.category-link:hover {
  background: #043cf7;
  color: white;
  border-color: #043cf7;
}

.category-link:hover::before {
  opacity: 1;
}

/* Responsive Categories Styles */
@media (max-width: 768px) {
  .categories-tree {
    gap: 1.5rem;
  }

  .country-section {
    padding: 1.5rem;
  }

  .category-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .country-section {
    padding: 1rem;
  }

  .country-title {
    font-size: 1.25rem;
  }
}

/* Feedback button */
/* Feedback notification - reuses existing slideInUp animation from line 1514 */
.feedback-notification {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: #111827;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: slideInUp 0.3s ease-out;
}

.feedback-notification.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

/* fadeOut animation for notification */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Responsive adjustments for feedback button */
@media (max-width: 768px) {
  .feedback-btn {
    display: none;
  }
}