/*
 * Theme corrections that apply in both text directions.
 *
 * Loaded on every page, after the theme's own CSS. This is the home for fixes
 * to the theme or its vendor libraries that are not about layout direction -
 * anything RTL-specific belongs in rtl-fixes.css instead.
 */

/*
 * Select2 hides the original <select> by shrinking it to 1px and clipping it.
 * The theme's `.wt-select-bar-large { width: 100% }` in main.css wins the
 * cascade, so the hidden element stays full width and absolutely positioned
 * ~149px outside its container, giving every page with one of these selects a
 * phantom horizontal scroll region.
 *
 * It has always been present in both directions. Left-to-right hides it - the
 * viewport scrolls from the left, so the overflow falls off the right edge
 * unseen - while a right-to-left page is displaced by it, which is how it was
 * found. Restoring Select2's own intent fixes both.
 */
.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Home banner top padding on small screens.
 *
 * The section reserves 199px above its content to clear a header that is only
 * 70px tall, leaving 129px of empty space before the first line. On a wide
 * layout that reads as deliberate, but on a phone it pushes the headline most
 * of the way down the first screen. 100px keeps the badge clear of the header
 * with a 30px breathing gap and leaves the desktop composition untouched.
 *
 * The rule lives here rather than in the theme's SCSS because the theme's
 * node_modules are not installed, so the stylesheet cannot be recompiled. That
 * puts it before style.css in the cascade, hence the `body` prefix: it raises
 * specificity above the theme's single-class selector without !important.
 */
@media (max-width: 767.98px) {
    body .twm-home2-banner-section {
        padding-top: 100px;
    }
}

/*
 * Select2 controls inside a form group must fill it.
 *
 * Select2 defaults to width: 'resolve', which copies the width of the select
 * it replaces. The rule above deliberately shrinks that select to 1px to get
 * it out of the layout, so "resolve" reads 1px and Select2 writes its own
 * floor - an inline width: 40px - onto the visible control. The two effects
 * are unavoidable together: the original has to be small, and the replacement
 * has to be full width, so the replacement is sized here instead.
 *
 * Scoped to .form-group children so the inline selects elsewhere - the header
 * search, the sort-order dropdowns - keep sizing themselves.
 */
.form-group > .select2-container {
    width: 100% !important;
}

/*
 * Experience / education / certification entries as cards.
 *
 * All three lists share .box-timeline under .job-seeker-education. They were
 * bare rows separated by whitespace on desktop and a hairline on mobile, so
 * where one entry ended and the next began was left to the reader.
 *
 * Two things need care:
 *
 * .box-timeline is a Bootstrap .row, which carries negative left/right margins
 * to cancel its columns' gutters. Painting a border on it as-is would put the
 * card edges outside the container and give the page a horizontal scrollbar,
 * so the margins are zeroed and the columns' own 12px gutters are counted as
 * part of the padding (8 + 12 = 20px to the content).
 *
 * The theme's mobile rules add a bottom rule and strip it from the last item,
 * which on a card reads as a missing edge; both are restated here as a full
 * border. The `body` prefix outranks the theme's two-class selectors without
 * !important - fixes.css loads before style.css.
 */
body .job-seeker-education .box-timeline {
    background: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(22, 40, 63, 0.04);
    /* 12px inline: the wrapper .row carries -12px gutters, so a zero margin
       would hang the card off both screen edges while the rest of the section
       stays inset. This puts the card back on the section content line. */
    margin: 24px 12px 0;

    /* Bootstrap gives every .row child width: 100% and flex-shrink: 0. Left
       alone, that pushes a full-width box 12px past each edge and gives the
       page a horizontal scrollbar. The card is a flex item, so width alone
       does not settle it - flex-basis auto plus grow is what makes it take
       the line minus its own margins, and min-width: 0 lets it shrink to
       fit rather than to its content. */
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 20px 8px;
}

/* The connector line belonged to the timeline reading; inside a card it is
   just a stray vertical rule. */
body .job-seeker-education .timeline-year::before {
    display: none;
}

@media only screen and (max-width: 768px) {
    body .job-seeker-education .box-timeline,
    body .job-seeker-education .box-timeline:last-child {
        border: 1px solid #e4e8ee;
        margin: 16px 12px 0;
        padding-bottom: 20px;
    }
}

/*
 * Footer link columns all start on the same line.
 *
 * .ftr-list-center makes each footer widget a grid with justify-content
 * centre. A grid with no declared columns gets one, sized to its widest item,
 * so every column shrink-wrapped to a different width and its heading and
 * links were pinned to that width rather than to the column edge - four lists
 * each starting at a different x, none of them level with the address block
 * in the first column, which is not a grid.
 *
 * Normal block flow puts every heading and link back on the container's start
 * edge, which is what the surrounding columns already do.
 */
