/* =========================================================================
   GFI Jobs — jobs.globalfreightindex.com
   Standalone stylesheet, isolated from the main globalfreightindex.com
   "common" CSS so this subdomain can deploy independently.

   Design tokens below mirror design-tokens.json (color / spacing / radius /
   typography / breakpoints) — an original specification using GFI's own
   brand colors, not values extracted from any third-party site.
   ========================================================================= */

:root{
  /* color */
  --primary:#0057B8; --primary-hover:#004691;
  --accent:#D4A017; --accent-hover:#B4870F;
  --heading:#101A2B; --body-c:#3E4A58;
  --page-bg:#FFFFFF; --section-bg:#F8FAFC; --border:#E4E8EE;
  --surface-dark:#0D1B2A;
  /* Flat hero blue sampled from the Indeed reference, applied consistently
     to every dark section that should read as "the brand blue" (hero + final CTA). */
  --hero-blue:#003B8E; --surface-dark-2:#003B8E;
  --on-dark:#FFFFFF; --on-dark-muted:#AEB9CC;
  --teal:#12B0A0; --teal-tint:#E1F5EE; --teal-deep:#0E6B60;
  --success:#16A34A;
  --focus-ring:#2E8BC0;
  /* spacing (4px base unit) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-14:56px; --sp-18:72px; --sp-24:96px;
  /* radius */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  /* shadow */
  --shadow-sm:0 2px 8px rgba(16,26,43,.06); --shadow-md:0 8px 24px rgba(16,26,43,.08); --shadow-lg:0 20px 48px rgba(16,26,43,.12);
  --contentw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--heading);
  background:var(--page-bg); line-height:1.6; -webkit-font-smoothing:antialiased; font-size:16px;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,.font-display{font-family:'Manrope',system-ui,sans-serif; font-weight:800; letter-spacing:-0.01em; margin:0 0 .5em; color:var(--heading); line-height:1.2;}
p{margin:0 0 1em; color:var(--body-c);}
.wrap{max-width:var(--contentw); margin:0 auto; padding:0 24px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Visible, consistent focus state for keyboard users */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 22px; border-radius:var(--radius-sm); font-weight:700; font-size:15px;
  border:1.5px solid transparent; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-sm{min-height:40px; padding:9px 16px; font-size:14px;}
.btn-lg{min-height:48px; padding:14px 28px; font-size:16px;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-hover);}
.btn-accent{background:var(--accent); color:var(--surface-dark);}
.btn-accent:hover{background:var(--accent-hover);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--heading);}
.btn-outline:hover{border-color:var(--primary); color:var(--primary);}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,.45); color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.08); border-color:#fff;}

.label{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--accent-hover);
  background:#FBF0D9; padding:6px 14px; border-radius:var(--radius-pill);
}
.label.on-dark{color:var(--accent); background:rgba(212,160,23,.14);}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px; min-height:72px;}
.logo{display:flex; align-items:center; gap:8px;}
.logo img{height:34px; width:auto;}

/* Animated "» Jobs" mark next to the wordmark, marking this as the GFI Jobs portal */
.logo-jobs{display:inline-flex; align-items:center; gap:4px; font-family:'Manrope',sans-serif; font-weight:800; font-size:19px; color:var(--primary); line-height:1;}
.logo-jobs .flags{display:inline-flex; gap:1px; color:var(--accent);}
.logo-jobs .flags span{display:inline-block; animation:flagWave 1.6s ease-in-out infinite;}
.logo-jobs .flags span:nth-child(2){animation-delay:.18s;}
.logo-jobs .flags span:nth-child(3){animation-delay:.36s;}
@keyframes flagWave{
  0%,100%{opacity:.3; transform:translateX(0);}
  50%{opacity:1; transform:translateX(3px);}
}
.primary-nav{display:flex; align-items:center; gap:28px; margin-left:8px;}
.primary-nav a{font-size:15px; font-weight:600; padding:8px 0;}
.primary-nav a:hover{color:var(--primary);}
.header-actions{display:flex; align-items:center; gap:12px;}
.header-actions .divider{width:1px; height:24px; background:var(--border); margin:0 4px;}
.burger{display:none; width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--border); background:#fff; align-items:center; justify-content:center; cursor:pointer;}
.burger span, .burger span::before, .burger span::after{content:""; display:block; width:18px; height:2px; background:var(--heading); position:relative;}
.burger span::before{position:absolute; top:-6px;}
.burger span::after{position:absolute; top:6px;}

.mobile-nav{
  position:fixed; top:0; right:-320px; width:300px; max-width:85vw; height:100%; background:#fff;
  box-shadow:var(--shadow-lg); z-index:90; transition:right .2s ease; padding:20px; overflow-y:auto;
}
.mobile-nav.open{right:0;}
.mobile-nav a{display:block; padding:14px 4px; font-weight:600; border-bottom:1px solid var(--border);}
.mobile-nav .m-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.scrim{position:fixed; inset:0; background:rgba(13,27,42,.45); z-index:80; opacity:0; visibility:hidden; transition:opacity .2s;}
.scrim.open{opacity:1; visibility:visible;}

@media (max-width:900px){
  .primary-nav{display:none;}
  .header-actions .hide-mobile{display:none;}
  .burger{display:flex;}
}

/* ---------- Hero ---------- */
/* Flat, restrained background — no decorative animation or heavy gradient.
   Uses --hero-blue so every dark section shares one consistent brand blue. */
.hero{position:relative; background:var(--hero-blue); color:var(--on-dark); padding:64px 0 72px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
/* Lighter-weight hero headline (thin/regular, not the bold Manrope display
   style used elsewhere) — closer to the reference's light, airy feel. */
.hero-copy h1{
  font-family:'Inter',system-ui,sans-serif; font-weight:300; letter-spacing:-0.01em;
  font-size:clamp(32px,4.2vw,52px); color:#fff; margin-bottom:18px;
}
.hero-copy h1 .accent{color:var(--accent); font-style:italic; font-weight:400;}
.hero-copy p.lead{font-size:18px; color:var(--on-dark-muted); max-width:540px; margin-bottom:28px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px;}
.hero-trust{font-size:13.5px; color:var(--on-dark-muted); display:flex; align-items:center; gap:8px;}
.hero-trust svg{flex:none;}

/* Static product-card visual — a real UI mockup, not a decorative blob */
.hero-visual{position:relative;}
.job-card{
  background:#fff; color:var(--heading); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:22px; max-width:420px; margin:0 auto;
}
.job-card .jc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.job-card .jc-head span.tag{font-size:12px; font-weight:700; background:#FBF0D9; color:var(--accent-hover); padding:4px 10px; border-radius:var(--radius-pill);}
.jc-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border);}
.jc-row:first-of-type{border-top:none;}
.jc-icon{width:40px; height:40px; border-radius:var(--radius-sm); background:var(--section-bg); display:flex; align-items:center; justify-content:center; flex:none; color:var(--primary);}
.jc-info strong{display:block; font-size:14.5px;}
.jc-info span{font-size:12.5px; color:var(--body-c);}
.jc-foot{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:13px; color:var(--body-c);}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero-copy p.lead{margin-inline:auto;}
  .hero-ctas, .hero-trust{justify-content:center;}
  .hero-visual{margin-top:12px;}
}

