/* ==========================================================================
   Careers — the public half of recruitment
   --------------------------------------------------------------------------
   Two screens carry the weight here and both were plain: the vacancy list,
   where only the Details button was clickable, and the application form, which
   was a stack of unstyled inputs ending in the browser's own grey-and-black
   file picker.

   Everything below resolves through the design tokens in main.css, so the dark
   theme comes for free except where a colour has to be stated outright.
   ========================================================================== */

/* --- Screen-reader-only text ---------------------------------------------
   The whole-card link needs an accessible name and no visible one. Defined
   here because the public stylesheet has no utility for it. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── The vacancy card ──────────────────────────────────────────────────────
   The whole card opens the advert. An overlay anchor covers it, and the button
   row is lifted above that overlay so Apply still goes straight to the form —
   which is why the row has a stacking context of its own rather than just a
   higher z-index.
   ------------------------------------------------------------------------ */

.vacancy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    /* The card is a link target, so it gets the focus ring rather than the
       invisible anchor inside it. */
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.vacancy-card__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    /* Nothing to hide with text-indent: the only child is .sr-only, which is
       already clipped. A -9999px indent on a full-bleed block is how pages
       grow a horizontal scrollbar nobody can find the cause of. */
}

.vacancy-card:focus-within { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.vacancy-card__hit:focus { outline: none; }

.vacancy-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vacancy-card__tag--soon {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.vacancy-card__title {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--ink-900);
}

.vacancy-card__summary {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted);
}

.vacancy-card__facts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--muted);
}

.vacancy-card__facts li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vacancy-card__facts i {
    width: 15px;
    text-align: center;
    color: var(--accent);
    opacity: 0.75;
    flex: none;
}

.vacancy-card__actions {
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    /* Its own stacking context, so the Apply button sits above the card's
       overlay link instead of underneath it. */
    position: relative;
    z-index: 2;
}

/* "Details →" is text rather than a button: the card itself is the link, and a
   second button pointing at the same place invites the reader to wonder what
   the difference is. It still moves on hover so it reads as a target. */
.vacancy-card__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    pointer-events: none;
}

.vacancy-card__more i { transition: transform var(--dur-2) var(--ease); font-size: 0.75rem; }
.vacancy-card:hover .vacancy-card__more i { transform: translateX(3px); }

[dir="rtl"] .vacancy-card__more i { transform: scaleX(-1); }
[dir="rtl"] .vacancy-card:hover .vacancy-card__more i { transform: scaleX(-1) translateX(3px); }

[data-theme="dark"] .vacancy-card__title { color: var(--text); }
[data-theme="dark"] .vacancy-card__tag--soon { background: rgba(245, 158, 11, 0.18); color: #FCD34D; border-color: rgba(245, 158, 11, 0.3); }

/* ── The application form ──────────────────────────────────────────────────
   Wider, sectioned, and with a file field that is ours rather than the
   browser's.
   ------------------------------------------------------------------------ */

.apply {
    max-width: 1040px;
    margin-inline: auto;
}

/* A summary of what is being applied for, so the form is not a page of inputs
   with no subject. */
.apply__subject {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--cyan-50), var(--surface));
    margin-bottom: var(--s-6);
}

.apply__subject-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    flex: none;
}

.apply__subject-title { margin: 0; font-size: 1.05rem; color: var(--ink-900); }
.apply__subject-meta { margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); }

/* No `overflow: hidden` here, however tempting.
   
   It was keeping the section dividers inside the card's rounded corners, and
   it also clipped the calendar dropdown — which hangs off the date field,
   absolutely positioned, and is wider than the field and taller than the
   section. The dropdown lost its last column and its "next month" arrow, and
   nothing about the card suggested why. The corners are handled by rounding
   the footer instead, which is the only child with a background of its own. */
.apply__form { padding: 0; }

.apply__section { padding: var(--s-8); }
.apply__section + .apply__section { border-top: 1px solid var(--border); }

.apply__section-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

/* Numbered, because a form of thirty fields reads as three short ones when the
   sections are counted. */
.apply__step {
    width: 28px;
    height: 28px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex: none;
}

.apply__section-head h3 { margin: 0; font-size: 1rem; }

/* Four columns at full width, and the field order is arranged around that:
   name/name/father/phone, then email/tazkira/gender/date, then the address
   pair. Three columns split province from district, which are the one pair on
   this form that has to be read together. */
.apply__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-4) var(--s-5);
}

.apply__field--wide { grid-column: 1 / -1; }
.apply__field--half { grid-column: span 2; }

.apply__field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 6px;
}

.apply__field .req { color: var(--red-500); margin-inline-start: 2px; }

.apply__field .form-control,
.apply__field .form-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    /* Exactly the content height: 44 less the two 1px borders, with no vertical
       padding. It has to be stated rather than left to `normal`, because
       input-masks.js lays its hint over this box in a <span> and a span starts
       its first line at the top of the content box while an <input> centres a
       single line in it. With `normal` (22.5px here) that put the ghost's
       "XX XXX XXXX" about ten pixels above the digits it was supposed to
       continue. Pinning the line to the full content height makes the two
       agree by construction. */
    line-height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.apply__field textarea.form-control {
    height: auto;
    padding: 12px 14px;
    line-height: 1.6;
    resize: vertical;
}

