/* =============================================================================
 * HR Public Application — visual refresh (Option A, v1.2.0)
 *
 * Scoped entirely to `.hr-public-application` so the logged-in [hr_forms]
 * portal tab (which shares the same field renderer) is not affected.
 *
 * Palette:
 *   Fairvilla teal   #1c86c6   — hero, focus rings, active states
 *   Fairvilla gold   #e6a817   — hero accent, progress pill
 *   Fairvilla red    #ff5757   — submit CTA (matches login page)
 *   Slate neutrals   #0f172a / #334155 / #64748b / #e2e8f0 / #f8fafc
 * ========================================================================== */

.hr-public-application {
    /* Accent teal kept for focus rings / nav active state (readable on white). */
    --fv-teal:       #1c86c6;
    --fv-teal-dark:  #1468a0;
    /* Felicio-pink palette for the hero + primary accents. */
    --fv-pink:       #ec4899;
    --fv-pink-deep:  #db2777;
    --fv-pink-soft:  #f472b6;
    --fv-gold:       #e6a817;
    --fv-red:        #ff5757;
    --fv-red-hover:  #e04e4e;
    --fv-ink:        #0f172a;
    --fv-ink-soft:   #334155;
    --fv-muted:      #64748b;
    --fv-line:       #e2e8f0;
    --fv-bg-soft:    #f8fafc;

    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 80px;
    color: var(--fv-ink);
}

/* -------------------------------------------------------------- Hero band */

.hr-public-application .hr-pa-hero {
    position: relative;
    margin: 24px 0 28px;
    padding: 44px 32px 40px;
    color: #fff;
    background:
        radial-gradient(1200px 400px at 85% -20%, rgba(230,168,23,0.50), transparent 60%),
        linear-gradient(135deg, var(--fv-pink-soft) 0%, var(--fv-pink) 45%, var(--fv-pink-deep) 100%);
    border-radius: 18px;
    box-shadow: 0 18px 40px -18px rgba(219,39,119,0.55);
    overflow: hidden;
}
.hr-public-application .hr-pa-hero::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
    pointer-events: none;
}
.hr-public-application .hr-pa-hero-inner {
    position: relative;
    max-width: 820px;
}
.hr-public-application .hr-pa-hero-kicker {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fv-gold);
}
.hr-public-application .hr-pa-hero-title {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
}
.hr-public-application .hr-pa-hero-meta {
    margin: 0 0 10px;
}
.hr-public-application .hr-pa-hero-chip {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(2px);
}
.hr-public-application .hr-pa-hero-desc {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
}
.hr-public-application .hr-pa-hero-desc p { margin: 0 0 8px; }

/* --------------------------------------------------------------- Layout  */

.hr-public-application .hr-pa-layout {
    display: block;
}
@media (min-width: 1024px) {
    .hr-public-application .hr-pa-layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 36px;
        align-items: start;
    }
    .hr-public-application .hr-pa-nav[hidden] {
        display: block !important; /* JS unhides by removing [hidden]; keep a safe fallback */
    }
}

/* ---------------------------------------------------------- Sticky nav  */

.hr-public-application .hr-pa-nav {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 20px 18px;
    background: #fff;
    border: 1px solid var(--fv-line);
    border-radius: 14px;
    box-shadow: 0 2px 10px -4px rgba(15,23,42,0.08);
}
.hr-public-application .hr-pa-nav-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fv-muted);
    margin: 0 0 12px;
}
.hr-public-application .hr-pa-nav-list {
    list-style: none;
    counter-reset: hr-pa-nav;
    margin: 0;
    padding: 0;
}
.hr-public-application .hr-pa-nav-list li {
    counter-increment: hr-pa-nav;
    margin: 0;
}
.hr-public-application .hr-pa-nav-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fv-ink-soft);
    text-decoration: none;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hr-public-application .hr-pa-nav-list a::before {
    content: counter(hr-pa-nav);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--fv-bg-soft);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--fv-muted);
    flex-shrink: 0;
}
.hr-public-application .hr-pa-nav-list a:hover {
    background: var(--fv-bg-soft);
    color: var(--fv-ink);
}
.hr-public-application .hr-pa-nav-list a.is-active {
    background: rgba(28,134,198,0.08);
    color: var(--fv-teal-dark);
    border-left-color: var(--fv-teal);
    font-weight: 600;
}
.hr-public-application .hr-pa-nav-list a.is-active::before {
    background: var(--fv-teal);
    color: #fff;
}

