/* ==========================================================================
   MODERN.CSS — site-wide visual refresh for sanitecai.com
   Load LAST (after style.css/animate.css) on every page. Pure re-skin:
   no markup or JS changes required, and no position/display/transform
   rules for header/nav are touched so the existing hamburger-overlay menu
   (js/global.js) keeps working exactly as before.
   ========================================================================== */

/* ==========================================================================
   DARK MONOCHROME THEME — black / white / gray only, no color accent.
   Tokens keep their original names (--brand-blue, --white, etc.) even
   though the values below are no longer literally "blue" or "white" —
   renaming them would mean touching every rule in this file that
   references them. Treat --brand-blue/--brand-blue-dark as "the accent
   token" and --white as "the card/surface token" going forward.
   ========================================================================== */
:root {
  --brand-blue: #e4e4e4; /* accent (was blue) — near-white for links/highlights */
  --brand-blue-dark: #ffffff; /* accent hover — pure white */
  --brand-navy: #f2f2f2; /* heading/ink (was dark navy) — near-white on dark bg */
  --brand-navy-2: #0a0a0a; /* darkest tone, page background */
  --ink: #f2f2f2;
  --muted: #9a9a9a;
  --bg: #0a0a0a;
  --bg-soft: #1a1a1a; /* input/field background (was light gray) */
  --border: rgba(255, 255, 255, 0.14);
  --white: #141414; /* card/surface background (was white) */
  /* These two stay LIGHT on purpose: they sit on the same <img> element as
     the grayscale(1) invert(0.92) filter below, so the filter flips them
     dark along with the icon's ink — set a dark value here directly and
     the filter would flip it back light, canceling itself out. */
  --badge-bg: #f5f5f5;
  --badge-bg-hover: #e0e0e0;
  --radius: 10px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* Base page background + a fixed subtle grid, echoing the reference look */
html {
  background: var(--bg);
}
body {
  background: var(--bg);
}
/* style.css gives every .block (and its even-numbered siblings) an opaque
   white background by default — that's the single biggest reason the page
   would still look light despite the dark body: these blocks paint over
   it completely. Override both to the same near-black so sections read as
   one continuous dark page instead of alternating light stripes. Blocks
   with their own background (type-10 hero, type-14 overlay) already set
   background-color explicitly and win via source order below. */
.block,
.block:nth-child(2n) {
  background-color: var(--bg);
}
.subscription-form {
  background: rgba(255, 255, 255, 0.06);
}

/* All product/service/guarantee/why-choose-us/contact icons and the About
   page illustrations were drawn as dark-navy-on-light-badge artwork. Rather
   than hand-recolor ~30 SVG files, invert + desaturate them in place: this
   flips light-badge/dark-ink to dark-badge/light-ink while preserving each
   icon's internal contrast relationships exactly (like a photo negative),
   and grayscale strips out the blue for the fully-monochrome look. */
.block.type-1 .icon-entry img,
.block.type-3 .icon-entry img,
.text-image-box .image-wrapper img {
  filter: grayscale(1) invert(0.92);
}
/* Hero slider artwork is already dark-on-dark; just remove its blue tint. */
.block.type-10 .swiper-slide {
  filter: grayscale(1);
}

/* ---------- Home hero slider: make caption text static ----------
   style.css hides each slide's caption by default (opacity:0, left:500px)
   and only reveals it once Swiper adds a "swiper-slide-active" class to
   that slide — a JS-timing-dependent reveal that was intermittently
   never firing, leaving the slider caption permanently blank. Force it
   always visible instead; harmless because inactive slides are already
   moved off-screen by Swiper's own translateX carousel positioning, so
   only the current slide's text is ever actually on screen. */
.block.type-10 .content.text-entry {
  left: 0 !important;
  opacity: 1 !important;
}

/* Hero slide copy: headline, subheadline, CTA button + a staggered
   entrance (title, then subhead, then button) each time a slide becomes
   active, plus a glowing hover state on the CTA. */
.block.type-10 .hero-subhead {
  color: #c9c9c9;
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 480px;
  font-family: "Poppins", sans-serif, Arial;
}
.block.type-10 .hero-cta {
  display: inline-block;
  padding: 15px 34px;
  font-size: 14px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
}
.block.type-10 .hero-cta:hover {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.block.type-10 .hero-slide .title,
.block.type-10 .hero-slide .hero-subhead,
.block.type-10 .hero-slide .hero-cta {
  opacity: 0;
  animation: heroRise 0.7s ease-out forwards;
}
.block.type-10 .swiper-slide-active .hero-slide .title {
  animation-delay: 0.15s;
}
.block.type-10 .swiper-slide-active .hero-slide .hero-subhead {
  animation-delay: 0.35s;
}
.block.type-10 .swiper-slide-active .hero-slide .hero-cta {
  animation-delay: 0.55s;
}

/* ---------- Base typography ---------- */
/* style.css assigns fonts per-element via local @font-face names ("bold",
   "black", "regular", plus "Poppins") across dozens of individual
   selectors — there's no single place to redirect. Forcing Inter with
   !important on every element is blunt, but reliable, and safe here: the
   site has no icon-font glyphs (checked — .glyphicon rules exist in
   style.css but no page actually uses a glyphicon class). */
* {
  font-family: "Inter", "Poppins", sans-serif, Arial !important;
}
body {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.block-header .title,
h1.title,
h2.title {
  color: var(--brand-navy);
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 8px;
}
.block-header .title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-blue);
}
.block-header .text {
  color: var(--muted);
  font-size: 15px;
}
.block-header.text-left .title::after,
.block-header.align-left .title::after {
  left: 0;
  transform: none;
}

a {
  color: var(--brand-blue);
}
a:hover,
a:focus {
  color: var(--brand-blue-dark);
}

/* ---------- Header / nav (colors + hover only — no layout/position changes) ---------- */
header {
  background-color: rgba(10, 10, 10, 0.97);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
#logo-wrapper img,
#subheader-logo img {
  filter: grayscale(1) invert(1);
}
header.reduced {
  box-shadow: var(--shadow-sm);
}
.menu-entry a {
  color: var(--brand-navy);
  font-weight: 500;
  transition: color 0.15s ease;
}
.menu-entry a:hover,
.menu-entry.active a {
  color: var(--brand-blue);
}
.open-icon span {
  background-color: var(--brand-blue) !important;
}
.subheader {
  background-color: #050505;
}
.subheader-link {
  color: #b5b5b5;
}
.subheader-link.active,
.subheader-link:hover {
  color: #ffffff;
}

/* ---------- Buttons (site-wide) ---------- */
.button,
input[type="submit"],
#content-wrapper .button.type-1,
#content-wrapper .button.type-2 {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: none;
  border-radius: 6px;
  font-family: "Poppins", sans-serif, Arial;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.button:hover,
input[type="submit"]:hover,
#content-wrapper .button.type-1:hover,
#content-wrapper .button.type-2:hover {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  transform: translateY(-1px);
}

