/* ==========================================================================
   Candidate Finder — Pop Edition (front theme)
   Ported from design-mockups/candidate-finder-brutalist.html
   Fonts: Archivo Black (display) + Archivo (body) + Space Mono (labels)

   Colour model: everything that should flip between light and dark reads from
   the tokens below. ct-night.css only re-declares those tokens, so the dark
   switch (which swaps the ct-*.css <link>) re-skins the whole theme.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* flippable */
  --bg:#fffdf3;
  --card:#ffffff;
  --ink:#0b0b0c;
  --muted:#5c5c60;
  --soft:#46464a;
  --dash:#d6d6d0;
  --bar:#eee9d8;
  --line:#e7e1cf;
  --dot:rgba(11,11,12,.14);

  /* fixed (do not flip) */
  --ink-solid:#0b0b0c;
  --on-accent:#0b0b0c;
  --pink:#ff4d8d;
  --cyan:#2ee6d6;
  --yellow:#ffd23f;
  --purple:#8b5cf6;
  --white:#ffffff;
  --marquee-bg:#0b0b0c;
  --marquee-fg:#ffd23f;
  --footer-bg:#0b0b0c;
  --footer-fg:#cfcfc8;

  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body.brut-body{
  font-family:"Archivo",system-ui,sans-serif;
  background:
    radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0) 0 0/22px 22px,
    var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
body.brut-body h1,body.brut-body h2,body.brut-body h3,body.brut-body h4,body.brut-body h5,body.brut-body h6,
body.brut-body .section-heading h2,body.brut-body .section-heading-style-alpha h2,
body.brut-body .section-heading-style-gamma h2{
  font-family:"Archivo Black",Impact,sans-serif;
  letter-spacing:-.02em;
  line-height:1.05;
  text-transform:uppercase;
  color:var(--ink);
}
body.brut-body .mono{font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
body.brut-body ::selection{background:var(--pink);color:#fff}
body.brut-body a{color:var(--ink)}
body.brut-body a:hover{color:var(--pink)}

/* ---------- primitives ---------- */
.brut-card,.brut-flat{background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease}
.sticker{
  display:inline-block;background:var(--yellow);border:3px solid var(--ink);border-radius:0;
  padding:.34rem .6rem;font-family:"Space Mono",monospace;font-weight:700;
  text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;
  box-shadow:var(--shadow-sm);transform:rotate(-6deg);color:var(--on-accent);
}
.hl{background:var(--yellow);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:0 .18em;display:inline-block;transform:rotate(-1.2deg);color:var(--on-accent)}
.hl-pink{background:var(--pink);color:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:0 .18em;display:inline-block;transform:rotate(1.2deg)}
.chip{display:inline-block;border:3px solid var(--ink);background:var(--card);color:var(--ink);font-family:"Space Mono",monospace;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .45rem;margin:.15rem .25rem 0 0;line-height:1.4}
.chip.f{background:var(--yellow);color:var(--on-accent)}
.bg-pink{background:var(--pink)!important;color:#fff}
.bg-cyan{background:var(--cyan)!important;color:var(--on-accent)}
.bg-yellow{background:var(--yellow)!important;color:var(--on-accent)}
.bg-purple{background:var(--purple)!important;color:#fff}

/* ---------- buttons ---------- */
body.brut-body .btn{
  border-radius:0!important;font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.76rem;padding:.75rem 1.15rem;border:3px solid var(--ink)!important;
  box-shadow:var(--shadow-sm)!important;transition:transform .16s ease,box-shadow .16s ease;color:var(--ink);background:var(--card);
}
/* NOTE: deliberately no `color` in this rule. ~30 legacy style.css hovers repaint buttons to
   --site-btn-highlight-bg (near-black) paired with --site-btn-font-highlight-color (#fff),
   which is readable. A colour here out-specifies those, forcing --ink text onto that dark
   background so the label vanished. Leaving it unset keeps the legacy pair, while plain
   buttons still inherit --ink from the .btn rule above. */
body.brut-body .btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)!important}
body.brut-body .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)!important}
body.brut-body .btn-sm{font-size:.68rem;padding:.5rem .8rem}
body.brut-body .btn-lg{font-size:.86rem;padding:.95rem 1.4rem}
.btn-ink,body.brut-body .btn-ink,body.brut-body .btn-primary{background:var(--ink-solid)!important;color:var(--yellow)!important}
.btn-pink{background:var(--pink)!important;color:#fff!important}
.btn-yellow{background:var(--yellow)!important;color:var(--on-accent)!important}
.btn-cyan{background:var(--cyan)!important;color:var(--on-accent)!important}
.btn-white{background:#fff!important;color:var(--on-accent)!important}

/* ---------- marquee ---------- */
.marquee{background:var(--marquee-bg);color:var(--marquee-fg);border-bottom:3px solid var(--ink);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:brut-scroll 90s linear infinite}
.marquee-group{display:inline-flex;align-items:center}
.marquee-item{margin-right:2.2rem;padding:.55rem 0;font-family:"Space Mono",monospace;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.7rem}
@keyframes brut-scroll{to{transform:translateX(-50%)}}
.marquee.pink .marquee-track{animation-duration:30s}
.marquee.pink{background:var(--pink);color:#fff}
body.brut-body .marquee-item{color:var(--marquee-fg);text-decoration:none}
body.brut-body .marquee-item:hover{color:var(--pink)}
body.brut-body .marquee.pink .marquee-item{color:#fff}
body.brut-body .marquee.pink .marquee-item:hover{color:var(--ink-solid)}
body.brut-body .marquee-sep{opacity:.6;margin:0 .3rem}

/* ---------- nav ---------- */
/* NOTE: deliberately no `position` here. This selector is (1,2,1); style.css's mobile rule
   `.mobile-offcanvas{position:fixed}` is only (0,1,0), and specificity beats source order — so
   declaring sticky here kept the nav in normal flow below lg instead of letting it become the
   offcanvas. visibility:hidden hid it but kept its box, so its full stacked-menu height pushed
   the whole page down as an invisible band. Sticky is re-declared for >=lg at the end of file. */
body.brut-body #navbar-main.navbar-main{background:var(--bg)!important;border-bottom:3px solid var(--ink);z-index:1030;padding:.55rem 0}
body.brut-body #navbar-main .navbar-nav{align-items:center}
body.brut-body #navbar-main .nav-link{
  color:var(--ink)!important;font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.06em;margin:0 .5rem;padding:.4rem 0!important;border-bottom:3px solid transparent;
}
body.brut-body #navbar-main .nav-link:hover,body.brut-body #navbar-main .nav-link.active{border-bottom-color:var(--pink);color:var(--pink)!important}
body.brut-body #navbar-main .dropdown-menu{border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow-sm);padding:.4rem;background:var(--card)}
body.brut-body #navbar-main .dropdown-item{font-family:"Space Mono",monospace;font-size:.74rem;font-weight:700;text-transform:uppercase;padding:.5rem .7rem;color:var(--ink)}
body.brut-body #navbar-main .dropdown-item:hover{background:var(--yellow);color:var(--on-accent)}
/* Nested (2nd-level) submenu. style.css positions it at left:180px measured from the parent
   <li>, but that li is only ~161px wide once the menu's 3px borders and .4rem padding are
   deducted — so the submenu began ~19px past the li's right edge. Moving the pointer across
   that dead zone dropped the li:hover and the menu closed before you could reach it. Butt it
   flush against the li instead, and drop the 12px margin inherited from the level-1 rule. */
body.brut-body #navbar-main .dropdown-menu .dropdown-menu{top:0;margin:0}
body.brut-body #navbar-main .navbar-left .dropdown-menu .dropdown-menu{left:100%!important}
body.brut-body .logo-main-menu{height:38px;width:auto;max-height:none;max-width:none;padding-top:0;display:block;object-fit:contain}
body.brut-body #navbar-mobile.navbar-mobile{background:var(--bg);border-bottom:3px solid var(--ink)}
body.brut-body #navbar-mobile .mobile-menu-trigger{border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow-sm);padding:.25rem .45rem;color:var(--ink)}

/* dark / light toggle — styled as a brutalist control */
body.brut-body .brut-toggle{
  display:inline-flex;align-items:center;gap:.5rem;border:3px solid var(--ink);background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-sm);padding:.45rem .75rem;margin:.35rem .5rem .35rem 0;
  font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;
  text-decoration:none;cursor:pointer;line-height:1;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
body.brut-body .brut-toggle:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink);color:var(--ink)}
body.brut-body .brut-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
body.brut-body .brut-toggle i{font-size:.95rem;line-height:1}
body.brut-body .brut-toggle-label::after{content:"Light"}
body.brut-body .brut-toggle i.moon + .brut-toggle-label::after{content:"Dark"}
body.brut-body .brut-toggle i.moon{color:var(--pink)}

/* header menu buttons — single border, roomy padding, no offset "double" shadow */
body.brut-body #navbar-main .nav-link.btn,
body.brut-body #navbar-main .btn{
  border:3px solid var(--ink)!important;
  border-bottom:3px solid var(--ink)!important;
  box-shadow:none!important;
  padding:.65rem 1.2rem!important;
  margin:0 0 0 .5rem;
  background:var(--card)!important;
  color:var(--ink)!important;
  line-height:1.1;
}
body.brut-body #navbar-main .nav-link.btn:hover,
body.brut-body #navbar-main .btn:hover{
  transform:none!important;box-shadow:none!important;
  background:var(--ink-solid)!important;color:var(--yellow)!important;border-color:var(--ink)!important;
}
body.brut-body #navbar-main .brut-toggle{
  border:3px solid var(--ink)!important;box-shadow:none!important;padding:.65rem 1rem!important;
  background:var(--card)!important;color:var(--ink)!important;
}
body.brut-body #navbar-main .brut-toggle:hover{
  transform:none!important;box-shadow:none!important;background:var(--ink-solid)!important;color:var(--yellow)!important;
}

