/* ============================================
   Arventis Bridge Framework (ABF) — brand stylesheet.

   Base: the redesign's standalone token system (see the
   :root block below). Layered on top: a small set of
   Bootstrap CSS-variable overrides and component rules that
   are kept verbatim from the previous stylesheet, because
   Bootstrap (loaded via base.html's CDN link, which is final
   and unmodified) is still relied on by base.html's own
   markup (navbar, footer grid, crispy-rendered form widgets
   elsewhere in the project) and must keep matching the brand
   palette instead of falling back to Bootstrap's defaults.
   ============================================ */

:root {
    /* Brand colors */
    --slate-900: #3e4a57;
    --slate-100: #e4e9ee;
    --slate-50: #f6f8fa;
    --blue-700: #2f5f80;
    --blue-600: #3f79a1;
    --blue-500: #5894d1;
    --blue-500-rgb: 88, 148, 209;
    --blue-600-rgb: 63, 121, 161;
    --blue-100: #90bfe0;
    --blue-50: #e9f2f8;
    --white: #ffffff;
    --text-muted: #6b7684;

    /* Status colors (application badges) */
    --amber-600: #8a5a1e;
    --amber-100: rgba(250, 180, 94, 0.25);
    --green-600: #4a804d;
    --green-100: rgba(106, 183, 110, 0.2);
    --red-600: #c34e4b;
    --red-100: rgba(238, 95, 92, 0.14);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --section-py: 96px;

    /* Typography scale */
    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-micro: 0.78rem;
    --text-small: 0.875rem;
    --text-body-sm: 0.95rem;
    --text-body: 1rem;
    --text-lead: 1.05rem;
    --text-lead-hero: 1.15rem;
    --text-h4: 1.25rem;
    --text-h3: clamp(1.4rem, 2.4vw, 1.75rem);
    --text-h2: clamp(1.8rem, 3vw, 2.4rem);
    --text-cta-h2: clamp(1.9rem, 3.4vw, 2.6rem);
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-body: 1.6;

    /* Radii, borders, shadows */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --border-card: 1px solid rgba(62, 74, 87, 0.1);
    --shadow-sm: 0 1px 2px rgba(62, 74, 87, 0.06);
    --shadow-md: 0 8px 24px rgba(62, 74, 87, 0.08);
    --shadow-lg: 0 20px 48px rgba(62, 74, 87, 0.14);

    --max-width: 1200px;

    /* Bootstrap theme overrides — kept so Bootstrap's own
       components/utilities (still loaded via base.html's CDN
       link, and still used by crispy-rendered form widgets
       elsewhere in the project) stay on-brand instead of
       falling back to Bootstrap's stock colors/radii. */
    --bs-body-font-family: var(--font-family);
    --bs-body-color: var(--slate-900);
    --bs-secondary-color: var(--text-muted);
    --bs-primary: var(--blue-600);
    --bs-primary-rgb: var(--blue-600-rgb);
    --bs-link-color: var(--blue-600);
    --bs-link-color-rgb: var(--blue-600-rgb);
    --bs-link-hover-color: var(--blue-500);
    --bs-link-hover-color-rgb: var(--blue-500-rgb);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--slate-900);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    color: var(--slate-900);
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--space-3); }

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-500); }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

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

/* .container keeps Bootstrap's own responsive max-width stepping
   (used as-is by base.html's header/footer) but overrides Bootstrap's
   cramped 12px gutter with the brand spacing scale, since content
   was sitting too close to the viewport edges. */
