/* ---------------------------------------------------------------
 * Career Pathfinder shortcode — [cdir_career_pathfinder]
 * Everything is scoped under .cdir-cpf so this can be dropped into
 * any page/theme without leaking styles onto the rest of the site.
 * ------------------------------------------------------------- */
.cdir-cpf {
    width: 100%;
    padding: 60px 20px 60px 20px;
    box-shadow: 0px 0px 10px 0px #00000033;
    border-radius: 30px;
}
.cdir-cpf * { box-sizing: border-box; }

.cdir-cpf-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 0px;
}
.cdir-cpf-card h3 {
    letter-spacing: 0;
    font-weight: 600;
}
.cdir-cpf-shortage-pill {
    padding: 2px 20px !important;
}
.cdir-filter-widget {
    margin-block: 0;
    /* No fixed top/left offset here — a negative top-offset like this
       assumes the header above it is always exactly one specific
       height, which breaks (overlapping the header text) the moment
       the header wraps differently at a different screen width. Normal
       in-flow spacing is what actually stays correct at every width. */
    margin-top: 4px;
}
body[data-button-style*="slightly_rounded"] button {
    font-family: poppins;
    border-radius: 100px !important;
    padding: 4px 16px;
}
.cdir-filter-trigger {
    padding: 10px 30px !important;
    font-size: 14px;
}
.cdir-card-body h3, .cdir-info-box h3, .cdir-offer-card-head h3 {
    letter-spacing: 0;
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 15px;
}
.cdir-offer-card ul.cdir-offer-meta {
    margin-left: 20px;
    min-height: 350px;
}
.cdir-offer-card ul.cdir-offer-meta li {
    border-bottom: 2px dashed #cccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.cdir-offer-card button.cdir-btn.cdir-enquire-btn {
    padding-block: 14px;
    font-size: 16px;
}
.cdir-offer-card-head {
    align-items: end;
}
.cdir-finder-box button#cdir-offer-apply-btn {
    padding: 12px 40px;
}
.cdir-filter-select {
    text-transform: capitalize;
}
.cdir-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 700px) {
    /* The rule above forces 2 columns with !important at every width,
       which — being !important — otherwise wins over frontend.css's own
       responsive breakpoints and locks the grid at 2 columns even on a
       360px phone. This override matches it with equal !important
       weight, so mobile actually gets the single column it needs. */
    .cdir-grid { grid-template-columns: 1fr !important; }
}
.cdir-single-header h1 {
    margin-bottom: 25px;
}
/* .cdir-single-content {
    width: 70%;
} */
@media (max-width: 760px) {
    /* These percentage widths assume real space either side on a wide
       desktop layout; on a stacked mobile header/content column they
       just clip a heading or article early for no reason. */
    .cdir-single-header h1 { max-width: 100%; }
    .cdir-single-content { width: 100%; }
}
.cdir-modal select, .cdir-modal input {
    font-size: 14px;
}
.cdir-modal button#cdir-modal-cancel {
    padding: 12px 20px;
    font-size: 14px;
}
button#cdir-modal-submit {border-radius: 100px !important;opacity: 1;}