/* ---------- hero ---------- */
.brut-hero{padding:4rem 0 3rem}
.brut-hero-title{font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(2.4rem,7vw,5.6rem);line-height:.95;text-transform:uppercase;letter-spacing:-.02em}
.brut-hero-title h1,.brut-hero-title h2,.brut-hero-title h3{margin:0;font:inherit;color:inherit;text-transform:uppercase}
.brut-hero-title p,.brut-hero-title .banner-text{margin:1rem 0 0;font-family:"Archivo",system-ui,sans-serif;font-size:.95rem;font-weight:400;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--muted);max-width:52ch}
.brut-hero-search{display:flex;gap:.75rem;flex-wrap:wrap;align-items:stretch}
.brut-hero-search .job-search-value{flex:1 1 240px;min-height:54px}
.brut-hero-search .btn{min-height:54px;white-space:nowrap}
.brut-searched{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.brut-ticks{display:flex;flex-wrap:wrap;gap:1.2rem}
.brut-tick{display:flex;align-items:center;gap:.6rem;font-family:"Space Mono",monospace;font-size:.8rem;font-weight:700}
.brut-tick .b{width:26px;height:26px;background:var(--cyan);color:var(--on-accent);border:3px solid var(--ink);display:grid;place-items:center;font-size:.7rem}

/* match card */
.brut-match{position:relative;background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow-lg);transform:rotate(1.4deg);animation:brut-cardIn .9s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes brut-cardIn{from{opacity:0;transform:rotate(1.4deg) translateY(30px)}to{opacity:1;transform:rotate(1.4deg)}}
.brut-match-sticker{position:absolute;top:-16px;right:22px;transform:rotate(9deg)}
.brut-match-head{background:var(--purple);color:#fff;border-bottom:3px solid var(--ink);padding:1rem 1.2rem;display:flex;justify-content:space-between;align-items:center}
.brut-match-head .mono{color:#fff}
.brut-match-body{padding:1.2rem}
.brut-cand{display:flex;align-items:center;gap:.85rem;padding:.7rem 0;border-bottom:2px dashed var(--dash)}
.brut-cand:last-of-type{border-bottom:0}
.brut-cand .av{width:42px;height:42px;flex:0 0 42px;background:var(--yellow);color:var(--on-accent);border:3px solid var(--ink);display:grid;place-items:center;font-family:"Archivo Black"}
.brut-cand .pct{margin-left:auto;font-family:"Space Mono",monospace;font-weight:700;font-size:.76rem;background:var(--cyan);color:var(--on-accent);border:3px solid var(--ink);padding:.1rem .4rem}
.brut-match .bar{height:12px;background:var(--bar);border:3px solid var(--ink);margin-top:1.1rem}
.brut-match .bar>i{display:block;height:100%;background:var(--pink);width:0;animation:brut-grow 1.6s .5s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes brut-grow{to{width:92%}}

/* full banner */
.brut-hero-absolute{position:relative;padding:5rem 0;overflow:hidden}
.brut-hero-absolute .banner-absolute-section-bg{position:absolute;inset:0;background:var(--purple);z-index:0}
.brut-hero-absolute .brut-hero-abs-inner{position:relative;z-index:2;display:flex;align-items:center}
.brut-hero-absolute .brut-hero-title{color:#fff}
.brut-hero-absolute .brut-hero-title p,.brut-hero-absolute .brut-hero-title .banner-text{color:rgba(255,255,255,.9)}
.brut-hero-absolute .sticker{transform:rotate(-6deg)}

/* ---------- sections ---------- */
.brut-sec{padding:3.6rem 0}
.brut-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.brut-sec-head h2{font-size:clamp(1.7rem,4.2vw,3rem);margin:.2rem 0 .4rem}
.brut-sec-head p{margin:0;color:var(--soft);max-width:52ch}
.brut-kicker{display:inline-block;background:var(--ink-solid);color:var(--yellow);padding:.35rem .7rem;font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}

/* bento */
.brut-bento{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:1.5rem;height:100%;transition:transform .16s ease,box-shadow .16s ease;display:flex;flex-direction:column}
.brut-bento:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)}
.brut-bento .brut-ico{width:54px;height:54px;border:3px solid var(--ink);display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem;background:var(--cyan);color:var(--on-accent)}
.brut-bento h4{font-size:1.1rem;margin-bottom:.5rem}
.brut-bento p{margin:0 0 1rem;color:var(--soft);font-size:.92rem}
.brut-bento.bg-pink p,.brut-bento.bg-purple p{color:rgba(255,255,255,.9)}
.brut-bento.bg-pink .brut-ico,.brut-bento.bg-purple .brut-ico{background:var(--yellow)}
.brut-bento.bg-cyan .brut-ico,.brut-bento.bg-yellow .brut-ico{background:#fff}
.brut-bento.bg-cyan h4,body.brut-body .brut-bento.bg-cyan h4{color:var(--on-accent)}
.brut-bento.bg-yellow h4,body.brut-body .brut-bento.bg-yellow h4{color:var(--on-accent)}
.brut-shot{border:3px solid var(--ink);background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden;margin-top:auto}
.brut-shot img{width:100%;display:block;object-fit:cover}
/* feature bento: uniform, frameless images */
body.brut-body .brut-bento .brut-shot{border:0;box-shadow:none;background:transparent}
body.brut-body .brut-bento .brut-shot img{width:100%;height:160px;object-fit:contain;display:block}
/* how-it-works (guide) section: uniform, frameless images */
body.brut-body .brut-guide .brut-shot{border:0;box-shadow:none;background:transparent}
body.brut-body .brut-guide .brut-shot img{width:100%;height:200px;object-fit:contain;display:block}

/* job card */
.brut-job{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:1.3rem;display:flex;flex-direction:column;gap:1rem;transition:transform .16s ease,box-shadow .16s ease}
.brut-job:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.brut-logo{width:52px;height:52px;flex:0 0 52px;background:transparent;border:0;display:grid;place-items:center;overflow:hidden}
.brut-logo img{width:100%;height:100%;object-fit:contain}
.brut-job-title{font-size:1.05rem;margin:0}
.brut-job-title a{color:inherit;text-decoration:none;text-transform:uppercase;font-family:"Archivo Black"}
.brut-job-title a:hover{color:var(--pink)}
.brut-job-co{color:var(--muted);font-size:.68rem}
.brut-chips{display:flex;flex-wrap:wrap}
.brut-job-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto}
.brut-job-controls{display:flex;gap:.9rem;font-size:1.1rem}
.brut-job-controls i{cursor:pointer;color:var(--muted)}
.brut-job-controls .favorited{color:var(--pink)}

/* departments */
.brut-dept{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.9rem;background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:.75rem 1.2rem;text-decoration:none;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.brut-dept:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.brut-dept .num{font-family:"Archivo Black";font-size:2rem;line-height:1;color:var(--pink)}
.brut-dept b{font-family:"Archivo Black";text-transform:uppercase;font-size:.95rem}
.brut-dept .cnt{font-family:"Space Mono",monospace;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.brut-dept-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.brut-dept-fig{display:flex;justify-content:flex-end;flex:0 0 auto;margin:0}
.brut-dept-fig img{height:56px;width:auto;max-width:100%;object-fit:contain;display:block}

/* stats */
.brut-stat{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.brut-stat-ico{width:54px;height:54px;border:3px solid var(--ink);display:grid;place-items:center;font-size:1.4rem;margin-bottom:.6rem;color:var(--on-accent)}
.brut-stat b{font-family:"Archivo Black";font-size:2.6rem;line-height:1;color:var(--ink)}
.brut-stat span{font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em}
.brut-stat p{margin:.4rem 0 0;color:var(--soft);font-size:.88rem}

/* companies */
.brut-co{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:1.3rem;text-decoration:none;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.brut-co:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.brut-co-logo{width:56px;height:56px;border:3px solid var(--ink);overflow:hidden;display:grid;place-items:center;background:var(--card)}
.brut-co-logo img{width:100%;height:100%;object-fit:contain}
.brut-co h4{font-size:1rem;margin:.3rem 0 0}
.brut-co-meta{color:var(--muted);font-size:.64rem;line-height:1.7}

/* candidate card */
.brut-cand-card{position:relative;background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:1.3rem;display:flex;flex-direction:column;gap:.9rem;transition:transform .16s ease,box-shadow .16s ease}
.brut-cand-card:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)}
.brut-cand-card-fav{position:absolute;top:.9rem;right:.9rem;font-size:1.05rem;cursor:pointer;color:var(--muted)}
.brut-cand-card-fav .favorited{color:var(--pink)}
.brut-cand-card-top{display:flex;align-items:center;gap:.9rem}
.brut-cand-av{width:52px;height:52px;flex:0 0 52px;border:3px solid var(--ink);overflow:hidden;background:var(--yellow)}
.brut-cand-av img{width:100%;height:100%;object-fit:cover}
.brut-cand-card h4{font-size:1rem;margin:0}
.brut-cand-role{color:var(--muted);font-size:.62rem;line-height:1.7}
.brut-cand-stats{display:flex;flex-wrap:wrap;gap:.7rem;font-family:"Space Mono",monospace;font-size:.7rem;color:var(--muted);padding-top:.4rem;border-top:2px dashed var(--dash)}

/* guide */
.brut-guide{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem}
.brut-guide h3{font-size:1.2rem;margin:.4rem 0 0}
.brut-guide p{color:var(--soft);font-size:.94rem}
.brut-guide-btn{margin-top:auto}

/* cta */
.brut-cta{background:var(--purple);border:3px solid var(--ink);box-shadow:var(--shadow-lg);color:#fff;padding:3rem;position:relative;overflow:hidden}
.brut-cta h2{color:#fff;font-size:clamp(1.8rem,4.6vw,3.2rem);margin-bottom:.6rem}
.brut-cta p{color:rgba(255,255,255,.9)}
.brut-cta .brut-shot{box-shadow:var(--shadow);margin-top:0}
body.brut-body .brut-cta-shot{border:0;box-shadow:none;background:transparent}
body.brut-body .brut-cta-shot img{display:block}
.brut-cta-blob{position:absolute;width:180px;height:180px;border:3px solid var(--ink);background:var(--yellow);right:-60px;top:-60px;animation:brut-spin 18s linear infinite}
.brut-cta-blob.p{background:var(--pink);width:110px;height:110px;left:-30px;bottom:-30px;right:auto;top:auto;animation-duration:26s}
@keyframes brut-spin{to{transform:rotate(360deg)}}
/* Message pages (404 / account activation / errors). Legacy shipped these on hero classes the
   theme never styled (.front-intro-section, .main-container, .front-forgot-password-container,
   .section-headline), so they rendered as bare text. Centre them in a brutalist panel. */
.brut-message{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow-lg);border-radius:0;padding:3rem 1.5rem;text-align:center}
.brut-message h2{font-size:clamp(1.7rem,4.4vw,2.8rem);margin:0 0 1rem}
.brut-message p{color:var(--soft);margin:0 0 1.2rem}
.brut-message .btn{margin-top:.4rem}

.brut-carousel-nav{display:flex;gap:.6rem}

/* ---------- page head (breadcrumb) ---------- */
.brut-pagehead{background:var(--bg);border-bottom:3px solid var(--ink);padding:2.6rem 0}
.brut-pagehead h1{font-size:clamp(1.8rem,4.6vw,3.2rem);margin:.6rem 0 .5rem}
.brut-crumbs{list-style:none;display:flex;gap:.5rem;align-items:center;padding:0;margin:0;font-family:"Space Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.brut-crumbs a{color:var(--ink);text-decoration:none}
.brut-crumbs a:hover{color:var(--pink)}
.brut-crumbs .active a{color:var(--muted)}

/* ==========================================================================
   Legacy page overrides — restyle existing component classes into brutalist
   ========================================================================== */

/* breadcrumb (legacy) */
body.brut-body .section-breadcrumb-beta{background:var(--bg);border-bottom:3px solid var(--ink);padding:2.4rem 0}
body.brut-body .section-breadcrumb-beta h1{font-size:clamp(1.8rem,4.6vw,3rem)}
body.brut-body .section-breadcrumb-beta ul{list-style:none;display:flex;gap:.5rem;padding:0;font-family:"Space Mono",monospace;font-size:.72rem;text-transform:uppercase}

/* headings + section intro */
body.brut-body .section-heading h2,body.brut-body .section-heading-style-alpha h2,body.brut-body .section-heading-style-gamma h2{font-size:clamp(1.6rem,4vw,2.7rem);margin:0}
body.brut-body .section-intro-text p,body.brut-body .section-intro-text{color:var(--soft)}

/* generic cards */
body.brut-body .section-jobs-alpha-item,
body.brut-body .section-jobs-gamma-item,
body.brut-body .section-profiles-beta-item,
body.brut-body .section-profile-boxes-alpha-item,
body.brut-body .section-icon-boxes-alpha-item,
body.brut-body .section-icon-boxes-beta-item,
body.brut-body .section-blogs-alpha-item,
body.brut-body .section-highlights-alpha-item,
body.brut-body .section-carousel-alpha-container-item{
  background:var(--card)!important;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow)!important;
  padding:1.3rem;transition:transform .16s ease,box-shadow .16s ease;
}
body.brut-body .section-jobs-alpha-item:hover,
body.brut-body .section-jobs-gamma-item:hover,
body.brut-body .section-profiles-beta-item:hover,
body.brut-body .section-profile-boxes-alpha-item:hover,
body.brut-body .section-icon-boxes-alpha-item:hover,
body.brut-body .section-icon-boxes-beta-item:hover,
body.brut-body .section-blogs-alpha-item:hover{
  transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)!important;
}
body.brut-body .section-jobs-alpha-item,body.brut-body .section-jobs-gamma-item{margin-bottom:1.5rem}
/* list-view company logo: legacy style.css sizes the img at 120% of its column, which the
   overflow:hidden frame then clips on both sides. Cap it the same way the box (gamma) view
   does, and drop the 1px divider border on the content column — the card already has its
   own full brutalist border. */
body.brut-body .section-jobs-alpha-item-left-image img{max-width:100%}
body.brut-body .section-jobs-alpha-item-right{border-left:0}
body.brut-body .section-jobs-alpha-item-right-heading h2,
body.brut-body .section-jobs-gamma-item-heading h2,
body.brut-body .section-profiles-beta-item-right-heading h2,
body.brut-body .section-profile-boxes-alpha-item-heading h2,
body.brut-body .section-icon-boxes-alpha-item-heading h2,
body.brut-body .section-icon-boxes-beta-item-heading h2,
body.brut-body .section-blogs-alpha-item-heading h2{font-size:1.05rem;margin:0}
body.brut-body .section-jobs-alpha-item-left-image,
body.brut-body .section-jobs-gamma-item-icon,
body.brut-body .section-profiles-beta-item-left-image,
body.brut-body .section-profile-boxes-alpha-item-icon,
body.brut-body .section-icon-boxes-alpha-item-icon,
body.brut-body .section-icon-boxes-beta-item-icon,
body.brut-body .section-blogs-alpha-item-image{border:3px solid var(--ink);border-radius:0;overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm)}

/* job, company & candidate card thumbnails: no frame around the inner image */
body.brut-body .section-jobs-alpha-item-left-image,
body.brut-body .section-jobs-gamma-item-icon,
body.brut-body .section-icon-boxes-alpha-item-icon,
body.brut-body .brut-logo,
body.brut-body .brut-co-logo,
body.brut-body .section-profile-boxes-alpha-item-icon,
body.brut-body .section-profiles-beta-item-left-image,
body.brut-body .brut-cand-av{border:0;box-shadow:none}
body.brut-body .section-jobs-alpha-item-right-bottom-att,
body.brut-body .section-jobs-gamma-item-bottom-att,
body.brut-body .section-profiles-beta-item-right-bottom-att,
body.brut-body .section-profiles-beta-item-bottom-att,
body.brut-body .section-profile-boxes-alpha-item-skills span{
  display:inline-block;border:3px solid var(--ink);background:var(--card);color:var(--ink);font-family:"Space Mono",monospace;
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.15rem .45rem;margin:.15rem .25rem 0 0;border-radius:0;
}
/* the legacy container behind the job-count box is filled with --site-btn-bg, which is --pink
   in pop, and its :hover variant repaints it. Only the yellow count sticker should show, so
   make the container backgroundless in both states. */
body.brut-body .section-icon-boxes-alpha-item-highlight{background:transparent!important}
body.brut-body .section-icon-boxes-alpha-item-highlight p,
body.brut-body .section-icon-boxes-beta-item-highlight p{
  display:inline-block;background:var(--yellow);border:3px solid var(--ink);color:var(--on-accent);font-family:"Space Mono",monospace;
  font-size:.66rem;font-weight:700;text-transform:uppercase;padding:.15rem .5rem;margin:.4rem 0 0;
}
body.brut-body .section-icon-boxes-beta-item{text-align:center}
body.brut-body .section-profiles-beta-item-right-controls i,
body.brut-body .section-profile-boxes-alpha-item-right-controls i,
body.brut-body .section-jobs-alpha-item-right-controls i,
body.brut-body .section-jobs-gamma-item-right-controls i{color:var(--muted);cursor:pointer;font-size:1.05rem}
body.brut-body .favorited{color:var(--pink)!important}

/* news cards */
body.brut-body .section-blogs-alpha-item{display:flex;flex-direction:column;gap:.6rem;max-height:none!important;min-height:0!important;overflow:visible}
body.brut-body .section-blogs-alpha-item-cat{font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--pink)}
body.brut-body .section-blogs-alpha-item-content{max-height:none!important;overflow:visible}
body.brut-body .section-blogs-alpha-item-bottom{display:flex;align-items:center;justify-content:flex-start;gap:.6rem;margin-top:auto;height:auto!important;overflow:visible!important;border-top:2px dashed var(--dash);padding:.7rem 0 0}
body.brut-body .section-blogs-alpha-item-bottom-right{float:none;background:transparent;padding:0;margin:0;border-radius:0}
body.brut-body .section-blogs-alpha-item-more{display:none}

/* pricing cards */
body.brut-body .section-pricing-item{display:flex;flex-direction:column;text-align:center;padding:1.6rem 1.2rem!important;background:var(--card)!important;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow)!important;margin:0;height:100%;transition:transform .16s ease,box-shadow .16s ease}
body.brut-body .section-pricing-item:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)!important}
body.brut-body .section-pricing-item.special{background:var(--yellow)!important}
/* fixed-height top block keeps the price band aligned across every card */
body.brut-body .section-pricing-item-title{order:1;display:flex;align-items:center;justify-content:center;min-height:2.6rem}
body.brut-body .section-pricing-item-title h2{font-size:1.15rem;line-height:1.15;margin:0}
body.brut-body .section-pricing-item-icon{order:2;height:64px;border:0!important;box-shadow:none!important;background:transparent!important;display:flex;align-items:center;justify-content:center;margin:.5rem 0 1rem}
body.brut-body .section-pricing-item-icon img{width:auto;max-width:120px;max-height:52px;object-fit:contain;display:block;margin:0 auto}
body.brut-body .section-pricing-item-price{order:3;text-align:center;background:var(--cyan);color:var(--on-accent);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
body.brut-body .section-pricing-item-list{order:4}
body.brut-body .section-pricing-item-list ul{list-style:none;padding:0}
body.brut-body .section-pricing-item-list li{border-bottom:2px dashed var(--dash);padding:.5rem 0}
body.brut-body .section-pricing-item-btn{order:5;margin-top:auto}
/* pricing page: the FAQs block sits under the pricing cards and its heading should be centred
   rather than left-aligned. Scoped by the extra .pricing-faqs class so the FAQs page itself is
   untouched. */
body.brut-body .pricing-faqs .section-heading-style-alpha{text-align:center}

/* features page */
body.brut-body .section-features-element-1,body.brut-body .section-features-element-2,
body.brut-body .section-features-element-3,body.brut-body .section-features-element-4,
body.brut-body .section-features-element-5,body.brut-body .section-features-element-6,
body.brut-body .section-features-element-7,body.brut-body .section-features-element-8,
body.brut-body .section-features-element-9,body.brut-body .section-features-element-10{
  position:relative;overflow:hidden;display:flex;align-items:center;min-height:22.5rem;
  background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:1.8rem;margin-bottom:2rem;
}
/* One rotating square per feature box, clipped inside its top corner (the box above has
   overflow:hidden) — the same way .brut-cta-blob sits inside .brut-cta on the home page.
   The ten numbered classes are listed explicitly: a [class*="section-features-element-"]
   substring match also catches .section-features-element-left / -right, which put an extra
   square inside every box. */
body.brut-body .section-features-element-1::before,
body.brut-body .section-features-element-2::before,
body.brut-body .section-features-element-3::before,
body.brut-body .section-features-element-4::before,
body.brut-body .section-features-element-5::before,
body.brut-body .section-features-element-6::before,
body.brut-body .section-features-element-7::before,
body.brut-body .section-features-element-8::before,
body.brut-body .section-features-element-9::before,
body.brut-body .section-features-element-10::before{
  content:"";position:absolute;width:56px;height:56px;top:-20px;right:-20px;
  background:var(--card);border:3px solid var(--ink);animation:brut-spin 18s linear infinite;
}
/* The boxes alternate text-left / text-right (odd = text left), so the odd ones put the square
   in their left-hand corner — always the text side, never over the screenshot. */
body.brut-body .section-features-element-1::before,
body.brut-body .section-features-element-3::before,
body.brut-body .section-features-element-5::before,
body.brut-body .section-features-element-7::before,
body.brut-body .section-features-element-9::before{left:-20px;right:auto}
body.brut-body .section-features-element-left,
body.brut-body .section-features-element-right{overflow:visible}
body.brut-body .section-features-element-left img,
body.brut-body .section-features-element-right img{max-width:100%;height:auto;max-height:300px;object-fit:contain;display:block;margin:0 auto}
body.brut-body .section-features-element-left h1,body.brut-body .section-features-element-right h1{font-size:clamp(1.4rem,3vw,2.1rem)}
body.brut-body .container_img{border:0;box-shadow:none}

/* contact page. Legacy put the address / phone / email blocks inside one shared 1px panel, and
   the form was its own 1px rounded box. Give each block its own theme box and flatten the
   shared panel (its -90px margin stays, so the boxes still ride up over the map). */
body.brut-body .section-contact-alpha-items{background:transparent;border:0;border-radius:0;box-shadow:none}
body.brut-body .section-contact-alpha-item{
  background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);
  padding:1.2rem;margin:0;height:100%;
}
body.brut-body .section-contact-alpha-item-title,
body.brut-body .section-contact-alpha-item-value{margin:0}
body.brut-body .section-contact-alpha-form{background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow)}
/* features page: alternate colours, no white blocks */
body.brut-body .section-features-element-1,body.brut-body .section-features-element-5,body.brut-body .section-features-element-9{background:var(--pink)!important;color:#fff}
body.brut-body .section-features-element-3,body.brut-body .section-features-element-7{background:var(--purple)!important;color:#fff}
body.brut-body .section-features-element-2,body.brut-body .section-features-element-6,body.brut-body .section-features-element-10{background:var(--cyan)!important;color:var(--on-accent)}
body.brut-body .section-features-element-4,body.brut-body .section-features-element-8{background:var(--yellow)!important;color:var(--on-accent)}
body.brut-body [class*="section-features-element-"] h1{color:inherit}
body.brut-body [class*="section-features-element-"] p{color:inherit;opacity:.92}

/* faqs / accordion */
body.brut-body .accordion-item{border:3px solid var(--ink)!important;border-radius:0!important;background:var(--card);margin-bottom:14px;box-shadow:var(--shadow)!important;overflow:hidden}
body.brut-body .accordion-button{border-radius:0!important;font-family:"Archivo Black",sans-serif;text-transform:uppercase;font-size:.94rem;background:var(--card);color:var(--ink)!important;padding:1.1rem 1.2rem;box-shadow:none!important}
body.brut-body .accordion-button:not(.collapsed){background:var(--cyan)!important;color:var(--on-accent)!important}
body.brut-body .accordion-body{padding:.4rem 1.2rem 1.3rem;color:var(--soft);border-top:2px dashed var(--dash)}

/* sidebars / filters: flat styling, no outer container boxes */
body.brut-body .section-sidebar-beta-container,
body.brut-body .section-sidebar-alpha-container,
body.brut-body .jobs-list-page .section-sidebar-beta-container,
body.brut-body .candidates-list-page .section-sidebar-beta-container,
body.brut-body .section-jobs-sidebar-alpha,
body.brut-body .section-candidates-sidebar-alpha{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:1.5rem 0 0!important;border-radius:0!important}
/* Each filter block sits in its own full-width col, so the gap between them can only come
   from this margin (legacy style.css used 18px on the old boxed items; pop flattened it to
   0). Give them a little breathing room — the trailing divider on the last block is its own
   border-bottom and sits below the sidebar content, so it needs no special casing.
   The larger bottom padding drops the dashed divider further down, away from the block's
   content, so it reads as sitting between two blocks rather than tagging the one above. */
body.brut-body .section-sidebar-beta .section-sidebar-beta-item,
body.brut-body .section-sidebar-alpha .section-sidebar-alpha-item{background:transparent;box-shadow:none;border-radius:0;border:0;border-bottom:2px dashed var(--dash);padding:.6rem 0 1rem;margin:0 0 .9rem}
body.brut-body .section-sidebar-beta .section-sidebar-beta-item-btn-container,
body.brut-body .section-sidebar-alpha .section-sidebar-alpha-item-btn-container{border-bottom:0;padding-bottom:0}

/* Listing filter bar: flat, aligned to the sidebar top. Its three widgets come from different
   sources — a <p>, a <select> and .btn — so each had its own intrinsic height and the row read
   as ragged (the toggle group was the tallest). --ctl-h pins them all to one height; change it
   here and the whole bar follows. */
body.brut-body .section-controls-alpha,
body.brut-body .jobs-list-page .section-controls-alpha,
body.brut-body .candidates-list-page .section-candidates-beta-controls,
body.brut-body .candidates-list-page .section-candidates-alpha-controls{--ctl-h:2.6rem;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:1.5rem 0 1rem!important}

/* Jobs listing: the sidebar container (and, on the front, the controls bar) carried the top
   offset while the results column started flush, so on the candidate site — which has no
   controls bar — the results sat against the breadcrumb and out of line with the sidebar.
   Put the offset on the page instead and zero the inner tops so both columns line up. */
body.brut-body .jobs-list-page{margin-top:1.5rem}
body.brut-body .jobs-list-page .section-sidebar-beta-container,
body.brut-body .jobs-list-page .section-controls-alpha,
body.brut-body .jobs-list-page .section-jobs-alpha{margin-top:0!important}
body.brut-body .section-controls-alpha p,
body.brut-body .section-candidates-beta-controls p,
body.brut-body .section-candidates-alpha-controls p{
  display:flex;align-items:center;width:100%;height:var(--ctl-h,2.6rem);padding:0 .85rem;margin:0;border:3px solid var(--ink)!important;border-radius:0;
  background:var(--card);color:var(--ink);text-align:left;
  font-family:"Space Mono",monospace;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
body.brut-body .jobs-list-select-sort,
body.brut-body .candidates-list-select-sort,
body.brut-body .companies-list-select-sort{
  display:block;width:100%;height:var(--ctl-h,2.6rem);padding:0 .85rem;border:3px solid var(--ink)!important;border-radius:0!important;
  background:var(--card);color:var(--ink);
  font-family:"Space Mono",monospace;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
body.brut-body .section-controls-alpha-btn-group,
body.brut-body .section-candidates-alpha-controls-btn-group{background:transparent!important;border:0!important;margin:0!important}
/* the view toggle buttons: .btn's vertical padding is what made this group taller than the
   count box and the sort dropdown, so pin the height and centre the icon in it */
body.brut-body .section-controls-alpha-btn-group .btn,
body.brut-body .section-candidates-alpha-controls-btn-group .btn{
  display:inline-flex;align-items:center;justify-content:center;height:var(--ctl-h,2.6rem);padding:0 1.15rem;
}

/* forms */
body.brut-body .form-control,body.brut-body .form-select,body.brut-body select.form-control,body.brut-body textarea.form-control{
  border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:none!important;padding:.6rem .8rem;font-family:"Archivo",sans-serif;background:var(--card);color:var(--ink);
}
body.brut-body .form-control:focus,body.brut-body .form-select:focus{border-color:var(--pink)!important;box-shadow:3px 3px 0 var(--ink)!important}
body.brut-body .select2-container--default .select2-selection--single,body.brut-body .select2-container--default .select2-selection--multiple{
  border:3px solid var(--ink)!important;border-radius:0!important;min-height:44px;background:var(--card);
}
body.brut-body label{font-family:"Space Mono",monospace;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* pagination — the pagination partials emit a bare ul > li > a, not bootstrap's
   .pagination/.page-link markup, so these target the real structure. style.css gives
   the ul a rounded 1px box; this replaces it with the brutalist button treatment. */
body.brut-body .section-pagination-alpha ul{background:transparent;border:0;border-radius:0;padding:0;list-style:none;text-align:center;margin:2rem 0 .5rem}
body.brut-body .section-pagination-alpha ul li{display:inline-block;margin:0 .2rem}
body.brut-body .section-pagination-alpha ul li a{
  display:inline-block;width:auto;height:auto;min-width:2.1rem;padding:.4rem .55rem;line-height:1;text-decoration:none;
  border:3px solid var(--ink)!important;border-radius:0!important;background:var(--card);color:var(--ink)!important;
  box-shadow:var(--shadow-sm);font-family:"Space Mono",monospace;font-weight:700;font-size:.72rem;
  transition:transform .16s ease,box-shadow .16s ease;
}
body.brut-body .section-pagination-alpha ul li a:hover,
body.brut-body .section-pagination-alpha ul li a.active{background:var(--ink-solid)!important;color:var(--yellow)!important}
body.brut-body .section-pagination-alpha ul li.disabled a{opacity:.4;box-shadow:none;pointer-events:none}

/* tabs / nav-pills used in account */
body.brut-body .nav-pills .nav-link{border:3px solid var(--ink);border-radius:0;font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;font-size:.72rem;margin:0 .3rem .3rem 0;color:var(--ink);background:var(--card)}
body.brut-body .nav-pills .nav-link.active{background:var(--ink-solid);color:var(--yellow)}

/* modals */
body.brut-body .modal-content{border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow-lg);background:var(--card)}
body.brut-body .modal-header{border-bottom:3px solid var(--ink)}
body.brut-body .modal-footer{border-top:3px solid var(--ink)}

/* footer */
body.brut-body .section-footer-alpha{background:var(--footer-bg);color:var(--footer-fg);padding:3.2rem 0 2rem;border-top:3px solid var(--ink)}
body.brut-body .section-footer-alpha h1,body.brut-body .section-footer-alpha h2,body.brut-body .section-footer-alpha h3,
body.brut-body .section-footer-alpha h4,body.brut-body .section-footer-alpha h5,body.brut-body .section-footer-alpha h6{color:var(--yellow);font-family:"Space Mono",monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
body.brut-body .section-footer-alpha a{color:#e6e6df;text-decoration:none;display:block;padding:.2rem 0;font-size:.9rem;transition:color .16s ease,padding-left .16s ease}
body.brut-body .section-footer-alpha a:hover{color:var(--pink);padding-left:7px}
body.brut-body .section-footer-alpha p,body.brut-body .section-footer-alpha li{color:var(--footer-fg)}

/* account + auth shells */
body.brut-body .section-account-alpha-container{background:transparent}
body.brut-body .section-account-alpha-item,body.brut-body .section-account-beta-item{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);border-radius:0;padding:1.4rem}
/* candidate login / register form: legacy ships no box or layout for
   .section-login-register-form, so it read as a bare, cramped stack of fields on the page.
   Give it the theme's box, breathing room around it, and space between the fields. */
body.brut-body .section-login-register-form{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);border-radius:0;padding:1.8rem;margin:2rem 0}
body.brut-body .section-login-register-form label{display:block;margin-bottom:.4rem}
body.brut-body .section-login-register-form .col-lg-12,
body.brut-body .section-login-register-form .col-lg-6,
body.brut-body .section-login-register-form .col-md-12{margin-bottom:1.1rem}
body.brut-body .section-login-register-form .login-other-btns a{margin-right:1rem}
body.brut-body .section-login-register-form hr{margin:1rem 0 1.4rem}
/* Social sign-in buttons (login / register). Legacy ships bootstrap-social's BS3 rail, but the
   markup omits `.btn`, so the links fall back to cramped coloured text. Give them the theme's
   button treatment; the brand colour still comes from .btn-google / .btn-linkedin. */
body.brut-body .btn-social{
  position:relative;display:flex;align-items:center;width:100%;min-height:2.9rem;
  padding:.6rem 1rem .6rem 3.2rem;margin:0 0 .8rem;
  border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow-sm);
  font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;
  text-decoration:none;transition:transform .16s ease,box-shadow .16s ease;
}
body.brut-body .btn-social>:first-child{
  position:absolute;left:0;top:0;bottom:0;width:2.7rem;display:grid;place-items:center;
  border-right:3px solid var(--ink);font-size:1.05rem;
}
body.brut-body .btn-social:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink);color:#fff}
body.brut-body .btn-social:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* resume edit form: legacy style.css paints each repeatable row with --site-btn-bg, which pop
   maps to pink, so the row labels lost contrast on it. Restyle the row (and its collapsible
   wrapper) as the theme's box. */
body.brut-body .section-incremental-form-alpha{background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);padding:1.2rem}
body.brut-body .section-incremental-form-alpha .card-body{background:transparent;margin:.8rem 0 0}
body.brut-body .section-incremental-form-alpha-item{background:var(--bg);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow-sm);padding:1.3rem}

