/* Defensive baseline: some themes/page-builder resets apply box-sizing or
   list-style globally in ways that would otherwise break our layout (e.g.
   "ul { list-style: none }" resets are common and would silently strip the
   bullets from the Responsibilities/Requirements/Benefits sections below). */
[class*="iqjoma-"] { box-sizing: border-box; }
/* Mobile Safari/Chrome paint their own blue tap-highlight flash on buttons
   and links by default, on top of anything this stylesheet does — this is
   what was showing as a blue circle behind the modal's close "x". Killed
   globally so no button/link here gets that regardless of our own rules. */
[class*="iqjoma-"] { -webkit-tap-highlight-color: transparent; }

/* Wraps the auto-injected content (Hero + job listing, or the general
   application form) on the pages picked in Settings. Some page templates
   (full-width/canvas templates in particular) render page content edge to
   edge with no container — this keeps our content readable and gives it
   breathing room above/below so it doesn't butt up against the header or
   the "Powered by" line touching the footer. */
.iqjoma-page-content { max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px; }

.iqjoma-icon { display: inline-flex; align-items: center; line-height: 1; }
.iqjoma-icon svg { width: 1em; height: 1em; fill: currentColor; display: block; }

.iqjoma-hero { display: flex; align-items: center; gap: 40px; padding: 20px 0 5rem; box-sizing: border-box; }
.iqjoma-hero-content { flex: 1 1 50%; min-width: 0; }
.iqjoma-hero-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8em; font-weight: 700; color: #0ea5c4; margin: 0 0 10px; }
/* Hero.php outputs either our own iqjoma-hero-heading/iqjoma-hero-text classes, or
   Elementor's elementor-heading-title/elementor-text-editor classes — never
   both (see the ELEMENTOR_VERSION check there), so there's no cascade fight
   over font-size to worry about here. Spacing still needs to apply either
   way, so it's set via a plain element selector (h1 / h1's next sibling)
   that isn't tied to whichever typography class won. */
.iqjoma-hero-content h1 { margin: 0 0 20px; word-break: break-word; }
/* Elementor's site-wide default heading rule (.elementor-widget-heading h1)
   already gives our wrapped heading the same clamp() font-size other pages
   get. What it DOESN'T give it is the extra weight/spacing/color other
   headings on this site have — those come from a per-widget override tied
   to that specific page's own Elementor element ID (a value that only
   exists because that heading was hand-styled in the Elementor editor;
   there's no such ID for us to match since ours isn't a real Elementor
   widget instance). Setting the same values directly here reproduces the
   look without needing one. */