/* --------------------------------------------------------------- Cards  */

.hr-public-application .hr-pa-body .hr-card {
    background: #fff;
    border: 1px solid var(--fv-line);
    border-radius: 14px;
    box-shadow: 0 2px 14px -6px rgba(15,23,42,0.08);
    padding: 28px 28px;
    margin-bottom: 20px;
    transition: box-shadow 0.2s;
}
.hr-public-application .hr-pa-body .hr-card:hover {
    box-shadow: 0 4px 22px -8px rgba(15,23,42,0.12);
}
/* Inner "section" cards (the form has nested hr-card blocks) — flatter look */
.hr-public-application .hr-pa-body .hr-card .hr-card {
    background: var(--fv-bg-soft);
    border: 1px solid var(--fv-line);
    box-shadow: none;
    padding: 24px 22px;
    margin-bottom: 18px;
}
.hr-public-application .hr-pa-body .hr-card .hr-card:hover {
    box-shadow: none;
}

.hr-public-application .hr-card-title,
.hr-public-application .hr-pa-body h3,
.hr-public-application .hr-pa-body h4 {
    color: var(--fv-ink);
    letter-spacing: -0.01em;
}
.hr-public-application .hr-pa-body h4 {
    position: relative;
    padding-left: 14px;
}
.hr-public-application .hr-pa-body h4::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 4px;
    background: linear-gradient(180deg, var(--fv-pink), var(--fv-gold));
    border-radius: 2px;
}

/* --------------------------------------------------------------- Inputs */

.hr-public-application .hr-form-group {
    margin-bottom: 16px;
}
.hr-public-application .hr-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fv-ink-soft);
    letter-spacing: 0.005em;
}
.hr-public-application .hr-input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--fv-ink);
    background: #fff;
    border: 1.5px solid var(--fv-line);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    box-sizing: border-box;
}
.hr-public-application .hr-input:hover {
    border-color: #cbd5e1;
}
.hr-public-application .hr-input:focus {
    outline: none;
    border-color: var(--fv-teal);
    box-shadow: 0 0 0 4px rgba(28,134,198,0.15);
    background: #fff;
}
.hr-public-application .hr-input[readonly] {
    background: var(--fv-bg-soft);
    color: var(--fv-muted);
    cursor: default;
}
.hr-public-application textarea.hr-input {
    min-height: 84px;
    resize: vertical;
}

/* ---------------------------------------------------------- Pill radios */
/* Applies to inline radio groups: `<label>...<input type=radio>...Yes</label>`
 * — style the label when it wraps a radio. Uses :has() (modern browsers;
 * graceful fallback: labels just look like the old inline layout). */

.hr-public-application label:has(> input[type="radio"]),
.hr-public-application label:has(> input[type="checkbox"]) {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    margin: 0;
    background: #fff;
    border: 1.5px solid var(--fv-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fv-ink-soft);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.hr-public-application label:has(> input[type="checkbox"]) {
    border-radius: 10px;
}
.hr-public-application label:has(> input[type="radio"]):hover,
.hr-public-application label:has(> input[type="checkbox"]):hover {
    border-color: var(--fv-teal);
    color: var(--fv-ink);
}
.hr-public-application label:has(> input[type="radio"]:checked) {
    background: var(--fv-teal);
    border-color: var(--fv-teal);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(28,134,198,0.45);
}
.hr-public-application label:has(> input[type="checkbox"]:checked) {
    background: rgba(28,134,198,0.08);
    border-color: var(--fv-teal);
    color: var(--fv-teal-dark);
    font-weight: 600;
}
.hr-public-application label:has(> input[type="radio"]) input[type="radio"],
.hr-public-application label:has(> input[type="checkbox"]) input[type="checkbox"] {
    accent-color: var(--fv-teal);
}

/* ---------------------------------------------------------- Submit CTA */

.hr-public-application .hr-form-submit,
.hr-public-application button.hr-btn[type="submit"],
.hr-public-application .hr-submit-row .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    margin-top: 8px;
    background: var(--fv-red);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(255,87,87,0.6);
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}
.hr-public-application .hr-form-submit:hover,
.hr-public-application button.hr-btn[type="submit"]:hover {
    background: var(--fv-red-hover);
}
.hr-public-application .hr-form-submit:active {
    transform: translateY(1px);
}
.hr-public-application .hr-form-submit:disabled {
    background: #cbd5e1;
    color: #f1f5f9;
    cursor: not-allowed;
    box-shadow: none;
}
.hr-public-application .hr-form-submit::after {
    content: "\2192"; /* → */
    font-size: 18px;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.15s;
}
.hr-public-application .hr-form-submit:hover::after {
    transform: translateX(4px);
}

