/* ITHireHub theme layer, v2 "Saffron & Amber" (light only, 24 Oct 2026). Loaded LAST on every page.
   Presentation only: depth, light, focus and motion on the shared classes. It never changes sizes, layout,
   display or visibility of existing components, so nothing about how a page works can change.
   Colours come from each page's own tokens (rewritten by retheme.php). The site is always light. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root{
  color-scheme:light;
  --e-out:cubic-bezier(.16,1,.3,1);      /* signature: fast start, long soft landing */
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-in:cubic-bezier(.4,0,1,1);
  --d1:140ms;--d2:260ms;--d3:520ms;
  --signal:#C2410C;--signal-2:#EA580C;--signal-3:#F59E0B;--spark:#FBBF24;
  --g-signal:linear-gradient(120deg,#C2410C 0%,#EA580C 52%,#F59E0B 100%);
  --ring:0 0 0 4px rgba(234,88,12,.18);
  --lift:0 1px 2px rgba(42,22,9,.05),0 18px 40px -22px rgba(124,45,18,.30);
  --glow:0 10px 26px -12px rgba(234,88,12,.55);
  --warm-line:#F0E1D1;
}

html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
::selection{background:rgba(234,88,12,.18)}
body{text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
/* a soft sunrise light at the top of every page (behind content, scrolls away) */
body{background-image:radial-gradient(1100px 460px at 50% -260px,rgba(245,158,11,.13),transparent 70%),radial-gradient(700px 360px at 92% -170px,rgba(234,88,12,.08),transparent 70%);background-repeat:no-repeat}
h1,h2,h3,h4{letter-spacing:-.028em}
.mono,code,kbd{font-feature-settings:"zero","ss01"}

/* keyboard focus: a clear ring, never removed */
:focus-visible{outline:2px solid var(--violet,#C2410C);outline-offset:2px}
.inp,input.inp,select.inp,textarea.inp,.tagbox{transition:border-color var(--d1) ease,box-shadow var(--d2) var(--e-out),background-color var(--d1) ease}
.inp:focus,.inp:focus-visible,.tagbox:focus-within{box-shadow:var(--ring);border-color:var(--violet)}

/* buttons: lift on hover, settle on press, warm sheen on the main action */
.btn{transition:translate var(--d1) var(--e-out),scale var(--d1) var(--e-out),box-shadow var(--d2) var(--e-out),background-color var(--d1) ease,border-color var(--d1) ease,color var(--d1) ease}
.btn:hover:not([disabled]){translate:0 -1px}
.btn:active:not([disabled]){translate:0 0;scale:.98;transition-duration:70ms}
.btn.pri{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -10px rgba(194,65,12,.8)}
.btn.pri:hover:not([disabled]){box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--glow)}
.btn.ghost:hover{translate:none}
.icon-btn,.save,.bell,.burger,.pill,.seg button,.chip,.tabs a,.sh-nav a,.mnav a{transition:background-color var(--d1) ease,color var(--d1) ease,border-color var(--d1) ease,box-shadow var(--d2) var(--e-out),scale var(--d1) var(--e-out)}
.save:active,.icon-btn:active{scale:.92}
.pill.on,.seg button.on{box-shadow:0 0 0 1px var(--violet) inset}

/* surfaces: quiet by default, warm up when they can be clicked */
.card,.item,.stat,.jc,.feat,.empty,.dlg{transition:box-shadow var(--d2) var(--e-out),border-color var(--d2) ease,translate var(--d2) var(--e-out)}
a.card:hover,a.item:hover,button.item:hover,a.stat:hover,.stat[href]:hover{box-shadow:var(--lift);translate:0 -2px}
.jc{overflow:visible}
.jc:hover{box-shadow:var(--lift),0 0 0 1px color-mix(in srgb,var(--violet) 30%,transparent);translate:0 -3px}
.jc h3 a{transition:color var(--d1) ease}.jc:hover h3 a{color:var(--violet-ink)}
@media (pointer:fine){
  .jc,.feat,.glow-card{background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),color-mix(in srgb,var(--signal-3) 10%,transparent),transparent 45%)}
}
.empty{background:linear-gradient(180deg,color-mix(in srgb,var(--violet-soft) 45%,var(--surface)),var(--surface))}
.loading{animation:ithh-breathe 1.6s var(--e-io) infinite}

/* company logos: the uploaded logo is shown whole (never cropped) on white; initials only when there is no logo */
.logo-box{position:relative}
.logo-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%;box-sizing:border-box;background:#fff;border:1px solid var(--line,#F0E1D1);border-radius:inherit}
/* when the logo loads, the box takes the logo's own shape (a wide wordmark gets a wide box, up to a limit) */
.logo-box:has(img){width:auto!important;min-width:0;max-width:112px;padding:0 5px;font-size:0!important;color:transparent;background:#fff!important;border:1px solid var(--line,#F0E1D1);display:flex;align-items:center;justify-content:center}
.logo-box:has(img) img{position:static;inset:auto;width:auto;height:74%;max-width:100%;padding:0;border:0;border-radius:0;background:transparent}
.co-chip .logo-box:has(img){border-radius:999px;max-width:84px}
.logobox{position:relative}
.logobox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;background:#fff;border:1px solid var(--line,#F0E1D1);border-radius:inherit}

/* site header: frosted cream, with a thin saffron line underneath */
.sh{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.sh::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(234,88,12,.45) 30%,rgba(245,158,11,.45) 65%,transparent);opacity:.8}
.sh-nav a.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 22%,transparent)}
.brand .mark{transition:rotate var(--d3) var(--e-out),scale var(--d3) var(--e-out)}.brand:hover .mark{rotate:-6deg;scale:1.04}

