/* Our Bob (SiteID 31) — site-wide CSS layered over platform.css.
 *
 * Loaded automatically by App.razor as /sites/ourbob/site.css, so these rules
 * theme every page, not just the home page.
 *
 * Ported from the signed-off standalone OurBob.Web (D:\Projects\OurBob\OurBob.Web,
 * wwwroot/assets/css/site.css). That file was JobLeap's full theme plus ~350
 * lines of OurBob changes; platform.css already carries the JobLeap base, so
 * only the OurBob deltas live here.
 *
 * Brand: navy primary (#203e74) + orange secondary (#ea5a12) — both also set
 * on the Sites row, which drives the Blazorise theme. Light blue (#89def6) is
 * the search hero / featured-employer band; #00012F is the auth panel navy.
 */

/* Muli is now published by Google Fonts as "Mulish"; the old Muli family name
   is kept first in the stack for anyone with it installed locally. */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap');

:root {
    --ob-primary: #203e74;
    --ob-secondary: #ea5a12;
    --ob-sky: #89def6;
    --ob-auth-navy: #00012F;
    --ob-link: #073869;

    /* Hooks consumed by platform.css shared chrome. */
    --site-primary: var(--ob-primary);
    --site-secondary: var(--ob-secondary);
    /* Page-title band (.header-bar on /jobs, /results …) — OurBob used primary
       navy (JobLeap used secondary). White text, so it must stay dark. */
    --site-title-bar-bg: var(--ob-primary);

    /* Sign-in / register left-panel artwork. */
    --site-img-register-bg: url("/sites/ourbob/assets/img/register-bg.png");
    --site-img-signin-bg: url("/sites/ourbob/assets/img/signin-bg.png");
}

/* ------------------------------------------------------------
   Base typography
   ------------------------------------------------------------ */
html {
    font-size: 120%;
}

