.elementor-6128 .elementor-element.elementor-element-jbhero01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:33px 33px;--row-gap:33px;--column-gap:33px;--padding-top:0px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-6128 .elementor-element.elementor-element-jbpanel1{--display:flex;--min-height:45vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E8DED5;--border-color:#E8DED5;--border-radius:15px 15px 15px 15px;--padding-top:30px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-6128 .elementor-element.elementor-element-jbpanel1:not(.elementor-motion-effects-element-type-background), .elementor-6128 .elementor-element.elementor-element-jbpanel1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCF3EC;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-6128 .elementor-element.elementor-element-jbpill01{text-align:center;width:auto;max-width:auto;}.elementor-6128 .elementor-element.elementor-element-jbpill01 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#681514;}.elementor-6128 .elementor-element.elementor-element-jbpill01 > .elementor-widget-container{padding:12px 16px 12px 16px;background-color:#FCF3EC;border-style:solid;border-width:1px 1px 1px 1px;border-color:#681514;border-radius:15px 15px 15px 15px;}.elementor-6128 .elementor-element.elementor-element-jbh10001{text-align:start;width:var( --container-widget-width, 55% );max-width:55%;--container-widget-width:55%;--container-widget-flex-grow:0;}.elementor-6128 .elementor-element.elementor-element-jbh10001 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:60px;font-weight:500;line-height:60px;color:#681514;}.elementor-6128 .elementor-element.elementor-element-jbh10001 > .elementor-widget-container{padding:10px 0px 0px 0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-6128 .elementor-element.elementor-element-e5a46cc{font-family:"Inter", Sans-serif;font-size:18px;font-weight:400;text-transform:none;line-height:28px;color:#681514;width:var( --container-widget-width, 55% );max-width:55%;--container-widget-width:55%;--container-widget-flex-grow:0;}.elementor-6128 .elementor-element.elementor-element-jbbody01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:26px 26px;--row-gap:26px;--column-gap:26px;--padding-top:10px;--padding-bottom:70px;--padding-left:30px;--padding-right:30px;}@media(max-width:1366px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-6128 .elementor-element.elementor-element-jbh10001{--container-widget-width:70%;--container-widget-flex-grow:0;width:var( --container-widget-width, 70% );max-width:70%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-6128 .elementor-element.elementor-element-e5a46cc{--container-widget-width:55%;--container-widget-flex-grow:0;width:var( --container-widget-width, 55% );max-width:55%;}}@media(max-width:1024px){.elementor-6128 .elementor-element.elementor-element-jbhero01{--padding-top:0px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-6128 .elementor-element.elementor-element-jbpanel1{--min-height:32vh;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-6128 .elementor-element.elementor-element-jbh10001 .elementor-heading-title{font-size:55px;line-height:55px;}.elementor-6128 .elementor-element.elementor-element-jbh10001{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-6128 .elementor-element.elementor-element-e5a46cc{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-6128 .elementor-element.elementor-element-jbbody01{--padding-top:10px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}}@media(max-width:767px){.elementor-6128 .elementor-element.elementor-element-jbhero01{--padding-top:0px;--padding-bottom:30px;--padding-left:18px;--padding-right:18px;}.elementor-6128 .elementor-element.elementor-element-jbpanel1{--padding-top:30px;--padding-bottom:30px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-6128 .elementor-element.elementor-element-jbh10001 .elementor-heading-title{font-size:42px;line-height:42px;}.elementor-6128 .elementor-element.elementor-element-jbh10001{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-6128 .elementor-element.elementor-element-jbbody01{--padding-top:6px;--padding-bottom:50px;--padding-left:18px;--padding-right:18px;}}@media(min-width:768px){.elementor-6128 .elementor-element.elementor-element-jbhero01{--width:100%;}.elementor-6128 .elementor-element.elementor-element-jbpanel1{--width:100%;}.elementor-6128 .elementor-element.elementor-element-jbbody01{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-jbwrap01 */.elementor-6128 .elementor-element.elementor-element-jbwrap01 .acuspire-job-logo-container {
width: 120px !important;
height: 80px !important;
min-width: 120px !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.elementor-6128 .elementor-element.elementor-element-jbwrap01 .acuspire-job-logo-container img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}/* End custom CSS */
/* Start custom CSS *//* ---------- Acuspire job widget, dressed to match the site ----------------
The widget fetches its own stylesheet from static.acuspire.ai at runtime and
appends it to after this file, so it wins every tie on specificity.
That is the only reason these declarations carry !important. Everything is
scoped to .jb-widget, so nothing here can reach the rest of the site. */
.jb-widget, .jb-widget * { font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif !important; }
/* the search bar, treated like the filter boxes elsewhere on the site */
.jb-widget .acuspire-search-container{
background:#FCF3EC !important; border:1px solid #E8DED5 !important;
border-radius:15px !important; padding:20px !important; margin:0 0 26px !important;
}
.jb-widget .acuspire-search-text{
background:#FFFFFF !important; border:1px solid #E8DED5 !important; border-radius:15px !important;
color:#681514 !important; font-size:15px !important; padding:11px 15px !important;
height:auto !important; box-shadow:none !important;
}
.jb-widget .acuspire-search-text::placeholder{ color:#8A5150 !important; opacity:1 !important; }
.jb-widget .acuspire-search-text:focus{ border-color:#A88648 !important; outline:none !important; }
/* buttons: the site shape, colour and hover */
.jb-widget .acuspire-btn-search,
.jb-widget .acuspire-btn-apply{
background:#6E1B29 !important; border:1px solid #6E1B29 !important; color:#FFFFFF !important;
border-radius:15px !important; font-size:14px !important; font-weight:500 !important;
padding:10px 15px !important; min-height:46px !important; text-transform:none !important;
transition:background-color .22s cubic-bezier(.2,.6,.3,1), border-color .22s cubic-bezier(.2,.6,.3,1) !important;
}
.jb-widget .acuspire-btn-search:hover,
.jb-widget .acuspire-btn-apply:hover{ background:#490A0A !important; border-color:#490A0A !important; }
/* results tabs */
.jb-widget .results-tabs,
.jb-widget .tab-container{ border-bottom:1px solid #E8DED5 !important; }
.jb-widget .tab-button{
background:transparent !important; border:0 !important; border-bottom:2px solid transparent !important;
color:#8A5150 !important; font-size:15px !important; font-weight:500 !important;
}
.jb-widget .tab-button.active{ color:#6E1B29 !important; border-bottom-color:#A88648 !important; }
/* one job, as a card */
.jb-widget .acuspire-job-container{
background:#FCF3EC !important; border:1px solid #E8DED5 !important;
border-radius:12px !important; padding:22px !important; margin-bottom:14px !important;
}
.jb-widget .job-title-container,
.jb-widget .job-title-container a{
font-family:"Bricolage Grotesque",sans-serif !important;
font-size:22px !important; line-height:29px !important; font-weight:500 !important;
color:#8A6A2E !important; text-decoration:none !important;
}
.jb-widget .member-company-highlight{
background:#F3E9E1 !important; border:1px solid #E8DED5 !important; border-radius:999px !important;
color:#6E1B29 !important; font-size:13px !important; padding:4px 12px !important;
}
.jb-widget .location{
background:#F3E9E1 !important; border:1px solid #E8DED5 !important; border-radius:999px !important;
color:#8A5150 !important; font-size:12px !important; padding:4px 12px !important;
}
.jb-widget .posted-date{ color:#8A5150 !important; font-size:13px !important; }
.jb-widget .acuspire-job-description{ color:#681514 !important; font-size:18px !important; line-height:28px !important; }
.jb-widget .bookmark-button{ color:#A88648 !important; }
/* pagination */
/* Bootstrap's negative row margins push past the page gutter otherwise */
.jb-widget .container-fluid{ padding-left:0 !important; padding-right:0 !important; }
.jb-widget .row{ margin-left:0 !important; margin-right:0 !important; }
/* Three places where the widget stylesheet loads after this file and has to
be out-specified rather than simply flagged important. */
.jb-widget .bookmark-button svg path{ fill:#A88648 !important; }
/* The widget carries an id, so these use it. A class-only rule loses to
the widget stylesheet here even when flagged important. */
#acuspire-job-widget-container #acuspire-job-board .tab-button{ color:#8A5150 !important; border-bottom:3px solid transparent !important; }
#acuspire-job-widget-container #acuspire-job-board .tab-button.active{ color:#6E1B29 !important; border-bottom-color:#A88648 !important; }
#acuspire-job-widget-container .acuspire-job-descr-container > p{ color:#681514 !important; font-size:15px !important; line-height:22px !important; }
#acuspire-job-widget-container .posted-date,
#acuspire-job-widget-container .posted-date small{ color:#8A5150 !important; font-size:13px !important; line-height:18px !important; }
/* On a narrow phone the two result tabs sit side by side and overrun the
gutter by a few pixels. Letting them wrap costs nothing on a wide screen. */
#acuspire-job-widget-container .tab-container{ flex-wrap:wrap !important; row-gap:4px !important; }
#acuspire-job-widget-container .acuspire-job-container,
#acuspire-job-widget-container *{ max-width:100% !important; }
/* Pagination: the page you are on is a solid button, the rest are outlined,
the same way primary and secondary buttons work everywhere else. */
#acuspire-job-widget-container .acuspire-paginate{
background:#FFFFFF !important; border:1px solid #E8DED5 !important; color:#6E1B29 !important;
border-radius:12px !important; font-size:15px !important; font-weight:500 !important;
transition:background-color .22s cubic-bezier(.2,.6,.3,1), border-color .22s cubic-bezier(.2,.6,.3,1), color .22s cubic-bezier(.2,.6,.3,1) !important;
}
#acuspire-job-widget-container .acuspire-paginate:hover{ background:#F3E9E1 !important; border-color:#A88648 !important; }
#acuspire-job-widget-container .acuspire-paginate.acuspire-active{
background:#6E1B29 !important; border-color:#6E1B29 !important; color:#FFFFFF !important;
}
#acuspire-job-widget-container .acuspire-paginate.acuspire-active:hover{ background:#490A0A !important; border-color:#490A0A !important; }
/* The search row is laid out here rather than left to the widget grid.
Bootstrap columns inset their contents with their own padding and pull it
back with negative row margins, and the two stop matching once their
breakpoints stack the fields - which left more space on one side than the
other on a phone. A flex row with a real gap means the only thing setting
the left and right inset is the panel padding, so it is equal at every width. */
#acuspire-job-widget-container .acuspire-search-container .row{
display:flex !important; flex-wrap:wrap !important; gap:12px !important;
margin:0 !important; width:100% !important;
}
#acuspire-job-widget-container .acuspire-search-container [class*="col-"]{
padding:0 !important; margin:0 !important; flex:1 1 220px !important;
min-width:0 !important; max-width:100% !important; width:auto !important; float:none !important;
}
#acuspire-job-widget-container .acuspire-search-container .acuspire-search-wrap{ margin:0 !important; width:100% !important; }
#acuspire-job-widget-container .acuspire-search-text,
#acuspire-job-widget-container .acuspire-btn-search{ width:100% !important; display:block !important; }
/* The panel padding has to be set from the id: the widget sets its own with
an id, so a class-only rule loses and the fields sat hard against
the panel edge. The inner wrap is zeroed for the same reason - it was
adding an inset on one side only. */
#acuspire-job-widget-container .acuspire-search-container{
padding:20px !important; margin:0 0 26px !important;
background:#FCF3EC !important; border:1px solid #E8DED5 !important; border-radius:15px !important;
}
#acuspire-job-widget-container .acuspire-search-container .acuspire-search-wrap{
padding:0 !important; margin:0 !important; width:100% !important;
}
@media (max-width:767px){
#acuspire-job-widget-container .acuspire-search-container{ padding:16px !important; }
}
/* The search row is laid out as a grid, with two ids so it beats the widget
stylesheet outright. A flex row left slack that the browser split unevenly
once the fields wrapped, and the widget itself sets padding-left:16px against
padding-right:15px and zeroes the padding on the first column only. A grid of
equal 1fr tracks fills the row exactly at every width, so the only thing
setting the left and right inset is the panel padding. */
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container{
padding:20px !important; margin:0 0 26px !important;
}
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container .row{
display:grid !important; grid-template-columns:1fr !important;
gap:12px !important; width:100% !important; margin:0 !important; padding:0 !important;
align-items:center !important;
}
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container .row > *{
padding:0 !important; margin:0 !important; width:auto !important; max-width:none !important;
min-width:0 !important; float:none !important;
}
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-text,
#acuspire-job-widget-container #acuspire-job-board .acuspire-btn-search{
width:100% !important; margin:0 !important; display:block !important;
}
@media (max-width:767px){
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container{ padding:16px !important; }
}
/* border-box so the field borders count inside the track rather than adding
a couple of pixels past it on the narrowest phones */
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container .row > *,
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-text,
#acuspire-job-widget-container #acuspire-job-board .acuspire-btn-search{ box-sizing:border-box !important; }
/* Stacked is the default, so the phone layout stands even if the query below
never applies. From tablet up the two fields take the room on the left and
the button sits against the right edge. */
@media (min-width:768px){
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container .row{
grid-template-columns:1fr 1fr minmax(150px,200px) !important; gap:12px !important;
}
}
/* Bootstrap puts clearfix pseudo-elements on .row. In a grid container those
count as grid items, so they were taking the first track and pushing the
fields along one. */
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container .row::before,
#acuspire-job-widget-container #acuspire-job-board .acuspire-search-container .row::after{
content:none !important; display:none !important;
}
/* EA-CONTRAST-WIDGET - 15 September 2026.
Two colours the Acuspire widget sets on itself fail WCAG on this page:
the employer name #808080 on cream (3.60:1) and the wage tag #7A7A7A on
its green pill (3.42:1). We already restyle this widget here, so they are
corrected here too, in the same .jb-widget scope the rest of the file uses.
The widget loads its stylesheet at runtime, which is why these need
!important like everything else in this block. */
.jb-widget h5 span{color:#8A5150 !important}
.jb-widget .wage_tag{color:#2F5738 !important}
/* Apply button and bookmark - measured in the browser, not inferred.
A list card's DOM:
.acuspire-job-container flex row
.acuspire-job-descr-container logo, title, summary
h3.job-title-container the title row - AND the bookmark
.acuspire-job-meta-apply
.job-description-apply
a display:inline, zero width
button.acuspire-btn-apply carries col-xs-12, i.e. width:100%
The bookmark lives in the title row, a different branch from the button, so
no CSS can put the two side by side. A small script in
mu-plugins/ea-job-board.php moves the node into .job-description-apply and
these rules lay it out once it is there.
That zero-width is why the width is set on the wrapper rather than the
button: the moment .job-description-apply became a flex row, the button's own
width:100% started resolving against the instead of the column, and
collapsed to the width of the word Apply. */
#acuspire-job-widget-container .acuspire-job-container .job-description-apply{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:20px !important;
}
#acuspire-job-widget-container .acuspire-job-container .bookmark-container{
flex:0 0 auto !important;
}
#acuspire-job-widget-container .acuspire-job-container .job-description-apply > a{
display:block !important; flex:0 0 200px !important; min-width:0 !important;
}
/* The single-job view. Its Apply is a flex item in a 103px-tall row and was
being stretched to fill it - 200x103, a panel rather than a button.
align-self is what stops that; height:auto alone cannot, because it is
align-items:stretch on the PARENT that sets the cross size. Width matches the
list button so the two views agree. */
#acuspire-job-widget-container .job-desc-apply-button{
align-self:flex-start !important;
flex:0 0 auto !important;
height:auto !important;
width:200px !important;
}
/* Same stretch, same cause: the back arrow was rendering as a 39x131 red bar
down the left of the card. */
#acuspire-job-widget-container .back-button{
align-self:flex-start !important;
height:auto !important;
min-height:44px !important;
}
/* Phone: the button takes the rest of the row beside the bookmark. */
@media (max-width:767px){
#acuspire-job-widget-container .acuspire-btn-apply{
width:100% !important; max-width:none !important; display:block !important;
}
#acuspire-job-widget-container .acuspire-job-container .job-description-apply > a{
width:100% !important; flex:1 1 100% !important;
}
}
/* ---------------------------------------------------------------------------
NARROW CARDS - 16 September 2026.
The widget's own stylesheet is served cross-origin, so its breakpoints
cannot be read from here, and a guessed media query would be wrong the day
Acuspire changes one. So the script in mu-plugins/ea-job-board.php asks each
card whether its logo and its description are still on the same row, and adds
.ea-stacked when they are not. These rules key off that, which means they
follow the widget's real layout rather than a number we chose.
Stacked, the bookmark is pinned to the card's top right corner rather than
sitting beside Apply - down beside a full-width button it read as part of the
button. 22px is the card's own padding, so it lines up with the logo and the
title. Absolute positioning means the script can go on putting the node in
the same place at every width.
The logo is the site's 120x80 box with an 80x80 square image fitted inside
it, so contain centres it and leaves 20px of air on the left that reads as an
indent against the title. object-position pushes the artwork left instead. */
#acuspire-job-widget-container .acuspire-job-container.ea-stacked{ position:relative !important; }
#acuspire-job-widget-container .acuspire-job-container.ea-stacked .bookmark-container{
position:absolute !important; top:22px !important; right:22px !important; margin:0 !important;
}
#acuspire-job-widget-container .acuspire-job-container.ea-stacked .acuspire-job-logo-container img{
object-position:left center !important;
}
#acuspire-job-widget-container .acuspire-job-container.ea-stacked .job-description-apply > a{
/* width, not flex-grow: the widget sets flex on this anchor with !important and
a longer reach than anything scoped to this page, so grow is ignored and the
anchor stays the width of the word Apply. A width is not in that rule. */
width:100% !important; flex:1 1 100% !important; display:block !important;
}
#acuspire-job-widget-container .acuspire-job-container.ea-stacked .acuspire-btn-apply{
width:100% !important; max-width:none !important; display:block !important;
}
/* Stacked, the Apply block sat directly against the last line of the summary -
measured 0px between them - which read as though the button belonged to the
sentence. 10px above separates them, and 10px below adds to the 15px the block
already carries plus the card's 22px padding. Measured on the live page:
summary to button 0px -> 10px, button to the card's bottom edge 38px -> 48px.
Only when stacked; the desktop row is unchanged. */
#acuspire-job-widget-container .acuspire-job-container.ea-stacked .acuspire-job-meta-apply{
margin-top:10px !important;
margin-bottom:10px !important;
}
/* ---------------------------------------------------------------------------
THE OPEN JOB HEADER - 16 September 2026.
Acuspire builds it three branches deep, in a different order from a list
card: the logo, title, bookmark and posted date share one row; the company
sits under that row; the location and wage are in a separate block below the
whole thing. The script in mu-plugins/ea-job-board.php moves those nodes into
list-card order - back / logo / [title, company + location, posted, wage] /
[bookmark, Apply] - and sets data-ea-laid on the header once it has.
Every rule below is keyed to that attribute on purpose. If the script does
not run, or Acuspire changes the markup enough that it bails, none of this
applies and the widget's own header renders untouched rather than in pieces.
The two wrappers the script empties are hidden rather than removed, because
the widget still holds references to them.
The type is the list card's type, so the two read as one component: the
title is the card title, the company and the location pill are the card's
h5 row, and the posted line is the card's posted date. The pin and clock
icons are dropped because a list card does not have them. */
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid]{
display:flex !important; flex-direction:row !important; align-items:flex-start !important;
gap:20px !important; flex-wrap:nowrap !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] img.job-logo{
flex:0 0 auto !important; width:80px !important; height:80px !important;
object-fit:contain !important; object-position:left center !important; margin:0 !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-card-top-section{
flex:1 1 auto !important; min-width:0 !important; margin:0 !important;
display:flex !important; flex-direction:column !important;
align-items:flex-start !important; gap:6px !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-title{
font-family:Bricolage Grotesque, sans-serif !important;
font-size:22px !important; line-height:29px !important; font-weight:500 !important;
color:#8A6A2E !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-company{
display:flex !important; align-items:center !important; gap:14px !important;
flex-wrap:wrap !important; margin:0 !important;
font-family:Inter, Helvetica, Arial, sans-serif !important;
font-size:14px !important; line-height:20px !important; font-weight:500 !important;
color:#8A5150 !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-company .svg-and-text{
background:#F3E9E1 !important; border:1px solid #E8DED5 !important; border-radius:999px !important;
padding:4px 12px !important; font-size:12px !important; line-height:16px !important;
color:#8A5150 !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-company .svg-and-text svg,
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .posted-job-time svg{
display:none !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .posted-job-time{
font-family:Inter, Helvetica, Arial, sans-serif !important;
font-size:13px !important; line-height:19px !important; font-weight:500 !important;
color:#8A5150 !important; margin:0 !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .wage_text{ margin:2px 0 0 !important; }
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-title-posted-time{ display:none !important; }
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] ~ .job-card-summary-section{ display:none !important; }
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-title-posted-time-apply-button{
flex:0 0 auto !important; width:auto !important;
display:flex !important; flex-direction:row !important;
align-items:center !important; gap:20px !important;
}
/* Phone: back and logo keep the top row, the title block and the button each
take a full line, and the bookmark goes to the corner - the same shape as a
stacked list card. */
@media (max-width:767px){
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid]{
flex-wrap:wrap !important; gap:14px !important; position:relative !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-card-top-section{
flex:1 1 100% !important; order:3 !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-title-posted-time-apply-button{
flex:1 1 100% !important; width:100% !important; order:4 !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .bookmark-container{
position:absolute !important; top:0 !important; right:0 !important; margin:0 !important;
}
#acuspire-job-widget-container .job-card-inner-top[data-ea-laid] .job-desc-apply-button{
width:100% !important;
}
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://employeradvantage.ca/wp-content/uploads/BricolageGrotesque-Medium.ttf') format('truetype');
}
/* End Custom Fonts CSS */