/* =============================================================================
   Rojgaar Sangam - front-end theme

   Loaded FIRST by every public and job-seeker layout (_PublicLayout, which also wraps
   sign-in, plus _UserMasterLayout and _LmsLayout). It owns three things and nothing else:

     1. the design tokens - the one palette, type scale, spacing, radii and shadows;
     2. the base element styles;
     3. the components every area shares (buttons, cards, chips, alerts, fields, tables).

   Area stylesheets (site, jobs, candidate, candidate-auth, user-master, candidate-dashboard,
   gallery, lms) consume these tokens. They must not declare a palette of their own - a new
   colour belongs here, named for what it means, so every page picks it up together.
   ============================================================================= */

:root {
    /* ---- Brand ---- */
    --color-navy: #0b2857;
    --color-navy-deep: #08284e;
    --color-blue: #164e8a;
    --color-blue-dark: #0e3d73;
    --color-blue-bright: #1f5fae;
    --color-gold: #ecb82e;
    --color-gold-deep: #dca517;
    --color-gold-light: #f6c24a;
    --color-gold-soft: #fff5dc;
    --color-gold-line: #f0cf7a;
    /* The gold call to action (see .rs-btn--gold). Rules that cannot join that one - a CMS
       banner button that needs !important - paint from these instead. */
    --color-gold-bright: #f7c53c;
    --gradient-gold: linear-gradient(120deg, var(--color-gold-bright), var(--color-gold));
    /* Gold-family text on a light ground; plain gold fails contrast there. */
    --color-gold-text: #8a5a00;
    /* Display headings on the portal's designed pages (the resume builder): a deeper ink than navy. */
    --color-ink: #071b4d;

    /* ---- Neutrals ---- */
    --color-text: #33445c;
    --color-muted: #4c6280;
    --color-line: #d7e0eb;
    --color-line-strong: #c3cfdd;
    /* Hairline around cards that sit on a white panel. */
    --color-line-soft: #e6ebf2;
    --color-surface: #fff;
    --color-surface-alt: #f8fafc;
    --color-soft: #f1f5fa;
    --color-tint: #eaf2fb;
    /* The pale sky behind the page showcases (blocks.css), and the slightly deeper panel and
       icon-circle wash that sits on it. */
    --color-sky: #f4f9fe;
    --color-sky-deep: #e6f0fb;
    /* Warm paper for the sign-in pages' form side. */
    --color-cream: #fffdf8;
    --color-cream-deep: #f7efe0;

    /* ---- Status ---- */
    --color-success: #1c7c43;
    --color-success-soft: #e5f5ea;
    --color-danger: #b42318;
    --color-danger-soft: #fdecea;
    --color-warning: #8a5a00;
    --color-warning-soft: #fff4dc;
    --color-info-soft: #e8f1fb;

    /* ---- Rojgaar Mela types ----
       Pink melas are for women and Divyang melas for persons with disabilities (rojgaar-mela.css). */
    --color-mela-pink: #b0175a;
    --color-mela-pink-soft: #fdeaf2;
    --color-mela-divyang: #0f6f66;
    --color-mela-divyang-soft: #e1f4f1;

    /* ---- Portal sign-in accents ----
       One per user type, for the navy stage beside each portal sign-in and registration form
       (portal-auth.css). Light enough to read on navy; white panels mix them toward ink for text. */
    --color-portal-employer: #f6c24a;
    --color-portal-institution: #3cc4b4;
    --color-portal-department: #79b4ff;
    --color-portal-iti: #f79a4c;
    --color-portal-instructor: #a99bff;
    --color-portal-counsellor: #5fd39b;
    --color-portal-speaker: #ff8d7e;
    --color-portal-officer: #f6c24a;
    --color-portal-staff: #8fcbff;
    --color-portal-candidate: #5fb4ff;

    /* ---- Type ---- */
    --font-sans: "Poppins", sans-serif;
    /* Handwritten mottos only; never body copy. A print-style hand, and a joined brush script. */
    --font-hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
    --font-script: "Satisfy", "Segoe Script", "Brush Script MT", cursive;
    /* Display headings of the designed page showcases (/placement-cell) only; Latin, so Hindi falls back to Poppins. */
    --font-display: "Crimson Pro", Georgia, "Times New Roman", var(--font-sans);
    /* rem, never px, so the visitor's A- / A+ setting scales every page. */
    --fs-2xs: .6875rem;
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;

    /* ---- Space, shape, depth ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 31, 56, .05), 0 8px 24px -12px rgba(15, 31, 56, .18);
    --shadow-lg: 0 2px 4px rgba(15, 31, 56, .06), 0 18px 40px -18px rgba(15, 31, 56, .28);
    --shadow-gold: 0 8px 18px rgba(236, 184, 46, .25);
    --shadow-gold-hover: 0 16px 30px -12px rgba(245, 183, 59, .8);

    --max: 1180px;
    --max-wide: 1440px;
    /* The page's content column, shared by the top bar, the header, every home section and the
       footer, so they all start and end on the same two edges at every width: --page-max wide at
       most, with --page-gutter kept clear at each side (narrower on smaller screens, below). A
       full-bleed section keeps its background and pads its content in with --page-inline. */
    --page-max: 1460px;
    --page-gutter: 28px;
    --page-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
    --control-min-target: 44px;
    --focus: var(--color-gold);

    /* ---- Legacy names ----
       CMS banner documents and editor HTML stored in the database reference these, so they stay
       defined. New CSS uses the --color-* names above. */
    --ink: var(--color-navy);
    --muted: var(--color-muted);
    --paper: var(--color-surface);
    --mist: var(--color-surface-alt);
    --line: var(--color-line);
    --teal: var(--color-blue);
    --teal-dark: var(--color-blue-dark);
    --yellow: var(--color-gold);
    --footer: var(--color-navy-deep);

    --btn-primary-bg: var(--color-blue);
    --btn-primary-fg: var(--color-surface);
    --btn-primary-bg-hover: var(--color-blue-dark);
    --btn-secondary-bg: var(--color-surface);
    --btn-secondary-fg: var(--color-navy);
    --btn-secondary-border: var(--color-line);
    --btn-ghost-fg: var(--color-surface);
}

