/*
 * SecurityTalent member rail 2.1.25
 * Full-width, accessible module cards for Featured Jobs, profile completion
 * and EasySocial Groups. Every selector is scoped to a managed module class.
 */

:root {
    --st-rail-ink: #082f3a;
    --st-rail-muted: #55727a;
    --st-rail-teal: #087f86;
    --st-rail-teal-dark: #075e65;
    --st-rail-cyan: #29a9ad;
    --st-rail-warm: #be4c27;
    --st-rail-line: rgba(8, 127, 134, .2);
    --st-rail-soft: #f1f9f8;
    --st-rail-white: #fff;
    --st-rail-shadow: 0 12px 30px rgba(7, 68, 76, .09);
}

/*
 * EasyBlog category subcategories: convert the comma-separated link sentence
 * into a responsive set of scannable topic chips. The tiny container font
 * suppresses only the punctuation text nodes between anchors; readable sizes
 * are restored on the heading and links.
 */
.eb-authors-bio.st-news-subcategories {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: .65rem !important;
    margin-top: 1rem !important;
    font-size: 0 !important;
}

.eb-authors-bio.st-news-subcategories > p:first-child {
    flex: 0 0 100% !important;
    margin: 0 0 .15rem !important;
    color: var(--st-rail-ink) !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
}

.eb-authors-bio.st-news-subcategories > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: .58rem !important;
    min-height: 2.7rem !important;
    padding: .55rem .9rem .55rem .62rem !important;
    border: 1px solid rgba(8, 127, 134, .25) !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #fffdf6 0%, #eef8f6 100%) !important;
    box-shadow: 0 6px 16px rgba(7, 68, 76, .06) !important;
    color: var(--st-rail-teal-dark) !important;
    font-size: .92rem !important;
    font-weight: 760 !important;
    line-height: 1.28 !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.eb-authors-bio.st-news-subcategories > a::before {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 1.7rem !important;
    width: 1.7rem !important;
    height: 1.7rem !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, var(--st-rail-teal), var(--st-rail-cyan)) !important;
    color: var(--st-rail-white) !important;
    content: "•";
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.eb-authors-bio.st-news-subcategories > a:nth-of-type(1)::before { content: "⊞"; }
.eb-authors-bio.st-news-subcategories > a:nth-of-type(2)::before { content: "⌁"; }
.eb-authors-bio.st-news-subcategories > a:nth-of-type(3)::before { content: "§"; }
.eb-authors-bio.st-news-subcategories > a:nth-of-type(4)::before { content: "✦"; }
.eb-authors-bio.st-news-subcategories > a:nth-of-type(5)::before { content: "✓"; }
.eb-authors-bio.st-news-subcategories > a:nth-of-type(6)::before { content: "⟳"; }

.eb-authors-bio.st-news-subcategories > a:hover {
    transform: translateY(-2px) !important;
    border-color: var(--st-rail-teal) !important;
    background: var(--st-rail-white) !important;
    box-shadow: 0 10px 24px rgba(7, 68, 76, .12) !important;
}

.eb-authors-bio.st-news-subcategories > a:focus-visible {
    outline: 3px solid rgba(41, 169, 173, .38) !important;
    outline-offset: 3px !important;
}

@media (max-width: 600px) {
    .eb-authors-bio.st-news-subcategories > a {
        flex: 1 1 100% !important;
        border-radius: 14px !important;
    }
}

/* Use the complete width of the Joomla left rail. */
#sp-left .sp-module.st-ejm-sidebar-card,
#sp-left .sp-module.st-es-member-rail-card,
#sp-left .sp-module.st-easysocial-sidebar-card,
#sp-left .st-ejm-sidebar-card,
#sp-left .st-es-member-rail-card,
#sp-left .st-easysocial-sidebar-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

#sp-left .sp-module.st-ejm-sidebar-card,
#sp-left .sp-module.st-es-member-rail-card,
#sp-left .sp-module.st-easysocial-sidebar-card {
    position: relative !important;
    margin-block: 0 1.35rem !important;
    padding: clamp(1rem, 1.6vw, 1.4rem) !important;
    border: 1px solid var(--st-rail-line) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #f8fbfa 0%, #edf7f5 100%) !important;
    box-shadow: var(--st-rail-shadow) !important;
    overflow: visible !important;
}

