/* ============================================================
   SapienAI Careers Site — Brand V2 override CSS  (COMPLETE FILE)
   >>> Full file. Replace the entire contents of careersSiteCss.css
       with this in VS Code, keep the real filename. <<<
   Loaded as a Static Resource, linked via Head Markup
   (/sfsites/c/resource/careersSiteCss?v=16).

   Consumes the global Brand V2 tokens defined in Head Markup
   (var(--brand-*)). Does NOT hard-code palette hex except as
   fallbacks after each var(), so the file still degrades sanely
   if a token is ever missing.
   ============================================================ */

/* ---- Font: Space Grotesk via token ---- */
:root,
.slds-scope {
  --lwc-fontFamily: var(--brand-font, 'Space Grotesk', system-ui, sans-serif);
}
body,
.slds-scope,
.slds-scope h1,
.slds-scope h2,
.slds-scope h3,
.slds-scope h4,
.slds-scope p,
.slds-scope a,
.slds-scope button {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif);
}

/* Headings: bold (700 max), tight tracking/line-height (spec §1) */
.slds-scope h1,
.slds-scope h2 {
  font-weight: var(--brand-weight-heading, 700) !important;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
/* Body weight — never lighter than 400 */
body,
.slds-scope p {
  font-weight: var(--brand-weight-body, 400);
}

/* ---- Page background ----
   Gradient REMOVED for Brand V2. Base canvas is white; section
   backgrounds (white / mint / dark-purple bookends) are set per
   section in Experience Builder. Default fallback = white. */
body,
.siteforceContentArea,
.forceCommunityThemeLayout,
.cb-theme-layout,
[data-aura-class~="siteforceStarterBody"] {
  background: var(--brand-white, #FFFFFF) !important;
  background-attachment: initial !important;
}

/* ---- Header: white sticky (spec §3) ---- */
header[data-f6-region],
.community_byo-scoped-header-and-footer,
.community_byo-scoped-header-and-footer__header-content {
  background: var(--brand-white, #FFFFFF) !important;
  background-color: var(--brand-white, #FFFFFF) !important;
}
header[data-f6-region] {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* ---- Footer: transparent wrapper so the section's own (dark) bg shows ----
   The Brand V2 footer is a DARK-PURPLE bookend panel; that colour is set
   on the footer section in Builder. Keep the SLDS wrappers transparent so
   they don't paint over it. */
footer[data-f6-region],
.community_byo-scoped-header-and-footer__footer-content {
  background: transparent !important;
  background-color: transparent !important;
}
footer[data-f6-region] .background-image,
footer[data-f6-region] .background-image-overlay {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* ---- Buttons: jade fill, ink text, 4px radius (spec §1) ---- */
.slds-scope {
  --slds-c-button-brand-color-background: var(--brand-cta-bg, #2CC8A3);
  --slds-c-button-brand-color-border: var(--brand-cta-bg, #2CC8A3);
  --slds-c-button-brand-text-color: var(--brand-cta-text, #310860);
  --slds-c-button-brand-color-background-hover: var(--brand-cta-bg-hover, #24A989);
  --slds-c-button-brand-color-border-hover: var(--brand-cta-bg-hover, #24A989);
  --slds-c-button-brand-color-background-active: var(--brand-cta-bg-hover, #24A989);
  --slds-c-button-brand-color-border-active: var(--brand-cta-bg-hover, #24A989);
  --slds-c-button-radius-border: var(--brand-radius-button, 4px);
}

/* ---- Focus ring: jade 2px, 3px offset (spec §1/§2, WCAG AA) ---- */
.slds-scope a:focus-visible,
.slds-scope button:focus-visible {
  outline: var(--brand-focus-ring, 2px solid #2CC8A3) !important;
  outline-offset: var(--brand-focus-offset, 3px) !important;
}

/* ============================================================
   Dark-purple bookend panels (hero + closing CTA)
   Apply Builder section background = ink (#310860). These rules make
   text/links inside such a section render white with jade accents.
   Add the class `brand-dark-panel` to the section (Builder > section >
   Custom CSS class) to scope it, OR rely on the color being set per
   component. The `.brand-accent` span stays jade on dark too.
   ============================================================ */
.brand-dark-panel,
.brand-dark-panel h1,
.brand-dark-panel h2,
.brand-dark-panel h3,
.brand-dark-panel h4,
.brand-dark-panel p,
.brand-dark-panel span,
.brand-dark-panel li {
  color: var(--brand-panel-dark-text, #FFFFFF) !important;
}
.brand-dark-panel a:not(.slds-button) {
  color: var(--brand-jade-light, #4FD4B4) !important;
}

/* ---- Heading accent device: ONE jade word per heading (spec §4) ----
   Wrap the chosen word in <span class="brand-accent"> in the heading copy.
   On light sections it's jade; on dark panels it stays jade (readable). */
.brand-accent {
  color: var(--brand-heading-accent, #2CC8A3) !important;
}

/* ============================================================
   Candidate login page — Brand V2 card
   ============================================================ */

.comm-login-form .comm-login-form__container.slds-card {
  max-width: 420px;
  margin: 3rem auto;
  background: var(--brand-card-bg, #FFFFFF) !important;
  border: var(--brand-card-border, 1px solid rgba(49,8,96,0.12)) !important;
  box-shadow: var(--brand-card-shadow, 0 8px 30px rgba(49,8,96,0.10)) !important;
  border-radius: var(--brand-radius-card, 12px) !important;
  padding: var(--brand-card-padding, 2rem) !important;
  box-sizing: border-box;
}

.comm-login-form .comm-login-form__container.slds-card::before {
  content: "Candidate login";
  display: block;
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--brand-weight-heading, 700);
  color: var(--brand-ink, #310860);
  margin-bottom: 1.25rem;
}

.comm-login-form fieldset,
.comm-login-form .slds-form-element.slds-form_compound,
.comm-login-form .slds-form-element__control {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.comm-login-form .slds-form-element__label {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--brand-ink, #310860) !important;
}

.comm-login-form .slds-input {
  width: 100% !important;
  height: auto !important;
  padding: 0.7rem 0.85rem !important;
  border: 1px solid rgba(49,8,96,0.20) !important;
  border-radius: 8px !important;
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.95rem !important;
  color: var(--brand-ink, #310860) !important;
  background: var(--brand-white, #FFFFFF) !important;
  box-sizing: border-box !important;
  margin-bottom: 1rem !important;
}
.comm-login-form .slds-input:focus {
  outline: none !important;
  border-color: var(--brand-jade, #2CC8A3) !important;
  box-shadow: 0 0 0 1px var(--brand-jade, #2CC8A3) !important;
}

.comm-login-form .slds-button,
.comm-login-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  background: var(--brand-cta-bg, #2CC8A3) !important;
  border: 1px solid var(--brand-cta-bg, #2CC8A3) !important;
  color: var(--brand-cta-text, #310860) !important;
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--brand-radius-button, 4px) !important;
  margin-top: 0.5rem !important;
  cursor: pointer;
}
.comm-login-form .slds-button:hover {
  background: var(--brand-cta-bg-hover, #24A989) !important;
  border-color: var(--brand-cta-bg-hover, #24A989) !important;
}

.comm-login-form a {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  color: var(--brand-ink, #310860) !important;
  text-decoration: none !important;
  display: inline-block;
  margin-top: 0.75rem;
}
.comm-login-form a:hover { color: var(--brand-jade-hover, #24A989) !important; }

.comm-employee-login-link {
  display: none !important;
}

/* ============================================================
   Forgot Password page — Brand V2 card
   ============================================================ */

.comm-forgot-password .comm-forgot-password__container.slds-card {
  max-width: 420px;
  margin: 3rem auto;
  background: var(--brand-card-bg, #FFFFFF) !important;
  border: var(--brand-card-border, 1px solid rgba(49,8,96,0.12)) !important;
  box-shadow: var(--brand-card-shadow, 0 8px 30px rgba(49,8,96,0.10)) !important;
  border-radius: var(--brand-radius-card, 12px) !important;
  padding: var(--brand-card-padding, 2rem) !important;
  box-sizing: border-box;
}

.comm-forgot-password .comm-forgot-password__title {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 1.5rem !important;
  font-weight: var(--brand-weight-heading, 700) !important;
  color: var(--brand-ink, #310860) !important;
  text-align: left !important;
  max-width: 420px;
  margin: 0 auto 1rem !important;
}

.comm-forgot-password lightning-formatted-text {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.9rem !important;
  color: rgba(49,8,96,0.70) !important;
  line-height: 1.5 !important;
}

.comm-forgot-password fieldset,
.comm-forgot-password .slds-form-element__control {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.comm-forgot-password .slds-form-element__label {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--brand-ink, #310860) !important;
}

.comm-forgot-password .slds-input {
  width: 100% !important;
  height: auto !important;
  padding: 0.7rem 0.85rem !important;
  border: 1px solid rgba(49,8,96,0.20) !important;
  border-radius: 8px !important;
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.95rem !important;
  color: var(--brand-ink, #310860) !important;
  background: var(--brand-white, #FFFFFF) !important;
  box-sizing: border-box !important;
  margin-bottom: 1.25rem !important;
}
.comm-forgot-password .slds-input:focus {
  outline: none !important;
  border-color: var(--brand-jade, #2CC8A3) !important;
  box-shadow: 0 0 0 1px var(--brand-jade, #2CC8A3) !important;
}

.comm-forgot-password .slds-button {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--brand-radius-button, 4px) !important;
  cursor: pointer;
}
.comm-forgot-password .slds-button_brand,
.comm-forgot-password button[type="submit"] {
  background: var(--brand-cta-bg, #2CC8A3) !important;
  border: 1px solid var(--brand-cta-bg, #2CC8A3) !important;
  color: var(--brand-cta-text, #310860) !important;
}
.comm-forgot-password .slds-button_brand:hover { background: var(--brand-cta-bg-hover, #24A989) !important; border-color: var(--brand-cta-bg-hover, #24A989) !important; }
.comm-forgot-password .slds-button_neutral {
  background: transparent !important;
  border: 1px solid rgba(49,8,96,0.30) !important;
  color: var(--brand-ink, #310860) !important;
}
.comm-forgot-password .slds-button_neutral:hover { border-color: var(--brand-jade, #2CC8A3) !important; color: var(--brand-jade-hover, #24A989) !important; }

/* ============================================================
   Check Your Email page — Brand V2 card
   ============================================================ */

.comm-check-email .comm-check-email__container.slds-card {
  max-width: 420px;
  margin: 3rem auto;
  background: var(--brand-card-bg, #FFFFFF) !important;
  border: var(--brand-card-border, 1px solid rgba(49,8,96,0.12)) !important;
  box-shadow: var(--brand-card-shadow, 0 8px 30px rgba(49,8,96,0.10)) !important;
  border-radius: var(--brand-radius-card, 12px) !important;
  padding: var(--brand-card-padding, 2rem) !important;
  box-sizing: border-box;
}

.comm-check-email .comm-check-email__title {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 1.5rem !important;
  font-weight: var(--brand-weight-heading, 700) !important;
  color: var(--brand-ink, #310860) !important;
  text-align: left !important;
  max-width: 420px;
  margin: 0 auto 1rem !important;
  padding: 0 !important;
}

.comm-check-email lightning-formatted-text {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.9rem !important;
  color: rgba(49,8,96,0.70) !important;
  line-height: 1.5 !important;
}

.comm-check-email .slds-button {
  font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--brand-radius-button, 4px) !important;
  background: var(--brand-cta-bg, #2CC8A3) !important;
  border: 1px solid var(--brand-cta-bg, #2CC8A3) !important;
  color: var(--brand-cta-text, #310860) !important;
  cursor: pointer;
}
.comm-check-email .slds-button:hover {
  background: var(--brand-cta-bg-hover, #24A989) !important;
  border-color: var(--brand-cta-bg-hover, #24A989) !important;
}

/* ============================================================
   Redundant standalone logo on login-flow pages (scoped hide)
   Unchanged from v15 — do NOT hide globally (blanks the home hero).
   ============================================================ */
.column-content:has(.comm-forgot-password) dxp_data_provider-image-data-provider,
.column-content:has(.comm-check-email) dxp_data_provider-image-data-provider {
  display: none !important;
}
/* ============================================================
   Hero block (Brand V2) — add to careersSiteCss, bump ?v=
   Copy lives in the HTML Editor (class="sapien-hero").
   Token cluster painted as a background-image (static resource
   sapienHeroTokens) so it survives the HTML Editor sanitiser.
   ============================================================ */
.sapien-hero {
    position: relative;
    max-width: 1152px;
    margin: 0 auto;
    padding: 3rem 1.5rem 0 1.5rem;
    font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif);
    box-sizing: border-box;
    overflow: hidden;
}

/* Token cluster: top-right, decorative, behind the text */
.sapien-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 42%;
    height: 320px;
    background-image: url('/sfsites/c/resource/sapienHeroTokens');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.sapien-hero__text {
    position: relative;
    z-index: 1;
    max-width: 58%;
}

.sapien-hero__eyebrow {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand-ink, #310860);
    margin: 0 0 1rem 0;
}

.sapien-hero__title {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--brand-ink, #310860);
    line-height: 1.15;
    margin: 0 0 1.25rem 0;
}

.sapien-hero__accent {
    color: var(--brand-jade, #2CC8A3);
}

.sapien-hero__intro {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--brand-ink, #310860);
    line-height: 1.7;
    margin: 0 0 3rem 0;
    max-width: 600px;
}

/* Mobile: text full-width, decoration smaller & softer so it never crowds copy */
@media (max-width: 768px) {
    .sapien-hero__text { max-width: 100%; }
    .sapien-hero::after { max-width: 55%; height: 200px; opacity: 0.5; }
}
/* ============================================================
   Hero mobile responsiveness — append to careersSiteCss, bump ?v=
   Desktop (>=768px) is unchanged: the inline max-width:58% applies.
   Below 768px: text goes full-width; decoration shrinks and eases
   so it sits top-right without crowding the copy.
   !important is required to override the inline styles on the block.
   ============================================================ */
@media (max-width: 768px) {
    /* Text column: full width on mobile (overrides inline max-width:58%) */
    .sapien-hero .sapien-hero__text {
        max-width: 100% !important;
        padding-top: 160px !important;
    }

    /* Decoration: sit as a band at the very top, centred-right, with the
       text pushed below it (via the padding-top above) so tokens appear
       ABOVE the copy rather than overlapping it */
    .sapien-hero::after {
        width: 220px;
        max-width: 60%;
        height: 150px;
        top: 0;
        right: 0;
        opacity: 0.9;
    }

    .sapien-hero {
        padding-top: 1.5rem !important;
    }
}

/* Extra-small phones: tighten further so nothing feels cramped */
@media (max-width: 420px) {
    .sapien-hero .sapien-hero__text {
        padding-top: 140px !important;
    }
    .sapien-hero::after {
        width: 180px;
        height: 130px;
        opacity: 0.8;
    }
}