/*
 * Site-wide finishing layer (loaded by menu/page_background.php, so every page
 * with a shared header gets it; Login / Registration keep their own design).
 *
 * Refines what is already there - no new colours, fonts, sizes or layout:
 *   1. consistent, gentle hover lifts on clickable cards (hover devices only)
 *   2. pressed / focus feedback on buttons and links
 *   3. one-time reveal of selected public-page sections (assets/js/polish.js)
 *   4. skeleton, empty and error states for the job listings
 * Everything that moves is switched off under prefers-reduced-motion.
 */

:root {
  --jn-polish-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --jn-polish-fast: 180ms;
}

/* ===== 1. Clickable cards ===== */
/* One lift height (2-3px) for every clickable card, only where a real hover
   exists. Index job cards had no lift; course and guide cards lifted 4-5px. */
@media (hover: hover) and (pointer: fine) {
  .job-card,
  .job-card2 {
    transition: transform var(--jn-polish-fast) var(--jn-polish-ease),
                box-shadow var(--jn-polish-fast) ease,
                border-color var(--jn-polish-fast) ease;
  }
  .job-card:hover,
  .job-card2:hover,
  .course-card:hover,
  .guide-card:hover {
    transform: translateY(-3px);
  }
  .flyer-option-card {
    transition: transform var(--jn-polish-fast) var(--jn-polish-ease),
                box-shadow var(--jn-polish-fast) ease,
                border-color var(--jn-polish-fast) ease;
  }
  .flyer-option-card:hover {
    transform: translateY(-2px);
  }
}

/* Touch screens: no "stuck" lifted card after a tap */
@media (hover: none) {
  .job-card:hover,
  .job-card2:hover,
  .course-card:hover,
  .guide-card:hover,
  .rec-jobs .rec-job-card:hover,
  .stat-card:hover,
  .dash-quick-item:hover,
  .portfolio-card-modern:hover,
  .cert-card-modern:hover {
    transform: none;
  }
}

/* Testimonials are read-only panels: keep their shadow change, but no lift,
   so they don't read as clickable */
.testimonial-card:hover {
  transform: none;
}

/* ===== 2. Buttons, links and focus ===== */
/* Pressed state: a 1px settle (size and position unchanged) */
.btn:not(:disabled):not(.disabled):not(.btn-close):active {
  transform: translateY(1px);
}

/* Keyboard focus that is always visible on links and custom controls that
   set no focus style of their own (zero specificity: never overrides one) */
:where(a, button, [role="button"], summary, .sidebar-item):focus-visible {
  outline: 2px solid #0866C6;
  outline-offset: 2px;
}

/* Plain text links inside content read as links */
:where(p, li, td, .form-text, .text-muted) > a:not([class]) {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--jn-polish-fast) ease, text-decoration-color var(--jn-polish-fast) ease;
}
:where(p, li, td, .form-text, .text-muted) > a:not([class]):hover {
  text-decoration: underline;
}

/* Dropdowns: one soft depth everywhere */
.dropdown-menu {
  border-color: rgba(8, 59, 102, 0.12);
  box-shadow: 0 10px 28px rgba(8, 59, 102, 0.14);
}
.dropdown-item {
  transition: background-color var(--jn-polish-fast) ease, color var(--jn-polish-fast) ease;
}

/* ===== 3. One-time section reveal (public pages) =====
   .jn-motion is only set by assets/js/polish.js, and only on elements that
   start below the fold - so without JavaScript nothing is ever hidden. */
.jn-motion .jn-reveal {
  opacity: 0;
  transform: translateY(14px);
}
.jn-motion .jn-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--jn-polish-ease), transform 480ms var(--jn-polish-ease);
  transition-delay: var(--jn-reveal-delay, 0ms);
}

/* ===== 4. Job listings: loading / empty / error ===== */
.jn-skel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: var(--jn-skel-h, 300px);
  padding: 16px 14px;
  background: #ffffff;
  border: 1px solid #e3eaee;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(8, 59, 102, 0.05);
}
.jn-skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #edf2f5 25%, #f6f9fb 40%, #edf2f5 60%);
  background-size: 300% 100%;
  animation: jnSkelShimmer 1.4s ease-in-out infinite;
}
.jn-skel--media  { height: 46%; min-height: 110px; border-radius: 8px; }
.jn-skel--title  { height: 16px; width: 72%; }
.jn-skel--line   { height: 12px; width: 54%; }
.jn-skel--short  { height: 12px; width: 36%; }
.jn-skel--button { height: 32px; width: 100%; margin-top: auto; border-radius: 8px; }

@keyframes jnSkelShimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* "No vacancies found." and load errors span the whole grid as a calm panel */
#job-listings > .text-center.text-muted,
#job-listings > p:only-child,
#job-listings > .jn-list-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 34px 16px;
  text-align: center;
  color: #5f6f78;
  background: #ffffff;
  border: 1px dashed #cfdbe3;
  border-radius: 12px;
}
#job-listings > .text-center.text-muted::before,
#job-listings > p:only-child::before,
#job-listings > .jn-list-error::before {
  display: block;
  margin-bottom: 8px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.4rem;
  color: #9fb3c0;
  content: "\f002";               /* magnifying glass */
}
#job-listings > .jn-list-error::before {
  content: "\f071";               /* warning */
  color: #c9a24a;
}
.jn-list-error .btn {
  margin-top: 10px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .job-card:hover,
  .job-card2:hover,
  .course-card:hover,
  .guide-card:hover,
  .flyer-option-card:hover,
  .btn:active {
    transform: none !important;
  }
  .jn-motion .jn-reveal {
    opacity: 1;
    transform: none;
  }
  .jn-skel {
    animation: none;
  }
}