/* Poppins: must stay the first line of the CSS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* =========================================================
   eFlexes: Firefish custom content CSS
   Matches the new eFlexes website (WordPress / Elementor).
   Covers the advert application form (apply.aspx) and the
   registration form (register.aspx), plus header and footer.

   All design values are set once, below. They come from the
   new site's Site Settings and the job search bar.
   ========================================================= */

:root {
  /* Colours (new site Global Colors) */
  --ef-primary: #2664B0;   /* buttons, links */
  --ef-secondary: #0F2939; /* headings, footer, button hover */
  --ef-text: #555555;      /* body copy */
  --ef-accent: #EBF4FF;    /* light blue panels */
  --ef-light-grey: #F4F5F6;
  --ef-border: #DCDDDD;
  --ef-white: #FFFFFF;
  --ef-footer-link: #D5DEE7;
  --ef-hero-eyebrow: #CFE0F5;
  --ef-hero-gradient: linear-gradient(110deg, #0F2939 45%, #2664B0);

  /* Type (new site Global Fonts, desktop sizes) */
  --ef-font: "Poppins", Arial, sans-serif;
  --ef-hero-heading: 42px;   /* Hero heading 48px = 3rem */
  --ef-hero-heading-mobile: 28px; /* 32px = 2rem */
  --ef-section-heading: 34px;
  --ef-eyebrow: 13px;
  --ef-body: 16px;
  --ef-small: 15px;
  --ef-label: 14px;        /* "Text link" style: form labels */
  --ef-button: 15px;
  --ef-field: 15px;

  /* Page side padding, desktop: lines content up with the logo.
     Header padding 8rem (112px) plus Elementor's 10px container padding.
     Tablet and mobile: 3rem / 1.5rem at the 14px base. */
  --ef-side: 122px;
  --ef-side-tablet: 42px;
  --ef-side-mobile: 21px;

  /* Shapes */
  --ef-radius: 2px;        /* fields and buttons */
  --ef-card-radius: 8px;   /* cards and panels */
}


/* ---------- Font everywhere ---------- */

body,
input,
select,
textarea,
button,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ef-font) !important;
}

body {
  color: var(--ef-text);
  font-size: var(--ef-body);
  background: var(--ef-light-grey);
}


/* ---------- Page width: full width with the new site's side padding ---------- */

.header > .container,
.mainContent > .container,
.footer > .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: var(--ef-side) !important;
  padding-right: var(--ef-side) !important;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  :root {
    --ef-side: var(--ef-side-tablet);
  }
}

@media (max-width: 767px) {
  :root {
    --ef-side: var(--ef-side-mobile);
  }
}


/* ---------- Header: navy, white logo and white text, as the new site ---------- */

body {
  margin: 0;
  overflow-x: hidden; /* stops the full-width hero causing sideways scroll */
}

/* Pages with no hero (Login, Forgotten Password and similar) keep a solid
   header in the hero gradient; pages with a hero make it transparent below. */
.header {
  background: var(--ef-hero-gradient);
  border: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Swap the dark logo for the white one Firefish already hosts */
.header__logo a {
  display: inline-block;
  background: url("https://jobs.eflexes.com/webdocs/EFlexes/StarterSite/1/SecondaryLogo/eFlexes%20Logo%20White.png") left center / contain no-repeat;
}

/* No fade on hover (Firefish's default), for the header and footer logos */
.header__logo a,
.header__logo a:hover,
.header__logo a:focus,
.header__logo img,
.header__logo a:hover img,
.footer__logo a,
.footer__logo a:hover,
.footer__logo img,
.footer__logo a:hover img {
  opacity: 1 !important;
  filter: none !important;
}

.header__logo img {
  max-width: 170px;
  height: auto;
  visibility: hidden;
}

/* ---------- Desktop header: matches the new site's header containers ----------
   At the new site's 14px base:
   Header container: full width, padding 4rem 8rem 2rem 8rem (56px 112px 28px 112px),
                     gaps 1rem (14px)
   Logo container:   10% wide
   Menu container:   85% wide, gaps 1.5rem (21px)
   ---------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  :root {
    /* Header height: top and bottom padding, the containers' 10px padding,
       plus the taller of the menu row (44px) and the logo (logo ratio 0.294) */
    --ef-header-h: calc(56px + 28px + 20px + max(44px, min(157.5px, (100vw - 224px) * 0.1 - 20px) * 0.294));
  }

  .header {
    padding: 0 !important;
  }

  .header > .container {
    padding: 56px 112px 28px !important;
  }

  .header .row.flex {
    gap: 21px !important; /* gaps inside the menu container */
    justify-content: flex-start;
  }

  /* Logo container: 10%, with the 14px header gap after it.
     Elementor containers have 10px padding by default, and the logo
     widget is 11.25rem (157.5px), so the logo is whichever is smaller:
     157.5px or the container's width less its padding. */
  .header .row.flex > [class*="col-"]:first-child {
    flex: 0 0 10% !important;
    width: 10% !important;
    padding: 10px !important;
    box-sizing: border-box;
    margin-right: -7px; /* 21px row gap less 7px = the header's 14px gap */
  }

  .header__logo a,
  .header__logo img {
    display: block;
    width: min(157.5px, 100%) !important;
    max-width: none;
  }

  /* Menu container ends at 10% + 14px + 85%, leaving the rest empty */
  .header .row.flex > .col-3:nth-child(4) {
    margin-right: calc(5% - 14px + 10px); /* plus the menu container's 10px padding */
  }

  .header .js-menu-items {
    gap: 8.75px !important; /* 0.625rem between menu items */
  }
}

.header__socialMedia a,
.header__menu--link {
  color: var(--ef-white);
}

.header__socialMedia a:hover,
.header__menu--link:hover {
  color: var(--ef-hero-eyebrow);
}