.container {
    max-width: var(--max-width);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

@media (max-width: 720px) {
    .container { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* Between 992-1199px .container isn't capped by --max-width yet, so it
   spans nearly the full viewport; bump the gutter here so content doesn't
   crowd the edges the way it did with the flat --space-6 padding. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container { padding-left: var(--space-7); padding-right: var(--space-7); }
}

.section { padding: var(--section-py) 0; }
.section--tint { background: var(--blue-50); }
.section--dark { background: var(--slate-900); color: var(--white); }

@media (max-width: 720px) {
    .section { padding: 64px 0; }
}

.section-head { max-width: 640px; margin: 0 auto var(--space-7); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.section-head.on-dark .section-title,
.section--dark .section-title { color: var(--white); }
.section-head.on-dark .section-lede,
.section--dark .section-lede { color: rgba(255, 255, 255, 0.7); }

.section-title { font-size: var(--text-h2); font-weight: var(--weight-bold); margin: 0; }
.section-lede { font-size: var(--text-lead); color: var(--text-muted); margin: 0; }

/* ---------- Header / nav ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(62, 74, 87, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 76px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--slate-900) !important;
}

/* .logo-mark size is the OLD value (51px) — base.html's header
   image is sized for it; the redesign's 40px would visibly shrink
   the header logo. */
.logo-mark { width: 51px; height: 51px; border-radius: 9px; display: inline-block; }

.site-nav { display: flex; align-items: center; gap: 1.5rem; min-width: 0; flex-wrap: nowrap; }
.site-nav a { font-size: 0.95rem; font-weight: 500; color: var(--slate-900); white-space: nowrap; }
.site-nav a:hover, .site-nav a.active { color: var(--blue-600); }
.site-nav a.active { font-weight: 700; }

@media (max-width: 1199px) { .header-inner nav { gap: 1.25rem; } }
@media (max-width: 991px) { .header-inner nav { display: none; } }

.header-actions { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

/* ---------- Header / nav — base.html's actual (Bootstrap navbar)
   markup, kept from the old stylesheet: the redesign's .site-nav
   above has no equivalent in base.html's real markup. ---------- */

.site-header .nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--slate-900);
    transition: color 0.15s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: var(--blue-600);
}

.site-header .nav-link.active {
    color: var(--blue-600);
    font-weight: 700;
}

.navbar-toggler {
    border: none;
    padding: 8px;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        border-top: 1px solid rgba(62, 74, 87, 0.08);
        margin-top: 16px;
        padding-top: 20px;
    }
}

/* ---------- Buttons ---------- */

/* .btn / .btn-sm are the OLD Bootstrap-CSS-variable-driven versions
   (spacing/radius/typography only — no `border` shorthand). The
   redesign's versions set a literal `border: 1px solid transparent`
   on the generic .btn rule, which — because this stylesheet loads
   after Bootstrap's CDN CSS — would silently override Bootstrap's
   own border-color for .btn-outline-dark/.btn-outline-primary
   (still used by base.html's Login/Logout buttons), making their
   outline invisible. */
.btn {
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-size: 0.95rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-sm {
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: 0.875rem;
}

.btn-primary {
    background: var(--blue-600);
    border-color: var(--blue-600);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--slate-900); border-color: var(--slate-900); color: var(--white); box-shadow: var(--shadow-md); }

.btn-outline {
    background: transparent;
    border-color: rgba(62, 74, 87, 0.25);
    color: var(--slate-900);
    box-shadow: var(--shadow-sm);
}
.btn-outline:hover { border-color: var(--blue-600); color: var(--blue-600); box-shadow: var(--shadow-md); }

.btn-light {
    background: var(--white);
    border-color: var(--white);
    color: var(--blue-600);
}
.btn-light:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--blue-600); }

/* ---------- Buttons — base.html's actual (Bootstrap) button
   variants, kept from the old stylesheet. Also still used by
   any not-yet-redesigned page. ---------- */

.btn-outline-dark {
    --bs-btn-color: var(--slate-900);
    --bs-btn-border-color: rgba(62, 74, 87, 0.25);
    --bs-btn-hover-color: var(--blue-600);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--blue-600);
    --bs-btn-active-color: var(--blue-600);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--blue-600);
    box-shadow: var(--shadow-sm);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    --bs-btn-color: var(--blue-600);
    --bs-btn-border-color: var(--blue-600);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--blue-600);
    --bs-btn-hover-border-color: var(--blue-600);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--blue-600);
    --bs-btn-active-border-color: var(--blue-600);
    --bs-btn-focus-shadow-rgb: var(--blue-600-rgb);
}

