/* =====================================================================
   Andy File Associates theme for the Firefish jobs site
   Paste into Firefish: Website > Web Settings > Content Overrides > CSS,
   switch Enabled on, and Save. This one file styles the whole jobs site.
   Matches andyfileassociates.com: Sora headings, Plus Jakarta Sans body,
   navy header/footer, #3399cc brand blue.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap");

:root {
  --afa-brand: #3399cc;
  --afa-brand-deep: #3091be;
  --afa-accent: #2daddc;
  --afa-navy: #0e3450;
  --afa-navy-deep: #0a2840;
  --afa-ink: #2b3138;
  --afa-muted: #6b7682;
  --afa-line: #e6ebef;
  --afa-surface-2: #f5f7fa;
  --afa-radius: 10px;
  --afa-radius-card: 14px;
  --afa-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --afa-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* =====================================================================
   Header: restyles Firefish's own header (section.header)
   Navy bar, white logo from the main site, white icons and buttons.
   ===================================================================== */
body.bodyClass section.header {
  background: var(--afa-navy) !important;
  color: #fff !important;
  padding: 0 !important;
  position: relative;
  z-index: 50;
}
body.bodyClass section.header > .container { max-width: 72rem; margin: 0 auto; padding: 0 24px !important; }
body.bodyClass section.header > .container > .row.flex {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 20px;
  min-height: 80px;
  margin: 0 !important;
}
body.bodyClass section.header > .container > .row.flex > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Logo column pushes everything else to the right; the empty spacer column goes */
body.bodyClass section.header > .container > .row.flex > [class*="col-"]:first-child { margin-right: auto !important; }
body.bodyClass section.header > .container > .row.flex > [class*="col-"]:nth-child(2) { display: none !important; }

/* Swap the white-background JPG logo for the main site's logo made for dark backgrounds */
body.bodyClass .header__logo a {
  display: block !important;
  width: 175px;
  height: 56px;
  background: url("https://andyfileassociates.com/afa-logo-dark.png") left center / contain no-repeat;
}
body.bodyClass .header__logo img { display: none !important; }

/* Social icons */
body.bodyClass .header__socialMedia { display: flex; align-items: center; gap: 18px; }
body.bodyClass .header__socialMedia a,
body.bodyClass .header__socialMedia i { color: rgba(255,255,255,.85) !important; font-size: 18px !important; transition: color .15s; }
body.bodyClass .header__socialMedia a:hover i { color: var(--afa-accent) !important; }

