/* ==========================================================
   Intone Skeleton Loader — skeleton.css  v1.3
   Prefix: sk-  (skeleton)

   v1.3: Removed page-level content-gating skeletons (home, hub,
   industries, careers) — those pages are fully server-rendered,
   so hiding real content behind .sk-loading only hurt LCP/CWV
   with no async benefit. Kept: shimmer/bone base, the
   #sk-page-overlay inter-page transition, and the CAREERS JOBS
   LISTING bones (page-careers-jobs.php genuinely waits on an
   external API).

   Usage
   ─────
   The sk-jobs-*.php includes in template-parts/skeleton/ render
   placeholders matching their live counterparts, toggled via
   explicit `hidden`-attribute JS once the job API responds.

   Theme-awareness
   ───────────────
   Bones use --t-bone-* tokens declared in theme-tokens.css so
   the shimmer adapts automatically in dark mode. No extra
   [data-theme="dark"] overrides needed here.

   Animation
   ─────────
   A single @keyframes sk-shimmer drives all bones via background-
   position sweep. Reduced-motion falls back to a static wash.
   ========================================================== */


/* ══════════════════════════════════════════════════════════
   SHIMMER KEYFRAME + BASE BONE
══════════════════════════════════════════════════════════ */

@keyframes sk-shimmer {
  0%   { background-position: -400% center; }
  100% { background-position:  400% center; }
}

.sk-bone {
  display: block;
  background: linear-gradient(
    90deg,
    var(--t-bone-from, rgba(0,0,0,0.04))  0%,
    var(--t-bone-mid,  rgba(0,0,0,0.10))  35%,
    var(--t-bone-from, rgba(0,0,0,0.04))  70%
  );
  background-size: 300% 100%;
  animation: sk-shimmer 1.8s ease-in-out infinite;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Reduced-motion: no animation, just a static tint */
@media (prefers-reduced-motion: reduce) {
  .sk-bone {
    animation: none;
    background: var(--t-bone-from, rgba(0,0,0,0.04));
  }
}

/* Rounded pill variant */
.sk-bone--pill { border-radius: 999px; }

/* Circle variant */
.sk-bone--circle { border-radius: 50%; }


/* ══════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════ */

.sk-page {
  background: var(--t-bg, #ffffff);
  overflow: hidden;
}


/* ══════════════════════════════════════════════════════════
   PAGE-TRANSITION OVERLAY  (#sk-page-overlay)
   Injected by skeleton-loader.js on same-origin link clicks.
   Uses --t-bg so it matches light or dark theme automatically.
══════════════════════════════════════════════════════════ */

#sk-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--t-bg, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

#sk-page-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* Respect reduced-motion: instant cut instead of fade */
@media (prefers-reduced-motion: reduce) {
  #sk-page-overlay { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   CAREERS JOBS LISTING  —  page-careers-jobs.php
   Mirrors .jobs-listing__header / .jobs-filter / .job-card /
   .jobs-pagination (page-careers-jobs.css). This page's real
   content is genuinely empty until an external API responds,
   so these bones are shown/hidden via explicit `hidden`-attribute
   toggles in page-careers-jobs.js rather than the .sk-loading/
   .sk-only convention — same sk-bone visual language, different
   trigger.
   Reused as-is for the job-detail page's "Latest Job Openings"
   teaser grid (header + card only, no filter/pagination there).
══════════════════════════════════════════════════════════ */

/* ── Header count ───────────────────────────────────── */
.sk-jobs-count { width: 96px; height: 15px; }

/* ── Filter bar ─────────────────────────────────────── */
.sk-jobs-filter {
  background: var(--t-surface, #fff);
  border: 1px solid var(--t-border, rgba(9,16,29,0.08));
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.sk-jobs-filter__search { width: 100%; height: 36px; border-radius: 0; }
.sk-jobs-filter__row { display: flex; gap: 14px; flex-wrap: wrap; }
.sk-jobs-filter__select { flex: 1; min-width: 160px; height: 36px; border-radius: 0; }
.sk-jobs-filter__clear  { width: 128px; height: 36px; border-radius: 0; flex-shrink: 0; }

/* ── Job card (grid item) ───────────────────────────── */
.sk-jobs-card {
  background: var(--t-surface, #fff);
  border: 1px solid var(--t-border, rgba(9,16,29,0.08));
  display: flex;
  flex-direction: column;
}
.sk-jobs-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 24px 14px;
}
.sk-jobs-card__title-group { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-jobs-card__title { width: 82%; height: 17px; }
.sk-jobs-card__sub   { width: 45%; height: 12px; }
.sk-jobs-card__badge { width: 64px; height: 20px; border-radius: 8px; flex-shrink: 0; }
.sk-jobs-card__body  { display: flex; flex-direction: column; gap: 8px; padding: 0 24px 14px; }
.sk-jobs-card__line  { width: 92%; height: 13px; }
.sk-jobs-card__line--short { width: 62%; }
.sk-jobs-card__footer {
  border-top: 1px solid var(--t-border, rgba(9,16,29,0.08));
  padding: 14px 24px;
}
.sk-jobs-card__meta { width: 56%; height: 12px; }

/* ── Pagination ─────────────────────────────────────── */
.sk-jobs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--t-border, rgba(9,16,29,0.08));
}
.sk-jobs-pagination__pages { display: flex; align-items: center; gap: 3px; }
.sk-jobs-pagination__box { width: 40px; height: 40px; border-radius: 4px; }


/* ══════════════════════════════════════════════════════════
   UTILITY — sk-loading / sk-only
   Reusable convention for any future genuinely-async section:
   wrap it in .sk-loading, mark skeleton bones .sk-only, and
   toggle the class once real content is ready. Not currently
   applied to any page — the job-listing pages use an explicit
   `hidden`-attribute toggle instead (see CAREERS JOBS LISTING
   above).
══════════════════════════════════════════════════════════ */

/* Skeletons are hidden by default */
.sk-only {
  display: none;
}

/* While page is loading: show skeletons, hide real sections */
.sk-loading .sk-only {
  display: block;
}