/* site footer: warm light sand, dark text */
.sf{position:relative;background:radial-gradient(60% 140% at 10% 0%,rgba(245,158,11,.16),transparent 60%),radial-gradient(45% 120% at 92% 0%,rgba(234,88,12,.10),transparent 60%),#FBEBDA;color:#6B4F3D;border-top:1px solid #F0DCC7}
.sf::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--g-signal);opacity:.7}
.sf .brand,.sf h4{color:#2A1609}
.sf p b[style]{color:#9A3412!important}
.sf a{color:#6B4F3D;transition:color var(--d1) ease}
.sf a:hover{color:#A3370A}
.sf-bot{border-top-color:#EBD3BB!important}

/* recruiter console sidebar: light cream rail */
.side{color:var(--ink);background:linear-gradient(180deg,#FFF4EA,#FFEFE0);box-shadow:inset -1px 0 0 #F0DCC7}
.side .logo{color:var(--ink)}
.side .nav{transition:background-color var(--d1) ease,color var(--d1) ease,box-shadow var(--d2) var(--e-out)}
.side .nav:hover{background:rgba(194,65,12,.07);color:var(--ink)}
.side .nav .ic{background:rgba(194,65,12,.08);color:var(--violet-ink);transition:background var(--d2) ease,translate var(--d2) var(--e-out)}
.side .nav:hover .ic{translate:1px 0}
.side .nav.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(42,22,9,.06),0 8px 18px -12px rgba(124,45,18,.35),inset 3px 0 0 var(--violet)}
.side .nav.on .ic{background:var(--g-signal);color:#fff;box-shadow:0 6px 14px -8px rgba(194,65,12,.9)}
.side .sfoot{border-top-color:#F0DCC7}
.side .sfoot b{color:var(--ink)}
.side .sfoot button{border-color:#E3CDB7;color:var(--ink-2,#4B3122)}
.side .sfoot button:hover{background:#fff}
.side nav,.side{scrollbar-width:thin;scrollbar-color:rgba(124,45,18,.22) transparent}
.mtop{color:var(--ink);background:#FFF4EA;border-bottom:1px solid #F0DCC7}
.mtop button{border-color:#E3CDB7;color:var(--ink)}
.mtop .logo,.mtop a{color:var(--ink)}
/* "how it works" panels on recruiter pages: a warm saffron card (white text stays readable) */
.how{background:radial-gradient(70% 120% at 100% 0%,rgba(251,191,36,.35),transparent 60%),linear-gradient(135deg,#9A3412,#C2410C 60%,#EA580C)}
.mark{box-shadow:0 6px 16px -8px rgba(194,65,12,.7)}

/* tabs: saffron underline */
.tabs a.on{border-image:var(--g-signal) 1}

/* dialogs, overlays, toasts: arrive softly */
.ov{animation:ithh-fade var(--d2) ease both}
.dlg,.modal{animation:ithh-pop var(--d3) var(--e-out) both}
.toast{box-shadow:0 18px 40px -16px rgba(42,22,9,.45)}

/* first paint: content rises in once (the page is fully visible after half a second) */
main.page,.main>.wrap{animation:ithh-rise var(--d3) var(--e-out) both}

/* auth pages: a quiet warm light behind the form (clipped so phones never scroll sideways) */
html:has(.auth),body:has(.auth){overflow-x:clip}
.auth{position:relative}
.auth::before{content:"";position:absolute;inset:-60px -140px auto;height:420px;z-index:-1;pointer-events:none;background:radial-gradient(40% 60% at 30% 30%,rgba(245,158,11,.20),transparent 70%),radial-gradient(35% 55% at 75% 40%,rgba(234,88,12,.12),transparent 70%);filter:blur(10px)}
.auth .hd .ico{box-shadow:var(--glow)}
.auth .card{box-shadow:var(--lift)}

/* scroll reveal (used by pages that opt in with data-reveal; motion script adds .is-in) */
html.ithh-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--d3) var(--e-out),transform calc(var(--d3) + 120ms) var(--e-out)}
html.ithh-motion [data-reveal].is-in{opacity:1;transform:none}
html.ithh-motion [data-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity var(--d3) var(--e-out),transform var(--d3) var(--e-out);transition-delay:calc(var(--i,0) * 60ms)}
html.ithh-motion [data-stagger].is-in>*{opacity:1;transform:none}

@keyframes ithh-rise{from{opacity:0;translate:0 8px}to{opacity:1;translate:none}}
@keyframes ithh-fade{from{opacity:0}to{opacity:1}}
@keyframes ithh-pop{from{opacity:0;translate:0 10px;scale:.97}to{opacity:1;translate:none;scale:none}}
@keyframes ithh-breathe{0%,100%{opacity:1}50%{opacity:.55}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  html.ithh-motion [data-reveal],html.ithh-motion [data-stagger]>*{opacity:1!important;transform:none!important}
  .btn:hover,.jc:hover,a.card:hover,a.item:hover,.feat:hover{translate:none!important}
}
@media print{.sh::after,.sf::before,.auth::before{display:none}}