body {
    color: #333333;
    font-family: 'Muli', 'Mulish', Verdana, sans-serif;
    background-color: #F9F9F9;
    font-size: 15px;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link {
    color: var(--ob-link);
}

/* ------------------------------------------------------------
   Header logo. The shared Header renders the logo at an inline
   width:250px, sized for wide wordmarks; OurBob's logo is a near-square
   flag, which at 250px was ~260px tall. OurBob.Web showed it at 150px and
   pulled it up into the navbar by 27px.
   ------------------------------------------------------------ */
.site-header img.site-branding {
    width: 150px !important;
}

.site-header .navbar-brand {
    min-width: 150px;
    margin-top: -27px !important;
}

/* Footer logo. SiteLogoResolver looks for OurBoblogo-white.webp; OurBob has
   no white variant, so that file is the colour logo (a solid navy flag reads
   on any background). OurBob.Web showed it 68px tall — the shared footer's
   inline width:150px would make the square logo ~158px tall. */
footer img.logo {
    width: auto !important;
    height: 68px !important;
}

/* ------------------------------------------------------------
   Grey box → OurBob light blue (featured employers band etc.)
   ------------------------------------------------------------ */
.box-grey {
    background-color: var(--ob-sky);
    border-color: var(--ob-sky);
}

/* ------------------------------------------------------------
   Sign-in / register panels (client sign-off, OurBob.Web d18c4008)
   ------------------------------------------------------------ */
.signin-reg-left-panel.signin {
    background-position: top !important;
    align-items: flex-end !important;
}

.signin-reg-left-panel.register {
    background-size: contain;
    background-color: var(--ob-auth-navy) !important;
}

/* The page markup sets a 144px inline icon size; OurBob uses 100px on sign in
   and recruiter register (candidate register keeps the larger icon). */
.signin-reg-left-panel.signin .padding-5 > i,
.signin-reg-left-panel.recruiter .padding-5 > i {
    font-size: 100px !important;
}

/* ============================================================
   Home page (Sites/OurBob/Pages/OurBobIndex.razor)
   ============================================================ */

/* Search hero: light blue band around the shared MainSearch, whose form panel
   (.bg-black-transparent) is navy here rather than the platform's secondary. */
.ob-search-hero {
    background-color: var(--ob-sky);
    padding: 1rem;
}

@media (min-width: 992px) {
    .ob-search-hero {
        padding: 3rem;
    }
}

.ob-search-hero .hero-container {
    z-index: 1; /* keep the hedgehog above the next section */
}

.ob-search-hero .hero-container .bg-black-transparent {
    background: var(--ob-primary);
}

/* The hedgehog after the Find Jobs button (MainSearch ButtonImage). Purely
   decorative, so it must never catch clicks meant for the button. */
.ob-search-hero .search-cta-image {
    position: absolute;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-top: -40px;
    margin-left: -40px;
    pointer-events: none;
}

@media (max-width: 767px) {
    .ob-search-hero .search-cta-image {
        margin-left: -100px;
    }
}

.homepage-description {
    min-height: 680px;
}

/* "Featured Employers" band — the look OurBob.Web got from SectionBar. */
.ob-section-bar {
    background-color: var(--ob-link);
    color: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
}

/* Featured employer cards */
.recruiters-container {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    text-align: center;
}

.recruiter-list {
    float: left;
}

.recruiter-viewjobs {
    color: unset !important;
    font-weight: normal;
}

.recruiter-card {
    background-color: #fff;
    border: 1px solid #2ed1c9;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
    display: flex;
    align-items: center;
    text-align: left;
    margin-bottom: 25px;
    height: 370px;
    transition: transform .5s ease;
    font-size: 80%;
}

.recruiter-viewjobs:hover .recruiter-card,
.recruiter-viewjobs:focus-visible .recruiter-card {
    transform: scale(1.1);
}

.recruiter-card-col {
    padding: 16px;
    margin: 24px 0;
    width: 100%;
}

.recruiter-card-logo {
    display: block;
    width: auto;
    max-height: 150px;
    margin: 0 auto;
}

@media (max-width: 769px) {
    .recruiter-card {
        height: auto;
    }

    .recruiter-list {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .recruiters-container {
        padding: 0;
    }

    .box-grey {
        padding: 5px;
    }
}

/* Featured blog articles: pill tabs + cards whose caption slides up over the
   image on hover, or when the "More" link inside has keyboard focus. */
.home-blog-container .nav > li,
.home-blog-container .nav > .nav-item {
    flex: 1 0 auto;
    text-align: center;
    margin-bottom: 8px;
}

.home-blog-container .nav-pills .nav-link.active {
    color: #fff !important;
}

.homeblog-article {
    position: relative;
    height: 250px;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .16);
    margin-bottom: 36px;
    overflow: hidden;
}

.homeblog-article figure {
    height: 100%;
    margin: 0;
}

.homeblog-article img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.homeblog-content {
    background-color: rgba(0, 0, 0, .6);
    padding: 24px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(136px);
    transition: .2s transform ease;
}

.homeblog-article:hover .homeblog-content,
.homeblog-article:focus-within .homeblog-content {
    transform: translateY(0);
}

.homeblog-title {
    font-size: 22px;
    text-align: left;
    color: #fff;
    margin: 0 0 24px 0;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-height: 69px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.homeblog-summary {
    color: #fff;
    height: 70px;
    overflow: hidden;
    text-align: left;
}

.homeblog-link {
    color: #fff;
    display: block;
    text-align: right;
    font-weight: normal;
}

@media (prefers-reduced-motion: reduce) {
    .recruiter-card,
    .homeblog-content {
        transition: none;
    }

    .recruiter-viewjobs:hover .recruiter-card,
    .recruiter-viewjobs:focus-visible .recruiter-card {
        transform: none;
    }
}

/* ============================================================
   Packages (/post-job)
   Our Bob's signed-off page (OurBob.Web) had no package CSS: three equal
   Bootstrap 4 cards side by side in the .card-deck. platform.css restyles
   .packages as a pricing table (first card enlarged and moved to the middle,
   side cards shifted with translateX, borderless 3-up cards, dark teal price
   row), all !important. Undo that here. The doubled .package class and the
   body prefix out-rank platform.css's :nth-last-child(3):first-child rules.
   ============================================================ */
body .packages.card-deck {
    align-items: stretch !important;
    justify-content: flex-start !important;
}

body .packages.card-deck .card.package.package {
    order: 0 !important;
    transform: none !important;
    z-index: auto !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, .125) !important;
    border-radius: .25rem !important;
    box-shadow: none !important;
    margin-bottom: 15px;
}

@media (min-width: 576px) {
    body .packages.card-deck .card.package.package {
        flex: 1 0 0% !important;
    }
}

body .packages.card-deck .card.package.package .card-header {
    font-size: inherit;
    padding: .75rem 1.25rem;
    background-color: rgba(0, 0, 0, .03) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
}

body .packages.card-deck .card.package.package .card-header img {
    max-width: none;
}

body .packages.card-deck .card.package.package h2 {
    margin: .75rem 0 0 0 !important;
}

body .packages.card-deck .card.package.package .table td {
    border-top: 1px solid #dee2e6 !important;
}

body .packages.card-deck .card.package.package .package-price {
    color: inherit;
    background-color: transparent;
    padding: 0;
    font-weight: normal;
}

/* ============================================================
   Header top bar (Sites/OurBob/Shared/OurBobTopBar.razor) and footer
   ============================================================ */
.top-header-bar {
    background-color: #000;
    color: #fff;
}

.top-header-bar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: .25rem 0;
}

.top-header-bar a {
    color: #fff;
    font-weight: normal;
}

.top-header-bar a:hover,
.top-header-bar a:focus-visible {
    text-decoration: none;
    opacity: .8;
}

.top-header-bar .social-icon {
    display: block;
    max-width: 25px;
    height: auto;
}

footer .ob-footer-social {
    display: flex;
    gap: .5rem;
}

/* ------------------------------------------------------------
   Input-group buttons (e.g. the Refine Search keywords button).
   .form-control is a fixed 50px (platform.css), but .btn padding is in em;
   with Our Bob's 120% root font size the button came out ~56px and hung
   below the input. Pin it to the input's height.
   ------------------------------------------------------------ */
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn {
    height: 50px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}

/* ------------------------------------------------------------
   AdSense units (DTS.JobBoard.Components/AdSlot.razor)
   ------------------------------------------------------------ */
.ad-slot {
    margin: 1.5rem 0;
    text-align: center;
}