/* Public layouts; shared header styles also apply to the lite layout. */

.public-search > .form-control,
.public-search > .btn {
    font-size: 1rem;
    min-height: 44px;
}
.public-search > .form-control { min-width: 0; font-size: 1.0625rem; }
.public-search > .btn i { font-size: inherit; }

/* Shared footer: normal document flow and two link columns on mobile. */
#footer.public-footer { background: #172b45; line-height: 1.9; }
.public-footer .footer-link { color: #e2e8f0; min-height: 44px; }
.public-footer .footer-link:hover { color: #fff; text-decoration: underline !important; text-underline-offset: .3em; }
#footer.public-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: .25rem; }

.public-site #sidebar ul ul a { padding-inline-start: 30px !important; }

/* Full public layout. */
.public-site .public-register-job { border-radius: .75rem; font-size: .875rem; min-height: 44px; }
.public-site .public-aside-card { border: 1px solid #e0e6ee; border-radius: 1rem; overflow: clip; box-shadow: 0 .2rem 1rem #172b4508; }
.public-site .public-aside-heading { background: #f0f4f8; border-bottom: 1px solid #e0e6ee; padding: .875rem 1rem; color: #24344b; font-size: .9375rem; font-weight: 700; }
.public-site .public-aside-heading h2 { font-size: inherit; font-weight: inherit; line-height: 1.8; }
.public-site .public-aside-heading i { color: #58718d; }
.public-site .public-aside-card #certificates img { max-width: 100%; height: auto; }
.public-site .public-trust-card .public-aside-heading { padding: .5rem .875rem; font-size: .8125rem; }
.public-site .public-trust-card #certificates img { width: 110px; }
.public-site .public-comments-card { border-color: #bfded5; }
.public-site .public-comments-card .public-aside-heading { background: #e9f5f3; border-bottom-color: #cce5df; color: #245d62; padding: .65rem .875rem; }
.public-site .public-comments-card .public-aside-heading i { color: #28877e; }
.public-site .public-recent-comments .list-group-item { border-color: #e0eee9; }
.public-site .public-comment-link { padding: .875rem; color: #526174; text-decoration: none; overflow-wrap: anywhere; transition: background-color .2s; }
.public-site .public-comment-link:hover { background: #f2f9f6; }
.public-site .public-comments-card .public-comment-link:focus-visible { outline: 3px solid #287d74; outline-offset: -3px; background: #f2f9f6; }
.public-site .public-comment-icon { width: 30px; height: 30px; border-radius: .625rem; background: #e8f5f1; color: #287d74; border: 1px solid #cce5df; font-size: .875rem; }
.public-site .public-comment-meta { min-width: 0; }
.public-site .public-comment-author { color: #24344b; font-size: .8125rem; font-weight: 700; line-height: 1.7; }
.public-site .public-comment-job { color: #376895; font-size: .75rem; line-height: 1.8; }
.public-site .public-comment-text { background: #eef8f5; border-radius: .5rem; padding: .35rem .5rem; color: #34465c; font-size: .8125rem; line-height: 1.95; }

/* Shared rating card on public job, category and tag pages. */
.public-site .job-rating { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: center; padding: .5rem .75rem; border: 1px solid #e0e6ee; border-radius: 1rem; background: #fff; box-shadow: 0 3px 16px #172b4506; }
.public-site .job-rating-summary { display: contents; }
.public-site .job-rating-text { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; gap: .4rem; color: #526174; font-size: 14px; white-space: nowrap; }
.public-site .job-rating-text strong { display: inline-block; padding: .15rem .65rem; border: 1px solid #dce5ef; border-radius: .65rem; background: #f0f4f8; color: #173d60; font-size: 26px; font-weight: 700; line-height: 1.5; }
.public-site .job-rating-stars { grid-column: 2; grid-row: 1; justify-self: center; gap: .3rem; color: #b78118; font-size: 18px; }
.public-site .job-rating-count { grid-column: 2; grid-row: 2; justify-self: center; margin: 0; color: #526174; font-size: 13px; line-height: 1.8; }
@media (max-width: 575.98px) {
    .public-site .job-rating { padding: .5rem .5rem; gap: .3rem .65rem; }
}
@media (max-width: 359.98px) {
    .public-site .job-rating { grid-template-columns: minmax(0, 1fr); }
    .public-site .job-rating-text { grid-column: 1; grid-row: 1; justify-content: center; }
    .public-site .job-rating-stars { grid-column: 1; grid-row: 2; }
    .public-site .job-rating-count { grid-column: 1; grid-row: 3; }
}

body.public-site { background: #f5f7fb; color: #24344b; display: flex; flex-direction: column; line-height: 1.9; }
.public-site .public-main { flex: 1; padding-top: 1.5rem; }
@media (min-width: 1200px) {
    .public-site .public-main { width: 96%; }
    .public-site #right-column,
    .public-site #left-column { width: 15%; min-width: 250px; }
    .public-site #center-column { width: 53.33333333%; }
}
#headerNavbar.public-header { background: #172b45 !important; }
#headerNavbar.public-header .nav-link { border-radius: .6rem; transition: color .2s, background-color .2s; }
#headerNavbar.public-header #nv .nav-link { color: #f1f5f9; font-weight: 500; }
#headerNavbar.public-header #nv .nav-link:is(:hover, :focus-visible) { color: #fff; background: #ffffff1a; }
#headerNavbar.public-header #nv :is(.nav-link, .dropdown-item, .dropdown-toggle) i { color: inherit !important; }
#headerNavbar.public-header .navbar-collapse { max-height: 70vh; overflow-y: auto; }
@media (min-width: 1400px) {
    #headerNavbar.public-header .navbar-collapse { max-height: none; overflow: visible; }
}
#headerNavbar.public-header .public-header-actions .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
#headerNavbar.public-header .public-header-actions .btn:focus-visible { outline-color: white; }
.public-site #sidebar {
    position: static;
    width: 100%;
    height: auto !important;
    max-height: none;
    overflow: clip;
    border-radius: 1rem;
    box-shadow: 0 .2rem 1rem #172b4508 !important;

}
.public-site #sidebar > div:first-child { background: #172b45 !important; }
.public-site #groupSidebar, .public-site #subgroupSidebar { padding-bottom: 70px; }
.public-site #sidebar ul li a { transition: color .2s, background-color .2s; color: #848282; display: block; font-size: .97rem !important; font-weight: normal; padding: 10px; }
.public-site #sidebar ul li a:hover { background: #e6e3e3; }
.public-site .home-hero { background: linear-gradient(125deg, #e8f5f6, #edf2ff 65%, #fff); border: 1px solid #dfe8f2; }
.public-site .home-hero h1 { color: #172b45; line-height: 1.8; }
.public-site .home-hero .input-group { box-shadow: 0 .5rem 1.5rem #1734540a; }
.public-site .home-hero > .mb-3:last-child { margin-bottom: 0 !important; }
.public-site .home-section { overflow: hidden; }
.public-site .public-job-card { transition: border-color .2s, box-shadow .2s; }
.public-site .public-job-card:hover { border-color: #86aedc !important; box-shadow: 0 .5rem 1.5rem #17345412; }
.public-site .public-job-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: white; }
.public-site .public-job-card h3 { line-height: 1.9; overflow-wrap: anywhere; }
.public-site :is(a, button, input):focus-visible, .public-header :is(a, button):focus-visible { outline: 3px solid #276aca; outline-offset: 3px; }
.public-site #home-sectors { scroll-margin-top: 7rem; }
@media (min-width: 992px) {
    .public-site .public-job-column { max-width: 160px; }
}
@media (max-width: 575.98px) {
    .public-site .public-main { padding-inline: .75rem; }
    #headerNavbar.public-header > .container-fluid { gap: .375rem; }
    #headerNavbar.public-header .public-header-brand { flex: 1 1 0; flex-shrink: 1 !important; min-width: 0; max-width: 108px; }
    #headerNavbar.public-header .public-header-brand img { width: 100% !important; max-width: 100px; height: auto; }
    #headerNavbar.public-header .navbar-toggler { flex: 0 0 44px; min-height: 44px; }
    #headerNavbar.public-header .public-header-actions { gap: .375rem !important; }
    #headerNavbar.public-header .public-header-actions .btn { min-height: 44px; }

    .public-site .input-group-lg > .form-control { font-size: 1rem; min-width: 0; }
}
@media (max-width: 319.98px) {
    #headerNavbar.public-header > .container-fluid { padding-inline: .25rem; gap: .125rem; }
    #headerNavbar.public-header .public-header-actions { gap: .25rem !important; }
    #headerNavbar.public-header .public-header-actions .btn { padding-inline: .25rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    .public-site *, .public-site *::before, .public-site *::after, .public-header *, .public-header *::before, .public-header *::after { transition: none !important; animation: none !important; }
}