.header__loginButtons .ff-btn {
  font-size: var(--ef-button);
  font-weight: 600;
  border-radius: var(--ef-radius);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.header__loginButtons .ff-btn--solid {
  background: var(--ef-primary);
  border: 1px solid var(--ef-primary);
  color: var(--ef-white);
}

.header__loginButtons .ff-btn--solid:hover {
  background: var(--ef-white);
  border-color: var(--ef-white);
  color: var(--ef-secondary);
}

.header__loginButtons .ff-btn--border {
  background: transparent;
  border: 1px solid var(--ef-white);
  color: var(--ef-white);
}

.header__loginButtons .ff-btn--border:hover {
  background: var(--ef-white);
  color: var(--ef-secondary);
}


/* ---------- Hero band: navy-to-blue gradient, as the new site's page heroes ---------- */

/* Apply page: the job title becomes the hero, full width */
.mainContent {
  padding-top: 0;
  padding-bottom: 72px;
}

/* Removes the grey gap between the header and the hero */
.header {
  margin-bottom: 0 !important;
}

.mainContent,
.mainContent > .container,
.mainContent > .container > .row,
.mainContent > .main-content.ffSystemContent,
.mainContent > .container > .row > [class*="col-"],
.advertApplicationArea,
.advertApplicationArea .attract,
.candidateAdvertApplicationArea,
.candidateAdvertApplicationArea > .title {
  margin-top: 0 !important;
  padding-top: 0;
}

.candidateAdvertApplicationArea > .title {
  padding-top: 72px;
}

.candidateAdvertApplicationArea > .title {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 32px;
  padding: 72px calc(50vw - 50%) 80px;
  background: var(--ef-hero-gradient);
}

.candidateAdvertApplicationArea > .title .textArea {
  padding: 0;
}

.candidateAdvertApplicationArea > .title h1::before {
  content: "Apply for this job";
  display: block;
  margin-bottom: 14px;
  color: var(--ef-hero-eyebrow);
  font-size: var(--ef-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.candidateAdvertApplicationArea > .title h1 {
  color: var(--ef-white);
  font-size: var(--ef-hero-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* Desktop: the header sits on top of the gradient, as on the new site,
   so there is no join line between header and hero.
   Below 1025px the header is about 118px tall, as measured on the live page. */
@media (min-width: 992px) {
  .pageWrapper {
    position: relative;
  }

  /* Only on pages that have a hero: job search, apply, register */
  .pageWrapper:has(.banner, .candidateAdvertApplicationArea, .ff-reg-WebRegistration) .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: transparent;
  }

  .candidateAdvertApplicationArea > .title {
    padding-top: calc(var(--ef-header-h, 118px) + 72px) !important;
  }

  .mainContent > .main-content.ffSystemContent:has(.ff-reg-WebRegistration) {
    padding-top: calc(var(--ef-header-h, 118px) + 72px) !important;
    background-size: 100% calc(var(--ef-header-h, 118px) + 280px) !important;
  }
}

/* Desktop menu: shows the Firefish menu across the header instead of
   behind the burger icon, styled as the new site's menu.
   Phones and small tablets keep the burger menu. */
@media (min-width: 992px) {
  /* One row: logo, menu, social, Login/Register */
  .header .row.flex {
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
  }

  .header .row.flex > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }

  .header .row.flex > .col-2 {
    display: none; /* empty spacer column */
  }

  .header .row.flex > [class*="col-"]:first-child { order: 1; }
  .header .menuOverlay                          { order: 2; }
  .header .row.flex > .col-3:nth-child(3)       { order: 3; }
  .header .row.flex > .col-3:nth-child(4)       { order: 4; }

  /* Hide the burger icon and its column */
  .header .row.flex > .col-1,
  .header .js-burger-menu,
  .header .menuOverlay__content-close {
    display: none !important;
  }

  /* Turn the full-screen overlay into an inline menu */
  .header .menuOverlay,
  .header .menuOverlay.hideItem {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  .header .menuOverlay__content,
  .header .menuOverlay__contentContainer,
  .header .menuOverlay__contentContainer > .row,
  .header .menuOverlay__contentContainer [class*="col-"] {
    position: static !important;
    display: block;
    width: auto !important;
    max-width: none;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    transform: none !important;
    text-align: left !important;
  }

  .header .js-menu-items {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header .js-menu-items > li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header .js-menu-items > li > a {
    display: block;
    padding: 10px 14px;
    color: var(--ef-white) !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .header .js-menu-items > li > a:hover {
    color: var(--ef-hero-eyebrow) !important;
  }

  /* ---------- Dropdowns ----------
     Firefish adds a click-to-open arrow under each parent item and keeps the
     sub-items hidden until it's clicked. On desktop, this sits the arrow
     beside the item and opens the sub-items on hover, as on the new site.
     "Sub-items" = anything inside the menu item that contains links;
     "arrow" = anything inside it that doesn't. */

  .header .js-menu-items > li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* The arrow: small, beside the item, white like the menu text */
  .header .js-menu-items > li > *:not(a):not(:has(a)) {
    display: inline-flex !important;
    align-items: center;
    position: static !important;
    margin: 0 0 0 -8px !important;
    padding: 0 !important;
    color: var(--ef-white) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    pointer-events: none; /* hover opens the dropdown, so no click needed */
  }

  .header .js-menu-items > li > *:not(a):not(:has(a)) * {
    color: inherit !important;
    font-size: inherit !important;
  }

  .header .js-menu-items > li:hover > *:not(a):not(:has(a)) {
    color: var(--ef-hero-eyebrow) !important;
  }

  /* The sub-items: hidden until hover */
  .header .js-menu-items > li > *:not(a):has(a) {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 100;
    min-width: 220px;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none;
    background: var(--ef-white) !important;
    border-radius: var(--ef-radius);
    box-shadow: 0 10px 30px rgba(15, 41, 57, 0.15);
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .header .js-menu-items > li:hover > *:not(a):has(a),
  .header .js-menu-items > li:focus-within > *:not(a):has(a),
  .header .js-subnav-hook:hover > .header__subNavigation,
  .header .js-subnav-hook:focus-within > .header__subNavigation {
    display: block !important;
  }

  .header .js-menu-items > li > *:not(a):has(a) li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none !important;
  }

  .header .js-menu-items > li > *:not(a):has(a) a {
    display: block;
    padding: 10px 18px !important;
    background: none !important;
    color: var(--ef-secondary) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Hover: solid Primary blue. Firefish fades its own hover colour,
     so its opacity, filters and overlays are switched off here. */
  .header .js-menu-items > li > *:not(a):has(a) li,
  .header .js-menu-items > li > *:not(a):has(a) li:hover,
  .header .js-menu-items > li > *:not(a):has(a) a,
  .header .js-menu-items > li > *:not(a):has(a) a:hover {
    opacity: 1 !important;
    filter: none !important;
  }

  .header .js-menu-items > li > *:not(a):has(a) li:hover {
    background: var(--ef-primary) !important;
  }

  .header .js-menu-items > li > *:not(a):has(a) a:hover,
  .header .js-menu-items > li > *:not(a):has(a) li:hover > a {
    background: var(--ef-primary) !important;
    background-image: none !important;
    color: var(--ef-white) !important;
  }

  .header .js-menu-items > li > *:not(a):has(a) a::before,
  .header .js-menu-items > li > *:not(a):has(a) a::after,
  .header .js-menu-items > li > *:not(a):has(a) li::before,
  .header .js-menu-items > li > *:not(a):has(a) li::after {
    display: none !important;
  }
}

/* Register page: Firefish limits this area's width, which cut the gradient
   band short at both sides. Make it full width. */
.mainContent > .main-content.ffSystemContent {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Other system pages (Login and similar): normal spacing below the header */
.mainContent > .main-content.ffSystemContent {
  padding: 56px var(--ef-side) 72px;
}

/* Login and similar pages (no hero): space below the header,
   and between the heading and the form */
.pageWrapper:not(:has(.banner, .candidateAdvertApplicationArea, .ff-reg-WebRegistration)) .mainContent {
  padding-top: 56px !important; /* 4rem */
}

.pageWrapper:not(:has(.banner, .candidateAdvertApplicationArea, .ff-reg-WebRegistration)) .mainContent > .main-content.ffSystemContent {
  padding-top: 0 !important; /* the 56px above is enough */
}

.pageWrapper:not(:has(.banner, .candidateAdvertApplicationArea, .ff-reg-WebRegistration)) .mainContent h1 {
  margin: 0 0 28px !important; /* 2rem */
}

/* ---------- Login page ---------- */

.ffLogin__standard .ffLogin__standardHeader1 {
  margin: 0 0 28px !important; /* 2rem between the heading and the form */
  color: var(--ef-secondary) !important;
}

/* Fields and button as the rest of the site's forms: 2px corners,
   white fields with a grey border, solid blue button */
.ffLogin__standard .ffw-login1-txt {
  box-sizing: border-box;
  height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ef-border) !important;
  border-radius: var(--ef-radius) !important;
  background: var(--ef-white) !important;
  color: var(--ef-secondary) !important;
  font-size: var(--ef-field) !important;
  box-shadow: none !important;
}

.ffLogin__standard .ffw-login1-txt:focus {
  outline: none;
  border-color: var(--ef-primary) !important;
}

.ffLogin__standard .ffw-login1-txt:-webkit-autofill,
.ffLogin__standard .ffw-login1-txt:-webkit-autofill:hover,
.ffLogin__standard .ffw-login1-txt:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--ef-white) inset !important;
  -webkit-text-fill-color: var(--ef-secondary);
}

.ffLogin__standard .ffw-login1-username,
.ffLogin__standard .ffw-login1-password {
  display: block;
  margin-bottom: 12px;
}

.ffLogin__standard .ffw-login1-btn {
  height: 48px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: var(--ef-radius) !important;
  background: var(--ef-primary) !important;
  color: var(--ef-white) !important;
  font-size: var(--ef-button) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ffLogin__standard .ffw-login1-btn:hover {
  background: var(--ef-secondary) !important;
}

.ffLogin__standard .ffw-login1-links-span,
.ffLogin__standard .ffw-login1-links-span * {
  font-size: var(--ef-small) !important;
}

.ffLogin__standard .ffw-login1-links-span a,
.ffLogin__standard .ffw-login1-logging-info a {
  color: var(--ef-primary) !important;
  font-weight: 600;
}

.ffLogin__standard .ffw-login1-logging-info,
.ffLogin__standard .ffw-login1-logging-info p {
  color: var(--ef-text);
  font-size: 13px !important;
}

/* Register page: gradient band behind the top of the form card */
.mainContent > .main-content.ffSystemContent:has(.ff-reg-WebRegistration) {
  padding: 72px var(--ef-side) 0;
  background: var(--ef-hero-gradient) top / 100% 280px no-repeat;
}

.ff-reg-WebRegistration {
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 10px 30px rgba(15, 41, 57, 0.08);
}

.registrationHeader {
  color: var(--ef-secondary);
  font-size: var(--ef-section-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
}

.ff-advert-login-info {
  color: var(--ef-text);
  font-size: var(--ef-small);
}

.ff-advert-login-info a,
.mainContent a {
  color: var(--ef-primary);
}

.ff-advert-login-info a {
  font-weight: 600;
}


/* ---------- Form card ---------- */

.registrationArea {
  background: var(--ef-white);
  border-radius: var(--ef-card-radius);
  padding: 40px;
  max-width: 760px;
}

.RegistrationDescriptionText,
.RegistrationDescriptionText p {
  color: var(--ef-text);
  font-size: var(--ef-body);
  margin: 0 0 8px;
}


/* ---------- Stack labels above fields ----------
   Firefish lays the form out as a two-column table.
   This turns each row into label-on-top, full-width field. */

.registrationTable,
.registrationTable tbody,
.registrationTable tr,
.registrationTable td {
  display: block;
  width: 100%;
}

.registrationTable tr {
  margin-bottom: 20px;
}

.registrationTable td {
  padding: 0;
  border: 0;
}

/* Spacer rows separate groups of fields: shown as a thin divider */
.registrationTable .registrationSpacerRow {
  height: 0;
  margin: 8px 0 28px;
  border-top: 1px solid var(--ef-border);
}

.registrationTable .registrationSpacerRow td {
  display: none;
}

.registrationTable td.registrationDescription {
  margin-bottom: 6px;
}

/* Form labels: "Text link" style */
.registrationTable td.registrationDescription label {
  color: var(--ef-secondary);
  font-size: var(--ef-label);
  font-weight: 600;
}

.requiredFieldIndicator {
  color: var(--ef-primary);
  font-weight: 600;
}


/* ---------- Text fields and dropdowns (as the job search bar) ---------- */

.registrationTable input.webWidgetFormField,
.registrationTable select.webWidgetFormField,
.rate-dropdown-wrapper input.textbox,
.rate-dropdown-wrapper select.ff-ddl {
  box-sizing: border-box;
  width: calc(100% - 20px); /* leaves room for the required asterisk */
  min-height: 48px;
  padding: 12px 14px;
  font-size: var(--ef-field);
  color: var(--ef-secondary);
  background-color: var(--ef-white);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  transition: border-color 0.15s ease;
}

.registrationTable input.webWidgetFormField:focus,
.registrationTable select.webWidgetFormField:focus,
.rate-dropdown-wrapper input.textbox:focus,
.rate-dropdown-wrapper select.ff-ddl:focus {
  outline: none;
  border-color: var(--ef-primary);
}

/* Keeps every dropdown the same width as the text fields
   ("How did you find us?" was coming out wider) */
.registrationTable td > select,
.registrationTable td > .ff-ddl {
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  box-sizing: border-box;
}

/* Stops the browser's autofill turning fields light blue */
.registrationTable input:-webkit-autofill,
.registrationTable input:-webkit-autofill:hover,
.registrationTable input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--ef-white) inset;
  -webkit-text-fill-color: var(--ef-secondary);
  caret-color: var(--ef-secondary);
}

.registrationTable input.webWidgetFormField::placeholder {
  color: #9a9a9a;
}

/* "My minimum rate is" on the register page: amount and per hour/day side by side */
.rate-dropdown-wrapper {
  display: flex;
  gap: 12px;
  width: calc(100% - 20px) !important; /* overrides Firefish's inline width */
}

.rate-dropdown-wrapper > div[class*="col-"] {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  padding: 0;
}

.rate-dropdown-wrapper input.textbox,
.rate-dropdown-wrapper select.ff-ddl {
  width: 100%;
}

.rate-dropdown-wrapper .clearfix {
  display: none;
}


/* ---------- Checkboxes ---------- */

.registrationTable input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  accent-color: var(--ef-primary);
  cursor: pointer;
}

.registrationTable input[type="checkbox"] + label {
  font-size: var(--ef-small);
}

.registrationTable input[type="checkbox"] + label a {
  color: var(--ef-primary);
  text-decoration: underline;
}


/* ---------- CV upload link (shown as a button) ---------- */

.registrationTable a[id$="_lnkOpen"] {
  display: inline-block;
  padding: 12px 20px;
  border: 1px dashed var(--ef-primary);
  border-radius: var(--ef-radius);
  background: var(--ef-accent);
  color: var(--ef-primary);
  font-size: var(--ef-button);
  font-weight: 600;
  text-decoration: none;
}

.registrationTable a[id$="_lnkOpen"]:hover {
  border-style: solid;
}

.registrationTable a[id$="_lnkOpen"] div {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ---------- Error messages ---------- */

.registrationTable .errorText {
  display: block;
  color: #c0392b;
  font-size: var(--ef-label);
  margin-bottom: 6px;
}


/* ---------- Buttons (as the new site's buttons) ---------- */

.registrationButtonArea {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ef-border);
}

.registrationButtonArea .btn-go-profile,
.uplMdlPnl .systemButton {
  min-height: 48px;
  padding: 12px 28px;
  font-size: var(--ef-button);
  font-weight: 600;
  color: var(--ef-white);
  background: var(--ef-primary);
  border: 0;
  border-radius: var(--ef-radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.registrationButtonArea .btn-go-profile:hover,
.uplMdlPnl .systemButton:hover {
  background: var(--ef-secondary);
}

.registrationButtonArea .btn-cancel {
  min-height: 48px;
  padding: 12px 28px;
  font-size: var(--ef-button);
  font-weight: 600;
  color: var(--ef-secondary);
  background: transparent;
  border: 1px solid var(--ef-secondary);
  border-radius: var(--ef-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.registrationButtonArea .btn-cancel:hover {
  background: var(--ef-secondary);
  color: var(--ef-white);
}

.registrationButtonArea input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* =========================================================
   Job search page (jobs.eflexes.com home page)
   ========================================================= */

/* Full width, as the rest of the site */
.jobList > .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: var(--ef-side) !important;
  padding-right: var(--ef-side) !important;
  box-sizing: border-box;
}

/* ---------- Hero ----------
   As the new site's Jobs page hero: eyebrow "Current vacancies",
   heading "Find the role that's right for you." and the intro line.
   Firefish's banner is empty, so the text is added here. The eyebrow
   is the first line of the heading block, styled by ::first-line. */
.pageWrapper:has(.jobList) .banner {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 72px var(--ef-side) 78.75px; /* bottom 90px = 5.625rem */
  background: var(--ef-hero-gradient) !important;
  color: var(--ef-white);
}

.pageWrapper:has(.jobList) .banner::before {
  content: "Current vacancies\A Find the role that\2019s right for you.";
  white-space: pre-line;
  display: block;
  color: var(--ef-white);
  font-size: var(--ef-hero-heading);
  font-weight: 700;
  line-height: 1.2;
}

/* Eyebrow line */
.pageWrapper:has(.jobList) .banner::first-line {
  color: var(--ef-hero-eyebrow);
  font-size: var(--ef-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 3.2;
  text-transform: uppercase;
}

.pageWrapper:has(.jobList) .banner::after {
  content: "Browse some of our latest vacancies or explore all current opportunities.";
  display: block;
  max-width: 65%;
  margin-top: 18px;
  color: #E3EAF2;
  font-size: 14.875px; /* Intro text, 17px = 1.0625rem */
  line-height: 1.6;
}

@media (min-width: 992px) {
  .pageWrapper:has(.jobList) .banner {
    padding-top: calc(var(--ef-header-h, 118px) + 56px);
  }
}

.jobList {
  padding-top: 0 !important;
}

/* ---------- Search bar: the new site's job search bar ----------
   From the job search snippet on the new site, at its 14px base:
   gaps .75rem (10.5px), fields .85rem 1rem padding, text .9375rem
   (13.1px), 2px corners, keyword box first and widest.
   On the new site it sits below the hero, not in a card. */

.jobList__search {
  margin: 42px 0 !important; /* 3rem */
  padding: 0 !important;
  background: none;
}

.jobList__search,
.jobList__search > div,
#advertSearchArea,
#advertSearchArea fieldset {
  width: 100% !important; /* Firefish limits the search bar's width */
  max-width: none !important;
  float: none !important;
  box-sizing: border-box;
}

#advertSearchArea,
#advertSearchArea fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0;
}

/* The "Jobs" content section on jobs.aspx (set up in Firefish's Web
   Content for that page): the hero already says what the page is */
.jobList > .ffPageSection,
.jobList h1,
.jobList h2:not(.card__title) {
  display: none !important;
}

#advertSearchArea fieldset {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10.5px;
}

#advertSearchArea dl {
  display: block;
  flex: 1 1 168px; /* 12rem */
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#advertSearchArea dl.searchKeywords {
  order: -1;
  flex: 2 1 224px; /* 16rem */
}

#advertSearchArea dl.searchButtons {
  flex: 0 0 auto;
}

#advertSearchArea dt {
  display: none !important;
}

#advertSearchArea dd {
  margin: 0 !important;
  padding: 0 !important;
}

#advertSearchArea select,
#advertSearchArea input.textbox {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 0;
  height: 46px !important; /* same height for the keyword box and dropdowns */
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--ef-border) !important;
  border-radius: var(--ef-radius) !important;
  background-color: var(--ef-white) !important;
  color: var(--ef-secondary) !important;
  font-size: 13.125px !important;
  line-height: 1.4;
  box-shadow: none !important;
}