/* ---------- Eyebrow / pill / tag / badge ---------- */

.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue-600);
    background: rgba(var(--blue-600-rgb), 0.1);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}
.eyebrow.on-dark { background: rgba(255, 255, 255, 0.12); color: var(--blue-100); }

.pill {
    display: inline-block;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--blue-600);
    background: rgba(var(--blue-600-rgb), 0.1);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.tag {
    display: inline-block;
    font-size: var(--text-micro);
    color: var(--slate-900);
    background: var(--blue-50);
    padding: 5px 12px;
    border-radius: 6px;
}

.badge {
    display: inline-block;
    font-size: var(--text-micro);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(var(--blue-600-rgb), 0.12);
    color: var(--blue-600);
}
.badge.status-in_review, .badge.status-in-review { background: var(--amber-100); color: var(--amber-600); }
.badge.status-accepted { background: var(--green-100); color: var(--green-600); }
.badge.status-rejected { background: var(--red-100); color: var(--red-600); }

/* ---------- Card ---------- */

/* display: block resets Bootstrap's own .card component (loaded via
   base.html's CDN link), which sets display: flex; flex-direction:
   column with no align-items override — its default align-items:
   stretch was forcing any inline/shrink-wrap direct child (a
   <span class="tag">, an <a class="btn">) to stretch to the card's
   full width instead of sizing to its content. */
.card {
    display: block;
    background: var(--white);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
}

.card--hover { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }

/* ---------- Footer ---------- */

.site-footer { background: var(--slate-900); color: rgba(255, 255, 255, 0.7); padding: 72px 0 28px; }

/* .footer-grid keeps the OLD rule (padding/border only, no
   `display: grid`) — base.html's actual footer div carries both
   Bootstrap's .row AND .footer-grid at once, so the redesign's
   `display: grid` would fight Bootstrap's `.row` flex layout and
   break the .col-12/.col-lg-* children inside it. */
.footer-grid {
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .logo { color: var(--white) !important; }
.footer-brand p { max-width: 320px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); margin: var(--space-3) 0 0; }

.footer-col h4 { color: var(--white); font-size: 0.95rem; font-weight: 700; margin: 0 0 var(--space-3); }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a, .footer-col span { font-size: 0.92rem; color: rgba(255, 255, 255, 0.65); }
.footer-col a:hover { color: var(--blue-100); }

/* .footer-link is base.html's actual footer-link class (its
   markup uses class="footer-link", not the redesign's bare
   .footer-col a selector) — kept from the old stylesheet. */
.footer-link {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.15s ease;
}

.footer-link:hover {
    color: var(--blue-100);
}

.footer-bottom {
    padding-top: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}
/* .footer-bottom p keeps the OLD font-size/color (the redesign's
   version drops them entirely, leaving only `margin: 0`, which
   would make the copyright line render at the default paragraph
   size instead of the small muted caption base.html expects). */
.footer-bottom p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }

/* .social-links is base.html's actual footer icon-link markup —
   kept from the old stylesheet (no equivalent in the redesign's
   CSS at all). */
.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.social-links a:hover {
    background: var(--blue-500);
}

.social-links a:active {
    background: var(--blue-700);
}

.social-links svg {
    width: 16px;
    height: 16px;
}

/* ---------- Home: hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 70%);
    padding: 88px 0 100px;
}

.abf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.abf-about { gap: 4.5rem; }

@media (max-width: 860px) {
    .abf-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .abf-about { gap: var(--space-5); }
    .abf-hero-art { order: -1; }
}

.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.hero-copy p { font-size: var(--text-lead-hero); color: var(--text-muted); max-width: 520px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

.abf-hero-art { position: relative; }
.abf-hero-art::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: -1;
    background: radial-gradient(circle at 70% 30%, rgba(144, 191, 224, 0.35), transparent 60%);
}
.abf-hero-art img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* ---------- Home: about ---------- */

