/* Casis Careers theme for the Toronto Tech Map. Load after styles.css.
   Matches casiscareers.com (October 2026 redesign): same palette and the same
   self-hosted fonts, copied from the main site's fonts/ folder. */
@font-face{font-family:Bungee;src:url(fonts/bungee.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:VT323;src:url(fonts/vt323.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans.woff2) format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --bg:#F5F0E1; --panel:#F5F0E1; --ink:#071A31; --ink-2:#36455F; --ink-3:#5E6E86;
  --line:#071A31; --line-2:rgba(7,26,49,.14); --accent:#071A31; --chip:#E1F1FF;
  --shadow:4px 4px 0 #071A31;
  --r:14px;
  --cta:#D9A21B; --cta-dark:#C48F12;
  --green:#2A5550; --green-dark:#2A5550;
  --blue:#0C64AA; --cream:#FFFDF6;
}
body{font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}

/* ---------- panel ---------- */
#panel{border-right:3px solid var(--ink);background:var(--panel);
  background-image:linear-gradient(rgba(7,26,49,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(7,26,49,.045) 1px,transparent 1px);
  background-size:28px 28px}
#head{background:transparent;border-bottom:3px solid var(--ink);padding:20px 20px 18px}
.brand h1{font-family:Bungee,sans-serif;font-weight:400;font-size:21px;letter-spacing:.01em;color:var(--ink)}
.wordmark img{background:var(--ink);border-radius:50%;width:28px;height:28px;padding:5px}
#infobtn{border:2px solid var(--ink);color:var(--ink);background:var(--cream)}
#infobtn .tip{background:var(--ink);font-family:"Nunito Sans",sans-serif;border:2px solid var(--cta);border-radius:12px}
#infobtn .tip::before{border-bottom-color:var(--cta)}

/* CTA buttons: same gold + navy shadow as the main site */
.hirecta,#contactbtn{background:var(--cta);color:var(--ink);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
/* both CTAs are the same control: same size, shape and colour */
.hirecta,#contactbtn{border-radius:999px;padding:9px 15px;font-size:12.5px;line-height:1}
.hirecta:hover,#contactbtn:hover{background:#E3B23A;color:var(--ink);border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.hirecta:active,#contactbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);opacity:1}
#contactbtn{display:block;margin-top:10px;text-align:center}

/* search + filters */
#search{background:var(--cream);border:2px solid var(--ink);border-radius:999px;font-size:14px;padding:11px 34px 11px 38px}
#search:focus{border-color:var(--blue);box-shadow:3px 3px 0 var(--ink)}
.sicon{left:14px;stroke:var(--ink-2)}
.f span{font-family:VT323,monospace;font-weight:400;font-size:17px;letter-spacing:.08em;color:var(--blue)}
.f select{background:var(--cream);border:2px solid var(--ink);border-radius:10px;font-size:13px;color:var(--ink)}
.f select:focus{border-color:var(--blue)}
.chip{background:var(--chip);border:1.5px solid var(--ink);color:var(--ink-2)}
#reset{color:var(--ink);font-weight:700}
#filtertoggle{border:2px solid var(--ink);background:var(--cream);border-radius:10px}

/* ---------- results ---------- */
#results{padding:10px}
.card{background:var(--cream);border:2px solid var(--line-2);border-radius:var(--r);transition:border-color .12s,box-shadow .12s,transform .12s}
.card + .card{margin-top:8px}
.card:hover{background:var(--cream);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.card.sel,#results .card.sel{background:var(--cream);border-color:var(--ink);box-shadow:0 0 0 2px var(--cta),4px 4px 0 var(--ink)}
.card:focus-visible{outline:3px solid var(--cta)}
.logo{border:2px solid var(--ink);border-radius:10px;background:#fff}
.mono{background:var(--chip);color:var(--ink);font-family:Bungee,sans-serif;font-weight:400}
.cname{font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800;font-size:14px;color:var(--ink)}
.ccat{font-family:VT323,monospace;font-size:16px;letter-spacing:.06em;color:var(--blue)}
.cdesc{color:var(--ink-2)}
.tag{background:var(--chip);color:var(--ink-2);border-radius:999px;padding:2px 8px}
.tag.office{background:#E1F1FF;color:var(--blue)}
.tag.hiringtor{background:var(--green);color:#fff}
.links a{color:var(--ink);border-bottom:2px solid var(--cta)}
.links a:hover{color:var(--blue);border-color:var(--blue)}
.links a.careers{color:var(--green);border-color:var(--green)}
.hirepill{background:var(--green);color:#fff;font-family:VT323,monospace;font-weight:400;font-size:14px;letter-spacing:.1em;padding:2px 8px;border:1.5px solid var(--ink)}
.empty{color:var(--ink-2)}

/* ---------- footer ---------- */
#foot{background:var(--panel);border-top:3px solid var(--ink)}
#footbox{background:var(--ink);border:2px solid var(--ink);border-radius:var(--r);padding:12px 14px}
/* The footer box sat open and ate the bottom of the list. The prompt is now the
   toggle; the button slides up out of it like a drawer. */
#contacttoggle{display:flex;align-items:center;gap:10px;width:100%;padding:0;
  background:transparent;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
#contact{flex:1;color:#F5F0E1;font-family:Archivo,sans-serif;font-stretch:112%;font-weight:700}
#contacttoggle .chev{flex:0 0 18px;width:18px;height:18px;color:#F5F0E1;
  transition:transform .22s ease}
#contacttoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
#contactdrawer{max-height:0;overflow:hidden;transition:max-height .24s ease}
#contactdrawer.open{max-height:90px}
@media (prefers-reduced-motion:reduce){
  #contactdrawer,#contacttoggle .chev{transition:none}
}
#freshness{font-family:VT323,monospace;font-size:15px;letter-spacing:.06em;color:var(--ink-3)}
#showmap{background:var(--blue);border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink)}

/* ---------- map ---------- */
#map{background:#EDE6D2}
.leaflet-tile-pane{filter:sepia(.32) saturate(.85) brightness(1.02)}
.pindot{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff}
.pinwrap:hover .pindot,.pinwrap.active .pindot{border-color:var(--ink);box-shadow:0 0 0 3px var(--cta),2px 2px 0 var(--ink)}
.marker-cluster{background:rgba(217,162,27,.35)}
.marker-cluster div{background:var(--ink);color:#F5F0E1;font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800;border:2px solid var(--cta)}
.leaflet-control-zoom{border:2px solid var(--ink)!important;border-radius:12px!important;box-shadow:3px 3px 0 var(--ink)!important;overflow:hidden}
.leaflet-control-zoom a{background:var(--cream)!important;color:var(--ink)!important;font-weight:800}
.leaflet-control-zoom a:hover{background:var(--cta)!important}
.leaflet-control-attribution{background:rgba(245,240,225,.85)}
#toggellist,#togglelist{background:var(--cta);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800}

/* popup */
.leaflet-popup-content-wrapper{background:var(--cream);border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.leaflet-popup-tip{background:var(--cream);border:3px solid var(--ink)}
.popname{font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800;color:var(--ink)}
.popcat{font-family:VT323,monospace;font-size:16px;letter-spacing:.06em;color:var(--blue)}
.popdesc{color:var(--ink-2)}
.flagnote{background:#FFF4D6;border:1.5px solid var(--cta);color:#6B4F06}

/* Tally side panel */
#hirescrim{background:rgba(7,26,49,.6)}
/* The form covers the whole left column now: up from the footer handle, down
   from the Need help hiring button. Two entrances, one surface. */
#panel{position:relative;overflow:hidden}
#hirepanel{position:absolute;top:0;bottom:0;left:0;right:auto;width:100%;height:auto;max-width:none;
  animation:none;
  background:var(--bg);border-left:0;border-top:3px solid var(--ink);
  box-shadow:0 -8px 0 var(--cta);z-index:1400;
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.33,1,.68,1)}
#hirepanel[data-dir="down"]{transform:translateY(-100%);
  border-top:0;border-bottom:3px solid var(--ink);box-shadow:0 8px 0 var(--cta)}
#hirepanel.open{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ #hirepanel{transition:none} }
.hirehead h2{font-family:Bungee,sans-serif;font-weight:400;font-size:19px;color:var(--ink)}
#hireclose{border:2px solid var(--ink);border-radius:50%;background:var(--cta);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.hiresub{color:var(--ink-2)}

/* the info tip uses Inter in styles.css */
#infobtn .tip{font-family:"Nunito Sans",sans-serif}

/* The native select arrow sat on top of the label text at this font size. */
.f select{padding-right:34px;text-overflow:ellipsis}

/* Leaflet draws its close X at the popup's top right, exactly where the HIRING
   pill sits. Move the pill in and give the X its own corner. */
.pop .hirepill{top:12px;right:34px}
.pop:has(.hirepill) .popname{padding-right:86px}
.leaflet-popup-close-button{width:24px;height:24px;font-size:18px;line-height:22px;
  top:6px;right:6px;color:var(--ink);opacity:.75}
.leaflet-popup-close-button:hover{opacity:1}

/* The Updated line sat under the footer box and took a row away from the list.
   It now sits beside the Need help hiring button. */
#head .brandrow #freshness{margin:0 0 0 4px;font-size:15px;line-height:1;text-align:left;white-space:nowrap}

/* The footer prompt is a button, so it looks like one: the main site's cream
   "How we work" button (btn-w), with the same outline and hard navy shadow. */
/* #foot prefix: casiscareers.com's Worker injects an older theme after this
   file, and the extra id keeps these rules ahead of it. */
#foot #footbox{background:#F5F0E1;border:3px solid var(--ink);border-radius:28px;padding:12px 18px;
  box-shadow:4px 4px 0 var(--ink);margin:0 4px 4px 0;transition:transform .12s ease,box-shadow .12s ease}
#foot #footbox:has(#contacttoggle:hover){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
#footbox #contact{color:var(--ink);font-weight:800}
#contacttoggle .chev{color:var(--ink)}
#contacttoggle:focus-visible{outline:3px solid var(--cta);outline-offset:6px;border-radius:999px}

/* Filters: each dropdown's default option already names it ("All sizes",
   "Anywhere in Toronto"), so the SIZE/STAGE labels only cost height. They stay
   in the markup, hidden visually, so screen readers still announce them. */
#filters{row-gap:10px;margin-top:12px}
.f{gap:0}
.f span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The native arrow sat against the right edge. Draw our own, set in 14px. */
.f select{-webkit-appearance:none;appearance:none;padding:9px 38px 9px 12px;
  background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071A31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/14px 14px}

/* The close X sat 6px from the popup's corner, on the 3px border and its
   rounded curve. Set it inside the box, clear of the border, with the HIRING
   pill moved left to make room. */
.leaflet-container a.leaflet-popup-close-button{top:12px;right:12px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;padding:0;font-size:20px;line-height:1;
  color:var(--ink);opacity:.7;border-radius:50%}
.leaflet-container a.leaflet-popup-close-button:hover{opacity:1;background:var(--chip)}
.pop .hirepill{top:13px;right:42px}
.pop:has(.hirepill) .popname{padding-right:96px}
.pop:not(:has(.hirepill)) .popname{padding-right:26px}

/* Popup was 262px wide and the HIRING pill (absolute, ~77px plus its 42px
   offset) sat on top of longer names. Wider box, and the name reserves the
   pill's full footprint so it wraps before reaching it. */
.leaflet-popup-content{width:340px!important}
@media (max-width:420px){ .leaflet-popup-content{width:calc(100vw - 60px)!important} }
.pop:has(.hirepill) .popname{padding-right:118px}
.pophead > div{min-width:0}
.popname{overflow-wrap:anywhere}
/* Reserve the pill's space beside the whole name + category block, not just
   the name: long categories ("E-Commerce & Retail") ran under it too. */
.pop:has(.hirepill) .popname{padding-right:0}
.pop:has(.hirepill) .pophead > div{padding-right:118px}
.popcat{overflow-wrap:anywhere}

/* Bigger popups: the card was cramped and the text small. Everything inside
   .pop scales up; the pill reservation grows with the pill. */
.leaflet-popup-content{width:380px!important;font-size:15px}
@media (max-width:440px){ .leaflet-popup-content{width:calc(100vw - 56px)!important} }
.pop{padding:18px}
.pophead{gap:14px}
.pop .logo{flex:0 0 48px;width:48px;height:48px}
.popname{font-size:18px;line-height:1.2}
.popcat{font-size:19px}
.popdesc{font-size:14.5px;line-height:1.55;margin-top:12px}
.pop .meta{margin-top:12px;gap:6px}
.pop .tag{font-size:12.5px;padding:3px 10px}
.popaddr{font-size:13.5px;margin-top:10px}
.pop .links{gap:14px;margin-top:12px}
.pop .links a{font-size:14px}
.pop .hirepill{font-size:16px;top:17px;right:46px}
.leaflet-container a.leaflet-popup-close-button{top:15px;right:14px;width:28px;height:28px;font-size:24px}
.pop:has(.hirepill) .pophead > div{padding-right:120px}
.pop .hirepill{right:50px}
.pop:has(.hirepill) .pophead > div{padding-right:124px}

/* casiscareers.com's Worker loads an older theme after this file whose
   ".f select{background:...}" shorthand wiped the arrow. The #filters prefix
   keeps this rule ahead of it. */
#filters .f select{background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071A31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/14px 14px}