/* Dropdowns: Firefish's own arrow and styling removed, replaced with a
   plain navy chevron, as on the new site's search bar */
#advertSearchArea select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F2939' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#advertSearchArea select::-ms-expand {
  display: none;
}

/* Firefish's own dropdown arrows, wherever its stylesheet puts them,
   so only the one navy chevron shows */
#advertSearchArea dl::before,
#advertSearchArea dl::after,
#advertSearchArea dd::before,
#advertSearchArea dd::after,
#advertSearchArea select::after,
#advertSearchArea dd *:not(select):not(option):not(input)::before,
#advertSearchArea dd *:not(select):not(option):not(input)::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Any arrow icon Firefish adds next to the dropdown after the page loads */
#advertSearchArea dd i,
#advertSearchArea dd svg,
#advertSearchArea dd .fa,
#advertSearchArea dd .fas {
  display: none !important;
}

/* Any wrapper Firefish puts around the dropdown: no background or arrow of its own */
#advertSearchArea dd > *:not(select):not(input):not(.errorText) {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

#advertSearchArea select option {
  color: var(--ef-secondary);
  background: var(--ef-white);
}

/* The open list. Browsers that support styleable dropdowns
   (Chrome and Edge, from version 135) show it in the site's style;
   other browsers keep their own list. */