/* Login / Register / Log out buttons */
body.bodyClass .header__loginButtons { display: flex; align-items: center; gap: 10px; }
body.bodyClass .header__loginButtons a,
body.bodyClass section.header .ff-btn {
  font-family: var(--afa-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
}
body.bodyClass .header__loginButtons a.ff-btn--border {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  color: #fff !important;
}
body.bodyClass .header__loginButtons a.ff-btn--border:hover { border-color: #fff !important; background: rgba(255,255,255,.08) !important; }
body.bodyClass .header__loginButtons a.ff-btn--solid,
body.bodyClass section.header .ff-btn:not(.ff-btn--border) {
  background: var(--afa-brand) !important;
  border: 1px solid var(--afa-brand) !important;
  color: #fff !important;
}

/* Burger menu icon */
body.bodyClass .header__menu a,
body.bodyClass .header__menu i { color: #fff !important; font-size: 22px !important; }

/* Burger menu overlay */
body.bodyClass .menuOverlay { background: var(--afa-navy-deep) !important; }
body.bodyClass .menuOverlay a,
body.bodyClass .menuOverlay li a {
  color: #fff !important;
  font-family: var(--afa-display) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.bodyClass .menuOverlay li a:hover { color: var(--afa-accent) !important; }

@media (max-width: 767px) {
  body.bodyClass section.header > .container > .row.flex { min-height: 68px; gap: 12px; }
  body.bodyClass .header__logo a { width: 138px; height: 44px; }
  body.bodyClass section.header .header__socialMedia { display: none !important; }
  body.bodyClass section.header > .container > .row.flex > [class*="col-"]:has(.header__socialMedia) { display: none !important; }
  body.bodyClass .header__loginButtons a { padding: 8px 14px !important; font-size: 14px !important; }
}

/* =====================================================================
   Footer: restyles Firefish's own footer (section.footer)
   ===================================================================== */
body.bodyClass section.footer {
  background: var(--afa-navy-deep) !important;
  color: rgba(255,255,255,.85) !important;
  font-family: var(--afa-font) !important;
  padding: 56px 0 28px !important;
}
body.bodyClass section.footer > .container { max-width: 72rem; margin: 0 auto; padding: 0 24px !important; }
body.bodyClass section.footer h4 {
  color: #fff !important;
  font-family: var(--afa-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}
body.bodyClass section.footer p,
body.bodyClass section.footer span { color: rgba(255,255,255,.85) !important; font-size: 14px !important; line-height: 1.6 !important; margin: 0 0 6px !important; }
body.bodyClass section.footer a { color: #fff !important; text-decoration: none !important; transition: color .15s; }
body.bodyClass section.footer a:hover { color: var(--afa-accent) !important; }

/* Social icons */
body.bodyClass section.footer .footer__social { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
body.bodyClass section.footer .footer__social i { color: rgba(255,255,255,.85) !important; font-size: 26px !important; }
body.bodyClass section.footer .footer__social a:hover i { color: var(--afa-accent) !important; }

/* Swap the footer logo for the main site's footer logo */
body.bodyClass section.footer .footer__logo a {
  display: inline-block !important;
  width: 140px;
  height: 55px;
  background: url("https://andyfileassociates.com/afa-logo-4.png") left center / contain no-repeat;
}
body.bodyClass section.footer .footer__logo img { display: none !important; }

/* Bottom row: legal links, copyright, Powered by Firefish */
body.bodyClass section.footer .footer__items--bottom {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.12);
}
body.bodyClass section.footer .footer__small--links,
body.bodyClass section.footer .footer__small--links a,
body.bodyClass section.footer .footer__small--links span,
body.bodyClass section.footer .footer__details span { font-size: 13px !important; color: rgba(255,255,255,.55) !important; }
body.bodyClass section.footer .footer__small--links a:hover { color: #fff !important; }
body.bodyClass section.footer .ffPoweredBy,
body.bodyClass section.footer .ffPoweredBy a,
body.bodyClass section.footer .ffPoweredBy span { color: rgba(255,255,255,.45) !important; font-size: 12px !important; }

/* =====================================================================
   Firefish template: base type, colours, page background
   Selectors come from the saved apply page (template "_DefaultSiteNew").
   !important is used where the template's own stylesheet would otherwise win.
   ===================================================================== */

body.bodyClass {
  font-family: var(--afa-font) !important;
  color: var(--afa-ink) !important;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
body.bodyClass h1, body.bodyClass h2, body.bodyClass h3, body.bodyClass h4 {
  font-family: var(--afa-display) !important;
  color: var(--afa-navy) !important;
  letter-spacing: -0.01em;
}
body.bodyClass a { color: var(--afa-brand-deep); }

/* Generic Firefish buttons (job pages, login, register) */
body.bodyClass .ff-btn,
body.bodyClass .systemButton,
body.bodyClass .btn-main-colour {
  font-family: var(--afa-font) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: var(--afa-brand) !important;
  border: 1px solid var(--afa-brand) !important;
  color: #fff !important;
  padding: 12px 24px !important;
  height: auto !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
body.bodyClass .ff-btn:hover,
body.bodyClass .systemButton:hover,
body.bodyClass .btn-main-colour:hover { background: var(--afa-brand-deep) !important; border-color: var(--afa-brand-deep) !important; }
body.bodyClass .ff-btn--border { background: transparent !important; color: var(--afa-brand-deep) !important; }

/* Page background so the form sits on a card */
body.bodyClass section.mainContent { background: var(--afa-surface-2); padding: 48px 0 72px !important; }

/* =====================================================================
   Application form (job/<slug>/apply.aspx)
   ===================================================================== */

.advertApplicationArea { max-width: 760px; margin: 0 auto; }

/* Job title, with a small "Apply for this role" label above it */
.candidateAdvertApplicationArea .title .textArea { padding: 0 !important; margin: 0 0 20px !important; }
.candidateAdvertApplicationArea .title h1 {
  font-size: clamp(28px, 4vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.candidateAdvertApplicationArea .title h1::before {
  content: "Apply for this role";
  display: block;
  margin-bottom: 10px;
  font-family: var(--afa-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--afa-brand);
}

/* "Already have an account? Sign in" note */
.ff-advert-login-info {
  font-size: 15px;
  color: var(--afa-muted);
  background: #fff;
  border: 1px solid var(--afa-line);
  border-radius: var(--afa-radius);
  padding: 12px 16px;
}
.ff-advert-login-info a { font-weight: 600; }

/* The form card */
.registrationArea {
  background: #fff;
  border: 1px solid var(--afa-line);
  border-radius: var(--afa-radius-card);
  padding: 8px 32px 32px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(14, 52, 80, .04), 0 8px 24px rgba(14, 52, 80, .06);
}
.registrationArea > span > table { margin: 16px 0 0 !important; }
.registrationArea .RegistrationDescription { padding: 0 !important; }
.registrationArea .RegistrationDescriptionText { margin: 0 0 24px; font-size: 16px; color: var(--afa-muted); }

/* One column: labels above fields, instead of the wide two-column table */
.registrationTable,
.registrationTable > tbody,
.registrationTable tr,
.registrationTable td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: none !important; }
.registrationTable tr { margin: 0 0 20px !important; }
.registrationTable tr.registrationSpacerRow { display: none !important; }

.registrationTable td.registrationDescription { margin: 0 0 6px !important; }
.registrationTable td.registrationDescription label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--afa-ink) !important;
}

/* Required marker moves from after the field to after the label */
.registrationTable .requiredFieldIndicator { display: none !important; }
.registrationTable tr:has(.requiredFieldIndicator) td.registrationDescription label::after {
  content: " *";
  color: var(--afa-brand);
}

/* Text fields and the dropdown */
.registrationTable input.webWidgetFormField,
.registrationTable select.webWidgetFormField {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  font-family: var(--afa-font) !important;
  font-size: 16px !important;
  color: var(--afa-ink) !important;
  background-color: #fff !important;
  border: 1px solid #cfd8e0 !important;
  border-radius: var(--afa-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.registrationTable input.webWidgetFormField::placeholder { color: #9aa5b1; }
.registrationTable input.webWidgetFormField:hover,
.registrationTable select.webWidgetFormField:hover { border-color: #a9b6c2 !important; }
.registrationTable input.webWidgetFormField:focus,
.registrationTable select.webWidgetFormField:focus {
  border-color: var(--afa-brand) !important;
  box-shadow: 0 0 0 3px rgba(51, 153, 204, .2) !important;
}
.registrationTable select.webWidgetFormField {
  -webkit-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='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7682' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer;
}

/* Validation messages */
.registrationTable .errorText {
  color: #c2410c !important;
  font-size: 13px !important;
  font-weight: 500;
  margin: 0 0 6px;
}

/* CV upload: turn the bare "Attach CV" link into an upload box */
.registrationTable [id*="_docUL"] > a[id$="_lnkOpen"] {
  display: block !important;
  box-sizing: border-box;
  padding: 22px 16px !important;
  text-align: center;
  text-decoration: none !important;
  color: var(--afa-ink) !important;
  background: var(--afa-surface-2) !important;
  border: 1.5px dashed #b8c6d2 !important;
  border-radius: var(--afa-radius) !important;
  transition: border-color .15s, background-color .15s;
}
.registrationTable [id*="_docUL"] > a[id$="_lnkOpen"]:hover {
  border-color: var(--afa-brand) !important;
  background: #eef6fb !important;
}
.registrationTable [id*="_docUL"] .uploadFontImage { display: none !important; }
.registrationTable [id*="_docUL"] .uploadText {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--afa-brand-deep);
}
.registrationTable [id*="_docUL"] .uploadText::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233091be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") no-repeat center;
}
.registrationTable [id*="_docUL"] > a[id$="_lnkOpen"]::after {
  content: "PDF, Word or RTF, up to 10MB";
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--afa-muted);
}

/* Checkbox rows: box on the left, question beside it */
.registrationTable tr:has(input[type="checkbox"]) {
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px !important;
}
.registrationTable tr:has(input[type="checkbox"]) td { width: auto !important; }
.registrationTable tr:has(input[type="checkbox"]) td.registrationDescription { margin: 0 !important; }
.registrationTable tr:has(input[type="checkbox"]) td.registrationDescription label { font-weight: 500 !important; font-size: 15px !important; cursor: pointer; }
.registrationTable input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin: 1px 0 0 !important;
  flex-shrink: 0;
  accent-color: var(--afa-brand);
  cursor: pointer;
}
/* First checkbox gets a divider above it to separate the consents */
.registrationTable tr:has(input[type="checkbox"]):not(tr:has(input[type="checkbox"]) + tr) {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--afa-line) !important;
}

/* GDPR row: reads "[ ] I have read and accept the GDPR Candidate Agreement" */
.registrationTable tr:has([id*="chkAcceptCandidateAgreement"]) td.registrationDescription { display: none !important; }
.registrationTable tr:has([id*="chkAcceptCandidateAgreement"]) td:not(.registrationDescription) {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}
.registrationTable td:not(.registrationDescription) > label[for*="chkAcceptCandidateAgreement"] { font-size: 15px; font-weight: 500; color: var(--afa-ink); cursor: pointer; }
.registrationTable td:not(.registrationDescription) > label[for*="chkAcceptCandidateAgreement"]::before { content: "I have read and accept the"; }
.registrationTable td:not(.registrationDescription) > label[for*="chkAcceptCandidateAgreement"] a { font-weight: 600; }

/* Buttons */
.registrationButtonArea {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 28px !important;
  padding-top: 24px;
  border-top: 1px solid var(--afa-line);
  text-align: right;
}
.registrationButtonArea input[type="submit"],
.registrationButtonArea input[type="button"] {
  font-family: var(--afa-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 13px 28px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.registrationButtonArea .btn-go-profile {
  background: var(--afa-brand) !important;
  border: 1px solid var(--afa-brand) !important;
  color: #fff !important;
  min-width: 180px;
}
.registrationButtonArea .btn-go-profile:hover { background: var(--afa-brand-deep) !important; border-color: var(--afa-brand-deep) !important; }
.registrationButtonArea .btn-go-profile:disabled { opacity: .6; cursor: wait; }
.registrationButtonArea .btn-cancel {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--afa-muted) !important;
}
.registrationButtonArea .btn-cancel:hover { color: var(--afa-ink) !important; }

/* Upload pop-up */
.uplMdlPnl.modalPanel { border-radius: var(--afa-radius-card) !important; overflow: hidden; border: 0 !important; box-shadow: 0 20px 50px rgba(10, 40, 64, .25) !important; font-family: var(--afa-font) !important; }
.uplMdlPnl .mdl-hdr { background: var(--afa-navy) !important; color: #fff !important; font-family: var(--afa-display) !important; }

/* Phones */
@media (max-width: 640px) {
  body.bodyClass section.mainContent { padding: 24px 0 48px !important; }
  .registrationArea { padding: 4px 18px 24px; border-radius: 12px; }
  .registrationButtonArea { flex-direction: column-reverse; align-items: stretch; }
  .registrationButtonArea input[type="submit"],
  .registrationButtonArea input[type="button"] { width: 100% !important; }
}

/* =====================================================================
   Tables in page content (e.g. the cookie list on the Cookie Policy page)
   ===================================================================== */
body.bodyClass section.mainContent table:not(.registrationTable):has(thead) {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 15px;
  background: #fff;
}
body.bodyClass section.mainContent table:not(.registrationTable):has(thead) th,
body.bodyClass section.mainContent table:not(.registrationTable):has(thead) td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--afa-line);
}
body.bodyClass section.mainContent table:not(.registrationTable):has(thead) th {
  font-weight: 700;
  color: var(--afa-navy);
  border-bottom: 2px solid var(--afa-line);
}
body.bodyClass section.mainContent table:not(.registrationTable):has(thead) td:last-child,
body.bodyClass section.mainContent table:not(.registrationTable):has(thead) th:last-child { white-space: nowrap; }
body.bodyClass section.mainContent table:not(.registrationTable):has(thead) td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }

/* =====================================================================
   Fixes after first live check (13 Nov 2026)
   ===================================================================== */
/* CV upload box: Firefish wraps it in an inline span, so stretch that to full width */
.registrationTable span[id*="_docUL"] { display: block !important; width: 100% !important; }
/* Long labels (e.g. "Where did you hear about this position?") use the full width */
.registrationTable td.registrationDescription label { display: block !important; width: auto !important; max-width: none !important; }
.registrationTable tr:has(input[type="checkbox"]) td.registrationDescription label { display: inline !important; }
/* GDPR row: line its text up with the other tick-box rows */
.registrationTable td:not(.registrationDescription) > label[for*="chkAcceptCandidateAgreement"] { margin: 0 !important; padding: 0 !important; }
.registrationTable tr:has([id*="chkAcceptCandidateAgreement"]) input[type="checkbox"] { margin-right: 0 !important; }
/* Header social icons: hide the empty slots (e.g. Pinterest) that leave uneven gaps */
body.bodyClass .header__socialMedia > span:empty { display: none !important; }
/* Label column: Firefish caps its width, which still wrapped the "Where did you hear" label */
.registrationTable td,
.registrationTable td.registrationDescription,
.registrationTable td.registrationDescription label { max-width: none !important; min-width: 0 !important; white-space: normal !important; }
.registrationTable tr:not(:has(input[type="checkbox"])) td.registrationDescription { width: 100% !important; }
/* Hide Firefish's burger menu: its links point at the old site, and the logo already links home */
body.bodyClass section.header .header__menu,
body.bodyClass section.header > .container > .row.flex > [class*="col-"]:has(.header__menu),
body.bodyClass .menuOverlay { display: none !important; }

/* ---------- Jobs listing (table.resultsGrid): keep cards full width, wrap text, site font ---------- */
body.bodyClass section.mainContent table.resultsGrid,
body.bodyClass section.mainContent table.resultsGrid tbody,
body.bodyClass section.mainContent table.resultsGrid tr,
body.bodyClass section.mainContent table.resultsGrid td.resultsRowCell {
  display: block; width: 100% !important; max-width: 100%; box-sizing: border-box;
}
body.bodyClass section.mainContent table.resultsGrid td.resultsRowCell {
  padding: 0; border: 0; font-family: inherit; font-size: inherit;
  white-space: normal; word-break: normal; overflow-wrap: anywhere;
}
body.bodyClass section.mainContent table.resultsGrid .jobItem { font-family: var(--afa-font); }
body.bodyClass section.mainContent table.resultsGrid .jobItem * { white-space: normal; max-width: 100%; }
body.bodyClass section.mainContent table.resultsGrid .jobItem h2,
body.bodyClass section.mainContent table.resultsGrid .jobItem h3 {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
}
body.bodyClass section.mainContent table.pager td { font-family: inherit; white-space: normal; }
/* "I'm Interested" button: Firefish's wide button is 250px in a 200px column, so fit it to its column */
body.bodyClass section.mainContent table.resultsGrid .jobItem__applyWrapper--applyLink { display: block; }
body.bodyClass section.mainContent table.resultsGrid .jobItem .ff-btn {
  display: block; width: 100% !important; min-width: 0 !important; box-sizing: border-box;
  padding-left: 16px; padding-right: 16px; text-align: center;
}