/* ---------- Client logo strips (white-background JPGs) ---------- */
/* These are real client logos on solid white JPG backgrounds — on a dark
   page a plain grayscale would leave an ugly white rectangle per logo, so
   invert them too (white bg -> black, blending with the page; the colored
   logo mark desaturates and lightens along with it). */
.block.type-4 .swiper-slide img,
.block.type-5 .swiper-slide img {
  filter: grayscale(1) invert(1);
  transition: opacity 0.2s ease;
  opacity: 0.85;
}
.block.type-4 .swiper-slide img:hover,
.block.type-5 .swiper-slide img:hover {
  opacity: 1;
}

/* ---------- Icon-entry cards (products/services/guarantee grids) ---------- */
.block.type-1 .icon-entry,
.block.type-3 .icon-entry {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px 28px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.block.type-1 .icon-entry:hover,
.block.type-3 .icon-entry:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-3px);
}
/* Icon + text laid out as a proper flex row instead of the old
   float-left-icon / fixed-margin-left-text hack. That hack assumed a bare
   70x70 icon; once the icon got a padded circular badge (below) it grew
   past the fixed margin, so wrapped text lines snapped back left of the
   title. Flex keeps icon and text aligned regardless of icon size. */
.block.type-1 .icon-entry,
.block.type-3 .icon-entry {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.block.type-1 .icon-entry img,
.block.type-3 .icon-entry img {
  /* type-1 gets a fixed 70x70 from style.css; type-3's base rule is only
     max-width:100%/height:auto with no px size, so a sourceless SVG (no
     width/height attribute) falls back to the browser's default replaced-
     element box (~300x150) and swallows the card. Pin both to the same
     70x70 badge size explicitly so type-3 can't blow up like that. */
  width: 70px;
  height: 70px;
  background: var(--badge-bg);
  border-radius: 50%;
  padding: 16px;
  box-sizing: content-box;
  flex: 0 0 auto;
  margin: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.25s ease, filter 0.25s ease;
}
.block.type-1 .icon-entry:hover img,
.block.type-3 .icon-entry:hover img {
  transform: rotate(-6deg) scale(1.08);
  background: var(--badge-bg-hover);
  filter: grayscale(1) invert(1);
}

/* Card entrance: swap in a livelier keyframe wherever WOW.js drives its
   usual fadeInUp on these cards, without touching fadeInUp elsewhere. */
@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.block.type-1 .icon-entry.fadeInUp.animated,
.block.type-3 .icon-entry.fadeInUp.animated {
  animation-name: cardPopIn;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.block.type-1 .icon-entry .content,
.block.type-3 .icon-entry .content {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.block.type-1 .icon-entry .title,
.block.type-3 .icon-entry .title {
  color: var(--brand-navy);
  font-weight: 600;
  padding-top: 0;
}
.block.type-1 .icon-entry .text,
.block.type-3 .icon-entry .text {
  color: var(--muted);
}

/* Equal card heights: make every icon-entry in a row match the tallest.
   Bootstrap 3's .col-* still sets width% regardless of display mode, so
   turning the .row into a flex row (align-items: stretch, the default)
   equalizes each card's height to the tallest one in that row. */
.block.type-1 .row,
.block.type-3 .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.block.type-1 .icon-entry,
.block.type-3 .icon-entry {
  box-sizing: border-box;
}

/* ---------- type-14 background/overlay sections (Why Choose Us, hero banners) ---------- */
.block.type-14 {
  position: relative;
  filter: grayscale(1);
}
.block.type-14::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(40, 40, 40, 0.8) 100%
  );
  z-index: 0;
}
.block.type-14 > img.center-image {
  z-index: -1;
}
.block.type-14 .container {
  position: relative;
  z-index: 1;
}
.block.type-14 .block-header .title,
.block.type-14 .block-header .title::after,
.block.type-14 .entry .content .title {
  color: #fff;
}
.block.type-14 .block-header .title::after {
  background: #ffffff;
}
.block.type-14 .block-header .text {
  color: #c9c9c9;
}
.block.type-14 .entry {
  margin-bottom: 22px;
}
.block.type-14 .entry .content {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.block.type-14 .entry .content .text {
  color: #cfcfcf;
}
.block.type-14 .image-wrapper img.img-circle {
  background: var(--badge-bg);
  padding: 10px;
  filter: grayscale(1) invert(0.92);
}
.block.type-14 .button-description,
.block.type-14 .button-description a {
  color: #fff;
}

/* ---------- text-image-box (About / Our Talents content panels) ---------- */
.text-image-box .cell-view {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 30px;
}
.text-image-box .title {
  color: var(--brand-navy);
}
.text-image-box .image-wrapper img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---------- Careers-hero-style banner reuse (careers.html brings its own, this covers any plain hero blocks elsewhere) ---------- */
.type-11-separator {
  opacity: 0.85;
}

/* ---------- Forms (contact form, newsletter, field-entry) ---------- */
.field-entry input,
.field-entry textarea,
.subscription-form input[type="email"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field-entry input,
.field-entry textarea {
  color: var(--ink);
}
.field-entry input:focus,
.field-entry textarea:focus,
.subscription-form input[type="email"]:focus {
  border-color: var(--brand-blue);
  background: #202020;
  outline: none;
}
.form-block {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.form-block img.form-icon {
  background: var(--badge-bg);
  filter: grayscale(1) invert(0.92);
}

/* ---------- Portfolio blog-entry cards ---------- */
.blog-entry {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 22px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-entry:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-entry .date {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 6px;
  text-align: center;
  padding: 6px 4px;
  font-weight: 600;
}
.blog-entry img {
  border-radius: 8px;
  filter: grayscale(1);
}

/* ---------- Footer ---------- */
footer {
  background: #050505;
  color: #b8b8b8;
}
.footer-entry .title {
  color: #ffffff;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.footer-entry .title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--brand-blue);
  border-radius: 3px;
}
.footer-entry .text,
.footer-entry ul li a {
  color: #9a9a9a;
}
.footer-entry ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-entry ul li {
  margin-bottom: 8px;
}
.footer-entry ul li a:hover {
  color: #ffffff;
}
.subscription-form input[type="email"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.subscription-form input[type="email"]::placeholder {
  color: #7d7d7d;
}
.subscription-form input[type="submit"] {
  background: var(--brand-blue);
}
.social-icon {
  border-radius: 50%;
  /* Each icon's brand color (Facebook blue, LinkedIn blue) is set via an
     inline style="" attribute in the markup, which normal CSS can't beat
     without !important — filter sidesteps that entirely by grayscaling
     whatever color is actually painted, inline or not. */
  filter: grayscale(1);
  transition: transform 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}
.social-icon:hover {
  filter: grayscale(0.4);
  transform: translateY(-3px);
  opacity: 0.92;
}
footer .copyright {
  color: #8b96ab;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  margin-top: 8px;
}

/* ---------- Loader ---------- */
#loader-wrapper {
  background: var(--bg);
}
#loader-wrapper .circle1,
#loader-wrapper .circle2 {
  border-color: var(--brand-blue) transparent transparent transparent;
}
#loader-wrapper .title {
  color: var(--brand-navy);
}

/* ---------- Misc: swiper client-logo strip, pagination dots ---------- */
.swiper-container .pagination span.active,
.swiper-container .pagination span.swiper-active-switch {
  background: var(--brand-blue);
}

@media (max-width: 767px) {
  .block.type-1 .icon-entry,
  .block.type-3 .icon-entry {
    margin-bottom: 18px;
  }
}

/* ==========================================================================
   LIGHT MODE — toggled by js/theme-toggle.js adding "light-mode" to <html>.
   Redefines the same tokens back to their original light values (custom
   properties cascade from :root/html to every descendant, so most of the
   site flips automatically); anything set as a literal color rather than
   a var(), plus every grayscale/invert filter, needs an explicit line
   here since those don't follow the variable cascade.
   Sections that are deliberately dark in BOTH themes — the hero slider,
   footer, subheader, and type-14 photo-overlay bands — are left alone;
   they were already dark accents within the original light theme too.
   ========================================================================== */
html.light-mode {
  --brand-blue: #0775b6;
  --brand-blue-dark: #05588a;
  --brand-navy: #232c3b;
  --brand-navy-2: #1a212e;
  --ink: #232c3b;
  --muted: #64748b;
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --border: #e6eaf1;
  --white: #ffffff;
  --badge-bg: #eaf4fb;
  --badge-bg-hover: #d9ecfa;
  --shadow-sm: 0 2px 10px rgba(23, 42, 70, 0.06);
  --shadow-md: 0 10px 30px rgba(23, 42, 70, 0.1);
}
html.light-mode .block {
  background-color: #fff;
}
html.light-mode .block:nth-child(2n) {
  background-color: #f9f9f9;
}
html.light-mode header {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html.light-mode #loader-wrapper {
  background: #fff;
}
html.light-mode .field-entry input:focus,
html.light-mode .field-entry textarea:focus,
html.light-mode .subscription-form input[type="email"]:focus {
  background: #fff;
}
html.light-mode .block.type-14::before {
  background: linear-gradient(
    135deg,
    rgba(35, 44, 59, 0.92) 0%,
    rgba(7, 117, 182, 0.85) 100%
  );
}
html.light-mode .icon-entry:hover,
html.light-mode .block.type-1 .icon-entry:hover,
html.light-mode .block.type-3 .icon-entry:hover {
  border-color: #d6e4f0;
}

/* Undo every grayscale/invert filter this theme relies on for dark mode —
   the artwork was drawn for a light badge/page to begin with. */
html.light-mode .block.type-1 .icon-entry img,
html.light-mode .block.type-3 .icon-entry img,
html.light-mode .text-image-box .image-wrapper img,
html.light-mode .form-block img.form-icon,
html.light-mode #logo-wrapper img,
html.light-mode #subheader-logo img,
html.light-mode .block.type-4 .swiper-slide img,
html.light-mode .block.type-5 .swiper-slide img,
html.light-mode .social-icon,
html.light-mode .blog-entry img,
html.light-mode .block.type-14,
html.light-mode .block.type-10 .swiper-slide {
  filter: none;
}
html.light-mode .block.type-1 .icon-entry:hover img,
html.light-mode .block.type-3 .icon-entry:hover img,
html.light-mode .social-icon:hover {
  filter: none;
}

/* careers.html's inline <style> hardcodes its hero/team-card colors for
   dark mode only (it has no --brand-* of its own — see that file) */
html.light-mode .careers-hero {
  background: #fff linear-gradient(135deg, #eef2f8 0%, #dbe6f5 100%);
  color: #232c3b;
}
html.light-mode .careers-hero h1 {
  color: #232c3b;
}
html.light-mode .team-card .photo {
  background: linear-gradient(160deg, #2f4a72 0%, #0775b6 100%);
  color: #fff;
}
html.light-mode .team-card .name-bar {
  background: #0775b6;
  color: #fff;
}
html.light-mode .team-card .role-bar {
  background: #fff;
  color: #444;
  border: 1px solid #e7eaf1;
  border-top: none;
}

/* ---------- Theme toggle button ---------- */
.theme-toggle-entry {
  display: flex;
  align-items: center;
}
.theme-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.3s ease,
    border-color 0.2s ease;
}
.theme-toggle-btn:hover {
  background-color: rgba(128, 128, 128, 0.15);
  transform: rotate(20deg);
}
.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ---------- Careers: job search + listing ----------
   Built with theme tokens (not hardcoded colors) so it flips correctly
   with the dark/light toggle instead of drifting out of sync with it —
   the earlier hardcoded version of this had exactly that bug. */
.jobs-search {
  padding: 45px 0 10px;
}
.search-panel {
  border: 2px solid var(--brand-blue);
  border-radius: var(--radius);
  overflow: hidden;
}
.search-panel .search-row {
  display: flex;
  flex-wrap: wrap;
}
.search-panel .search-row + .search-row {
  border-top: 2px solid var(--brand-blue);
}
.search-panel .search-cell {
  flex: 1 1 50%;
  position: relative;
}
.search-panel .search-cell + .search-cell {
  border-left: 2px solid var(--brand-blue);
}
.search-panel input[type="text"],
.search-panel select {
  width: 100%;
  height: 52px;
  border: none;
  background: var(--bg-soft);
  color: var(--ink);
  padding: 0 18px;
  font-size: 14px;
}
.search-panel input[type="text"]::placeholder {
  color: var(--muted);
}
.search-panel input[type="text"]:focus,
.search-panel select:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
}
.search-panel button {
  width: 100%;
  border: none;
  background: var(--brand-blue);
  color: #fff;
  height: 52px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.search-panel button:hover {
  background: var(--brand-blue-dark);
}

.type-checks {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
}
.type-checks li {
  font-size: 14px;
  color: var(--ink);
}
.type-checks label {
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.type-checks input {
  accent-color: var(--brand-blue);
}
.jobs-meta-row {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 15px;
}

.job-list {
  list-style: none;
  margin: 0;
  padding: 0 0 50px;
}
.job-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
  transition: background-color 0.15s ease;
}
.job-list li.job-item:nth-child(2n) {
  background: var(--bg-soft);
}
.job-item:hover {
  background: rgba(128, 128, 128, 0.12);
}
.job-item .job-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--badge-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
html.light-mode .job-item .job-icon {
  filter: none;
}
.job-item .job-icon svg {
  width: 20px;
  height: 20px;
}
.job-item .job-main {
  flex: 1 1 260px;
  min-width: 0;
}
.job-item .job-main h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 3px;
}
.job-item .job-main h3 a {
  color: var(--ink);
  text-decoration: none;
}
.job-item .job-main h3 a:hover {
  color: var(--brand-blue);
}
.job-item .job-loc {
  font-size: 13px;
  color: var(--muted);
}
.job-item .job-tag {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 90px;
  text-align: right;
}
.job-tag.full-time {
  color: #2e8b57;
}
.job-tag.part-time {
  color: #8b5cf6;
}
.job-tag.freelance {
  color: #d97706;
}
.job-tag.internship {
  color: #0891b2;
}
.job-tag.temporary {
  color: #dc2626;
}
.job-item .job-apply {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  white-space: nowrap;
}
.job-item .job-apply:hover {
  text-decoration: underline;
}
.no-jobs {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  background: var(--white);
  display: none;
}
@media (max-width: 700px) {
  .job-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .job-item .job-tag {
    text-align: left;
  }
}