.about-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.about-copy p { font-size: 1.02rem; margin: 0; }
.about-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }

/* ---------- Home: benefits / community grids ---------- */

.abf-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.abf-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

@media (max-width: 1000px) {
    .abf-grid-3, .abf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .abf-grid-3, .abf-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.icon-tile {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(var(--blue-600-rgb), 0.12);
    color: var(--blue-600);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.icon-tile svg { width: 24px; height: 24px; }

.benefit-card h3, .job-teaser-card h3 { font-size: 1.15rem; margin: 0 0 var(--space-2); }
.benefit-card p, .job-teaser-card p { color: var(--text-muted); margin: 0; }

.job-teaser-card { display: flex; flex-direction: column; height: 100%; }
.job-teaser-card p.summary { flex: 1; }
.job-teaser-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.job-teaser-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.abf-right-action { display: flex; justify-content: flex-end; }

.mt-3 { margin-top: var(--space-3); }

.community-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: var(--space-4); height: 100%; }
.community-card h4 { font-size: 1.05rem; color: var(--white); margin: 0 0 var(--space-2); }
.community-card p { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; margin: 0; }

/* ---------- Home: community section background art ---------- */

.community-section { position: relative; overflow: hidden; }
.community-section .bg-art { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 620px; max-width: 55%; opacity: 0.16; pointer-events: none; }
.community-section .container { position: relative; }

/* ---------- Home: CTA ---------- */

.cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue-600), var(--slate-900));
    color: var(--white);
    padding: var(--section-py) 0;
}
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Path is relative to this file (static/css/main-styles.css),
       so it must climb one level to static/images/ — the previous
       stylesheet's "images/..." path (missing the "../") pointed at
       a nonexistent static/css/images/ and was already broken. */
    background-image: url("../images/cta-gradient-geometric-bg.3d759621b94f.png");
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    mix-blend-mode: overlay;
}
.cta-inner { position: relative; max-width: 620px; margin: 0 auto; text-align: center; }
.cta h2 { color: var(--white); font-size: var(--text-cta-h2); margin-bottom: var(--space-3); }
.cta p { font-size: var(--text-lead); color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-5); }

/* ---------- Auth screens ---------- */

.auth-section { background: var(--blue-50); }
.abf-auth { max-width: 520px; margin: 0 auto; }
.abf-auth h1 { font-size: var(--text-h3); text-align: center; margin: 0 0 var(--space-3); }
.abf-auth .abf-lede { text-align: center; color: var(--text-muted); margin: 0 0 var(--space-5); line-height: var(--leading-body); }
.abf-auth .card { background: var(--white); }
.abf-auth .card p:last-child { margin-bottom: 0; }
.abf-center { display: flex; justify-content: center; }
.abf-links { margin-top: var(--space-5); text-align: center; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-body-sm); }
.abf-links p { margin: 0; }

/* ---------- Alerts ---------- */

.alert { border-radius: var(--radius-md); padding: 0.85rem 1.1rem; font-size: var(--text-body-sm); margin-bottom: var(--space-4); }
.alert-info { background: var(--blue-50); color: var(--slate-900); border: 1px solid rgba(63, 121, 161, 0.2); }
.alert-success { background: var(--green-100); color: var(--green-600); border: 1px solid rgba(106, 183, 110, 0.35); }
.alert-error { background: var(--red-100); color: var(--red-600); border: 1px solid rgba(238, 95, 92, 0.3); }
/* .alert-danger / .alert-warning have no equivalent in the redesign
   (Django's messages framework here maps its "error" level to the
   "danger" tag — see MESSAGE_TAGS in core/settings.py — so
   alert-danger is what error-level messages actually render as).
   Added to match the new palette instead of falling back to
   Bootstrap's stock alert colors. */