/* other account boxes (profile / password / settings / quizes / resumes / applications /
   memberships / quiz): legacy style.css draws these as 1px rounded grey panels and zebra-
   stripes the account tables with --site-btn-bg, which pop maps to pink. Swap both for the
   theme's box and a neutral stripe. */
body.brut-body .section-account-alpha-navigation ul,
body.brut-body .section-account-alpha-profile,
body.brut-body .quiz-detail-box,
body.brut-body .section-quiz-alpha-item{
  background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);
}
body.brut-body .section-account-alpha-navigation ul li a.active,
body.brut-body .section-account-alpha-navigation ul li a:hover,
body.brut-body .section-account-alpha-navigation li:first-child a{border-radius:0}
/* Account sidebar nav: pop's global `a:hover{color:var(--pink)}` ties the legacy row rule on
   specificity (both 0,2,2) and, being later in the cascade, won — so the row kept its pink
   background while the label also turned pink and vanished. Pin a readable hover/active. */
body.brut-body .section-account-alpha-navigation ul li a:hover,
body.brut-body .section-account-alpha-navigation ul li a.active{background:var(--pink);color:#fff;border-left-color:var(--ink)}

/* quiz attempt answer controls: legacy style.css fills the option row and the radio with
   --site-btn-bg / --site-icons-color, which pop both map to pink, so the control vanishes
   into the row. Give the controls a card fill with an ink border/mark, and style the
   checkbox too (legacy only styled the radio). */
body.brut-body .section-quiz-alpha-answers-container input[type="radio"],
body.brut-body .section-quiz-alpha-answers-container input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;float:left;width:1.15em;height:1.15em;margin:3px 8px 0 0;
  background:var(--card);border:.15em solid var(--ink);display:grid;place-content:center;cursor:pointer;
}
body.brut-body .section-quiz-alpha-answers-container input[type="radio"]{border-radius:50%}
body.brut-body .section-quiz-alpha-answers-container input[type="radio"]::before,
body.brut-body .section-quiz-alpha-answers-container input[type="checkbox"]::before{
  content:"";transform:scale(0);transition:120ms transform ease-in-out;background:var(--ink);
}
body.brut-body .section-quiz-alpha-answers-container input[type="radio"]::before{width:.55em;height:.55em;border-radius:50%}
body.brut-body .section-quiz-alpha-answers-container input[type="checkbox"]::before{width:.6em;height:.6em;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
body.brut-body .section-quiz-alpha-answers-container input[type="radio"]:checked::before,
body.brut-body .section-quiz-alpha-answers-container input[type="checkbox"]:checked::before{transform:scale(1)}

/* account tables */
body.brut-body .section-account-alpha-table{
  background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);
  border-collapse:separate;border-spacing:0;margin-bottom:0;
}
body.brut-body .section-account-alpha-table>thead th{border-bottom:3px solid var(--ink);color:var(--ink)}
body.brut-body .section-account-alpha-table>tbody>tr>td{border-bottom:1px dashed var(--dash)}
body.brut-body .section-account-alpha-table>tbody>tr:nth-of-type(odd)>*{background-color:var(--bar)}
/* the tables sit in a .table-responsive scroll box, which would clip the offset shadow, so
   put the box on that wrapper and flatten the table. Kept in its own :has() rule so browsers
   without :has() simply fall back to the table box above. */