@supports (appearance: base-select) {
  #advertSearchArea select,
  #advertSearchArea select::picker(select) {
    appearance: base-select !important;
  }

  #advertSearchArea select {
    display: flex;
    align-items: center;
  }

  #advertSearchArea select::picker-icon {
    display: none !important; /* the navy chevron above is used instead */
    content: "" !important;
    visibility: hidden !important;
    width: 0 !important;
    font-size: 0 !important;
  }

  #advertSearchArea select::picker(select) {
    box-sizing: border-box;
    min-width: anchor-size(width);
    max-height: 320px;
    margin-top: 4px;
    padding: 6px 0;
    overflow-y: auto;
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius);
    background: var(--ef-white);
    box-shadow: 0 10px 30px rgba(15, 41, 57, 0.12);
  }

  #advertSearchArea select option {
    padding: 8px 14px;
    color: var(--ef-secondary);
    background: var(--ef-white);
    font-family: var(--ef-font);
    font-size: 13.125px;
    line-height: 1.4;
    cursor: pointer;
  }

  #advertSearchArea select option::checkmark {
    display: none;
  }

  #advertSearchArea select option:hover,
  #advertSearchArea select option:focus-visible {
    outline: none;
    background: var(--ef-accent);
    color: var(--ef-primary);
  }

  #advertSearchArea select option:checked {
    color: var(--ef-primary);
    font-weight: 600;
  }
}

