/* ============================================================
   UCG CAREERS + POSITION PAGES
   ------------------------------------------------------------
   Loaded only on /careers/ and the individual position pages.
   Built on the .ucgp inner-page system in ucg-page.css, so
   colours, type and the hero come from there.

   THE PARTS
     .ucgc-roles   role list grid (scales to any number)
     .ucgc-role    one open position card
     .ucgc-split   position page: details left, form right
     .ucgc-apply   the sticky application panel
     .ucgc-faq     native details/summary accordion
   ============================================================ */

/* ---- 1. ROLE LIST ----------------------------------------- */
.ucgc-roles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}
.ucgc-role{
  display:flex;flex-direction:column;gap:14px;
  background:#fff;
  border:1px solid rgba(7,28,72,.10);
  border-radius:18px;
  padding:28px 28px 26px;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ucgc-role:hover{
  transform:translateY(-3px);
  border-color:rgba(249,113,4,.45);
  box-shadow:0 18px 40px -26px rgba(7,28,72,.45);
}
.ucgc-role h3{
  font-family:'Poppins',sans-serif;
  font-size:clamp(20px,1.6vw,24px);
  font-weight:600;line-height:1.2;
  color:var(--ucg-navy) !important;
  margin:0;letter-spacing:-.02em;
}
.ucgc-role p{margin:0;color:#41506B;font-size:15.5px;line-height:1.7}
.ucgc-chips{display:flex;flex-wrap:wrap;gap:8px}
.ucgc-chip{
  display:inline-block;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:rgba(7,28,72,.06);color:var(--ucg-navy);
}
.ucgc-chip--open{background:rgba(37,150,90,.12);color:#1d7a4a}
.ucgc-chip--pay{background:rgba(249,113,4,.12);color:#b45205}
.ucgc-role .go{
  margin-top:auto;font-weight:600;color:var(--ucg-orange);
  display:inline-flex;align-items:center;gap:8px;
}
.ucgc-role .go .arw{transition:transform .18s ease}
.ucgc-role:hover .go .arw{transform:translateX(4px)}
.ucgc-role--soon{background:transparent;border-style:dashed;border-color:rgba(7,28,72,.18)}
.ucgc-role--soon h3{color:#41506B !important}

/* ---- 2. POSITION PAGE: DETAILS LEFT, FORM RIGHT ----------- */
/* The GoHighLevel form is laid out in two columns internally (City/State,
   Country/Postal Code) and needs real width or those fields overflow the
   frame and get clipped. Give the form column a generous share and let it
   grow with the viewport rather than pinning it narrow. */
.ucgc-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(430px,38vw,600px);
  gap:36px;align-items:start;
}
@media (min-width:1500px){
  .ucgc-split{grid-template-columns:minmax(0,1fr) 620px}
}
.ucgc-details h2{
  font-family:'Poppins',sans-serif;
  font-size:clamp(20px,1.7vw,25px);
  font-weight:600;color:var(--ucg-navy) !important;
  margin:34px 0 12px;letter-spacing:-.02em;line-height:1.25;
}
.ucgc-details h2:first-child{margin-top:0}
.ucgc-details h2::after{
  content:"";display:block;width:46px;height:3px;border-radius:2px;
  background:var(--ucg-orange);margin-top:12px;
}
.ucgc-details p{margin:0 0 1.05em;color:#41506B;font-size:16px;line-height:1.78}
.ucgc-details ul{list-style:none;margin:0 0 1.4em;padding:0}
.ucgc-details ul li{position:relative;padding-left:28px;margin-bottom:11px;color:#41506B;line-height:1.7}
.ucgc-details ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--ucg-orange);
}
.ucgc-details ul li:last-child{margin-bottom:0}
.ucgc-details strong{color:var(--ucg-navy);font-weight:600}

.ucgc-formcol{position:sticky;top:104px}
.ucgc-apply{
  background:var(--ucg-navy);
  border-radius:20px;
  padding:24px 16px 18px;
  border-left:4px solid var(--ucg-orange);
  box-shadow:0 26px 60px -34px rgba(7,28,72,.65);
}
.ucgc-apply .k{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ucg-orange);margin-bottom:8px;
}
.ucgc-apply h3{
  font-family:'Poppins',sans-serif;font-size:22px;font-weight:600;
  color:#fff !important;margin:0 0 6px;letter-spacing:-.02em;
}
.ucgc-apply .sub{color:rgba(255,255,255,.72);font-size:14px;line-height:1.6;margin:0 0 16px}
/* GoHighLevel's form_embed.js switches an INLINE embed to
   position:absolute once it renders. That leaves this wrapper with no
   in-flow content, so it collapsed to zero height and overflow:hidden
   clipped the entire form - the application was invisible. Give the
   wrapper a definite height and let the absolutely positioned iframe
   fill it. Raise min-height if a form ever gets longer than this. */
.ucgc-apply .ucgc-frame{
  position:relative;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  min-height:1080px;
}
.ucgc-apply iframe{
  position:absolute;top:0;left:0;
  display:block;width:100%;height:100%;
  border:0;background:#fff;
}

/* ---- 3. META STRIP ---------------------------------------- */
.ucgc-meta{
  display:flex;flex-wrap:wrap;gap:26px 40px;
  padding:20px 0 24px;margin-bottom:28px;
  border-bottom:1px solid rgba(7,28,72,.10);
}
.ucgc-meta .l{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#7A889F;margin-bottom:4px;
}
.ucgc-meta .v{font-weight:600;color:var(--ucg-navy);font-size:16px}

/* ---- 4. FAQ ----------------------------------------------- */
.ucgc-faq{display:flex;flex-direction:column;gap:12px;max-width:920px;margin-inline:auto}
.ucgc-faq details{background:#fff;border:1px solid rgba(7,28,72,.10);border-radius:16px;overflow:hidden}
.ucgc-faq summary{
  list-style:none;cursor:pointer;padding:18px 22px;
  font-family:'Poppins',sans-serif;font-weight:600;
  color:var(--ucg-navy);font-size:clamp(15px,1.08vw,17px);line-height:1.4;
  background:var(--ucg-cream);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:background .2s ease,color .2s ease;
}
.ucgc-faq summary::-webkit-details-marker{display:none}
.ucgc-faq summary::after{
  content:"+";font-size:22px;font-weight:400;color:var(--ucg-orange);
  flex:0 0 auto;transition:transform .2s ease;
}
.ucgc-faq summary:hover{background:var(--ucg-orange);color:#fff}
.ucgc-faq summary:hover::after{color:#fff}
.ucgc-faq details[open] summary{background:var(--ucg-navy);color:#fff}
.ucgc-faq details[open] summary::after{content:"\2013";color:#fff}
.ucgc-faq .a{padding:20px 22px 24px;color:#41506B;line-height:1.78;font-size:15.5px}
.ucgc-faq .a p{margin:0 0 .9em}
.ucgc-faq .a p:last-child{margin-bottom:0}
.ucgc-faq .a ul{list-style:none;margin:.4em 0 0;padding:0}
.ucgc-faq .a li{position:relative;padding-left:24px;margin-bottom:8px}
.ucgc-faq .a li::before{
  content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--ucg-orange);
}
.ucgc-faq .a ol{padding-left:20px;margin:.4em 0 0;list-style:decimal}
.ucgc-faq .a ol li{padding-left:4px}
.ucgc-faq .a ol li::before{content:none}
.ucgc-faq .a a{color:var(--ucg-orange);font-weight:500}

/* ---- 5. MOBILE -------------------------------------------- */
.ucgc-jump{display:none}
@media (max-width:1024px){
  .ucgc-split{grid-template-columns:1fr;gap:30px}
  .ucgc-formcol{position:static}
  .ucgc-apply .ucgc-frame{min-height:1180px}
  .ucgc-jump{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--ucg-orange);color:#fff;font-weight:600;
    padding:14px 26px;border-radius:999px;text-decoration:none;
    box-shadow:0 14px 30px -16px rgba(249,113,4,.8);
    margin-bottom:24px;
  }
}
@media (max-width:767px){
  .ucgc-role{padding:22px 20px}
  .ucgc-meta{gap:18px 28px}
  .ucgc-apply{padding:20px 16px 18px;border-radius:16px}
  .ucgc-apply .ucgc-frame{min-height:1240px}
  .ucgc-faq summary{padding:15px 17px;font-size:15px}
  .ucgc-faq .a{padding:16px 17px 20px;font-size:15px}
  .ucgc-details h2{font-size:20px;margin-top:26px}
}


/* ---- 6. WIDER READING + FORM COLUMN ON THESE PAGES --------
   The default page wrapper caps at 1280px. On a position page that has
   to hold a full job description AND a two-column application form side
   by side, that is not enough - the form ends up under 400px and its
   internal fields overflow. Widen the wrapper on career pages only. */
.ucg-career .ucgp-position .ucgp-wrap,
.ucg-career .ucgp-careers .ucgp-wrap{max-width:1480px}

@media (max-width:1024px){
  .ucg-career .ucgp-position .ucgp-wrap,
  .ucg-career .ucgp-careers .ucgp-wrap{max-width:100%}
}