#sp-left .sp-module.st-ejm-sidebar-card .sp-module-content,
#sp-left .sp-module.st-es-member-rail-card .sp-module-content,
#sp-left .sp-module.st-easysocial-sidebar-card .sp-module-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
}

/* Prevent the module suffix appearing on both wrapper and output from
   producing a second narrow box. */
#sp-left .sp-module.st-ejm-sidebar-card .sp-module-content > .st-ejm-sidebar-card,
#sp-left .sp-module.st-es-member-rail-card .sp-module-content > .st-es-member-rail-card,
#sp-left .sp-module.st-easysocial-sidebar-card .sp-module-content > .st-easysocial-sidebar-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#sp-left .sp-module.st-ejm-sidebar-card .sp-module-title,
#sp-left .sp-module.st-es-member-rail-card .sp-module-title,
#sp-left .sp-module.st-easysocial-sidebar-card .sp-module-title {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.1rem !important;
    padding: 0 2.4rem .9rem 0 !important;
    border-bottom: 1px solid var(--st-rail-line) !important;
    color: var(--st-rail-ink) !important;
    font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: anywhere;
}

/* The groups heading is short enough to wrap only between its two words.
   Use pixels here so an enlarged template root font cannot make the title
   dominate the narrow member rail. */
#sp-left .sp-module.st-es-member-rail-card.st-es-groups-rail .sp-module-title {
    font-size: clamp(22px, 2vw, 26px) !important;
    line-height: 1.16 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

[dir="rtl"] #sp-left .sp-module.st-ejm-sidebar-card .sp-module-title,
[dir="rtl"] #sp-left .sp-module.st-es-member-rail-card .sp-module-title,
[dir="rtl"] #sp-left .sp-module.st-easysocial-sidebar-card .sp-module-title {
    padding-right: 0 !important;
    padding-left: 2.4rem !important;
    text-align: right !important;
}

/* Keep Joomla front-end editing available without covering module titles. */
#sp-left .sp-module.st-ejm-sidebar-card .jmodedit,
#sp-left .sp-module.st-es-member-rail-card .jmodedit,
#sp-left .sp-module.st-easysocial-sidebar-card .jmodedit {
    position: absolute !important;
    z-index: 5 !important;
    top: .9rem !important;
    right: .9rem !important;
    margin: 0 !important;
}

[dir="rtl"] #sp-left .sp-module.st-ejm-sidebar-card .jmodedit,
[dir="rtl"] #sp-left .sp-module.st-es-member-rail-card .jmodedit,
[dir="rtl"] #sp-left .sp-module.st-easysocial-sidebar-card .jmodedit {
    right: auto !important;
    left: .9rem !important;
}