.iqjoma-hero-content h1.elementor-heading-title { font-weight: 700; line-height: 1.07em; letter-spacing: -2px; color: var(--e-global-color-text, #222222); }
/* Targeted by class, not "h1 + p" — when Elementor is active the heading
   is wrapped in its own .elementor-widget-heading div (see Hero.php), so
   this paragraph is no longer directly adjacent to the h1 in the DOM and
   an adjacent-sibling selector silently stops matching it at all. */
.iqjoma-hero-content .iqjoma-hero-text,
.iqjoma-hero-content .elementor-text-editor { color: #555; line-height: 1.6; margin: 20px 0 24px; max-width: 480px; }
.iqjoma-hero-heading { font-size: 2.2em; line-height: 1.2; }
.iqjoma-hero-highlight { color: #33ccff !important; }
.iqjoma-hero-text { font-size: 1.05em; }
.iqjoma-hero-btn { display: inline-block; background: #22c1e8; color: #fff; text-decoration: none; padding: 12px 26px; border-radius: 6px; font-weight: 600; }
.iqjoma-hero-image { flex: 1 1 50%; min-width: 0; }
.iqjoma-hero-custom-image { width: 100%; height: auto; display: block; border-radius: 12px; }

.iqjoma-empty-state { text-align: center; max-width: 560px; margin: 24px auto 40px; padding: 36px 28px; background: #f7fcfe; border: 1px solid #e2f3f8; border-radius: 2rem; }
.iqjoma-empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #22c1e8; color: #fff; margin-bottom: 18px; }
.iqjoma-empty-state-icon svg { width: 24px; height: 24px; fill: currentColor; }
.iqjoma-empty-state p { margin: 0; color: #555 !important; font-size: 1.05em; line-height: 1.6; }

/* Material "filled text field" style: no border, a soft neutral fill that
   lifts to white with an accent focus ring on interaction, fully-rounded
   (pill) corners, and the whole bar distinguished from the page by
   elevation (shadow) rather than a hard border. */
/* Hero's own bottom padding (5rem) plus this top margin (5rem) gives a full
   10rem gap between the hero and this filter bar — kept as separate margin
   here rather than padding on the filter bar itself, since padding would
   also push its own pill-shaped internal content down and distort it. */
.iqjoma-job-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 5rem 0 24px; padding: 12px; border-radius: 2rem; box-sizing: border-box; }

.iqjoma-job-filters-search { position: relative; flex: 1 1 240px; }
.iqjoma-job-filters-search .iqjoma-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8a8a8a; }
.iqjoma-job-filters-search .iqjoma-icon svg { width: 15px; height: 15px; }

.iqjoma-job-filters input[type=text] { width: 100%; height: 46px; padding: 0 16px 0 42px; border: 1px solid transparent; background: #f1f3f4; border-radius: 999px; box-sizing: border-box; font-size: 0.95em; transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.iqjoma-job-filters select { height: 46px; padding: 0 34px 0 18px; border: 1px solid transparent; background: #f1f3f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 14px; border-radius: 999px; font-size: 0.95em; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; color-scheme: light; accent-color: #22c1e8; transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.iqjoma-job-filters select option { color: #333; background-color: #fff; padding: 8px 12px; }
/* Only Firefox renders a hover/checked state on native <option> elements —
   Chrome/Safari ignore this rule entirely (their dropdown list is drawn by
   the OS and isn't stylable from CSS), so this is a harmless no-op there. */
.iqjoma-job-filters select option:checked, .iqjoma-job-filters select option:hover { background-color: #22c1e8; color: #fff; }
.iqjoma-job-filters input[type=text]:focus, .iqjoma-job-filters select:focus { outline: none; background-color: #fff; box-shadow: 0 0 0 2px #999; }

/* Submit button matches the same pill treatment as the search/select fields
   instead of falling back to the theme's own (visually unrelated) .button
   style, so the whole bar reads as one cohesive component. */
.iqjoma-job-filters button[type="submit"] { height: 46px; padding: 0 28px; border: none; border-radius: 999px; background: #ffc107; color: #1a1a1a; font-weight: 700; cursor: pointer; box-sizing: border-box; outline: none; }
.iqjoma-job-filters button[type="submit"]:hover, .iqjoma-job-filters button[type="submit"]:focus, .iqjoma-job-filters button[type="submit"]:active { background: #ffc107 !important; color: #1a1a1a !important; border-color: transparent !important; }
.iqjoma-job-filters button[type="submit"]:focus-visible { outline: 2px solid #666; outline-offset: 2px; }

.iqjoma-filters-clear { color: #8a8a8a; white-space: nowrap; font-size: 0.9em; text-decoration: none; padding: 0 4px; }
.iqjoma-filters-clear:hover { color: #c0392b; text-decoration: underline; }

/* Material-ish card treatment throughout: white surface, soft layered
   shadow instead of a hard border, rounded corners, and a slight lift on
   hover — used for both the grid cards and the list rows below, and for
   the single job overview page's detail card further down. */
.iqjoma-jobs-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.iqjoma-jobs-list-rows { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.iqjoma-job-row { display: flex; flex-direction: column; gap: 10px; border-radius: 1rem; padding: 20px 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.iqjoma-job-row:nth-child(odd) { background: #fff6e0; }
.iqjoma-job-row:nth-child(even) { background: #f5fcff; }
.iqjoma-job-row:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.iqjoma-job-row-top { display: flex; align-items: center; gap: 16px; }
.iqjoma-job-row-main { flex: 1 1 auto; min-width: 0; }
.iqjoma-job-row-main h5 { margin: 0 0 2px; word-break: break-word; font-size: 1.2em; font-weight: 600; }
.iqjoma-job-row-main h5 a { color: inherit; text-decoration: none; }
.iqjoma-job-row-main h5 a:hover { text-decoration: none; }
.iqjoma-job-row-sub { color: #888; }
.iqjoma-job-row-meta { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; color: #666; font-size: 0.92em; }
.iqjoma-job-row-meta-item { display: inline-flex; align-items: center; gap: 4px; }
/* Separator trails each item (not :last-child) rather than leading it (was
   :not(:first-child)::before) — when the row wraps, a leading separator
   would land at the start of the new line with nothing before it on that
   line, looking like a stray hanging "|". Trailing punctuation at the end
   of the previous line reads normally instead. */
.iqjoma-job-row-meta-item:not(:last-child)::after { content: "|"; margin-left: 6px; color: #ccc; }
.iqjoma-job-row-meta-item .iqjoma-icon { color: #999; }
.iqjoma-job-row-meta-item .iqjoma-icon svg { width: 12px; height: 12px; }
.iqjoma-job-row-action { flex-shrink: 0; }
.iqjoma-jobs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 24px 0; align-items: stretch; }
.iqjoma-job-card { position: relative; border-radius: 2rem; padding: 28px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.iqjoma-job-card:nth-child(odd) { background: #fff6e0; }
.iqjoma-job-card:nth-child(even) { background: #f5fcff; }
.iqjoma-job-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
/* Explicit font-size (not just element-selector inheritance) so this isn't
   subject to the active theme's own responsive "h5" rule at narrower
   widths — same underlying issue as the hero h1, just without an Elementor
   widget class to hook into here, so a plain class-scoped rule (which
   already outranks the theme's low-specificity h5 selector) is enough. */
/* Title and badge share a flex row (.iqjoma-job-card-top) instead of the badge
   being absolutely positioned against a guessed pixel offset — that never
   reliably lined up with the title since it wasn't actually measuring the
   title's position, just assuming where it would be. Flex keeps them level
   regardless of title length/wrapping. */
.iqjoma-job-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.iqjoma-job-card h5 { margin: 0; word-break: break-word; font-size: 1.2em; font-weight: 600; }
.iqjoma-job-card h5 a { color: inherit; text-decoration: none; }
.iqjoma-job-card h5 a:hover { text-decoration: none; }
.iqjoma-job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: #666; font-size: 0.9em; }
.iqjoma-job-openings { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); color: #777; font-size: 0.8em; font-weight: 600; }
.iqjoma-job-openings .iqjoma-icon svg { width: 12px; height: 12px; }
.iqjoma-job-meta-item { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.iqjoma-job-meta-item:not(:last-child)::after { content: "|"; margin-left: 8px; color: #ccc; }

/* Listing card meta: location, type, and posted-date, each as a single flex
   item (icon+text together) so a narrow card wraps them as whole units
   instead of stranding a separator at a line break. */
.iqjoma-job-meta-basic { margin: 8px 0 4px; }
.iqjoma-job-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #666; font-size: 0.92em; }
.iqjoma-job-meta-line .iqjoma-icon { color: #999; }
.iqjoma-job-meta-line .iqjoma-icon svg { width: 12px; height: 12px; }
.iqjoma-job-meta-line-item { display: inline-flex; align-items: center; gap: 4px; }
.iqjoma-job-meta-line-item:not(:last-child)::after { content: "|"; margin-left: 4px; color: #ccc; }
.iqjoma-job-deadline-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); color: #777; font-size: 0.8em; font-weight: 600; }
.iqjoma-job-deadline-tag .iqjoma-icon svg { width: 12px; height: 12px; }

/* Openings + deadline pills sit together here, side by side with a
   consistent gap, instead of as two loose divs whose spacing depended on
   whatever margin collapsing happened to do between them. */
.iqjoma-job-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.iqjoma-job-excerpt { margin: 10px 0 0; color: #666; font-size: 0.9em; line-height: 1.5; }

/* Corner badge on the grid card — the eye button (or "closed" label) sits
   top-right, like a favorite/bookmark icon, instead of a footer button. */
.iqjoma-job-card-badge { flex-shrink: 0; }
.iqjoma-job-card-badge .iqjoma-applications-closed { display: inline-block; max-width: 110px; text-align: right; font-size: 0.75em; line-height: 1.3; }
.iqjoma-jobs-grid .iqjoma-job-card { display: flex; flex-direction: column; height: 100%; }

/* Icon-only "view" CTA — just the eye icon in the brand accent color, no
   background/pill, so it reads like a lightweight bookmark/preview icon
   rather than a heavy secondary button. */
.iqjoma-view-btn { display: inline-flex; align-items: center; justify-content: center; color: #22c1e8; text-decoration: none; flex-shrink: 0; }
.iqjoma-view-btn svg { width: 22px; height: 22px; fill: currentColor; }
.iqjoma-share { display: flex; align-items: center; gap: 6px; }
/* .iqjoma-copy-link is a <button>, the rest are <a> — browsers apply different
   UA-stylesheet defaults to each (box-shadow, outline, text-align, etc.)
   even with matching classes, so those are reset explicitly here rather
   than relying on appearance:none alone to cover every browser. */
.iqjoma-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #555; text-decoration: none; cursor: pointer; box-sizing: border-box; padding: 0; margin: 0; font: inherit; line-height: normal; text-align: center; vertical-align: middle; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
/* The active theme (Astra) has its own global "button:hover, button:focus"
   rule that repaints background/color/border-color on every plain <button>
   element site-wide, regardless of our own classes — .iqjoma-copy-link is the
   only <button> among these icons (the rest are <a>), so it's the one this
   was hitting. Pinned back to the resting state with !important since the
   theme rule is what's being actively overridden here, not just avoided. */
.iqjoma-icon-btn:hover, .iqjoma-icon-btn:focus, .iqjoma-icon-btn:active { background: #fff !important; color: #555 !important; border-color: #ddd !important; }
.iqjoma-icon-btn:focus-visible { outline: 2px solid #666; outline-offset: 2px; }
.iqjoma-icon-btn::-moz-focus-inner { border: 0; padding: 0; }
.iqjoma-icon-btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.iqjoma-copy-link { position: relative; }
/* Small "Copied!" tooltip above the button, shown only while .iqjoma-copied is
   present (the same ~1.5s window the class stays on after a click) — a
   plain neutral tooltip, not a green "success" state, since the button
   itself isn't reporting success/failure of anything, just confirming the
   copy happened. */
.iqjoma-copy-link.iqjoma-copied::after {
    content: attr(data-copied-label);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}
/* Given its own explicit color instead of leaning on the theme's ".button"
   class for it, same reasoning as the icon buttons above: the theme's own
   "button:hover, button:focus" rule repaints this on interaction otherwise,
   and there'd be no default color of ours to pin it back to. */
.iqjoma-apply-btn { flex-shrink: 0; background: #ffc107 !important; color: #1a1a1a !important; border: none !important; }
.iqjoma-apply-btn:hover, .iqjoma-apply-btn:focus, .iqjoma-apply-btn:active { background: #ffc107 !important; color: #1a1a1a !important; border-color: transparent !important; }
.iqjoma-applications-closed { flex-shrink: 0; font-weight: 600; color: #999; }

.iqjoma-powered-by { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; color: #999 !important; }
.iqjoma-powered-by-link { display: inline-flex; line-height: 0; transition: opacity 0.15s ease; }
.iqjoma-powered-by-link:hover { opacity: 0.75; }
.iqjoma-powered-by-logo { width: 18px; height: 18px; vertical-align: middle; }

.iqjoma-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 999999; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.iqjoma-modal-overlay.open { display: flex; }
.iqjoma-modal-box { background: #fff; border-radius: 2rem; max-width: 480px; width: 100%; padding: 30px; max-height: 90vh; overflow-y: auto; position: relative; box-sizing: border-box; }
/* A flex row (see iqjoma-modal-header below) instead of absolute positioning
   for the close button — that was aligning it to the box's corner, not to
   the heading's own text, so it visually floated above the title instead
   of sitting level with it. Flex with align-items:center guarantees it
   stays vertically centered against the heading regardless of font size or
   how many lines the title wraps to. */
/* outline:none alone didn't clear the blue circle — it's most likely a
   Bootstrap-style focus glow, which themes commonly apply as a box-shadow
   ring (not an outline) on :focus/:active, plus native button chrome that
   only appearance:none removes. All three are reset explicitly here,
   the same defensive treatment .iqjoma-icon-btn already had. */
.iqjoma-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.iqjoma-modal-header #iqjoma-modal-heading { margin: 0; }
.iqjoma-modal-close { flex-shrink: 0; font-size: 22px; line-height: 1; cursor: pointer; background: none; border: none; color: #333; padding: 0; margin: 0; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.iqjoma-modal-close:hover,
.iqjoma-modal-close:focus,
.iqjoma-modal-close:active { background: none !important; color: #333 !important; border-color: transparent !important; outline: none; box-shadow: none; }
.iqjoma-modal-close:focus-visible { outline: 2px solid #666; outline-offset: 2px; }
.iqjoma-modal-close::-moz-focus-inner { border: 0; padding: 0; }

.iqjoma-form-container { max-width: 480px; margin: 30px auto; padding: 24px; border: 1px solid #e2e2e2; border-radius: 2rem; box-sizing: border-box; }
.iqjoma-form-container * { box-sizing: border-box; }
.iqjoma-form-container h5 { margin: 0 0 16px; font-size: 1.3em; font-weight: 600; line-height: 1.3; word-break: break-word; }
.iqjoma-form-container .iqjoma-field { display: block; width: 100%; margin-bottom: 22px; }
.iqjoma-form-container label { display: block; margin-bottom: 6px; font-weight: 500; }
.iqjoma-form-container input, .iqjoma-form-container textarea, .iqjoma-form-container select { display: block; width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 1em; }
.iqjoma-form-container textarea { min-height: 90px; }
.iqjoma-field-hint { display: block; margin-top: 4px; color: #888; font-size: 0.85em; }
.iqjoma-field-hint.iqjoma-field-error { color: #c0392b; }
.iqjoma-form-container .iqjoma-field-checkbox { display: flex; align-items: flex-start; }
.iqjoma-form-container .iqjoma-field-checkbox label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; font-weight: 400; }
.iqjoma-form-container .iqjoma-field-checkbox input[type=checkbox] { display: inline-block; width: auto; }
.iqjoma-form-container .iqjoma-form-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.iqjoma-submit-btn { display: inline-flex; align-items: center; gap: 8px; background: #ffc107 !important; color: #1a1a1a !important; border: none !important; }
.iqjoma-submit-btn:hover, .iqjoma-submit-btn:focus, .iqjoma-submit-btn:active { background: #ffc107 !important; color: #1a1a1a !important; border-color: transparent !important; }
.iqjoma-btn-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: currentColor; border-radius: 50%; animation: iqjoma-spin 0.7s linear infinite; }
.iqjoma-submit-btn.is-loading .iqjoma-btn-spinner { display: inline-block; }
.iqjoma-submit-btn:disabled { opacity: 0.75; cursor: default; }
@keyframes iqjoma-spin { to { transform: rotate(360deg); } }

.iqjoma-form-status { text-align: center; padding: 30px 12px; }
.iqjoma-form-status-icon { display: inline-flex; width: 56px; height: 56px; margin-bottom: 14px; }
.iqjoma-form-status-icon svg { width: 100%; height: 100%; }
.iqjoma-form-status.success .iqjoma-form-status-icon { color: #1a7f37; }
.iqjoma-form-status.error .iqjoma-form-status-icon { color: #c0392b; }
.iqjoma-form-status-message { margin: 0; font-size: 1.05em; color: #333; }

/* Best-effort sizing for the theme's own single-post title on the job
   overview page, and hiding its author/date byline — scoped to the
   single-iqjoma_job body class so neither can affect any other post type.
   ".entry-title" and the byline class names below are common theme
   conventions but not universal, so this may not apply to every theme.
   Not hidden here — SingleJob.php moves it into .iqjoma-job-detail-card with a
   synchronous inline <script> right after the card in the HTML, which runs
   while the browser is still parsing (before that part of the page is
   painted), so there's nothing to hide/reveal and no flash either way. */
body.single-iqjoma_job .entry-title,
body.single-iqjoma_job h1.entry-title { font-size: 2em; font-weight: 600; }
body.single-iqjoma_job .entry-meta,
body.single-iqjoma_job .byline,
body.single-iqjoma_job .posted-on,
body.single-iqjoma_job .entry-date,
body.single-iqjoma_job .post-meta { display: none; }
.iqjoma-job-detail-card > .entry-title { margin-top: 0; margin-bottom: 16px; }

.iqjoma-back-link { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 12px; color: #666; text-decoration: none; font-weight: 600; font-size: 0.95em; }
.iqjoma-back-link:hover { color: #22c1e8; }

/* Plain white surface with simple dividers rather than a tinted/elevated
   card — matches the flat, no-frills layout used by major job portals
   (Naukri, LinkedIn, Indeed) rather than a "designed" floating card. */
.iqjoma-job-detail-card { background: #fff; border-radius: 2rem; padding: 32px; margin: 24px 0; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); }
/* Fixed font stack here specifically — some themes/builders apply different
   responsive typography per breakpoint (a common Elementor pattern), which
   otherwise made this text visibly change font between desktop and mobile
   since it was just inheriting whatever the theme set at each breakpoint. */
.iqjoma-single-job-header { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #eee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.iqjoma-job-header-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.iqjoma-job-posted-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #777; font-size: 0.9em; }
.iqjoma-single-job-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid #eee; }
.iqjoma-job-section { margin: 28px 0; }
.iqjoma-job-section h5 { margin: 0 0 12px; font-size: 1.15em; font-weight: 500; }
.iqjoma-job-section ul { list-style: disc; margin: 0; padding-left: 20px; }
.iqjoma-job-section li { display: list-item; margin-bottom: 6px; }
.iqjoma-skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
.iqjoma-skill-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); color: #777; font-size: 0.8em; font-weight: 600; }

@media (max-width: 1100px) {
    .iqjoma-jobs-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .iqjoma-jobs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
    .iqjoma-hero { flex-direction: column; align-items: stretch; gap: 24px; }
    .iqjoma-hero-content { text-align: left; }
    .iqjoma-hero-text { max-width: none; }
    .iqjoma-hero-image { max-width: 320px; margin: 0 auto; }
}

@media (max-width: 600px) {
    /* No pure-CSS rule can know where a flex row actually wraps, so any
       static "|" placement (leading or trailing) is wrong whenever exactly
       one item ends up alone on its own line — it still shows a pipe with
       nothing on the other side of it. Simplest fix: drop the separator
       entirely below this width. Each item still has its own icon, and the
       row's flex gap still spaces items out normally without it. */
    .iqjoma-job-meta-item::after,
    .iqjoma-job-row-meta-item::after,
    .iqjoma-job-meta-line-item::after { content: none; }

    .iqjoma-jobs-grid { grid-template-columns: 1fr; }
    .iqjoma-job-card { padding: 20px; }
    .iqjoma-job-header-cta { flex-direction: column; align-items: stretch; margin-top: 20px; }
    .iqjoma-apply-btn { width: 100%; text-align: center; }
    .iqjoma-modal-box, .iqjoma-form-container { margin: 16px auto; max-width: 100%; }
    .iqjoma-hero-heading { font-size: 1.6em; }
    /* Row + wrap, not a forced column stack: the search box (flex-basis
       100%) always starts its own line, which pushes the type/location
       selects onto a shared line together (as many as fit, same as any
       other wrapping flex row), and the submit button (also flex-basis
       100%) always gets its own line after them. Previously this container
       switched to flex-direction: column, which also made the search box's
       desktop-only "flex: 1 1 240px" apply to its height instead of width
       (main axis flips with the direction), stretching it to 240px tall —
       that's why there was a large empty gap above the search icon. */
    .iqjoma-job-filters { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
    .iqjoma-job-filters-search { flex: 1 1 100%; }
    .iqjoma-job-filters select { flex: 1 1 140px; width: auto; min-width: 0; }
    .iqjoma-job-filters button[type="submit"] { flex: 1 1 100%; width: 100%; }
    .iqjoma-filters-clear { flex: 1 1 100%; text-align: center; }
    .iqjoma-job-row { padding: 16px 20px; }
    .iqjoma-job-row-top { flex-wrap: wrap; }
    .iqjoma-job-row-meta { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 10px; width: 100%; box-sizing: border-box; }
    .iqjoma-job-row-action { display: flex; justify-content: flex-end; width: 100%; box-sizing: border-box; }
    .iqjoma-job-detail-card { padding: 20px; border-radius: 2rem; margin: 16px 0; }
    /* No forced stacking here — .iqjoma-job-meta/.iqjoma-job-posted-info already
       wrap naturally (flex-wrap: wrap, set in their base rules above), and
       since the "|" lives inside each item's own ::before (not a separate
       sibling element), it wraps together with its item as one unit instead
       of getting stranded — fits as many items per line as there's room
       for, one "|" between each, same as desktop. */
    .iqjoma-share { flex-wrap: wrap; }
}