#advertSearchArea select:focus,
#advertSearchArea input.textbox:focus {
  outline: none;
  border-color: var(--ef-primary) !important;
}

#advertSearchArea input.textbox::placeholder {
  color: #9a9a9a;
}

#advertSearchArea .searchButton {
  height: 46px !important; /* same height as the fields */
  box-sizing: border-box;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 11.9px 24.5px !important; /* .85rem 1.75rem */
  border: 0 !important;
  border-radius: var(--ef-radius) !important;
  background: var(--ef-primary) !important;
  color: var(--ef-white) !important;
  font-size: 13.125px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#advertSearchArea .searchButton:hover {
  background: var(--ef-secondary) !important;
}

#advertSearchArea dl.searchButtons span:empty {
  display: none;
}

/* ---------- Job cards: the new site's job card (loop item 447) ----------
   Three across (two on tablet, one on mobile).
   Card: white, 1px border, 0.5rem (7px) corners, 3rem (42px) padding,
   1rem (14px) between items.
   Inside, top to bottom: tag, job title, location, "View job ›".
   Firefish has no job type (Permanent, Contract), so the discipline
   fills the tag. Ref, posted date, summary, share buttons and the
   "I'm Interested" button are hidden, as the new site's card has none. */

.candidate-advert-results .resultsGrid {
  display: block;
  width: 100% !important;
  border: 0 !important;
}

.candidate-advert-results .resultsGrid tbody {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px; /* grid gap: not in the saved page, see note */
}