/* Featured Cybersecurity Jobs. */
#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs,
#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs #jb_template,
#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group {
    display: grid !important;
    gap: .9rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem clamp(1rem, 1.6vw, 1.3rem) !important;
    border: 1px solid var(--st-rail-line) !important;
    border-radius: 14px !important;
    background: var(--st-rail-white) !important;
    box-shadow: 0 5px 16px rgba(7, 68, 76, .055) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group-item:hover {
    border-color: rgba(8, 127, 134, .5) !important;
    box-shadow: 0 12px 24px rgba(7, 68, 76, .11) !important;
    transform: translateY(-2px);
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs h5 {
    margin: 0 0 .8rem !important;
    color: var(--st-rail-ink) !important;
    font-size: clamp(1.03rem, 1.45vw, 1.22rem) !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs h5 a {
    display: block !important;
    padding: 0 !important;
    color: var(--st-rail-teal-dark) !important;
    text-decoration: none !important;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs h5 a:hover,
#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs h5 a:focus-visible {
    color: var(--st-rail-warm) !important;
    text-decoration: underline !important;
    text-underline-offset: .18em;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group-item > ul {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group-item > ul > li {
    display: grid !important;
    grid-template-columns: minmax(5.4rem, .42fr) minmax(0, 1fr) !important;
    gap: .65rem !important;
    margin: 0 !important;
    padding: .45rem 0 !important;
    border-top: 1px solid rgba(8, 127, 134, .11) !important;
    color: #244b55 !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
}

#sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group-item > ul > li span {
    color: var(--st-rail-muted) !important;
    font-size: .74rem !important;
    font-weight: 800 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

/*
 * The EJM search module ships its filters as equal Bootstrap columns. Inside
 * a sidebar that leaves each select only a few characters wide. Search
 * controls are more useful as a vertical form at every sidebar width.
 */
#sp-left .st-ejm-sidebar-card form .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .7rem;
    margin-inline: 0 !important;
}

#sp-left .st-ejm-sidebar-card form .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 0 !important;
}

#sp-left .st-ejm-sidebar-card form input,
#sp-left .st-ejm-sidebar-card form select,
#sp-left .st-ejm-sidebar-card form .form-control,
#sp-left .st-ejm-sidebar-card form .form-select,
#sp-left .st-ejm-sidebar-card form joomla-field-fancy-select,
#sp-left .st-ejm-sidebar-card form .choices {
    width: 100% !important;
    min-width: 0 !important;
}

/*
 * Joomla's Choices enhancement absolutely positions its menu. In the narrow
 * job-search rail that menu covers the action buttons, while its generated
 * control can appear empty. site-nav.js copies the canonical page-filter
 * catalog into the real select and marks only these sidebar controls for a
 * predictable native presentation.
 */
#sp-left .st-ejm-sidebar-card form .choices.st-native-sidebar-choice {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#sp-left .st-ejm-sidebar-card form .st-native-sidebar-choice > .choices__inner {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

#sp-left .st-ejm-sidebar-card form .st-native-sidebar-choice .choices__list--single,
#sp-left .st-ejm-sidebar-card form .st-native-sidebar-choice > .choices__list--dropdown {
    display: none !important;
}

#sp-left .st-ejm-sidebar-card form .st-native-sidebar-choice select.st-sidebar-native-select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.5rem !important;
    padding: .72rem 2.5rem .72rem .9rem !important;
    border: 1px solid rgba(8, 75, 85, .22) !important;
    border-radius: .85rem !important;
    color: var(--st-rail-ink) !important;
    background: #fff !important;
    font: inherit !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

#sp-left .st-ejm-sidebar-card form .st-native-sidebar-choice select.st-sidebar-native-select:focus {
    border-color: var(--st-rail-teal) !important;
    outline: 3px solid rgba(15, 146, 151, .18) !important;
    outline-offset: 1px !important;
}

#sp-left .st-ejm-sidebar-card form .btn,
#sp-left .st-ejm-sidebar-card form button,
#sp-left .st-ejm-sidebar-card form a.btn {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

#sp-left .st-ejm-sidebar-card form .btn + .btn,
#sp-left .st-ejm-sidebar-card form button + button,
#sp-left .st-ejm-sidebar-card form a.btn + a.btn {
    margin-top: .6rem !important;
}

/* Profile completeness. */
#sp-left .st-es-member-rail-card.mod-es-profile-completeness,
#sp-left .st-easysocial-sidebar-card.mod-es-profile-completeness {
    width: 100% !important;
    padding: .15rem 0 .2rem !important;
    color: var(--st-rail-ink) !important;
    background: transparent !important;
}

#sp-left .mod-es-profile-completeness .mod-es-title {
    margin: 0 0 .65rem !important;
    color: var(--st-rail-teal-dark) !important;
    font-size: .98rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

#sp-left .mod-es-profile-completeness .progress {
    width: 100% !important;
    height: 10px !important;
    margin: 0 0 .75rem !important;
    border-radius: 999px !important;
    background: #e2efed !important;
    box-shadow: inset 0 1px 2px rgba(7, 68, 76, .08) !important;
    overflow: hidden !important;
}

#sp-left .mod-es-profile-completeness .progress-bar {
    border-radius: inherit !important;
    background: linear-gradient(90deg, var(--st-rail-teal), var(--st-rail-cyan)) !important;
}

#sp-left .mod-es-profile-completeness a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: .55rem .85rem !important;
    border: 1px solid var(--st-rail-teal) !important;
    border-radius: 9px !important;
    background: var(--st-rail-white) !important;
    color: var(--st-rail-teal-dark) !important;
    font-size: .9rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