.alert-danger { background: var(--red-100); color: var(--red-600); border: 1px solid rgba(238, 95, 92, 0.3); }
.alert-warning { background: var(--amber-100); color: var(--amber-600); border: 1px solid rgba(250, 180, 94, 0.4); }

/* ---------- Form fields ---------- */

.field { margin-bottom: var(--space-4); }
/* Contact form honeypot: moved off-screen rather than display:none,
   which some bots detect and skip. */
.abf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field:last-child { margin-bottom: 0; }
.field label, .field legend { display: block; font-weight: var(--weight-semibold); font-size: 0.95rem; margin-bottom: var(--space-2); }
/* Not scoped to .field — the mockups also use this on card <h2>
   titles (e.g. "Current Employment Status *"), outside any .field
   wrapper. */
.required { color: var(--red-600); margin-left: 2px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="url"],
.field input[type="file"],
.field select,
.field textarea,
/* The desired rate row and the Other Languages table sit outside any
   .field wrapper, so they opt into the same look explicitly. */
.desired-rate-group input[type="number"],
.desired-rate-group select,
.abf-lang input[type="text"],
.abf-lang select {
    width: 100%;
    font: inherit;
    font-size: var(--text-body-sm);
    color: var(--slate-900);
    background: var(--white);
    border: 1px solid rgba(62, 74, 87, 0.2);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
}
.field input:focus, .field select:focus, .field textarea:focus,
.desired-rate-group input:focus, .desired-rate-group select:focus,
.abf-lang input:focus, .abf-lang select:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 0.25rem rgba(var(--blue-500-rgb), 0.25);
}
/* File inputs (CV, cover letter): the native "Choose File" button is
   restyled as a small outline pill to match .btn-outline / .btn-sm;
   the "No file chosen" text stays muted beside it. */
.field input[type="file"] {
    padding: 0.4rem;
    color: var(--text-muted);
    cursor: pointer;
}
.field input[type="file"]::file-selector-button {
    font: inherit;
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--slate-900);
    background: var(--slate-50);
    border: 1px solid rgba(62, 74, 87, 0.25);
    border-radius: var(--radius-pill);
    padding: 0.45rem 1.1rem;
    margin-right: var(--space-3);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.field input[type="file"]:hover::file-selector-button {
    background: var(--blue-50);
    border-color: var(--blue-600);
    color: var(--blue-600);
}
.field-help { font-size: var(--text-small); color: var(--text-muted); margin-top: var(--space-2); }
/* Django's password-validator help text (new_password1.help_text) is a
   real <ul>, not plain text — .field-help is used on a <div> there
   instead of a <p> so the list stays valid HTML. */
.field-help ul { margin: 0; padding-left: 1.1rem; }
.field-help li { margin-bottom: 2px; }

.checkbox-field, .radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.checkbox-field input, .radio-option input { margin-top: 4px; }
.checkbox-field label, .radio-option label { font-weight: 500; margin: 0; }

.radio-group { display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
.radio-group.inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
/* Grid (radio | text) so an explanation always sits directly under its
   label, instead of beside it at a gap that varies with label length. */
.radio-option { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); }
.radio-option .explanation { grid-column: 2; margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-small); }

/* Django's default error list, shown after a field with validation
   errors ({{ form.field.errors }} — manual field rendering doesn't
   get crispy's inline Bootstrap error styling). */
.errorlist {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    color: var(--red-600);
    font-size: var(--text-small);
}
.errorlist li { margin-bottom: 2px; }

/* Django's default widget output for CheckboxSelectMultiple —
   used for fields with too many/grouped choices to hand-build as
   .checkbox-field rows (e.g. salesforce_clouds, grouped by
   product family; see the "field-checkbox-list" widget attrs class
   in apps/candidates/forms.py). Django (6.1) renders this as
   nested <div>s, not <ul>/<li>: a bare <label> with no "for" attr
   is a group heading, a <label for="..."> wrapping an <input> is a
   real option — styled by that distinction (:has()) rather than by
   nesting depth, since grouped and flat fields nest one level
   differently. */