body.brut-body .table-responsive:has(.section-account-alpha-table){
  background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);
}
body.brut-body .table-responsive:has(.section-account-alpha-table) .section-account-alpha-table{
  background:transparent;border:0;box-shadow:none;
}
body.brut-body .section-footer-alpha .container{position:relative;z-index:1}

/* detail pages (job / candidate / company) */
body.brut-body .section-heading-style-zeta h2{font-family:"Archivo Black",sans-serif;text-transform:uppercase}
body.brut-body .section-job-detail-alpha-breadcrumb{background:var(--bg);border-bottom:3px solid var(--ink);padding:2rem 0}
body.brut-body .section-job-detail-alpha-breadcrumb-att{display:inline-block;border:3px solid var(--ink);background:var(--card);color:var(--ink);font-family:"Space Mono",monospace;font-size:.64rem;font-weight:700;text-transform:uppercase;padding:.2rem .5rem;margin:.2rem .25rem 0 0;border-radius:0}
/* Breadcrumb action buttons (favourite / refer). Legacy style.css gave them only a 2px
   gap, and its :hover background (--site-btn-highlight-bg = --ink-solid) fought pop's
   forced ink text colour: black on black, so the label vanished. Keep the card background
   on hover so the theme's ink lift-shadow still reads. */
body.brut-body .section-job-detail-alpha-breadcrumb-btns .btn{margin:0 0 .6rem}
body.brut-body .section-job-detail-alpha-breadcrumb-btns .btn:last-child{margin-bottom:0}
body.brut-body .section-job-detail-alpha-breadcrumb-btns .btn:hover{background:var(--card);color:var(--ink)}
body.brut-body .section-job-detail-alpha-filters-item,
body.brut-body .section-profile-detail-alpha-filters-item,
body.brut-body .section-job-detail-alpha-quizes-item,
body.brut-body .section-job-detail-alpha-traites-item,
body.brut-body [class*="section-candidate-detail-alpha-item"],
body.brut-body .section-carousel-beta-item,
body.brut-body .section-job-detail-alpha-job-description,
body.brut-body .section-job-detail-alpha-apply-container,
body.brut-body .section-company-detail-alpha-company-detail{
  background:var(--card)!important;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow)!important;padding:1.2rem;margin-bottom:1.2rem;
}
/* candidate page: the count row's legacy container painted a --site-box-bg panel and a 1px
   rounded border around the cards. Drop both so the cards sit on the page background. */