.candidate-advert-results .resultsGrid tr,
.candidate-advert-results .resultsGrid td {
  display: block;
  width: auto !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.jobItem.card::before,
.jobItem.card::after {
  display: none !important; /* Firefish's own card decoration */
}

.jobItem.card {
  display: flex !important;
  flex-direction: column;
  justify-content: center; /* content centred vertically in the card */
  min-height: 0 !important;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
  height: 100%;
  margin: 0 !important;
  padding: 42px !important;
  background: var(--ef-white) !important;
  border: 1px solid var(--ef-border) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

/* Flatten Firefish's rows and columns so the card's items can be reordered */
.jobItem__inner,
.jobItem__inner > .row,
.jobItem__inner > .row > .col-9,
.jobItem__inner .jobItem__details,
.jobItem__inner .jobItem__details > .row,
.jobItem__inner .jobItem__details > .row > [class*="col-"],
.jobItem__inner .jobItem__details--info,
.jobItem__inner .jobItem__details--info > .row,
.jobItem__inner .jobItem__details--info [class*="col-"] {
  display: contents !important;
}

/* Hidden: not on the new site's card */
.jobItem__inner > .row > .col-1,
.jobItem__inner > .row > .col-2,
.jobItem__inner-referenceNo,
.jobItem__inner-postedOn,
.jobItem__inner-share {
  display: none !important;
}

/* 1. Tag: the discipline */
.jobItem__details--info .card__text:not(.jobItem__inner-location) {
  order: 1;
  display: inline-block !important;
  margin: 0 !important;
  padding: 4.375px 8.75px !important; /* 0.3125rem 0.625rem */
  background: var(--ef-accent) !important;
  color: var(--ef-primary) !important;
  font-size: 11.375px !important; /* Tag, 0.8125rem */
  font-weight: 500 !important;
  line-height: 1.3;
}

.jobItem__inner-disciplineIcon {
  display: none !important;
}

/* 2. Job title: Card heading style, Secondary */
.jobItem__inner-title {
  order: 2;
}

.jobItem__inner-title a {
  text-decoration: none !important;
}

.jobItem .card__title {
  margin: 0 !important;
  color: var(--ef-secondary) !important;
  font-size: 15.75px !important; /* Card heading, 18px = 1.125rem */
  font-weight: 600 !important;
  line-height: 1.35;
}

.jobItem__inner-title a:hover .card__title {
  color: var(--ef-primary) !important;
}

/* 3. Location: icon and text in Text colour, Small text style */
.jobItem__inner-location {
  order: 3;
  display: flex !important;
  align-items: center;
  gap: 1.4px; /* 0.1rem */
  margin: 0 !important;
  color: var(--ef-text) !important;
  font-size: 13.125px !important; /* Small text, 15px = 0.9375rem */
  font-weight: 400 !important;
  line-height: 1.5;
  text-transform: capitalize;
}

.jobItem__inner-locationIcon,
.jobItem__inner-locationIcon i {
  color: var(--ef-text) !important;
  font-size: 12.25px !important; /* icon 0.875rem */
  margin-right: 4px;
}

.jobItem__inner-locationText {
  text-transform: lowercase;
  display: inline-block;
}

.jobItem__inner-locationText::first-letter {
  text-transform: uppercase;
}

/* 4. "View job ›": Text link style, Primary.
   Firefish's summary is hidden; its "continue reading..." link stays
   as the card's link, relabelled. */
.jobItem__body {
  order: 4;
}

.jobItem__body .card__text {
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0;
}

.jobItem__body .card__text > span:first-child {
  display: none !important;
}

.jobItem .card__link {
  font-size: 0 !important;
  text-decoration: none !important;
}

.jobItem .card__link::after {
  content: "View job \203A";
  color: var(--ef-primary);
  font-size: 12.25px; /* Text link, 14px = 0.875rem */
  font-weight: 600;
  line-height: 1.4;
}

.jobItem .card__link:hover::after {
  color: var(--ef-secondary);
}

@media (max-width: 1024px) {
  .candidate-advert-results .resultsGrid tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .candidate-advert-results .resultsGrid tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Page numbers ---------- */

.candidate-advert-results .pager {
  margin-top: 28px;
  color: var(--ef-text);
  font-size: 14px;
}

.candidate-advert-results .pager td {
  padding: 0 !important;
  vertical-align: middle;
}

.candidate-advert-results .pagerPageLinks {
  text-align: center;
}

.candidate-advert-results .pagerPageLinks a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0 3px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  background: var(--ef-white);
  color: var(--ef-secondary) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.candidate-advert-results .pagerPageLinks a:hover {
  border-color: var(--ef-primary);
  color: var(--ef-primary) !important;
}

.candidate-advert-results .pagerPageLinks a.selected {
  border-color: var(--ef-primary);
  background: var(--ef-primary);
  color: var(--ef-white) !important;
}

.candidate-advert-results .pagerPageLinks a.aspNetDisabled:not(.selected) {
  opacity: 0.4;
  pointer-events: none;
}

.candidate-advert-results .records {
  text-align: right;
}

/* ---------- Job search: mobile ---------- */

@media (max-width: 767px) {
  .pageWrapper:has(.jobList) .banner {
    padding-top: 48px;
    padding-bottom: 52.5px; /* 60px = 3.75rem */
  }

  .pageWrapper:has(.jobList) .banner::before {
    font-size: var(--ef-hero-heading-mobile);
  }

  .pageWrapper:has(.jobList) .banner::after {
    max-width: none;
  }

  #advertSearchArea dl,
  #advertSearchArea dl.searchKeywords,
  #advertSearchArea dl.searchButtons {
    flex: 1 1 100%;
  }

  #advertSearchArea .searchButton {
    width: 100%;
  }

  .jobItem.card {
    padding: 28px !important;
  }

  .candidate-advert-results .pager tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .candidate-advert-results .records {
    text-align: center;
  }
}


/* =========================================================
   Job page (jobs.eflexes.com/job/...aspx)
   Built from the new site's "eFlexes | Single Job" template,
   at its 14px base (px / 16 = rem):
   Hero: gradient, title 44px (Hero heading), location 17px #E3EAF2,
         content 70% wide, 18px (15.75px) gaps, bottom padding 90px (78.75px).
   Body: description 64% and Job details card 32%, 48px (42px) apart.
   Card: light blue #EBF4FF, border #9DBDE6, 8px (7px) corners,
         32px (28px) padding, 12px (10.5px) gaps, "Job details" 26px heading.
   ========================================================= */

.pageWrapper:has(.advert) .banner {
  display: none !important;
}

/* Grid: hero across the top, description and card below */
.advert,
.advert .advert__inner {
  margin: 0 !important;
  padding: 0 !important;
}

.advert .advert__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 64%) minmax(0, 32%);
  justify-content: space-between;
  align-items: start;
  row-gap: 70px; /* section padding 80px = 5rem */
}

