/*
 * TogetherCocoa Careers: jobs list, role page and application form.
 * Colours, radii and the proportional scale (--u) come from the TogetherCocoa theme; the fallbacks keep the
 * plugin presentable with any other theme. Same breakpoints as the theme: 1001+ desktop, 751-1000 tablet, <=750 mobile.
 */

.tcj,
.tcj-list {
  --tcj-plum: var(--plum, #6d2255);
  --tcj-pink: var(--pink, #f8e3e5);
  --tcj-green: var(--green, #5fb258);
  --tcj-yellow: var(--yellow, #ffcb6e);
  --tcj-ink: var(--ink, #2d2d2d);
  --tcj-u: var(--u, 1px);
  --tcj-r: var(--r, 36px);
  --tcj-rs: var(--rs, 32px);
  --tcj-alert: #ffc9c0;
  font-family: "Rubik", Arial, sans-serif;
  color: var(--tcj-ink);
}
.tcj *,
.tcj-list * { box-sizing: border-box; }

/* ==========================================================================
   Buttons (outline pill like the rest of the site; "fill" = the yellow call to action)
   ========================================================================== */
.tcj .tcj-btn,
.tcj-list .tcj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 202px; min-height: 52px; padding: 0 28px;
  border: 2px solid var(--tcj-yellow); border-radius: 999px; background: transparent; box-shadow: none;
  color: var(--tcj-plum); font: 700 16px/22.4px "Rubik", Arial, sans-serif; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tcj .tcj-btn:hover,
.tcj .tcj-btn:focus-visible,
.tcj-list .tcj-btn:hover,
.tcj-list .tcj-btn:focus-visible { background: var(--tcj-yellow); color: var(--tcj-plum); }
.tcj .tcj-btn-light { color: #fff; }
.tcj .tcj-btn-fill { background: var(--tcj-yellow); color: var(--tcj-plum); }
.tcj .tcj-btn-fill:hover,
.tcj .tcj-btn-fill:focus-visible { background: #fff; border-color: #fff; }
.tcj-list .tcj-btn:focus-visible,
.tcj .tcj-btn:focus-visible,
.tcj a:focus-visible { outline: 3px solid var(--tcj-plum); outline-offset: 3px; }
.tcj-hero a:focus-visible,
.tcj-apply a:focus-visible,
.tcj-apply .tcj-btn:focus-visible { outline-color: var(--tcj-yellow); }

/* ==========================================================================
   List of open roles ([tc_jobs], inside the Careers page)
   ========================================================================== */
.tcj-cards { display: flex; flex-direction: column; gap: calc(24 * var(--tcj-u)); margin: 0; padding: 0; list-style: none; }
.tcj-card {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0;
  padding: calc(32 * var(--tcj-u)) calc(40 * var(--tcj-u));
  border-radius: var(--tcj-r); background: var(--tcj-pink);
}
.tcj-card-main { min-width: 0; }
.tcj-card-title { margin: 0 0 16px; color: var(--tcj-plum); font-size: 28px; line-height: 32px; font-weight: 700; overflow-wrap: anywhere; }
.tcj-list .tcj-card-title a { color: inherit; text-decoration: none; }
.tcj-list .tcj-card-title a:hover { text-decoration: underline; }
.tcj-facts { display: flex; flex-wrap: wrap; gap: 10px 44px; margin: 0; padding: 0; }
.tcj-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.tcj-fact dt { margin: 0; color: var(--tcj-plum); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.tcj-fact dd { margin: 0; color: var(--tcj-ink); font-size: 18px; line-height: 27px; font-weight: 400; }
.tcj-card .tcj-btn { flex: 0 0 auto; }

.tcj-empty { padding: calc(40 * var(--tcj-u)); border-radius: var(--tcj-r); background: var(--tcj-pink); }
.tcj-empty p { margin: 0; font-size: 18px; line-height: 27px; }
.tcj-empty .tcj-empty-title { margin-bottom: 6px; color: var(--tcj-plum); font-size: 28px; line-height: 32px; font-weight: 700; }
.tcj-more { margin: 24px 0 0; font-size: 16px; line-height: 24px; }
.tcj-list .tcj-more a { color: var(--tcj-plum); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   Role page
   ========================================================================== */
.tcj-b-note { padding-top: calc(16 * var(--tcj-u)); }
.tcj-preview-note { margin: 0; padding: 12px 20px; border-radius: 12px; background: var(--tcj-yellow); color: var(--tcj-plum); font-size: 15px; line-height: 22px; font-weight: 600; }
.tcj-b-hero { padding: calc(32 * var(--tcj-u)) 0 calc(48 * var(--tcj-u)); }
.tcj-hero { padding: calc(36 * var(--tcj-u)) calc(44 * var(--tcj-u)) calc(44 * var(--tcj-u)); border-radius: var(--tcj-rs); background: var(--tcj-plum); color: var(--tcj-pink); }
.tcj .tcj-back { display: inline-block; margin-bottom: 28px; color: var(--tcj-pink); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; }
.tcj .tcj-back:hover { text-decoration: underline; }
.tcj .tcj-title { margin: 0; max-width: 1000px; padding: 0; color: var(--tcj-pink); font-size: 44px; line-height: 48px; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }
.tcj-hero-facts { display: flex; flex-wrap: wrap; gap: 16px 52px; margin: 28px 0 0; padding: 0; list-style: none; }
.tcj-hero-facts li { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.tcj-fact-label { color: var(--tcj-pink); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; opacity: .8; }
.tcj-fact-value { color: var(--tcj-pink); font-size: 18px; line-height: 27px; font-weight: 600; }
.tcj-hero .tcj-btn { margin-top: 32px; }
.tcj-closed-note {
  display: inline-block; margin: 32px 0 0; padding: 10px 24px;
  border: 2px solid var(--tcj-yellow); border-radius: 999px; color: var(--tcj-yellow); font-size: 16px; line-height: 22px; font-weight: 700;
}

.tcj-b-body { padding: calc(48 * var(--tcj-u)) 0; }
.tcj-card-body { padding: calc(8 * var(--tcj-u)) calc(44 * var(--tcj-u)); border-radius: var(--tcj-r); background: var(--tcj-pink); }
.tcj-section {
  display: grid; grid-template-columns: minmax(180px, 27%) minmax(0, 1fr); gap: 20px calc(40 * var(--tcj-u));
  padding: calc(36 * var(--tcj-u)) 0; border-top: 2px solid var(--tcj-plum);
}
.tcj-section:first-child { border-top: 0; }
.tcj .tcj-section-title { margin: 0; padding: 0; color: var(--tcj-plum); font-size: 28px; line-height: 32px; font-weight: 700; }
.tcj-prose { max-width: 860px; font-size: 18px; line-height: 27px; overflow-wrap: anywhere; }
.tcj-prose > :first-child { margin-top: 0; }
.tcj-prose > :last-child { margin-bottom: 0; }
.tcj-prose p { margin: 0 0 16px; }
.tcj-prose ul,
.tcj-prose ol { margin: 0 0 16px; padding-left: 24px; }
.tcj-prose ul { list-style: disc; }
.tcj-prose ol { list-style: decimal; }
.tcj-prose li { margin: 0 0 8px; }
.tcj-prose li::marker { color: var(--tcj-green); font-weight: 700; }
.tcj-prose a { color: var(--tcj-plum); text-decoration: underline; }
.tcj-prose strong { font-weight: 600; }
.tcj-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* ==========================================================================
   Application card + form
   ========================================================================== */
.tcj-b-apply { padding: calc(48 * var(--tcj-u)) 0 calc(64 * var(--tcj-u)); scroll-margin-top: 160px; }
.tcj-apply {
  display: grid; grid-template-columns: minmax(220px, 33%) minmax(0, 1fr); gap: 32px calc(52 * var(--tcj-u));
  padding: calc(40 * var(--tcj-u)) calc(44 * var(--tcj-u)) calc(44 * var(--tcj-u));
  border-radius: var(--tcj-rs); background: var(--tcj-plum); color: var(--tcj-pink);
}
.tcj-apply-closed,
.tcj-apply-done { grid-template-columns: minmax(0, 1fr); }
.tcj .tcj-apply-title { margin: 0 0 16px; padding: 0; color: var(--tcj-pink); font-size: 43px; line-height: 43px; font-weight: 700; }
.tcj .tcj-apply-title:focus { outline: none; }
.tcj-apply-intro p { margin: 0 0 12px; color: var(--tcj-pink); font-size: 16px; line-height: 24px; }
.tcj-apply-deadline strong { font-weight: 600; }
.tcj-apply-intro .tcj-btn { margin-top: 12px; }

.tcj-form { display: grid; gap: 22px; margin: 0; min-width: 0; }
.tcj-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.tcj-field { min-width: 0; margin: 0; }
.tcj-form label { display: block; margin: 0 0 8px; color: var(--tcj-pink); font-size: 16px; line-height: 20px; font-weight: 500; }
.tcj-req { color: var(--tcj-yellow); font-weight: 700; }
.tcj-hint { margin: -2px 0 8px; color: var(--tcj-pink); font-size: 14px; line-height: 20px; opacity: .85; }
.tcj-form input[type="text"],
.tcj-form input[type="email"],
.tcj-form input[type="tel"],
.tcj-form textarea {
  display: block; width: 100%; min-height: 46px; margin: 0; padding: 10px 14px;
  border: 2px solid transparent; border-radius: 8px; background: #fff; box-shadow: none;
  color: var(--tcj-ink); font: 400 16px/24px "Rubik", Arial, sans-serif;
}
.tcj-form textarea { min-height: 210px; resize: vertical; }
.tcj-form input[type="text"]:focus,
.tcj-form input[type="email"]:focus,
.tcj-form input[type="tel"]:focus,
.tcj-form textarea:focus { outline: 3px solid var(--tcj-yellow); outline-offset: 1px; border-color: transparent; }
.tcj-form .has-error input[type="text"],
.tcj-form .has-error input[type="email"],
.tcj-form .has-error input[type="tel"],
.tcj-form .has-error textarea,
.tcj-form .has-error input[type="file"] { border-color: var(--tcj-alert); }
.tcj-form input[type="file"] {
  display: block; width: 100%; padding: 10px 12px; border: 2px dashed rgba(248, 227, 229, .55); border-radius: 8px;
  background: rgba(255, 255, 255, .06); color: var(--tcj-pink); font: 400 15px/22px "Rubik", Arial, sans-serif;
}
.tcj-form input[type="file"]:focus-visible { outline: 3px solid var(--tcj-yellow); outline-offset: 1px; }
.tcj-form input[type="file"]::file-selector-button {
  margin: 0 14px 0 0; padding: 8px 20px; border: 2px solid var(--tcj-yellow); border-radius: 999px; background: transparent;
  color: #fff; font: 700 14px/20px "Rubik", Arial, sans-serif; cursor: pointer;
}
.tcj-form input[type="file"]::file-selector-button:hover { background: var(--tcj-yellow); color: var(--tcj-plum); }

.tcj-err { margin: 6px 0 0; color: var(--tcj-alert); font-size: 14px; line-height: 20px; font-weight: 500; }
.tcj-err[hidden],
.tcj-alert[hidden] { display: none; }
.tcj-alert { margin: 0; padding: 12px 16px; border: 1px solid var(--tcj-alert); border-radius: 8px; background: rgba(255, 201, 192, .14); color: #fff; font-size: 15px; line-height: 22px; font-weight: 500; }
.tcj-alert:focus { outline: 3px solid var(--tcj-yellow); outline-offset: 2px; }

.tcj-form .tcj-consent-label { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15px; line-height: 22px; font-weight: 400; cursor: pointer; }
.tcj-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; padding: 0;
  border: 2px solid rgba(95, 178, 88, .9); border-radius: 50%; background: transparent; cursor: pointer;
}
.tcj-consent input[type="checkbox"]:checked { background: radial-gradient(var(--tcj-green) 0 5px, transparent 6px); }
.tcj-consent input[type="checkbox"]:focus-visible { outline: 3px solid var(--tcj-yellow); outline-offset: 2px; }
.tcj-consent.has-error input[type="checkbox"] { border-color: var(--tcj-alert); }
.tcj-consent a { color: var(--tcj-pink); text-decoration: underline; }
.tcj-retention { margin: 8px 0 0 34px; }

.tcj-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tcj .tcj-submit { justify-self: end; min-width: 240px; min-height: 54px; }
.tcj .tcj-submit:disabled { opacity: .6; cursor: progress; }

/* ==========================================================================
   Tablet (751-1000px) and mobile (<=750px)
   ========================================================================== */
@media (max-width: 1000px) {
  .tcj-b-hero { padding: 27px 0 33px; }
  .tcj-hero { padding: 26px 26px 32px; }
  .tcj .tcj-title { font-size: 36px; line-height: 40px; }
  .tcj-b-body { padding: 35px 0; }
  .tcj-card-body { padding: 4px 28px; }
  .tcj-section { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 0; }
  .tcj-b-apply { padding: 35px 0 44px; scroll-margin-top: 130px; }
  .tcj-apply { grid-template-columns: minmax(0, 1fr); padding: 28px 26px 32px; gap: 24px; }
  .tcj .tcj-apply-title { font-size: 34px; line-height: 34px; }
  .tcj-card { padding: 26px 28px; }
}

@media (max-width: 750px) {
  .tcj-card { flex-direction: column; align-items: stretch; gap: 22px; padding: 23px; }
  .tcj-card-title { font-size: 24px; line-height: 28px; margin-bottom: 14px; }
  .tcj-facts { flex-direction: column; gap: 10px; }
  .tcj-card .tcj-btn { width: 100%; }
  .tcj-empty { padding: 23px; }
  .tcj-empty .tcj-empty-title { font-size: 24px; line-height: 28px; }

  .tcj-hero { padding: 22px 22px 28px; }
  .tcj .tcj-title { font-size: 28px; line-height: 32px; }
  .tcj-hero-facts { gap: 14px 30px; margin-top: 22px; }
  .tcj-hero .tcj-btn { width: 100%; margin-top: 26px; }
  .tcj-card-body { padding: 0 22px; }
  .tcj .tcj-section-title { font-size: 24px; line-height: 28px; }
  .tcj-prose { font-size: 16px; line-height: 24px; }
  .tcj-apply { padding: 24px 22px 28px; }
  .tcj .tcj-apply-title { font-size: 30px; line-height: 30px; }
  .tcj-row { grid-template-columns: minmax(0, 1fr); }
  .tcj .tcj-submit { width: 100%; justify-self: stretch; }
  .tcj-form input[type="file"] { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tcj .tcj-btn, .tcj-list .tcj-btn { transition: none; }
}