/* ---------------------------------------------------------- Progress pill */

.hr-public-application .hr-pa-progress {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--fv-ink);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px -8px rgba(15,23,42,0.4);
}
.hr-public-application .hr-pa-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fv-gold);
    box-shadow: 0 0 0 3px rgba(230,168,23,0.25);
    transition: background 0.2s;
}
.hr-public-application .hr-pa-progress.is-complete .hr-pa-progress-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}
@media (max-width: 640px) {
    .hr-public-application .hr-pa-progress {
        right: 12px;
        bottom: 12px;
        padding: 10px 14px;
        font-size: 12px;
    }
}

/* ------------------------------------------------------- Position header */
/* The original `.hr-apply-position-header` / resume card sit at the top of
 * `.hr-pa-body`. The hero replaces the old position header visually; tighten
 * the resume card so it reads as the first real step. */

.hr-public-application #hr-resume-upload-card {
    border: 2px dashed rgba(236,72,153,0.40);
    background: linear-gradient(180deg, #fff 0%, rgba(236,72,153,0.05) 100%);
}
.hr-public-application #hr-resume-upload-card .hr-card-title {
    color: var(--fv-pink-deep);
}

/* Hide the "Coming soon — Upload Resume & Auto-Fill" stub card that lives at
 * the top of the shared render_application_form_fields() renderer. The public
 * form has a real, working resume upload card above the <form>, so the stub is
 * redundant here. We leave the stub intact for the logged-in [hr_forms] tab,
 * since that path has no real resume-upload UI yet. */
.hr-public-application form.hr-form-container > .hr-card:first-child:has(button[disabled]) {
    display: none;
}

/* ----------------------------------------------------------- Acknowledgment */

.hr-public-application .hr-pa-body .hr-card[style*="fffbeb"] {
    background: linear-gradient(180deg, #fffbeb 0%, #fff8e1 100%) !important;
    border: 1px solid #fde68a !important;
}

/* =============================================================================
 * Chooser (/hr-apply/ with no ?position=) — reuses the hero + shares palette.
 * ========================================================================== */

/* Compact hero variant for the landing page — same colors, less vertical heft. */
.hr-public-application .hr-pa-hero.hr-pa-hero-compact {
    padding: 36px 32px 34px;
    margin: 20px 0 24px;
}
.hr-public-application .hr-pa-hero-meta .hr-pa-hero-chip + .hr-pa-hero-chip {
    margin-left: 8px;
}

/* Location grid — two columns on tablet+, one on mobile. */
.hr-public-application.hr-apply-chooser .hr-location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 820px) {
    .hr-public-application.hr-apply-chooser .hr-location-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Location card. */
.hr-public-application.hr-apply-chooser .hr-location-section {
    background: #fff;
    border: 1px solid var(--fv-line);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 2px 14px -6px rgba(15,23,42,0.08);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.hr-public-application.hr-apply-chooser .hr-location-section:hover {
    box-shadow: 0 8px 24px -10px rgba(15,23,42,0.14);
}
.hr-public-application.hr-apply-chooser .hr-location-section.is-empty {
    background: var(--fv-bg-soft);
    box-shadow: none;
}
.hr-public-application.hr-apply-chooser .hr-location-section.is-empty:hover {
    box-shadow: none;
}

/* Location header row. */
.hr-public-application.hr-apply-chooser .hr-location-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fv-line);
}
.hr-public-application.hr-apply-chooser .hr-location-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--fv-ink);
    letter-spacing: -0.01em;
}
.hr-public-application.hr-apply-chooser .hr-location-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--fv-pink) 0%, var(--fv-pink-deep) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hr-public-application.hr-apply-chooser .hr-location-badge-empty {
    background: none;
    color: var(--fv-muted);
    border: 1px solid var(--fv-line);
}