/* High contrast (the top-bar toggle). prefs.js puts the class on <html> - the same element as
   :root - so the legacy names above follow the overridden values without being restated. */
.high-contrast {
    --color-navy: #000;
    --color-text: #000;
    --color-muted: #111;
    --color-line: #000;
    --color-line-strong: #000;
    --color-surface: #fff;
    --color-surface-alt: #fff;
    --color-soft: #fff;
    --color-tint: #fff;
    --color-sky: #fff;
    --color-sky-deep: #fff;
}
.high-contrast a { text-decoration: underline; }
.reader-friendly main { letter-spacing: .025em; word-spacing: .1em; line-height: 1.85; }

@media (max-width: 1200px) { :root { --page-gutter: 18px; } }
@media (max-width: 560px) { :root { --page-gutter: 14px; } }

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
.rs-table-scroll { max-width: 100%; overflow-x: auto; }
html {
    font-size: var(--visitor-font-scale, 100%);
    scroll-behavior: smooth;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body { margin: 0; color: var(--ink); background: var(--paper); font-family: inherit; font-weight: 400; line-height: 1.6; }
a { color: inherit; }
img, video { max-width: 100%; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: var(--ink); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* The one visually-hidden utility. .cms-banner__sr is the name banner documents already use. */
.visually-hidden,
.cms-banner__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* 0s, not .01ms: a non-zero duration makes script-set transforms read stale when measured,
       which threw DevExtreme dropdown popups far below their fields. */
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: .01ms !important; }
}

/* =============================================================================
   Shared components

   Each component has a canonical rs-* name for new markup. The names the areas already use
   are grouped onto the same rule, so a button is one definition whether the page calls it
   .candidate-btn, .jb-btn or .um-btn. Area files only add what is genuinely theirs - a size
   or a position - never another colour or radius.
   ============================================================================= */

/* ---- Buttons ---- */
.rs-btn,
.button,
.jb-btn,
.candidate-btn,
.um-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--control-min-target);
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--color-blue);
    color: #fff;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
/* :where() keeps the hover at the specificity of a plain class, so a state an area defines
   (.jb-btn-done, .jb-btn-disabled) is not repainted blue under the pointer. */