body.brut-body .section-profile-detail-alpha-filters-container{background:transparent;border:0;border-radius:0}
/* Resume section headings (experiences / qualifications / achievements). Legacy set
   overflow:auto on the wrapper, which both scrollbar'd once the box was exceeded and was
   quietly acting as the clearfix for the floated h2. Clear the float properly instead. */
body.brut-body .section-profile-detail-alpha-res-pf .section-heading-style-beta{overflow:visible}
body.brut-body .section-profile-detail-alpha-res-pf .section-heading-style-beta::after{content:"";display:block;clear:both}
/* candidate overview sidebar: same box as .section-job-detail-alpha-company-detail on the job
   page. Legacy had a 1px grey rounded box and a 660px min-height, so both are replaced.
   margin-top lines the box's top edge up with the count cards on the left, which sit at
   20px (container margin) + 10px (its padding) + 10px (card margin) = 40px. */
body.brut-body .section-profile-detail-alpha-user-detail{
  min-height:0;background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);
  padding:1.2rem;margin-top:2.5rem;margin-bottom:1.2rem;
}
/* heading sized like the company overview's (it was falling back to the clamp() used by
   section headings, 1.6-2.7rem) */
body.brut-body .section-profile-detail-alpha-user-detail .section-heading-style-zeta h2{font-size:1.05rem;margin:0 0 1rem}
/* Companies / news list search bar. Legacy dragged it up over the breadcrumb band with
   margin-top:-36px and gave it a 1px white rounded box, so it read as part of the breadcrumb.
   Sit it below the breadcrumb instead and give it the theme's box. The fields inside are
   already themed through .form-control / .btn. */