.advert .advert__inner > .col-8,
.advert .advert__inner > .col-3,
.advert .attract,
.advert .attract > div {
  display: contents !important;
}

.advert .advert__inner > .col-1,
.advert .advert__extraMobile {
  display: none !important;
}

/* Hero: the job title block, full width */
.advert .title {
  grid-column: 1 / -1;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px calc(50vw - 50%) 78.75px;
  background: var(--ef-hero-gradient);
}

@media (min-width: 992px) {
  .advert .title {
    padding-top: calc(var(--ef-header-h, 118px) + 72px) !important;
  }
}

.advert .title .textArea {
  max-width: 70%;
  padding: 0;
}

.advert .title h1 {
  display: flex;
  flex-direction: column;
  gap: 15.75px;
  margin: 0;
  color: var(--ef-white);
  font-size: var(--ef-hero-heading);
  font-weight: 700;
  line-height: 1.2;
}

/* Title - LOCATION: the location goes on its own line, as on the new site */
.advert .title h1 > span:nth-child(2) {
  display: none;
}

.advert .title h1 > span:nth-child(3) {
  color: #E3EAF2;
  font-size: 14.875px; /* 17px = 1.0625rem */
  font-weight: 400;
  line-height: 1.5;
  text-transform: lowercase;
}

.advert .title h1 > span:nth-child(3)::first-letter {
  text-transform: uppercase;
}

/* Description: Firefish keeps the Word formatting (Calibri, 12pt),
   so it is reset to the site's text style */
.advert .advertArea {
  grid-column: 1;
  min-width: 0;
}

.advert .advertBody,
.advert .advertBody * {
  font-family: var(--ef-font) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.advert .advertBody {
  color: var(--ef-text);
  font-size: 14.875px !important; /* Body text, 1.0625rem */
  line-height: 1.65 !important;
}

.advert .advertBody p {
  margin: 0 0 14px !important;
}

.advert .advertBody b,
.advert .advertBody strong {
  color: var(--ef-secondary);
  font-weight: 600;
}

.advert .advertBody ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.advert .advertBody li {
  margin-bottom: 6px;
}

/* Back, Refer a Friend and Apply buttons under the description */
.advert .advertApplicationButtonArea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ef-border);
}

.advert .advertApplicationButtonArea br {
  display: none;
}

.advert .advertApplicationButtonArea .errorText {
  flex: 1 1 100%;
  color: #c0392b;
  font-size: 14px;
}