button#cdir-modal-cancel {
    color: black;
}
.cdir-consent-row label {
    align-items: center;
}
.cdir-cpf-card-main .cdir-cpf-card-info p {
    width: 80%;
}
@media (max-width: 720px) {
    .cdir-cpf-card-main .cdir-cpf-card-info p { width: 100%; }
}
.cdir-modal {
    max-width: 800px !important;
    top: 0;
    bottom: 0;
    margin-block: auto;
}
.cdir-cpf-header-left { display: flex; gap: 20px; }
.cdir-cpf-icon { flex-shrink: 0; width: 72px; height: 72px; }
.cdir-cpf-icon svg { width: 100%; height: 100%; display: block; }
.cdir-cpf-title { font-size: 2em; font-weight: 800; margin: 0 0 4px; line-height: 1.1; }
.cdir-cpf-subtitle { margin: 0; font-weight: 600; color: var(--cdir-cpf-accent, #16a34a); }

.cdir-cpf-checklist { list-style: none; margin: 4px 0 0; padding: 0; }
.cdir-cpf-checklist li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #26313a; }
.cdir-cpf-checklist li:last-child { margin-bottom: 0; }
.cdir-cpf-checklist .cdir-cpf-check {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--cdir-cpf-accent, #16a34a);
    color: #fff;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}

/* "Explore careers" button — links out to the full Career archive page. */
.cdir-cpf-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    background: #fff;
    border: 1.5px solid var(--cdir-cpf-primary, #4f46e5);
    color: var(--cdir-cpf-primary, #4f46e5);
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    /* No fixed top-offset — see .cdir-filter-widget above for why: a
       negative top only stays correct while the header is one exact
       height, which isn't true across 360px–1900px. */
}
.cdir-cpf-explore-btn:hover { background: var(--cdir-cpf-primary, #4f46e5); color: #fff; }
.cdir-cpf-explore-btn {
    position: relative;
    top: -100px;
}
.cdir-cpf-checklist-wrap { max-width: 550px; }
.cdir-cpf-intro-label { font-weight: 700; margin: 0 0 10px; color: #26313a; }

/* State-finder section — country pill (Australia, currently the only
   option) + state pills, each of which is a real link straight to the
   Career archive pre-filtered to that state. */
.cdir-cpf-state-section {
    background: #f7f8fa;
    border-radius: 14px;
    padding: 26px 28px;
    margin-top: 8px;
}
.cdir-cpf-state-label { margin: 0 0 16px; color: #4b5563; }
.cdir-cpf-country-pills { margin-bottom: 14px; }
.cdir-cpf-country-pills .cdir-cpf-pill.is-active {
    background: var(--cdir-cpf-primary, #4f46e5);
    border-color: var(--cdir-cpf-primary, #4f46e5);
    color: #fff;
    cursor: default;
}
a.cdir-cpf-pill { text-decoration: none; display: inline-block; }
a.cdir-cpf-pill:hover { background: var(--cdir-cpf-primary, #4f46e5); border-color: var(--cdir-cpf-primary, #4f46e5); color: #fff; }

.cdir-cpf-filter-wrap { position: relative; margin-bottom: 22px; }
.cdir-cpf-filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1.5px solid var(--cdir-cpf-primary, #4f46e5);
    color: var(--cdir-cpf-primary, #4f46e5);
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
}
body[data-button-style*="slightly_rounded"] .cdir-cpf-filter-wrap button {
    padding: 15px 30px;
    font-size: 14px;
    border-radius: 100px !important;
}
.cdir-cpf-filter-panel button.cdir-cpf-pill {
    padding: 8px  30px !important;
}
.cdir-cpf-filter-panel h4 {
    color: black;
    font-size: 16px;
    line-height: 26px;
}
.cdir-cpf-filter-btn .cdir-cpf-caret {
    font-size: 20px;
    transition: transform .15s ease;
}
.cdir-cpf-filter-btn.is-open .cdir-cpf-caret { transform: rotate(180deg); }
.cdir-cpf-filter-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cdir-cpf-primary, #4f46e5);
    display: inline-block;
}

.cdir-cpf-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 18px;
    min-width: 320px;
}
.cdir-cpf-filter-panel.is-open { display: block; }
.cdir-cpf-filter-group { margin-bottom: 16px; }
.cdir-cpf-filter-group:last-of-type { margin-bottom: 0; }
.cdir-cpf-filter-group h4 { margin: 0 0 8px; font-size: 0.85em; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.cdir-cpf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cdir-cpf-pill {
    border: 1px solid #d7dbe0;
    background: #fbfbfa;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.88em;
    cursor: pointer;
    color: #26313a;
}
.cdir-cpf-pill.is-active {
    background: var(--cdir-cpf-primary, #4f46e5);
    border-color: var(--cdir-cpf-primary, #4f46e5);
    color: #fff;
}
.cdir-cpf-filter-actions { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cdir-cpf-clear-btn { background: none; border: none; color: #6b7280; text-decoration: underline; cursor: pointer; font-size: 0.88em; }
.cdir-cpf-apply-btn {
    background: var(--cdir-cpf-primary, #4f46e5);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.cdir-cpf-apply-btn:hover { opacity: 0.92; }

.cdir-cpf-list { display: flex; flex-direction: column; gap: 20px; }

.cdir-cpf-card {
    border: 1px solid #e2e5e9;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
/* Card body: left 50% = title + description, right 50% = the stats
   stacked vertically. Falls back to a single stacked column on narrow
   screens (see the max-width:720px block further below). */
.cdir-cpf-card-main {
    padding: 26px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}
button.cdir-btn.cdir-btn-primary.cdir-view-courses-btn, button.cdir-btn.cdir-btn-primary.cdir-find-provider-btn {
    padding: 14px 30px;
}
.cdir-cpf-card-info { min-width: 0; }
.cdir-cpf-card h3 { margin: 0 0 10px; font-size: 1.3em; }
.cdir-cpf-card h3 a { color: #1a1a1a; text-decoration: none; }
.cdir-cpf-card h3 a:hover { text-decoration: underline; }
.cdir-cpf-desc { color: #4b5563; margin: 0 0 0px; line-height: 1.55; }
.cdir-cpf-view-btn { padding: 8px 18px; font-size: 0.92em; }

.cdir-cpf-stats {
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.cdir-cpf-stat .cdir-cpf-stat-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
    text-transform: capitalize;
}
.cdir-cpf-stat .cdir-cpf-stat-value {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 600;
}
.cdir-cpf-stat .cdir-cpf-stat-value.is-set { color: #1a1a1a; }

.cdir-cpf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95em;
}
.cdir-cpf-badge-low { background: #eafaf0; color: #1f8a4c; }
.cdir-cpf-badge-medium { background: #fff6e0; color: #a1670a; }
.cdir-cpf-badge-high { background: #fdecea; color: #a4373a; }
.cdir-cpf-badge-unrated { background: #f1f2f4; color: #6b7280; }

.cdir-cpf-info {
    position: relative;
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1.4px solid currentColor;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}
.cdir-cpf-info[data-tooltip]:hover::after,
.cdir-cpf-info[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    width: 200px;
    line-height: 1.4;
    z-index: 30;
    white-space: normal;
}

.cdir-cpf-card-footer {
    background: #f7f8fa;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid #eceef1;
}
.cdir-cpf-shortage-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.92em; color: #26313a; }
.cdir-cpf-shortage-label .cdir-cpf-arrow { color: #16a34a; }
.cdir-cpf-shortage-pill {
    border: 1px solid #d7dbe0;
    background: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.cdir-cpf-empty { text-align: center; color: #6b7280; padding: 40px 0; }

@media (max-width: 900px) {
    /* The header (icon + title + checklist) genuinely needs real width
       to sit side-by-side without wrapping mid-sentence. */
    .cdir-cpf-header { flex-direction: column; }

    /* Same story for the career-card stats row: "Average Yearly Income"
       starts wrapping mid-label once the 2-column card body gets this
       narrow, so drop to a stacked layout a bit earlier than the card's
       own single-column breakpoint below. */
    .cdir-cpf-card-main { grid-template-columns: 1fr; }
    .cdir-cpf-stats { flex-wrap: wrap; gap: 14px 20px; }
    .cdir-cpf-stat { flex: 1 1 40%; min-width: 130px; }
}

@media (max-width: 720px) {
    .cdir-cpf-card-main { padding: 20px; }
    .cdir-cpf-desc { margin-bottom: 16px; }
    .cdir-cpf-card-footer { padding: 12px 20px; }

    .cdir-cpf { padding: 40px 16px 16px; }
    .cdir-cpf-title { font-size: 1.5em; }
    .cdir-cpf-state-section { padding: 20px; }
}

@media (max-width: 480px) {
    .cdir-cpf { padding: 28px 14px 14px; border-radius: 16px; }
    .cdir-cpf-icon { width: 56px; height: 56px; }
    .cdir-cpf-title { font-size: 1.3em; }
    .cdir-cpf-checklist li { font-size: 0.92em; }
    .cdir-cpf-filter-panel { min-width: 0; width: 100%; left: 0; }
    .cdir-cpf-stat { flex: 1 1 100%; }
    .cdir-cpf-explore-btn { padding: 10px 16px; font-size: 0.95em; }
    .cdir-cpf-card-main { padding: 16px; }
    .cdir-cpf-card-footer { flex-wrap: wrap; padding: 12px 16px; }
}

@media (max-width: 360px) {
    .cdir-cpf-header-left { gap: 12px; }
    .cdir-cpf-icon { width: 46px; height: 46px; }
    .cdir-cpf-title { font-size: 1.15em; }
    .cdir-cpf-stat .cdir-cpf-stat-label { font-size: 13px; }
    .cdir-cpf-badge { padding: 3px 9px; font-size: 0.85em; }
}