/* Empty-state text. */
.hr-public-application.hr-apply-chooser .hr-no-openings {
    color: var(--fv-muted);
    font-style: normal;
    font-size: 13px;
    margin: 0;
    padding: 4px 0 0;
}

/* Position list. */
.hr-public-application.hr-apply-chooser .hr-position-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hr-public-application.hr-apply-chooser .hr-position-list li {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}
.hr-public-application.hr-apply-chooser .hr-position-list li:last-child {
    margin-bottom: 0;
}

/* Position card (the clickable row). */
.hr-public-application.hr-apply-chooser .hr-position-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--fv-bg-soft);
    border: 1.5px solid transparent;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--fv-ink);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hr-public-application.hr-apply-chooser .hr-position-card:hover,
.hr-public-application.hr-apply-chooser .hr-position-card:focus-visible {
    background: #fff;
    border-color: var(--fv-pink);
    outline: none;
    transform: translateX(2px);
    box-shadow: 0 4px 12px -4px rgba(236,72,153,0.25);
}
.hr-public-application.hr-apply-chooser .hr-position-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hr-public-application.hr-apply-chooser .hr-position-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fv-ink);
    line-height: 1.3;
}
.hr-public-application.hr-apply-chooser .hr-position-card-desc {
    font-size: 13px;
    color: var(--fv-muted);
    line-height: 1.45;
}
.hr-public-application.hr-apply-chooser .hr-position-card-arrow {
    font-size: 20px;
    line-height: 1;
    color: var(--fv-pink);
    transition: transform 0.15s, color 0.15s;
    flex-shrink: 0;
}
.hr-public-application.hr-apply-chooser .hr-position-card:hover .hr-position-card-arrow {
    transform: translateX(4px);
    color: var(--fv-pink-deep);
}

/* Accessible hidden text for screen readers. */
.hr-public-application .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- Mobile */

@media (max-width: 720px) {
    .hr-public-application { padding: 0 12px 100px; }
    .hr-public-application .hr-pa-hero {
        padding: 28px 20px 26px;
        border-radius: 14px;
    }
    .hr-public-application .hr-pa-body .hr-card { padding: 20px 18px; }
    .hr-public-application .hr-pa-body .hr-card .hr-card { padding: 18px 14px; }
    /* Collapse grid columns the shared renderer uses inline (1fr 1fr 1fr etc) */
    .hr-public-application .hr-pa-body div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================================
   "About this role" panel — full JD shown above the application form.
   ========================================================================= */
.hr-public-application .hr-pa-jd {
    max-width: 880px;
    margin: 20px auto 0;
    padding: 0 16px;
}
.hr-public-application .hr-pa-jd-inner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hr-public-application .hr-pa-jd-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}
.hr-public-application .hr-pa-jd-summary {
    color: #334155;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 16px;
}
.hr-public-application .hr-pa-jd-summary p { margin: 0 0 10px; }
.hr-public-application .hr-pa-jd-summary p:last-child { margin-bottom: 0; }
.hr-public-application .hr-pa-jd-embed {
    margin: 16px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}
.hr-public-application .hr-pa-jd-embed iframe {
    width: 100%;
    height: 520px;
    border: 0;
    display: block;
}
.hr-public-application .hr-pa-jd-cta {
    margin: 12px 0 0;
}
.hr-public-application .hr-pa-jd-cta .hr-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}
.hr-public-application .hr-pa-apply-divider {
    margin-top: 16px;
}
@media (max-width: 720px) {
    .hr-public-application .hr-pa-jd-inner { padding: 18px 16px; }
    .hr-public-application .hr-pa-jd-embed iframe { height: 360px; }
    .hr-public-application .hr-pa-jd-title { font-size: 18px; }
}