#sp-left .mod-es-profile-completeness a:hover,
#sp-left .mod-es-profile-completeness a:focus-visible {
    border-color: var(--st-rail-warm) !important;
    background: var(--st-rail-warm) !important;
    color: #fff !important;
}

/* EasySocial Groups card layout: one wide, readable card per row. */
#sp-left .st-es-groups-rail.mod-es-groups,
#sp-left .st-es-member-rail-card.mod-es-groups {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .9rem !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

#sp-left .st-es-groups-rail.mod-es-groups .mod-card,
#sp-left .st-es-member-rail-card.mod-es-groups .mod-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 1px solid var(--st-rail-line) !important;
    border-radius: 14px !important;
    background: var(--st-rail-white) !important;
    box-shadow: 0 5px 16px rgba(7, 68, 76, .055) !important;
    overflow: hidden !important;
}

#sp-left .st-es-groups-rail .mod-card__cover-wrap,
#sp-left .st-es-member-rail-card.mod-es-groups .mod-card__cover-wrap {
    width: 100% !important;
    height: 88px !important;
    overflow: hidden !important;
}

#sp-left .st-es-groups-rail .mod-card__cover,
#sp-left .st-es-member-rail-card.mod-es-groups .mod-card__cover {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
}

#sp-left .st-es-groups-rail .mod-card__context,
#sp-left .st-es-member-rail-card.mod-es-groups .mod-card__context {
    position: relative !important;
    width: 100% !important;
    padding: 2.3rem 1rem 1rem !important;
}

#sp-left .st-es-groups-rail .mod-card__avatar-holder,
#sp-left .st-es-member-rail-card.mod-es-groups .mod-card__avatar-holder {
    position: absolute !important;
    top: -2rem !important;
    left: 1rem !important;
    margin: 0 !important;
}

[dir="rtl"] #sp-left .st-es-groups-rail .mod-card__avatar-holder,
[dir="rtl"] #sp-left .st-es-member-rail-card.mod-es-groups .mod-card__avatar-holder {
    right: 1rem !important;
    left: auto !important;
}

#sp-left .st-es-groups-rail .mod-card__avatar,
#sp-left .st-es-member-rail-card.mod-es-groups .mod-card__avatar {
    width: 58px !important;
    height: 58px !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 14px rgba(7, 68, 76, .2) !important;
    overflow: hidden !important;
}

#sp-left .st-es-groups-rail .es-card__title,
#sp-left .st-es-member-rail-card.mod-es-groups .es-card__title {
    display: block !important;
    padding: 0 !important;
    color: var(--st-rail-teal-dark) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
    text-decoration: none !important;
}

#sp-left .st-es-groups-rail .es-card__meta,
#sp-left .st-es-member-rail-card.mod-es-groups .es-card__meta {
    margin-top: .35rem !important;
    color: var(--st-rail-muted) !important;
    font-size: .8rem !important;
    line-height: 1.4 !important;
}

#sp-left .st-es-groups-rail > .mod-es-action,
#sp-left .st-es-member-rail-card.mod-es-groups > .mod-es-action {
    width: 100% !important;
    margin: 0 !important;
}

#sp-left .st-es-groups-rail > .mod-es-action .btn,
#sp-left .st-es-member-rail-card.mod-es-groups > .mod-es-action .btn {
    width: 100% !important;
    min-height: 42px !important;
    border: 1px solid var(--st-rail-teal) !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--st-rail-teal-dark), var(--st-rail-teal)) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

@media (max-width: 767.98px) {
    #sp-left .sp-module.st-ejm-sidebar-card,
    #sp-left .sp-module.st-es-member-rail-card,
    #sp-left .sp-module.st-easysocial-sidebar-card {
        padding: 1rem !important;
        border-radius: 15px !important;
    }

    #sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group-item > ul > li {
        grid-template-columns: 1fr !important;
        gap: .15rem !important;
    }

    #sp-left .sp-module.st-es-member-rail-card.st-es-groups-rail .sp-module-title {
        padding-right: 2rem !important;
        font-size: 22px !important;
        letter-spacing: -.015em !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sp-left .st-ejm-sidebar-card .mod_easyjobsmanager_jobs .list-group-item {
        transition: none !important;
    }
}