body footer .ftr-list-center {
    display: block;
}

/*
 * Username field: keep the prefix and the input on one line.
 *
 * The prefix spells out the whole profile URL, which on a phone is wider than
 * the field it labels - so the input wrapped onto a second line and stopped
 * looking like one control. Below the small breakpoint the scheme and host are
 * dropped and the folder is kept, which is the part that changes meaning.
 */
.jb-username-prefix {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .jb-username-prefix__origin {
        display: none;
    }
}

/*
 * Applied-jobs status filters scroll instead of stacking.
 *
 * Seven filters wrapped onto four rows on a phone and pushed the list of
 * applications off the first screen. One scrolling row keeps them together and
 * keeps the applications in view - the same treatment the employer side's
 * applicant pipeline gets.
 */
@media (max-width: 767.98px) {
    body .jb-application-pipeline {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Flex items shrink below their content by default, which would squeeze
       the labels rather than let the row scroll. */
    body .jb-application-pipeline__item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}


/*
 * Recommended-jobs cards match the applied-jobs cards.
 *
 * The recommended-jobs section styles its card actions as small circular
 * icon-only buttons and hides each label with the screen-reader-only pattern.
 * Everywhere else the same card gives you "Save Job", "Download" and "Forward"
 * as full-width labelled pills, so the overview page was the odd one out and
 * the three bare circles did not say what they did.
 *
 * The section's rules carry three classes, so these need the body prefix to
 * outrank them - fixes.css loads before the theme stylesheet.
 */
@media (max-width: 575.98px) {
    body .jb-recommended-jobs__item .twm-jobs-list-style1 .jb-job-card-actions {
        align-items: stretch;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* The control is only a wrapper - giving it the pill's padding as well
       would inset the button inside it and make that one row narrower. */
    body .jb-recommended-jobs__item .twm-jobs-list-style1 .jb-save-job-control {
        padding: 0;
        width: 100%;
    }

    body .jb-recommended-jobs__item .twm-jobs-list-style1 .jb-save-job-button,
    body .jb-recommended-jobs__item .twm-jobs-list-style1 .twm-jobs-browse,
    body .jb-recommended-jobs__item .twm-jobs-list-style1 .jb-listing-quick-action {
        border-radius: 999px;
        height: auto;
        min-height: 40px;
        min-width: 0;
        padding: 8px 14px;
        width: 100%;
    }

    /* Put the labels back into the layout: the section had them absolutely
       positioned and clipped to a 1px box. */
    body .jb-recommended-jobs__item .twm-jobs-list-style1 .jb-save-job-button span,
    body .jb-recommended-jobs__item .twm-jobs-list-style1 .twm-jobs-browse span,
    body .jb-recommended-jobs__item .twm-jobs-list-style1 .jb-listing-quick-action span {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
}

/*
 * Page banner clears the header on small screens.
 *
 * The site header is absolutely positioned over the top of the page, and the
 * breadcrumb banner reserves no room for it - the banner is a 200px display:
 * table box that centres its content, so a title long enough to wrap ran up
 * underneath the search and menu icons. On the job detail page the heading sat
 * at y=10 with the header occupying 0-70.
 *
 * 86px is the 70px header plus a 16px gap. The banner is border-box with a
 * declared height, so the padding lengthens it rather than squeezing the
 * content, and the breadcrumb below still sits well inside.
 */
@media (max-width: 767.98px) {
    body .wt-bnr-inr {
        padding-top: 86px;
    }
}

/*
 * Foreground colours for badges rendered outside the admin.
 *
 * BaseHelper::renderBadge() emits `badge bg-<color> text-<color>-fg`, and
 * text-*-fg is a Tabler utility that ships with the admin theme only. On the
 * front end nothing defines it, so the badge has no colour of its own and
 * inherits whatever the surrounding block uses - in the account dashboard's
 * recent-applications list that is #607086, giving a grey "Shortlisted" on a
 * blue background at 1.12:1, which is essentially unreadable.
 *
 * Each pairing below is the one that clears WCAG AA (4.5:1) against its own
 * background: white on the dark fills, near-black on amber and cyan, which are
 * far too light to carry white text.
 */
.badge.text-primary-fg,
.badge.text-danger-fg,
.badge.text-success-fg,
.badge.text-secondary-fg,
.badge.text-dark-fg {
    color: #fff;
}

.badge.text-warning-fg,
.badge.text-info-fg,
.badge.text-light-fg {
    color: #212529;
}