body.brut-body .section-search-alpha-container{
  margin-top:1.5rem;background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);
  padding:1.2rem;z-index:auto;
}
/* the legacy field icons are grey, absolutely positioned, and land on top of the themed
   .form-control text. The theme's own inputs carry no field icons, so drop these three
   (keywords / industry / no of employees). The search button's icon is inside the button. */
body.brut-body .section-search-alpha-container .fa-icon,
body.brut-body .section-search-alpha-container .fa-icon-tag{display:none}
/* the search button inherited width:80% and a 22px left offset from style.css, which was
   meant for the old centred bar; inside the sidebar box that reads as misplaced */
body.brut-body .section-search-alpha-container .btn{width:100%;margin:0}
/* Companies list: the section wrapper carries a --body-bg fill. Now that the items sit in a
   right-hand column that would show as a band across the column only, so flatten it. */
body.brut-body .section-icon-boxes-alpha.companies-page{background:transparent}
/* the companies filter is the left column's first block. The sidebar container and the
   controls row both carry the same 1.5rem top margin, so dropping this item's own top padding
   lines its heading up with the pagination box in the right column. */
body.brut-body .companies-list-page .section-sidebar-alpha-item:first-child{padding-top:0}

/* ---------- employer overview (job detail sidebar) ----------
   This container was the one block the theme never restyled: legacy style.css gave it a 1px
   grey rounded box with min-height:1100px, while its info rows were each rendered as a full
   brutalist card inside it. Make the container the card and the rows plain divided lines.
   Specificity does the work here, so no !important is needed. */