.advert .advertApplicationButtonArea .inputButton {
  margin: 0 !important;
  padding: 11.9px 24.5px !important;
  border: 1px solid var(--ef-secondary) !important;
  border-radius: var(--ef-radius) !important;
  background: transparent !important;
  color: var(--ef-secondary) !important;
  font-size: var(--ef-button) !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.advert .advertApplicationButtonArea .inputButton:hover {
  background: var(--ef-secondary) !important;
  color: var(--ef-white) !important;
}

.advert .advertApplicationButtonArea .btn-apply {
  border-color: var(--ef-primary) !important;
  background: var(--ef-primary) !important;
  color: var(--ef-white) !important;
}

.advert .advertApplicationButtonArea .btn-apply:hover {
  border-color: var(--ef-secondary) !important;
  background: var(--ef-secondary) !important;
}

.advert .advertApplicationButtonArea .btn-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Job details card */
.advert .advert__extra {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10.5px;
  margin: 0 !important;
  padding: 28px !important;
  background: var(--ef-accent) !important;
  border: 1px solid #9DBDE6;
  border-radius: 7px;
}

.advert .advert__extra::before {
  content: "Job details";
  color: var(--ef-secondary);
  font-size: 22.75px; /* Sub heading, 26px = 1.625rem */
  font-weight: 600;
  line-height: 1.3;
}

/* Share buttons: not on the new site's card. Firefish nests them in a way
   browsers split up, so every part is hidden. */
.advert .advert__extra > p,
.advert .advert__extra > span,
.advert .advert__extra .ffw-social-share-buttons,
.advert .advert__extra .a2a_kit {
  display: none !important;
}

.advert .advert__extra > div:not(.advert__extra--apply) {
  display: flex;
  flex-direction: column;
  gap: 10.5px;
}

/* Detail lines: "Label: value", 16px (14px) navy, label in bold */
.advert .advert__extra--info {
  display: block;
  margin: 0 !important;
  color: var(--ef-secondary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.advert .advert__extra--infoIcon {
  display: none !important;
}

.advert .advert__extra--info:nth-of-type(1)::before { content: "Discipline: "; font-weight: 700; }
.advert .advert__extra--info:nth-of-type(2)::before { content: "Location: "; font-weight: 700; }
.advert .advert__extra--info:nth-of-type(3)::before { content: "Ref: "; font-weight: 700; }

.advert .advert__extra--info:nth-of-type(2) span:last-child {
  display: inline-block;
  text-transform: lowercase;
}

.advert .advert__extra--info:nth-of-type(2) span:last-child::first-letter {
  text-transform: uppercase;
}

.advert .advert__extra--apply {
  margin-top: 3.5px; /* spacer 4px */
}

.advert .advert__extra-btn {
  display: inline-block;
  width: auto !important;
  padding: 11.9px 24.5px !important;
  border: 0 !important;
  border-radius: var(--ef-radius) !important;
  background: var(--ef-primary) !important;
  color: var(--ef-white) !important;
  font-size: var(--ef-button) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.advert .advert__extra-btn:hover {
  background: var(--ef-secondary) !important;
}

@media (max-width: 767px) {
  .advert .advert__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 42px;
  }

  .advert .advert__extra {
    grid-column: 1;
  }

  .advert .title {
    padding-top: 48px;
    padding-bottom: 52.5px;
  }

  .advert .title .textArea {
    max-width: none;
  }

  .advert .title h1 {
    font-size: var(--ef-hero-heading-mobile);
  }
}


/* ---------- Footer ---------- */

/* Built from the new site's footer template (eFlexes | Footer), at the
   new site's 14px base, converted the same way as the rest of the build
   (px / 16 = rem):
   Section padding 80px = 5rem = 70px top and bottom.
   Two halves with a 48px (3rem = 42px) gap.
   Left half: logo 150px (9.375rem = 131px), tagline, social icons, 18px (15.75px) apart.
   Right half: link columns 32px (2rem = 28px) apart, title 14px (12.25px)
   above its list, list items 8px (7px) apart.
   Firefish's footer has Contact Us and Useful Links, so those fill the
   right half; CSS can't add the new site's Jobseekers, Workforce and
   Company link columns. */
.footer {
  background: var(--ef-secondary);
  color: var(--ef-white);
  padding-top: 70px;
  padding-bottom: 70px;
}

.footer .footer__wrap {
  display: grid !important;
  grid-template-columns: calc(50% - 7px) repeat(3, 1fr); /* left half, then three link columns */
  grid-auto-rows: auto;
  column-gap: 28px;
  row-gap: 15.75px;
  align-items: start;
  width: 100%;
}

/* Lets the LinkedIn icon move into the left half, under the logo */
.footer .footer__wrap > .footer__menuColumn {
  display: contents;
}

.footer .footer__wrap > [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
}

/* Left half: logo, tagline, social icons */
.footer .footer__logo {
  grid-column: 1;
  grid-row: 1;
  display: block !important; /* Firefish lays this out in a row, which put the tagline beside the logo */
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.footer .footer__logo a {
  display: block;
  width: 131px;
  margin: 0;
  padding: 0;
}

.footer .footer__logo img {
  display: block;
  width: 131px !important;
  max-width: none !important;
  height: auto;
  margin: 0 !important;
}

.footer .footer__logo::after {
  content: "Recruitment, workforce\A solutions and managed payroll.";
  white-space: pre;
  display: block;
  margin-top: 15.75px;
  color: var(--ef-footer-link);
  font-size: 14.875px; /* Intro text, 17px = 1.0625rem */
  line-height: 1.6;
}

.footer .site-footer__contact-details {
  grid-column: 1;
  grid-row: 2;
}

.footer .site-footer__contact-details > ul:first-child {
  display: none; /* empty list */
}

/* Right half: Contact Us and Useful Links as link columns */
.footer .footer__contactColumn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.footer .footer__menu {
  grid-column: 3;
  grid-row: 1 / span 2;
}

/* Column titles: Card heading style, 18px = 1.125rem */
.footer h4 {
  margin: 0 0 12.25px;
  color: var(--ef-white);
  font-size: 15.75px;
  font-weight: 600;
}

/* Links and text: Small text style, 15px = 0.9375rem */
.footer p,
.footer a,
.footer__details,
.footer__small--links {
  color: var(--ef-footer-link);
  font-size: 13.125px;
  line-height: 1.6;
  text-decoration: none;
}

.footer p {
  margin: 0 0 7px;
}

.footer a:hover {
  color: var(--ef-white);
}

.footer .footer__menu .ffTemplateHelper--flex {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Social icons: blue circles, white icon 16px (1rem = 14px), 0.55em padding */
.footer .footer__social {
  display: flex;
  gap: 8.75px; /* 10px = 0.625rem */
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer__social--item {
  list-style: none;
}

.footer .footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.55em;
  border-radius: 50%;
  background: var(--ef-primary);
  color: var(--ef-white);
  font-size: 14px;
}

.footer .footer__social a:hover {
  background: var(--ef-white);
  color: var(--ef-secondary);
}

/* Tablet: left half above, link columns in three across */
@media (max-width: 1024px) {
  .footer .footer__wrap {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
    row-gap: 15.75px;
  }

  .footer .footer__logo,
  .footer .site-footer__contact-details {
    grid-column: 1 / -1;
  }

  .footer .site-footer__contact-details {
    margin-bottom: 26.25px; /* makes the 42px gap between the halves */
  }

  .footer .footer__contactColumn {
    grid-column: 1;
    grid-row: 3;
  }

  .footer .footer__menu {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Mobile: one column */
@media (max-width: 767px) {
  .footer .footer__wrap {
    grid-template-columns: 1fr;
  }

  .footer .footer__contactColumn,
  .footer .footer__menu {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Bottom bar: legal links, copyright, registration and Powered by */
.footer .footer__items--bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px 24px;
  width: 100%;
  margin-top: 42px;
  padding-top: 21px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer .footer__items--bottom > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: 0 1 auto;
  padding: 0;
}

.footer .footer__items--bottom > [class*="col-"]:empty {
  display: none;
}

.footer .footer__items--bottom > [class*="col-"]:first-child {
  flex: 1 1 0;
  min-width: 280px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}

.footer .footer__small--links,
.footer .footer__details,
.footer .footer__details span,
.footer .footer__small--links a,
.footer .footer__small--links span {
  font-size: 13.125px;
}

.footer .footer__small--links span {
  margin: 0 6px;
  opacity: 0.5;
}

.footer .ffPoweredBy,
.footer .ffPoweredBy a {
  color: var(--ef-footer-link);
  font-size: 13px;
  opacity: 0.8;
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .mainContent {
    padding-bottom: 40px;
  }

  .candidateAdvertApplicationArea > .title {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .candidateAdvertApplicationArea > .title h1 {
    font-size: var(--ef-hero-heading-mobile);
  }

  .registrationHeader {
    font-size: 26px;
  }

  .mainContent > .main-content.ffSystemContent:has(.ff-reg-WebRegistration) {
    padding: 40px 0 0;
    background-size: 100% 200px;
  }

  .registrationArea {
    padding: 24px;
    border-radius: 0;
  }

  .registrationButtonArea {
    flex-direction: column-reverse;
  }



  .registrationButtonArea input {
    width: 100%;
  }
}