.field-checkbox-list > div:first-child > label:not(:has(input)) { margin-top: 0; }
.field-checkbox-list label:not(:has(input)) {
    display: block;
    font-weight: var(--weight-semibold);
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: var(--space-3) 0 var(--space-2);
}
.field-checkbox-list label:has(input) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: 500;
    margin: 0 0 var(--space-2);
}
.field-checkbox-list input[type="checkbox"] { margin-top: 4px; }

/* ---------- Long profile form (register + dashboard) ---------- */

.abf-stack { display: flex; flex-direction: column; gap: var(--space-4); max-width: 960px; margin: 0 auto; }
.abf-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.abf-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

@media (max-width: 800px) {
    .abf-two, .abf-cols-3 { grid-template-columns: minmax(0, 1fr); }
}

.form-card { padding: 2rem; }
.form-card h2 { font-size: 1.5rem; margin: 0 0 var(--space-4); }

/* Titled sections inside one form card (e.g. "Salesforce Skills": Clouds,
   Certifications, Technical Stack, Industries), split by a divider. The
   title outranks both a regular .field label and the small uppercase
   group headings inside .field-checkbox-list. */
.form-subsection + .form-subsection {
    border-top: 1px solid var(--slate-100);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
}
.field .form-subsection-title {
    font-size: 1.15rem;
    font-weight: var(--weight-bold);
    color: var(--slate-900);
    border-left: 3px solid var(--blue-500);
    padding-left: var(--space-2);
    line-height: 1.3;
    margin-bottom: var(--space-3);
}

.desired-rate-group { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.desired-rate-group input[type="number"] { width: 140px; }
.desired-rate-group select { width: auto; min-width: 160px; }
/* The en dash between "From" and "To". */
.desired-rate-group > span:not(.desired-rate-currency) { color: var(--text-muted); }
.desired-rate-currency {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    color: var(--blue-700);
    background: var(--blue-50);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.75rem;
}

.abf-lang { width: 100%; border-collapse: separate; border-spacing: 0; border: var(--border-card); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.abf-lang th {
    text-align: left;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: var(--slate-50);
    padding: 0.6rem 0.85rem;
    border-bottom: var(--border-card);
}
.abf-lang td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.abf-lang tr:last-child td { border-bottom: 0; }
.abf-lang select { margin-bottom: 0; }
/* "Specify language" stacks under the Language dropdown. */
.abf-lang select + input[type="text"] { margin-top: var(--space-2); }
.abf-lang input:disabled { cursor: not-allowed; }

.reference-row + .reference-row { padding-top: var(--space-4); border-top: var(--border-card); margin-top: var(--space-4); }

/* ---------- Dashboard applications ---------- */

.abf-appl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: var(--slate-50);
    border: var(--border-card);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
}
.abf-appl .app-title { font-weight: var(--weight-bold); }
.abf-appl .app-date { margin: 0; font-size: var(--text-micro); color: var(--text-muted); }
.abf-appl-actions { display: flex; align-items: center; gap: var(--space-2); }

.user-email-chip {
    display: inline-block;
    padding: 0.5rem 0.85rem;
    background: var(--white);
    border: var(--border-card);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
}

/* ---------- Job board & job detail ---------- */

.abf-jobs { display: flex; flex-direction: column; gap: var(--space-4); max-width: 900px; margin: 0 auto; }

.abf-facts { margin: 0; display: flex; flex-direction: column; gap: 1px; background: var(--slate-100); border: var(--border-card); border-radius: var(--radius-md); overflow: hidden; }
.abf-fact { background: var(--white); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-3); padding: 0.75rem 1rem; align-items: baseline; }
.abf-fact dt { margin: 0; font-size: var(--text-micro); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.abf-fact dd { margin: 0; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); line-height: var(--leading-body); display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 620px) {
    .abf-fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* .job-side is a narrow sidebar column (roughly 4/12 of .abf-detail's
   width) at every viewport where it renders as a sidebar at all
   (900px+) — well above the 620px viewport-width breakpoint above,
   so the 3fr/9fr split never collapses there and long dt labels
   (e.g. "Salesforce Ecosystem", "Region / State / Province") wrap
   across several lines. Stack dt above dd unconditionally in this
   narrow context instead of relying on viewport width. */
.job-side .abf-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.job-row-card h3 { font-size: var(--text-h3); margin: 0 0 var(--space-3); }
.job-row-card > p { color: var(--text-muted); margin: 0 0 var(--space-3); }

.back-link { font-size: 0.9rem; font-weight: 600; color: var(--blue-600); display: inline-block; margin-bottom: var(--space-5); }
.back-link:hover { color: var(--slate-900); }

.job-hero { background: linear-gradient(180deg, var(--blue-50) 0%, #fff 70%); padding: 48px 0 0; }
.job-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-6); }
.job-hero-inner h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.job-hero-inner .summary { font-size: var(--text-lead-hero); color: var(--text-muted); max-width: 640px; margin: 0; }
.job-hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.abf-detail { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); align-items: start; }
@media (max-width: 900px) {
    .abf-detail { grid-template-columns: minmax(0, 1fr); }
}