body.brut-body .section-job-detail-alpha-company-detail{
  min-height:0;background:var(--card);border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);
  padding:1.2rem;margin-top:1.2rem;margin-bottom:1.2rem;
}
body.brut-body .section-job-detail-alpha-company-detail .section-heading-style-zeta h2{font-size:1.05rem;margin:0 0 1rem}
body.brut-body .section-job-detail-alpha-company-detail-image img{width:100%;max-width:120px}
body.brut-body .section-job-detail-alpha-company-detail-description{padding:0;font-size:.86rem;text-align:left}
body.brut-body .section-job-detail-alpha-company-detail-item{
  padding:.6rem 0;margin:0;border:0;border-top:1px dashed var(--dash);border-radius:0;
  background:transparent;box-shadow:none;color:var(--muted);font-size:.7rem;
  font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}
body.brut-body .section-job-detail-alpha-company-detail-item:first-child{border-top:0;padding-top:0}
body.brut-body .section-job-detail-alpha-company-detail-item strong{color:var(--ink)}
body.brut-body .section-job-detail-alpha-company-detail-item i{float:none;margin:0 .4rem 0 0;color:var(--pink);font-size:.78rem}
/* legacy rendered these as pink rounded pills; square them into brutalist buttons */
body.brut-body .section-job-detail-alpha-company-detail-social-icons a{
  display:inline-grid;place-items:center;width:34px;height:34px;padding:0;margin:.1rem .2rem 0 0;
  border:3px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);font-size:.85rem;
}
body.brut-body .section-job-detail-alpha-company-detail-social-icons a:hover{background:var(--ink-solid);color:var(--yellow)}