:where(.rs-btn, .button, .jb-btn, .candidate-btn, .um-btn):hover { background-color: var(--color-blue-dark); color: #fff; }
.rs-btn:disabled, .rs-btn.is-disabled,
.jb-btn.is-disabled,
.candidate-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Gold: the one call to action on a surface. The header's Job Seeker Login is the reference, and
   every gold button on the site - header, jobs, sign-in, portal, LMS, home-page blocks - is this
   one rule, so they cannot drift apart. An area may size one (height, padding, font-size where
   its layout is scaled) but never repaint it: no background, colour, border, radius or weight. */
.rs-btn--gold,
.jb-btn-gold,
.candidate-btn-gold,
.um-btn-gold,
.lms-btn-gold,
.js-auth-submit,
.services-showcase__explore,
.dc-casestudy__cta,
.site-header .header-action.action-primary {
    border: 0;
    border-radius: 9px;
    background: var(--gradient-gold);
    color: var(--color-navy);
    font-size: var(--fs-md);
    font-weight: 400;
    letter-spacing: .01em;
    box-shadow: var(--shadow-gold);
    transition: box-shadow .18s ease, filter .18s ease, transform .15s ease;
}
.rs-btn--gold:hover,
.jb-btn-gold:hover,
.candidate-btn-gold:hover,
.um-btn-gold:hover,
.lms-btn-gold:hover,
.js-auth-submit:hover,
.services-showcase__explore:hover,
.dc-casestudy__cta:hover,
.site-header .header-action.action-primary:hover {
    background: var(--gradient-gold);
    color: var(--color-navy);
    filter: brightness(1.06);
    box-shadow: var(--shadow-gold-hover);
}
.rs-btn--gold:active,
.jb-btn-gold:active,
.candidate-btn-gold:active,
.um-btn-gold:active,
.lms-btn-gold:active,
.js-auth-submit:active,
.services-showcase__explore:active,
.dc-casestudy__cta:active,
.site-header .header-action.action-primary:active { transform: translateY(1px); }

/* Outline: secondary actions beside a primary one. */
.rs-btn--outline,
.jb-btn-outline,
.um-btn-ghost {
    background: var(--color-surface);
    border-color: var(--color-line-strong);
    color: var(--color-navy);
}
.rs-btn--outline:hover,
.jb-btn-outline:hover,
.um-btn-ghost:hover { background: var(--color-surface-alt); border-color: var(--color-blue); color: var(--color-blue); }

/* Blue is the default above; the named variant exists for markup that says so. */
.rs-btn--blue,
.um-btn-blue { background: var(--color-blue); color: #fff; }

/* A plain text action styled as a link. */
.rs-btn--link,
.candidate-link-button {
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.rs-btn--link:hover,
.candidate-link-button:hover { background: none; color: var(--color-blue-dark); }

/* ---- Card: the one raised surface ---- */
.rs-card,
.candidate-card,
.um-card,
.jb-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.rs-card,
.candidate-card { padding: 20px; }

/* ---- Filter chip ---- */
.rs-chip,
.jb-chip,
.lms-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-soft);
    color: var(--color-text);
    font-size: var(--fs-sm);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.rs-chip:hover, .rs-chip.is-active,
.jb-chip:hover, .jb-chip.is-active,
.lms-chip:hover, .lms-chip.is-active { background: var(--color-gold-soft); border-color: var(--color-gold-line); color: var(--color-navy); }

/* ---- Alert / status banner ---- */
.rs-alert,
.candidate-banner,
.js-auth-alert {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-lg);
    background: var(--color-info-soft);
    color: var(--color-navy);
}
.rs-alert--warn,
.candidate-banner-warn,
.js-auth-alert--warn { background: var(--color-warning-soft); border-color: var(--color-gold); }
.rs-alert--danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }

/* ---- Smart notice (Views/Shared/_Notice.cshtml): tone icon, message, the button that clears a
   dependency, close. Every portal message - saved, error, "do this first" - is this one block. ---- */