.job-detail-body { padding: 2.5rem; }
.job-detail-body h2 { margin: 0 0 var(--space-3); }
.job-detail-body h2:not(:first-child) { font-size: 1.25rem; }
.job-detail-body ul { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.15rem; list-style: disc; margin: 0 0 var(--space-5); }
.job-detail-body li { line-height: var(--leading-body); }
.job-detail-body hr { border: 0; border-top: var(--border-card); margin: var(--space-5) 0; }

.job-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 96px; }
.job-side .card h2 { font-size: 1.05rem; margin: 0 0 var(--space-4); }
/* Keeps the Apply card clear of the sticky header after the #apply redirect */
.job-apply-card { scroll-margin-top: 100px; }

/* ---------- About: hero & chapter menu ---------- */

.about-hero {
    background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
    padding: 88px 0 64px;
}
.about-hero h1 { font-weight: 800; margin: 0; }

.about-body { padding: 0 0 var(--section-py); }

/* Chapter menu — highlighted by Bootstrap ScrollSpy (see pages/about.html). */
.about-toc {
    position: sticky;
    top: 108px;
    border-left: var(--border-card);
}
.about-toc .nav-link {
    display: grid;
    grid-template-columns: 2rem 1fr;
    padding: 0.55rem 0 0.55rem 1rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: var(--weight-semibold);
    transition: color 0.15s ease;
}
.about-toc .nav-link span { color: var(--blue-600); font-variant-numeric: tabular-nums; }
.about-toc .nav-link:hover { color: var(--blue-600); }
.about-toc .nav-link.active {
    color: var(--slate-900);
    border-left-color: var(--blue-600);
    background: none;
}

.about-article { max-width: 720px; }

.about-figure { margin: 0; }
.about-figure img { width: 100%; height: auto; border-radius: var(--radius-xl); }

/* ---------- About: chapters ---------- */

.chapter {
    padding: 0 0 5rem;
    margin: 0 0 5rem;
    border-bottom: var(--border-card);
    scroll-margin-top: 100px;
}
.chapter:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.chapter-num {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-600);
}
.chapter h2 { font-weight: 800; }
.chapter-standfirst {
    font-size: 1.3rem;
    line-height: 1.45;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
    text-wrap: pretty;
}
.chapter-body p { font-size: var(--text-lead); line-height: 1.7; text-wrap: pretty; }
.chapter-body strong { font-weight: var(--weight-bold); }

/* ---------- About: Key figures ---------- */