.apply__field .form-control:focus,
.apply__field .form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.apply__hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }

/* --- The calendar picker ---------------------------------------------------
   When the hospital is on the Shamsi or Hijri calendar,
   hms-calendar-picker.js swaps the native date input for a readonly text box
   it drives itself. Bootstrap greys out anything readonly, so beside the
   fields around it that box looked disabled. It is not — it opens a calendar —
   so it is given the same surface as its neighbours and a pointer cursor. */
.apply__field .hms-dp { position: relative; }

/* The date field is the last column of its row, so a dropdown anchored to the
   field's leading edge opens 80px past the card. Anchored to the trailing edge
   it opens inwards and stays on the card whichever column it lands in — a
   280px panel under a ~200px field has to overhang one side or the other, and
   inwards is the side with something to overhang. */
.apply__field .hms-dp-dropdown { left: auto; right: 0; }
[dir="rtl"] .apply__field .hms-dp-dropdown { left: 0; right: auto; }

.apply__field .hms-dp .form-control[readonly] {
    /* `!important` because the bundled front stylesheet declares its own
       `#ececec !important` on every readonly control — a specificity war this
       cannot be won any other way without editing that bundle, which is shared
       with the rest of the public site. */
    background: var(--surface) !important;
    cursor: pointer;
}

.apply__field .hms-dp .form-control[readonly]:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

/* --- The contact number ----------------------------------------------------
   intl-tel-input wraps the field in `.iti`, which is inline-block by default
   and would leave the box narrower than every other field on the row. */
.apply__field .iti { display: block; width: 100%; }

/* --- The file field ------------------------------------------------------
   The native control was the one visibly unfinished thing on this page: a
   black "Choose Files" slab beside the words "No file chosen", in the
   browser's font, in the browser's colours, on a form styled to the hospital's
   own. The input is still the input — it is moved off-screen and driven by the
   label, so keyboard focus, the required attribute and validation all behave
   exactly as they did. */

.apply__drop {
    position: relative;
    display: block;
    padding: var(--s-8) var(--s-5);
    border: 2px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.apply__drop:hover,
.apply__drop.is-dragging { border-color: var(--accent); background: var(--cyan-50); }

/* Off-screen rather than display:none — a hidden input cannot be focused, and
   the browser cannot scroll to it to show a "please choose a file" message. */
.apply__drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    inset-inline-start: 50%;
    bottom: 0;
}

.apply__drop input[type="file"]:focus-visible + .apply__drop-inner { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-sm); }

/* The label's child is a <span>, so it has to be told to stack — a
   flex-direction on the label alone leaves the icon, the title and the hint
   running together on one line inside it. */
.apply__drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
}

.apply__drop-icon { font-size: 1.75rem; color: var(--accent); line-height: 1; }
.apply__drop-title { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.apply__drop-title span { color: var(--accent); text-decoration: underline; }
.apply__drop-hint { font-size: 0.82rem; color: var(--muted); margin: 0; }

.apply__files {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0 0;
    display: grid;
    gap: 8px;
}

.apply__files:empty { display: none; }

.apply__files li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.875rem;
}

.apply__files i { color: var(--accent); }
.apply__files .size { margin-inline-start: auto; color: var(--muted); font-size: 0.8rem; }

.apply__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.apply__actions .btn { min-width: 180px; }

.apply__consent {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
    margin-top: var(--s-5);
}

.apply__consent i { color: var(--accent); margin-top: 2px; }

.apply__footer {
    /* The only child with a background, so the only one that could spill past
       the card's rounded corner now that the card no longer clips. */
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-8);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.apply__footer .btn { min-width: 170px; }
.apply__footer .apply__footer-note { margin: 0; margin-inline-start: auto; font-size: 0.82rem; color: var(--muted); }

.apply__errors {
    border: 1px solid #FECACA;
    border-inline-start: 4px solid var(--red-500);
    background: #FEF2F2;
    border-radius: var(--r-md);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-6);
}

.apply__errors ul { margin: 0; padding-inline-start: 1.1em; color: #991B1B; font-size: 0.9rem; }
.apply__errors strong { display: block; margin-bottom: 6px; color: #991B1B; }

[data-theme="dark"] .apply__subject { background: linear-gradient(135deg, rgba(0, 144, 168, 0.12), var(--surface)); }
[data-theme="dark"] .apply__subject-title { color: var(--text); }
[data-theme="dark"] .apply__drop:hover,
[data-theme="dark"] .apply__drop.is-dragging { background: rgba(0, 144, 168, 0.1); }
[data-theme="dark"] .apply__errors { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); }
[data-theme="dark"] .apply__errors ul,
[data-theme="dark"] .apply__errors strong { color: #FCA5A5; }
[data-theme="dark"] .vacancy-card__facts i { opacity: 0.9; }

@media (max-width: 575.98px) {
    .apply__section { padding: var(--s-6) var(--s-5); }
    .apply__footer { padding: var(--s-5); }
    .apply__footer .btn { flex: 1 1 100%; }
    .apply__footer .apply__footer-note { margin-inline-start: 0; }
}