.rs-notice {
    --notice-ink: var(--color-blue);
    --notice-bg: var(--color-info-soft);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--notice-ink);
    border-radius: var(--radius-xl);
    background: var(--notice-bg);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
    transition: opacity .2s, max-height .3s .15s, margin .3s .15s, padding .3s .15s;
}
.rs-notice:has(.rs-notice__close) { padding-right: 3.25rem; }
.rs-notice.is-leaving { max-height: 0 !important; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; overflow: hidden; }
.rs-notice--success { --notice-ink: var(--color-success); --notice-bg: var(--color-success-soft); }
.rs-notice--warn { --notice-ink: var(--color-gold-deep); --notice-bg: var(--color-warning-soft); }
.rs-notice--danger { --notice-ink: var(--color-danger); --notice-bg: var(--color-danger-soft); }
.rs-notice__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--notice-ink);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .55);
}
.rs-notice--warn .rs-notice__icon { color: var(--color-gold-text); }
.rs-notice__icon > svg.icon { width: 1.15rem; height: 1.15rem; }
.rs-notice__text { flex: 1 1 240px; margin: 0; font-size: .9375rem; line-height: 1.45; }
.rs-notice__text strong { display: block; color: var(--color-ink); }
.rs-notice__text p { margin: 2px 0 0; color: var(--color-text); font-size: var(--fs-sm); }
.rs-notice__action { flex: none; }
.rs-notice__action > svg.icon { width: 1rem; height: 1rem; }
.rs-notice__close {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: -1.125rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}
.rs-notice__close:hover, .rs-notice__close:focus-visible { background: rgba(7, 27, 77, .08); color: var(--color-ink); }
.rs-notice__close > svg.icon { width: 1rem; height: 1rem; }
/* Phones: the button drops under the message, lined up with the text; × stays top-right. */
@media (max-width: 560px) {
    .rs-notice { align-items: flex-start; }
    .rs-notice__text { flex-basis: calc(100% - 2.25rem - 14px); align-self: center; }
    .rs-notice__close { top: 8px; margin-top: 0; }
    .rs-notice__action { margin-left: calc(2.25rem + 14px); }
}
@media print { .rs-notice { display: none !important; } }

/* ---- Empty state ---- */
.rs-empty,
.jb-empty,
.lms-empty {
    padding: 48px 24px;
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-muted);
    text-align: center;
}

/* ---- Form controls ---- */
.rs-input,
.candidate-field input:not([type="checkbox"]):not([type="radio"]),
.candidate-field select,
.candidate-field textarea {
    width: 100%;
    min-height: var(--control-min-target);
    padding: 8px 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-navy);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.rs-input:focus,
.candidate-field input:focus,
.candidate-field select:focus,
.candidate-field textarea:focus { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(22, 78, 138, .15); outline: none; }
.rs-input:focus-visible,
.candidate-field :is(input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---- Section heading kit: kicker, two-tone heading, icon disc, motto ----
   The pieces every designed section opens with, so a new band composes them instead of drawing
   its own. Sizes are rem (the A- / A+ control reaches them); colours are the tokens above. */
.rs-kicker {
    margin: 0 0 14px;
    color: var(--color-navy);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1.55;
    text-transform: uppercase;
}
/* The short gold rule above the label; with no label it stands alone over a title. */
.rs-kicker::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 2px;
    background: var(--color-gold);
}
.rs-kicker:lang(hi) { letter-spacing: .04em; }
/* The same rule under the label instead (/contact-us); with no label it still sits over the title. */
.rs-kicker--under:not(:empty)::before { display: none; }
.rs-kicker--under:not(:empty)::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--color-gold);
}
.rs-heading {
    margin: 0;
    color: var(--color-blue-dark);
    font-size: clamp(1.625rem, 2.05vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
}
.rs-heading > span { display: block; }
.rs-heading__accent { color: var(--color-gold); }
.rs-icon-disc {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--disc, 4.5rem);
    height: var(--disc, 4.5rem);
    border-radius: 50%;
    color: var(--color-blue-dark);
    font-size: calc(var(--disc, 4.5rem) * .42);
}
.rs-icon-disc > svg.icon, .rs-icon-disc > img { width: 1em; height: 1em; object-fit: contain; }
.rs-icon-disc--white { background: var(--color-surface); box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), var(--shadow-sm); }
.rs-icon-disc--gold { background: var(--gradient-gold); box-shadow: 0 0 0 5px rgba(247, 197, 60, .2), var(--shadow-gold); }
.rs-icon-disc--navy { background: var(--color-blue-dark); color: var(--color-surface); }
.rs-icon-disc--sky { background: var(--color-sky-deep); color: var(--color-blue); }
/* A handwritten note beside artwork: upright Kalam, navy, tilted like a pen note. */
.rs-motto {
    margin: 0;
    color: var(--color-blue);
    font-family: var(--font-hand);
    font-weight: 400;
    font-style: normal;
    line-height: 1.12;
    transform: rotate(-9deg);
    transform-origin: left bottom;
}
.rs-motto > span { display: block; }
.rs-motto > span + span { padding-left: .7em; }