/* ---------- Stat strip (Job Openings / New Candidates) ---------- */
.stat-strip{padding:56px 0; background:var(--section-bg); border-bottom:1px solid var(--border);}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.stat-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-sm); transition:box-shadow .15s;
}
.stat-card:hover{box-shadow:var(--shadow-md);}
.stat-card .sc-icon{width:48px; height:48px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;}
.stat-card.jobs .sc-icon{background:var(--primary); color:#fff;}
.stat-card.cand .sc-icon{background:var(--accent); color:var(--surface-dark);}
.stat-card h3{font-size:20px; margin-bottom:2px;}
.stat-card p{font-size:15px; margin-bottom:6px;}
.stat-card .sc-link{font-weight:700; font-size:14.5px; color:var(--primary); display:inline-flex; align-items:center; gap:6px;}
.stat-card .sc-link:hover{text-decoration:underline;}
@media (max-width:760px){.stat-grid{grid-template-columns:1fr;}}

/* ---------- Profile banner ---------- */
.profile-banner{
  background:var(--teal-deep); color:#fff;
  border-radius:var(--radius-lg); padding:36px 40px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin:64px auto; max-width:var(--contentw);
}
.pb-text h3{color:#fff; font-size:22px; margin-bottom:6px;}
.pb-text p{color:rgba(255,255,255,.85); margin:0; max-width:520px;}

/* ---------- Talent match / feature showcase (static, no blob) ---------- */
.match-section{padding:72px 0;}
.match-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.match-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:22px; max-width:400px; margin:0 auto;
}
.match-tabs{display:flex; gap:6px; background:var(--section-bg); border-radius:var(--radius-pill); padding:4px; margin-bottom:16px;}
.match-tabs button{flex:1; border:none; background:transparent; min-height:38px; padding:0 10px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; color:var(--body-c); cursor:pointer;}
.match-tabs button.active{background:#fff; color:var(--primary); box-shadow:var(--shadow-sm);}
.match-count{font-size:13px; color:var(--body-c); margin-bottom:12px;}
.match-count strong{color:var(--heading);}
.candidate-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border);}
.candidate-row:first-of-type{border-top:none;}
.candidate-avatar{width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none;}
.candidate-info{flex:1; min-width:0;}
.candidate-info strong{display:block; font-size:14.5px;}
.candidate-info span{font-size:12.5px; color:var(--body-c);}
.candidate-tags{display:flex; gap:6px; margin-top:4px; flex-wrap:wrap;}
.candidate-tags .tag{font-size:11px; font-weight:700; background:var(--teal-tint); color:var(--teal-deep); padding:3px 8px; border-radius:var(--radius-pill);}
.candidate-cta{flex:none; background:var(--primary); color:#fff; font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:var(--radius-sm); min-height:36px; display:inline-flex; align-items:center;}

.match-copy .section-head{margin-bottom:18px;}
.match-copy p{font-size:16.5px; max-width:480px;}
.match-copy .sc-link{font-weight:700; color:var(--primary); display:inline-flex; align-items:center; gap:6px; margin-top:6px;}

@media (max-width:900px){
  .match-grid{grid-template-columns:1fr;}
  .match-card{margin-top:12px;}
}

/* ---------- Feature Showcase (reusable, alternating) ----------
   Option B pattern: organic peach shape behind a floating product
   card, large light-weight headline + text CTA on the opposite side.
   Alternate the illustration side with the .reverse modifier. */
.feature-showcase{padding:80px 0; background:var(--page-bg);}
.feature-showcase.on-section{background:var(--section-bg);}
.fs-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.feature-showcase.reverse .fs-illustration{order:2;}
.feature-showcase.reverse .fs-content{order:1;}

.fs-illustration{position:relative; display:flex; align-items:center; justify-content:center; min-height:380px;}
.fs-peach{
  position:absolute; width:84%; height:84%; background:#FBE0C5;
  border-radius:48% 52% 55% 45% / 55% 45% 55% 45%; z-index:0;
}
.fs-card-primary{
  position:relative; z-index:1; background:#fff; border-radius:10px;
  box-shadow:0 5px 12px rgba(0,0,0,.15); padding:20px; width:min(360px,88%);
}
.fs-card-primary .fsc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.fsc-head strong{font-size:16px; font-weight:600; color:var(--heading);}
.fsc-head span.fsc-meta{font-size:12.5px; color:#687485;}
.fsc-divider{height:1px; background:var(--border); margin:2px 0;}
.fs-card-primary .candidate-row{padding:12px 0;}
.fs-card-secondary{
  position:absolute; z-index:2; background:#fff; border-radius:10px;
  box-shadow:0 5px 12px rgba(0,0,0,.15); padding:14px 16px; width:188px;
  bottom:-16px; right:-18px;
}
.fs-card-secondary .fscs-num{font-family:'Manrope',sans-serif; font-weight:800; font-size:22px; color:var(--teal-deep);}
.fs-card-secondary .fscs-label{font-size:12px; color:#687485; margin-top:2px;}

.fs-content{max-width:460px;}
.fs-content .label{margin-bottom:16px;}
.fs-content h2{font-weight:600; font-size:clamp(26px,3.4vw,36px); letter-spacing:0; line-height:1.28; color:#242424; margin-bottom:14px;}
.fs-content p{font-size:18px; line-height:1.65; color:#515151; margin-bottom:22px;}
.fs-cta{display:inline-flex; align-items:center; gap:8px; color:#155EEF; font-weight:600; font-size:17px;}
.fs-cta svg{transition:transform .15s ease;}
.fs-cta:hover{text-decoration:underline;}
.fs-cta:hover svg{transform:translateX(4px);}

@media (max-width:900px){
  .fs-grid{grid-template-columns:1fr; gap:36px;}
  .feature-showcase.reverse .fs-illustration,
  .feature-showcase .fs-illustration{order:1;}
  .feature-showcase.reverse .fs-content,
  .feature-showcase .fs-content{order:2;}
  .fs-content{max-width:none; text-align:left;}
  .fs-illustration{min-height:320px;}
  .fs-card-secondary{right:4%;}
}

/* ---------- Section head ---------- */
.section-head{max-width:640px; margin:0 auto 40px; text-align:center;}
.section-head.left{text-align:left; margin:0 0 18px;}
.section-head h2{font-size:clamp(24px,3vw,34px);}
.section-head p{font-size:16.5px;}

/* ---------- How it works ---------- */
.hiw{padding:72px 0; background:var(--section-bg);}
.hiw-tabs{display:flex; justify-content:center; gap:10px; margin-bottom:36px;}
.hiw-tab{min-height:44px; padding:0 22px; border-radius:var(--radius-pill); border:1.5px solid var(--border); background:#fff; font-weight:700; font-size:14.5px; cursor:pointer; color:var(--body-c);}
.hiw-tab.active{background:var(--surface-dark); color:#fff; border-color:var(--surface-dark);}
.hiw-panel{display:none;}
.hiw-panel.active{display:block;}
.hiw-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.hiw-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; position:relative;}
.hiw-step{position:absolute; top:-12px; left:20px; background:var(--accent); color:var(--surface-dark); font-weight:800; font-size:13px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.hc-icon{width:42px; height:42px; border-radius:var(--radius-sm); background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.hiw-card h4{font-size:16px; margin-bottom:6px;}
.hiw-card p{font-size:14px; margin:0;}
@media (max-width:900px){.hiw-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.hiw-grid{grid-template-columns:1fr;}}

/* ---------- Trust strip ---------- */
.trust{padding:56px 0;}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.trust-grid .t-num{font-family:'Manrope',sans-serif; font-weight:800; font-size:28px; color:var(--primary);}
.trust-grid .t-label{font-size:14px; color:var(--body-c); margin-top:4px;}
@media (max-width:760px){.trust-grid{grid-template-columns:1fr 1fr;}}

/* ---------- FAQ ---------- */
.faq{padding:72px 0; background:var(--section-bg);}
.faq-wrap{max-width:760px; margin:0 auto;}
.faq-item{background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:12px; overflow:hidden;}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; min-height:56px; padding:14px 20px; cursor:pointer; font-weight:700; font-size:15.5px; background:none; border:none; color:var(--heading); font-family:inherit;}
.faq-q .chev{transition:transform .15s; flex:none;}
.faq-item.open .chev{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .2s ease; padding:0 20px;}
.faq-item.open .faq-a{max-height:240px; padding-bottom:18px;}
.faq-a p{font-size:15px; margin:0;}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--surface-dark-2); color:#fff; padding:64px 0; text-align:center;}
.final-cta h2{color:#fff; font-size:clamp(24px,3vw,32px);}
.final-cta p{color:var(--on-dark-muted); max-width:520px; margin:0 auto 26px;}
.final-cta .hero-ctas{justify-content:center;}

/* ---------- Page header / breadcrumb (listing & detail pages) ---------- */
.page-header{background:var(--section-bg); border-bottom:1px solid var(--border); padding:28px 0;}
.breadcrumb{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--body-c); margin-bottom:10px; flex-wrap:wrap;}
.breadcrumb a{color:var(--primary); font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{color:#AAB2BD;}
.page-header h1{font-size:clamp(24px,3vw,32px); margin-bottom:4px;}
.page-header p{margin:0; font-size:15.5px;}

/* ---------- Filter bar ---------- */
.filter-bar{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px; margin:-28px auto 36px; max-width:var(--contentw); position:relative; z-index:2; display:flex; gap:12px; flex-wrap:wrap;}
.filter-bar input[type="search"], .filter-bar select{
  flex:1; min-width:160px; min-height:46px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:0 14px; font-size:15px; font-family:inherit; color:var(--heading); background:#fff;
}
.filter-bar input[type="search"]{flex:2; min-width:220px;}
.filter-bar input:focus, .filter-bar select:focus{outline:none; border-color:var(--primary);}
.filter-count{font-size:14px; color:var(--body-c); margin-bottom:18px;}
.filter-count strong{color:var(--heading);}

/* ---------- Listing grid (jobs & candidates) ---------- */
.listing{padding:0 0 72px;}
.listing-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.list-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); transition:box-shadow .15s;}
.list-card:hover{box-shadow:var(--shadow-md);}
.list-card[hidden]{display:none;}
.lc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;}
.lc-title{font-size:17.5px; font-weight:700; margin:0 0 4px; color:var(--heading);}
.lc-title a{color:inherit;}
.lc-title a:hover{color:var(--primary);}
.lc-meta{font-size:13.5px; color:var(--body-c); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.lc-meta .dot{width:3px; height:3px; border-radius:50%; background:#AAB2BD;}
.lc-badge{flex:none; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); background:#FBF0D9; color:var(--accent-hover); white-space:nowrap;}
.lc-badge.new{background:var(--teal-tint); color:var(--teal-deep);}
.lc-desc{font-size:14.5px; margin:10px 0 14px;}
.lc-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.lc-tags .tag{font-size:11.5px; font-weight:700; background:var(--section-bg); border:1px solid var(--border); color:var(--body-c); padding:4px 10px; border-radius:var(--radius-pill);}
.lc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--border); padding-top:14px;}
.lc-foot .lc-posted{font-size:12.5px; color:#8A93A3;}
.list-card.candidate .lc-top{align-items:center;}
.lc-avatar{width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex:none;}

.empty-state{text-align:center; padding:48px 20px; color:var(--body-c);}
.empty-state[hidden]{display:none;}

@media (max-width:760px){.listing-grid{grid-template-columns:1fr;}}

/* ---------- Detail page ---------- */
.detail-layout{display:grid; grid-template-columns:2fr 1fr; gap:36px; padding:40px 0 72px; align-items:start;}
.detail-main{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px;}
.detail-main h2{font-size:19px; margin:28px 0 10px;}
.detail-main h2:first-child{margin-top:0;}
.detail-main ul{margin:0 0 1em; padding-left:20px; color:var(--body-c);}
.detail-main li{margin-bottom:6px;}
.detail-side{position:sticky; top:88px; display:flex; flex-direction:column; gap:18px;}
.side-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);}
.side-card h3{font-size:15px; margin-bottom:14px;}
.side-row{display:flex; align-items:flex-start; gap:10px; font-size:14px; margin-bottom:12px;}
.side-row:last-child{margin-bottom:0;}
.side-row .si{width:34px; height:34px; border-radius:var(--radius-sm); background:var(--section-bg); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
.side-row strong{display:block; color:var(--heading);}
.side-row span{color:var(--body-c); font-size:13px;}
.apply-card{background:var(--hero-blue); color:#fff; text-align:center;}
.apply-card h3{color:#fff;}
.apply-card p{color:var(--on-dark-muted); font-size:13.5px;}
@media (max-width:900px){.detail-layout{grid-template-columns:1fr;} .detail-side{position:static;}}

/* ---------- Footer ---------- */
footer{background:var(--surface-dark); color:var(--on-dark-muted); padding:56px 0 24px;}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-logo-chip{display:inline-flex; background:#fff; padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:14px;}
.footer-logo-chip img{height:26px;}
.footer-brand p{font-size:14px; max-width:260px;}
.footer-col h5{color:#fff; font-size:14px; margin-bottom:14px; font-weight:700;}
.footer-col a{display:block; font-size:14px; padding:6px 0; color:var(--on-dark-muted);}
.footer-col a:hover{color:#fff; text-decoration:underline;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:20px; font-size:13px;}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* =========================================================================
   Application layer — flash bar, forms, pagination (used by the live portal)
   ========================================================================= */
.flash-bar{padding:12px 0; font-size:14.5px; font-weight:500; border-bottom:1px solid var(--border);}
.flash-bar.ok{background:var(--teal-tint); color:var(--teal-deep);}
.flash-bar.bad{background:#FDECEC; color:#B42318;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

.form-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:32px; max-width:560px; margin:40px auto 72px;}
.form-card h2{font-size:22px; margin:0 0 6px;}
.form-card .sub{color:var(--body-c); font-size:14.5px; margin:0 0 22px;}
.f-field{margin-bottom:16px;}
.f-field label{display:block; font-size:13.5px; font-weight:700; color:var(--heading); margin-bottom:6px;}
.f-field input[type=text], .f-field input[type=email], .f-field input[type=password], .f-field input[type=tel], .f-field textarea, .f-field input[type=file]{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; font-size:15px; color:var(--heading); background:#fff;}
.f-field textarea{min-height:110px; resize:vertical;}
.f-field input:focus, .f-field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,87,184,.12);}
.f-field .hint{font-size:12.5px; color:#6B7686; margin-top:4px;}
.f-field .err{font-size:13px; color:#B42318; margin-top:4px;}
.f-check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--body-c); margin-bottom:18px;}
.f-check input{margin-top:3px;}
.f-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-card .btn{width:100%;}
.form-foot{text-align:center; font-size:14px; color:var(--body-c); margin-top:16px;}
.form-foot a{color:var(--primary); font-weight:600;}

.pager{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:32px 0 0;}
.pager a, .pager span{padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius-pill); font-size:14px; font-weight:600; color:var(--heading); background:#fff;}
.pager a:hover{border-color:var(--primary); color:var(--primary);}
.pager .on{background:var(--primary); border-color:var(--primary); color:#fff;}
.pager .gap{border:none; background:none;}

.filter-bar .btn{flex:none;}
.filter-bar form, form.filter-bar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; width:100%;}
.filter-bar select{flex:1; min-width:150px;}
.filter-clear{font-size:13.5px; color:var(--primary); font-weight:600;}
.illustrative{font-size:11.5px; color:#8A93A3; text-align:center; margin-top:10px;}

.apply-form{text-align:left; margin-top:14px;}
.apply-form label{display:block; color:#fff; font-size:13px; font-weight:600; margin:10px 0 4px;}
.apply-form textarea, .apply-form input[type=file]{width:100%; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:14px;}
.apply-form textarea{min-height:90px; resize:vertical;}
.apply-form .hint{font-size:12px; color:var(--on-dark-muted); margin-top:4px;}
.apply-card .note{font-size:12.5px; color:var(--on-dark-muted); margin-top:10px;}
.apply-card a.plain{color:#fff; text-decoration:underline;}
.btn-block{width:100%;}
.save-btn{background:none; border:none; color:var(--on-dark-muted); font:inherit; font-size:13px; cursor:pointer; margin-top:10px; text-decoration:underline;}
.job-prose{white-space:pre-line;}
.salary-line{font-weight:700; color:var(--teal-deep);}
@media (max-width:640px){.form-card{margin:24px 16px 56px; padding:22px;}}

/* Keep the logo + "Jobs" mark visible on narrow phones */
@media (max-width:480px){.header-actions .btn-primary{display:none;}}