body.brut-body .section-company-detail-alpha-company-detail-image,
body.brut-body .section-job-detail-alpha-quizes-item-icon,
body.brut-body .section-job-detail-alpha-traites-item-icon{border:3px solid var(--ink);border-radius:0;overflow:hidden}
body.brut-body .section-carousel-beta-item-bottom-att{border:3px solid var(--ink);background:var(--card);color:var(--ink);font-family:"Space Mono",monospace;font-size:.62rem;font-weight:700;text-transform:uppercase;display:inline-block;padding:.15rem .45rem;margin:.15rem .25rem 0 0}
/* the carousel band carried a legacy --body-bg (#fbfbfb) fill that covered the page's
   cream + dot background; let it show through instead */
body.brut-body .section-carousel-beta{background:transparent}
/* the right-edge controls took --site-btn-bg for the tab and --site-icons-color for the icon,
   and both resolve to the same accent, so the favourite / refer icons only showed on hover */
body.brut-body .section-carousel-beta-item-right-controls{color:#fff!important}
/* Card-footer "action button" bands. Legacy style.css paints each of these --site-btn-bg
   with rounded bottom corners, and its :hover flips them to --ink-solid while pop forces
   ink text — so the label vanished on hover. The card already supplies the frame, so drop
   the band. Add any further *-item-button card footers to this list. */
body.brut-body .section-carousel-beta-item-button,
body.brut-body .section-profile-boxes-alpha-item-button,
body.brut-body .section-jobs-gamma-item-button{background:transparent!important;border-radius:0!important}
/* the traits block no longer nests a .container, so keep that 15px gutter here instead —
   without it the bootstrap .row bleeds 15px past this box's border */
body.brut-body .section-job-detail-alpha-traites-container{padding-left:15px;padding-right:15px}
/* the filters block lost its wrapper (which carried margin:20px 0) and is the first thing
   under the page head, so keep the theme's 1.2rem rhythm instead of collapsing to 10px */
body.brut-body .section-job-detail-alpha-filters-item{margin-top:1.2rem}

/* utility */
body.brut-body .simple-shadow{box-shadow:var(--shadow)!important}
body.brut-body .rounded,body.brut-body .rounded-circle{border-radius:0!important}

/* ---------- breadcrumb accents (per section) ----------
   Add data-section="jobs|companies|candidates|news" to a breadcrumb container and it
   picks up that section's accent. The foreground tokens are pinned per accent because
   night mode flips --ink to near-white, which would be unreadable on cyan/yellow.
   The var() fallbacks keep the plain --bg head for containers emitted without a section. */
body.brut-body [data-section="jobs"]{--crumb-bg:var(--cyan);--crumb-fg:var(--ink-solid);--crumb-dim:rgba(11,11,12,.62)}
body.brut-body [data-section="companies"]{--crumb-bg:var(--pink);--crumb-fg:#fff;--crumb-dim:rgba(255,255,255,.75)}
body.brut-body [data-section="candidates"]{--crumb-bg:var(--purple);--crumb-fg:#fff;--crumb-dim:rgba(255,255,255,.75)}
body.brut-body [data-section="news"]{--crumb-bg:var(--yellow);--crumb-fg:var(--ink-solid);--crumb-dim:rgba(11,11,12,.62)}

body.brut-body [data-section]{
  background:var(--crumb-bg,var(--bg))!important;border-bottom:3px solid var(--ink)!important;color:var(--crumb-fg,var(--ink));
}
body.brut-body [data-section] h1,
body.brut-body [data-section] .brut-crumbs a,
body.brut-body [data-section] ul li a{color:var(--crumb-fg,var(--ink))!important}
body.brut-body [data-section] .active a,
body.brut-body [data-section] .brut-crumbs a:hover,
body.brut-body [data-section] ul li a:hover{color:var(--crumb-dim,var(--muted))!important}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .brut-match{transform:rotate(0);margin-top:2rem}
  .brut-hero-title{font-size:clamp(2.2rem,10vw,3.4rem)}
  .brut-cta{padding:2rem}
  body.brut-body .logo-main-menu{height:30px}

  /* Mobile header bar. .logo-main-menu is display:block upstream, so the floated hamburger
     had no room beside it and wrapped onto a second line. That single fact caused all three
     symptoms: the bar grew to the height of both stacked (logo pinned top, icon pinned to the
     bottom edge), and because main.js pads <body> by this bar's measured height, the inflated
     bar became the tall empty band above the page content. One centred flex row fixes them. */
  body.brut-body #navbar-mobile .mobile-menu{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .85rem}
  body.brut-body #navbar-mobile .mobile-menu .logo-main-menu{height:30px;margin:0;flex:0 0 auto}
  body.brut-body #navbar-mobile .mobile-menu-trigger{float:none;flex:0 0 auto}

  /* the slide-in drawer was 80% wide; let it fill the screen */
  body.brut-body .mobile-offcanvas{width:100%}
}
/* Sticky nav is desktop-only. Below lg the nav must stay a .mobile-offcanvas (position:fixed)
   so it takes no flow space — see the note on the #navbar-main rule at the top of this file. */
@media (min-width:992px){
  body.brut-body #navbar-main.navbar-main{position:sticky;top:0}
}
@media (prefers-reduced-motion:reduce){
  body.brut-body *,body.brut-body *::before,body.brut-body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}