.key-figures { border-top: var(--border-card); border-bottom: var(--border-card); }
.key-figures .col { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.key-figures .col + .col { border-left: var(--border-card); }
.key-figure-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--slate-900);
}
.key-figure-label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* The single warm accent from the design (#a8552c), used only here. */
.chapter-body .pull-quote {
    padding-left: 1.25rem;
    border-left: 3px solid #a8552c;
    font-size: 1.45rem;
    line-height: 1.35;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    color: var(--slate-900);
}

/* ---------- About: Image placeholders (until final artwork exists) ---------- */

.image-placeholder {
    border: 1.5px dashed var(--blue-100);
    border-radius: var(--radius-xl);
    background: var(--blue-50);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1.5rem;
    margin: 0;
}
.image-placeholder .placeholder-label {
    font-size: 0.72rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-600);
}
.image-placeholder p { margin: 0; font-size: 0.88rem; line-height: 1.55; max-width: 60ch; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.founder-card .image-placeholder { min-height: 260px; }
.chapter-body .founder-card p { font-size: var(--text-body); line-height: 1.65; }

/* ---------- About: Purpose / Vision / Mission / Goal ---------- */

.about-dl { border-top: var(--border-card); }
.about-dl > div { padding: 1.25rem 0; border-bottom: var(--border-card); }
.about-dl dt {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-600);
    padding-top: 0.2rem;
}
.about-dl dd { font-size: var(--text-lead); line-height: 1.65; }

/* ---------- About: Values ---------- */

.values-list { counter-reset: v; }
.values-list li {
    counter-increment: v;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    padding: 1.35rem 0;
    border-top: var(--border-card);
    font-size: var(--text-lead);
    line-height: 1.65;
}
.values-list li::before {
    content: counter(v, decimal-leading-zero);
    font-size: 0.85rem;
    font-weight: var(--weight-bold);
    color: var(--blue-600);
    padding-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}

.founders-quote {
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    background: var(--slate-900);
    color: var(--white);
}
.chapter-body .founders-quote p {
    font-size: 1.6rem;
    line-height: 1.35;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    text-wrap: pretty;
}
.founders-quote cite {
    font-style: normal;
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
    color: rgba(255, 255, 255, 0.7);
}

/* ---------- For Candidates ---------- */

.chapter-body a { font-weight: var(--weight-semibold); }

.chapter-divider { display: flex; justify-content: center; align-items: center; gap: 12px; }
.chapter-divider span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-600);
}

.look-for {
    background: var(--blue-50);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
}
.look-for .chapter-num { margin-bottom: 0.75rem; }
.look-for p { margin: 0; }

.next-steps { border-top: var(--border-card); padding-top: 2rem; }

@media (max-width: 575.98px) {
    .look-for { padding: 1.5rem; }
    .key-figures .col:nth-child(3) { border-left: 0; }
    .key-figures .col:nth-child(n+3) { border-top: var(--border-card); }
    .founders-quote { padding: 1.75rem; }
    .chapter-body .founders-quote p { font-size: 1.3rem; }
}

/* ---------- Legal pages (Legal Notice, Privacy, Terms) ---------- */

.legal-meta { font-size: 0.92rem; color: var(--text-muted); }
.legal-doc .chapter { padding-bottom: 3rem; margin-bottom: 3rem; }
.legal-doc .about-toc { max-height: calc(100vh - 140px); overflow-y: auto; }
.legal-doc .chapter-body li { font-size: var(--text-lead); line-height: 1.7; margin-bottom: 0.4rem; }
.legal-doc .chapter-body li ul { margin-top: 0.4rem; }
.legal-subhead { font-size: 1.1rem; font-weight: var(--weight-bold); margin: 2rem 0 1rem; }
.chapter-body .legal-subhead:first-child { margin-top: 0; }
.legal-table { font-size: 0.95rem; margin-bottom: 1.5rem; }
.legal-table thead th {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-600);
}
.legal-table tbody th { font-weight: var(--weight-semibold); white-space: nowrap; }

/* Unfilled placeholders from the legal drafts — must be completed before going live. */
.legal-placeholder { background: #fff3cd; color: inherit; padding: 0 0.2em; border-radius: 3px; }

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }