/* ==========================================================================
   BreezyRecruit — CookieYes consent bar & preference centre
   Paste into: CookieYes → Settings → Custom CSS  (or your child theme's CSS)

   Targets CookieYes v3 markup. `!important` is used deliberately on colours,
   radii and spacing: CookieYes writes its customiser values as inline styles
   on these same elements, and inline styles otherwise win.

   Design tokens are the ones already in the site's public.css, so the consent
   UI matches the job search page rather than approximating it.
   ========================================================================== */

:root {
  --brc-navy-900: #0b2440;
  --brc-navy-700: #163a60;
  --brc-navy-500: #396b8e;
  --brc-orange: #f47721;
  --brc-orange-dark: #d85e0c;
  --brc-ink: #15233a;
  --brc-muted: #657287;
  --brc-line: #dde5ef;
  --brc-soft: #f6f8fb;
  --brc-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   1. Bottom bar
   -------------------------------------------------------------------------- */

.cky-consent-container {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 99999 !important;
}

.cky-consent-bar {
  display: block !important;
  box-sizing: border-box;
  padding: 22px clamp(20px, 4vw, 40px) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  background: linear-gradient(105deg, #0b2440 0%, #163a60 58%, #396b8e 100%) !important;
  box-shadow: 0 -18px 48px rgba(0, 17, 35, 0.34) !important;
  color: #fff !important;
  font-family: var(--brc-font) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Constrain the content to the same measure as the site shell, while the bar
   itself still spans the viewport. */
.cky-consent-bar .cky-notice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 34px;
  align-items: center;
  width: min(100% - 8px, 1740px);
  margin-inline: auto !important;
  padding: 0 !important;
}

.cky-consent-bar .cky-title {
  grid-column: 1;
  margin: 0 0 6px !important;
  color: #fff !important;
  font-family: var(--brc-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.012em;
}

.cky-consent-bar .cky-notice-group {
  display: contents !important;
}

.cky-consent-bar .cky-notice-des {
  grid-column: 1;
  max-width: 78ch;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: var(--brc-font) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.cky-consent-bar .cky-notice-des * {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.cky-consent-bar .cky-notice-des p {
  margin: 0 !important;
}

.cky-consent-bar .cky-notice-des a,
.cky-consent-bar .cky-notice-des .cky-policy {
  color: #ffb37a !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  border: 0 !important;
}

.cky-consent-bar .cky-notice-des a:hover {
  color: #fff !important;
}

/* Buttons ---------------------------------------------------------------- */

.cky-consent-bar .cky-notice-btn-wrapper {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex !important;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 0 !important;
}

.cky-btn {
  flex: 0 0 auto;
  /* !important is required here: CookieYes ships more specific selectors that
     reset min-height to 0 and underline the label. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 132px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  text-decoration: none !important;
  border-radius: 11px !important;
  font-family: var(--brc-font) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.cky-btn:hover,
.cky-btn:focus {
  text-decoration: none !important;
}

/* Accept and Reject are given identical weight, size and contrast on purpose:
   a consent choice must not be nudged by design. The shared min-width keeps them
   pixel-identical rather than merely similar, since glyph widths differ. */
.cky-consent-bar .cky-btn-accept,
.cky-consent-bar .cky-btn-reject {
  min-width: 150px !important;
}

.cky-consent-bar .cky-btn-accept {
  border: 1px solid var(--brc-orange) !important;
  background: var(--brc-orange) !important;
  color: #fff !important;
}

.cky-consent-bar .cky-btn-accept:hover {
  border-color: var(--brc-orange-dark) !important;
  background: var(--brc-orange-dark) !important;
  transform: translateY(-1px);
}

.cky-consent-bar .cky-btn-reject {
  border: 1px solid #fff !important;
  background: #fff !important;
  color: #12314f !important;
}

.cky-consent-bar .cky-btn-reject:hover {
  border-color: #fff !important;
  background: #e8eef5 !important;
  color: #0b2440 !important;
  transform: translateY(-1px);
}

.cky-consent-bar .cky-btn-customize {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.cky-consent-bar .cky-btn-customize:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

/* CookieYes ships a dark close icon; invert it for the navy bar. */
.cky-banner-btn-close {
  top: 12px !important;
  right: 12px !important;
  opacity: 0.7;
  transition: opacity 0.18s ease;
}

.cky-banner-btn-close img {
  filter: brightness(0) invert(1);
}

.cky-banner-btn-close:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Preference centre
   -------------------------------------------------------------------------- */

.cky-overlay {
  background: rgba(5, 18, 33, 0.62) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.cky-preference-center {
  max-width: 760px !important;
  border: 0 !important;
  border-radius: 19px !important;
  background: #fff !important;
  box-shadow: 0 30px 80px rgba(8, 31, 55, 0.35) !important;
  color: var(--brc-ink) !important;
  font-family: var(--brc-font) !important;
  overflow: hidden !important;
}

.cky-preference-header {
  padding: 22px 26px !important;
  border-bottom: 0 !important;
  background: linear-gradient(105deg, #0b2440 0%, #1b4570 100%) !important;
}

.cky-preference-title {
  color: #fff !important;
  font-family: var(--brc-font) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
}

.cky-preference-header .cky-btn-close {
  top: 22px !important;
  right: 22px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  opacity: 1 !important;
  transition: background-color 0.18s ease;
}

.cky-preference-header .cky-btn-close img {
  filter: brightness(0) invert(1);
}

.cky-preference-header .cky-btn-close:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

.cky-preference-body-wrapper {
  padding: 24px 26px 8px !important;
  color: var(--brc-ink) !important;
}

.cky-preference-content-wrapper {
  color: #4f6075 !important;
  font-family: var(--brc-font) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.cky-preference-content-wrapper a {
  color: var(--brc-orange-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Global Privacy Control notice — a real signal, so it gets a real callout. */
.cky-gpc-wrapper {
  margin: 18px 0 4px !important;
  padding: 13px 15px !important;
  border: 1px solid #cfe0d6 !important;
  border-radius: 12px !important;
  background: #f1f8f3 !important;
}

.cky-gpc-desc,
.cky-gpc-desc * {
  color: #1c5c39 !important;
  font-family: var(--brc-font) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

/* Category accordions --------------------------------------------------- */

.cky-accordion-wrapper {
  display: grid;
  gap: 12px;
  margin-top: 20px !important;
}

.cky-accordion {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--brc-line) !important;
  border-bottom: 1px solid var(--brc-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cky-accordion:hover {
  border-color: #c2d2e4 !important;
}

.cky-accordion.cky-accordion-active {
  border-color: #bcd0e6 !important;
  box-shadow: 0 8px 24px rgba(21, 42, 71, 0.06) !important;
}

.cky-accordion-item {
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px !important;
}

.cky-accordion-chevron {
  margin-top: 3px !important;
  color: var(--brc-navy-500) !important;
  transition: transform 0.2s ease;
}

.cky-accordion-active .cky-accordion-chevron {
  transform: rotate(90deg);
}

.cky-accordion-header-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.cky-accordion-header {
  display: flex !important;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.cky-accordion-btn {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #12314f !important;
  font-family: var(--brc-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  text-align: left;
}

.cky-accordion-header-des,
.cky-accordion-header-des * {
  margin-top: 6px !important;
  color: #5f6d80 !important;
  font-family: var(--brc-font) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.cky-accordion-body {
  padding: 0 18px 16px 42px !important;
  color: #5f6d80 !important;
  font-family: var(--brc-font) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* "Always Active" reads as a status, not a disabled control. */
.cky-always-active {
  flex: 0 0 auto;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: #fff2e8 !important;
  color: #c75208 !important;
  font-family: var(--brc-font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Toggles --------------------------------------------------------------- */

.cky-switch {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
}

.cky-switch input[type="checkbox"] {
  position: relative;
  width: 46px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #c3cedd !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease;
}

.cky-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 36, 64, 0.35);
  transition: transform 0.2s ease;
}

.cky-switch input[type="checkbox"]:checked {
  background: var(--brc-orange) !important;
}

.cky-switch input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

.cky-switch input[type="checkbox"]:disabled {
  background: #dde5ef !important;
  cursor: not-allowed;
}

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

.cky-footer-shadow {
  display: none !important;
}

.cky-footer-wrapper {
  padding: 18px 26px !important;
  border-top: 1px solid var(--brc-line) !important;
  background: var(--brc-soft) !important;
}

.cky-prefrence-btn-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 0 !important;
}

.cky-prefrence-btn-wrapper .cky-btn {
  flex: 1 1 auto;
}

.cky-prefrence-btn-wrapper .cky-btn-reject {
  border: 1px solid #ccd6e2 !important;
  background: #fff !important;
  color: #12314f !important;
}

.cky-prefrence-btn-wrapper .cky-btn-reject:hover {
  border-color: #12314f !important;
  background: #12314f !important;
  color: #fff !important;
}

.cky-prefrence-btn-wrapper .cky-btn-preferences {
  border: 1px solid #12314f !important;
  background: #12314f !important;
  color: #fff !important;
}

.cky-prefrence-btn-wrapper .cky-btn-preferences:hover {
  border-color: #0b2440 !important;
  background: #0b2440 !important;
  color: #fff !important;
}

.cky-prefrence-btn-wrapper .cky-btn-accept {
  border: 1px solid var(--brc-orange) !important;
  background: var(--brc-orange) !important;
  color: #fff !important;
}

.cky-prefrence-btn-wrapper .cky-btn-accept:hover {
  border-color: var(--brc-orange-dark) !important;
  background: var(--brc-orange-dark) !important;
  color: #fff !important;
}

/* Cookie detail tables inside a category ------------------------------- */

.cky-cookie-des-table,
.cky-audit-table {
  border-color: var(--brc-line) !important;
  border-radius: 10px !important;
  font-family: var(--brc-font) !important;
  font-size: 12.5px !important;
}

.cky-cookie-des-table li,
.cky-audit-table li {
  border-color: var(--brc-line) !important;
  color: #5f6d80 !important;
}

.cky-show-desc-btn {
  color: var(--brc-orange-dark) !important;
  font-family: var(--brc-font) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   2b. US opt-out mode ("Do Not Sell or Share")

   CookieYes renders different controls depending on the regulation selected in
   its web app. These rules cover the opt-out markup so the design holds before
   and after the switch to GDPR, rather than half-styling one of the two.
   -------------------------------------------------------------------------- */

.cky-consent-bar .cky-btn-do-not-sell {
  min-width: 150px !important;
  border: 1px solid var(--brc-orange) !important;
  background: var(--brc-orange) !important;
  color: #fff !important;
}

.cky-consent-bar .cky-btn-do-not-sell:hover {
  border-color: var(--brc-orange-dark) !important;
  background: var(--brc-orange-dark) !important;
  transform: translateY(-1px);
}

.cky-horizontal-separator {
  border-color: var(--brc-line) !important;
  background: var(--brc-line) !important;
}

.cky-opt-out-wrapper {
  margin-top: 18px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--brc-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.cky-opt-out-checkbox-wrapper {
  display: flex !important;
  gap: 12px;
  align-items: center;
}

.cky-opt-out-checkbox-wrapper input[type="checkbox"],
input.cky-opt-out-checkbox {
  position: relative;
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border: 1.5px solid #b9c6d6 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.cky-opt-out-checkbox-wrapper input[type="checkbox"]:checked,
input.cky-opt-out-checkbox:checked {
  border-color: var(--brc-orange) !important;
  background: var(--brc-orange) !important;
}

.cky-opt-out-checkbox-wrapper input[type="checkbox"]:checked::after,
input.cky-opt-out-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cky-opt-out-checkbox-label,
.cky-opt-out-checkbox-label * {
  margin: 0 !important;
  color: #12314f !important;
  font-family: var(--brc-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  cursor: pointer;
}

.cky-optout-action-area {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.cky-opt-out-btn-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 !important;
}

.cky-opt-out-btn-wrapper .cky-btn-cancel {
  border: 1px solid #ccd6e2 !important;
  background: #fff !important;
  color: #12314f !important;
}

.cky-opt-out-btn-wrapper .cky-btn-cancel:hover {
  border-color: #12314f !important;
  background: #12314f !important;
  color: #fff !important;
}

.cky-opt-out-btn-wrapper .cky-btn-confirm {
  border: 1px solid var(--brc-orange) !important;
  background: var(--brc-orange) !important;
  color: #fff !important;
}

.cky-opt-out-btn-wrapper .cky-btn-confirm:hover {
  border-color: var(--brc-orange-dark) !important;
  background: var(--brc-orange-dark) !important;
  color: #fff !important;
}

.cky-optout-success {
  border-radius: 14px !important;
  background: #f1f8f3 !important;
}

.cky-optout-success-text,
.cky-optout-success-text * {
  color: #1c5c39 !important;
  font-family: var(--brc-font) !important;
  font-weight: 800 !important;
}

.cky-optout-success-subtext,
.cky-optout-success-subtext * {
  color: #3d7a58 !important;
  font-family: var(--brc-font) !important;
  font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   3. Revisit button
   -------------------------------------------------------------------------- */

.cky-btn-revisit-wrapper {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(140deg, #0b2440, #1b4570) !important;
  box-shadow: 0 10px 26px rgba(8, 31, 55, 0.32) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cky-btn-revisit-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(8, 31, 55, 0.4) !important;
}

.cky-btn-revisit {
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
}

.cky-btn-revisit img {
  width: 22px !important;
  height: 22px !important;
  filter: brightness(0) saturate(100%) invert(62%) sepia(46%) saturate(2200%)
    hue-rotate(343deg) brightness(101%) contrast(92%);
}

.cky-btn-revisit-wrapper .cky-btn-revisit:before,
.cky-btn-revisit-wrapper .cky-btn-revisit:after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Accessibility
   -------------------------------------------------------------------------- */

.cky-btn:focus-visible,
.cky-accordion-btn:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible,
.cky-btn-close:focus-visible,
.cky-banner-btn-close:focus-visible,
.cky-btn-revisit:focus-visible {
  outline: 3px solid var(--brc-orange) !important;
  outline-offset: 2px !important;
}

.cky-consent-bar .cky-btn-reject:focus-visible,
.cky-consent-bar .cky-btn-accept:focus-visible {
  outline-color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .cky-btn,
  .cky-accordion,
  .cky-accordion-chevron,
  .cky-switch input[type="checkbox"],
  .cky-switch input[type="checkbox"]::before,
  .cky-btn-revisit-wrapper {
    transition: none !important;
  }

  .cky-btn:hover,
  .cky-btn-revisit-wrapper:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. Small screens
   -------------------------------------------------------------------------- */

/* The Tidio chat widget is fixed bottom-right at z-index 999999999 and covered
   "Accept all". Two defences, because its footprint changes: the launcher alone is
   ~64px, but its "Chat with us" greeting balloon is ~250px wide.
   1. Lift the whole widget while the consent bar is on screen. Reverts by itself
      when the bar is dismissed, so the chat returns to its normal position.
   2. Reserve the launcher's footprint at the end of the button row, which still
      protects the buttons in browsers without :has() support. */
#tidio-chat {
  transition: transform 0.2s ease;
}

body:has(.cky-consent-container:not(.cky-hide)) #tidio-chat,
body:has(.cky-modal:not(.cky-hide)) #tidio-chat {
  transform: translateY(-132px) !important;
}

@media (min-width: 901px) {
  .cky-consent-bar .cky-notice-btn-wrapper {
    padding-right: 112px !important;
  }
}

@media (max-width: 900px) {
  body:has(.cky-consent-container:not(.cky-hide)) #tidio-chat {
    transform: translateY(-210px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tidio-chat { transition: none; }
}

@media (max-width: 900px) {
  .cky-consent-bar .cky-notice {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .cky-consent-bar .cky-notice-btn-wrapper {
    grid-column: 1;
    grid-row: auto;
    justify-content: stretch;
  }

  .cky-consent-bar .cky-notice-btn-wrapper .cky-btn {
    flex: 1 1 160px;
  }
}

@media (max-width: 576px) {
  .cky-consent-bar {
    padding: 18px 16px 20px !important;
    max-height: 82vh;
    overflow-y: auto;
  }

  .cky-consent-bar .cky-title {
    font-size: 15px !important;
  }

  .cky-consent-bar .cky-notice-des {
    font-size: 13px !important;
  }

  .cky-consent-bar .cky-notice-btn-wrapper .cky-btn {
    flex: 1 1 100%;
  }

  /* Accept and Reject stay adjacent and identical in size on mobile. */
  .cky-consent-bar .cky-btn-customize {
    order: 3;
  }

  .cky-preference-center {
    max-width: calc(100vw - 24px) !important;
    border-radius: 16px !important;
  }

  .cky-preference-header,
  .cky-preference-body-wrapper,
  .cky-footer-wrapper {
    padding-inline: 18px !important;
  }

  .cky-preference-title {
    font-size: 18px !important;
  }

  .cky-prefrence-btn-wrapper .cky-btn {
    flex: 1 1 100%;
  }

  .cky-accordion-body {
    padding-left: 18px !important;
  }
}