/* ==========================================================================
   Careers page — theme
   Uses the same modern shell as About-Us.php / conference.php (headernew.php,
   Bootstrap 5, css/consulting.css's shared breadcrumb/report_heading rules)
   but keeps this page's own established accent colors (orange #db4223,
   red #f24735) rather than switching to the teal used elsewhere — those two
   colors are already used consistently across every section of this page
   (headings, buttons, culture text, benefits), so this is this page's own
   identity rather than a leftover to replace.

   This page previously ran on Bootstrap 3 + css/style.css (a large shared,
   minified stylesheet used by many older pages) + an ~820-line inline
   <style> block. headernew.php's mobile nav depends on real Bootstrap 5 CSS
   being loaded (it relies on Bootstrap's own ".navbar-expand-lg
   .navbar-toggler{display:none}" rule), and Bootstrap 3/5 define .container/
   .row/.col-*/.table/.modal too differently to safely load both on one page
   — so this page is now fully on Bootstrap 5, and every rule this page
   actually needs (including the handful that used to come from css/style.css
   — .content-box's section padding, .looking/.overvie's text styling, etc.)
   is defined below rather than assumed from that shared file.

   The breadcrumb link color and the apply-form's .field-error/.spinner/
   .form-toast come from procurement-sourcing-intelligence.css on the other
   redesigned pages — @import-ing that file here too was tried, but it's a
   large stylesheet built around the *teal* palette (buttons, cards, borders
   etc.), and pulling in all of it clashed with this page's own established
   orange/red identity throughout. The handful of rules this page actually
   needs are reproduced standalone below instead, in this page's own colors.
   ========================================================================== */

.rep_content {
    padding: 40px 0 60px;
}

/* ---------- Breadcrumb link color ----------
   Without this, "Home" (an <a>) fell back to the browser's default link-
   blue while the current-page text (a plain <span>) didn't, since nothing
   on this page's own stylesheet set a color for breadcrumb links. */
ol.breadcrumb.page-breadcrumb li a span,
ol.breadcrumb.page-breadcrumb li span {
    color: #566573;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease;
}
ol.breadcrumb.page-breadcrumb li a:hover span {
    color: #db4223;
}

/* ---------- Form feedback (apply-form validation) ---------- */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #db4223;
    border-radius: 50%;
    animation: careers-spin 1s linear infinite;
}
@keyframes careers-spin {
    to { transform: rotate(360deg); }
}
.field-error {
    display: none;
    color: #dc3545;
    font-size: .8rem;
    margin-top: 4px;
    font-weight: 500;
}
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .15) !important;
}
.form-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    z-index: 99999;
    max-width: 380px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
}
.form-toast--show {
    opacity: 1;
    transform: translateY(0);
}
.form-toast--success {
    background: #1a7f4b;
}
.form-toast--error {
    background: #c0392b;
}
.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ---------- Hero banner (cover.webp) ----------
   Full-width strip, image itself clearly visible (no dark overlay tint) —
   cover so it fills edge to edge with no letterboxing, at a wide/short box
   instead of the earlier tall contain version. Heading text gets a text-
   shadow instead of an overlay to stay legible against the photo.

   No `display` here on purpose: .desk_rpt_h1/.mob_rpt_h1 in consulting.css
   toggle which of .report_heading/.mob_report_heading is visible per screen
   size via display:none/block — a `display:flex` here (two classes) would
   out-specificity and cancel that toggle, showing both stacked at once
   regardless of viewport (which is exactly what happened). Centered with
   text-align + padding instead, same as every other page's .report_heading. */
.careers-hero .report_heading,
.careers-hero .mob_report_heading {
    position: relative;
    min-height: 320px;
    box-sizing: border-box;
    text-align: center;
    background-color: #17484a;
    background-image: url('../assets/images/careers/cover.webp');
    background-size: cover;
    background-position: center;
    padding: 130px 30px;
}

.careers-hero .report_heading h1,
.careers-hero .mob_report_heading h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

@media (max-width: 767px) {
    .careers-hero .report_heading,
    .careers-hero .mob_report_heading {
        min-height: 200px;
        padding: 75px 20px;
    }
}

/* ---------- "Why work with Stratview Research" ---------- */
.why-work-heading h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin: 0;
}

.why-work-heading .accent {
    color: #db4223;
}

.why-work-body p {
    font-size: 17px;
    color: #46545c;
    line-height: 1.8;
    margin-top: 16px;
}

.why-work-img img {
    border-radius: 12px;
}

/* ---------- Culture strip ---------- */
.culture-section {
    background: #f8fafc;
}

.culture-heading h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.culture-heading .accent {
    color: #db4223;
}

.culture-heading p {
    color: #757575;
    max-width: 760px;
    margin: 12px auto 0;
}

.culture-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

.culture-card h5 {
    color: #f24735;
    font-weight: 600;
    font-size: 17px;
    margin: 16px 0 8px;
}

.culture-card p {
    color: #46545c;
    line-height: 1.7;
}

/* ---------- Benefits strip ---------- */
.benefits-block {
    border: 2px solid #ebedec;
    border-radius: 12px;
    padding: 20px;
}

.benefits-label {
    font-family: 'Poppins', sans-serif;
    font-size: 46px;
    font-weight: 700;
    color: #d9dbda;
    border-top: 4px solid #d9dbda;
    border-bottom: 4px solid #d9dbda;
    padding: 12px 0;
    display: inline-block;
}

.benefit-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
    min-height: 170px;
    text-align: center;
}

.benefit-card img {
    width: 50px;
}

.benefit-card h4 {
    font-weight: 600;
    font-size: 15px;
    margin-top: 12px;
}

/* ---------- Current opportunities table ---------- */
.opportunities-heading h1 {
    font-weight: 700;
    font-size: 30px;
}

.opportunities-heading .accent {
    color: #db4223;
}

.opportunities-heading p {
    font-size: 18px;
    color: #757575;
}

.opportunities-table-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.opportunities-table th,
.opportunities-table td {
    text-align: center;
    vertical-align: middle;
    padding: 14px 10px !important;
}

.opportunities-table th {
    color: #db4223;
    font-size: 16px;
}

.opportunities-table tr.show_job_description {
    cursor: pointer;
}

.opportunities-table tr.show_job_description:hover {
    background: #fdf1ee;
}

.apply-btn {
    background: #db4223;
    color: #fff;
    border: none;
    padding: 8px 22px;
    border-radius: 6px;
    font-weight: 600;
}

.apply-btn:hover {
    background: #c23a1e;
    color: #fff;
}

/* ---------- Testimonials ---------- */
.testimonial-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.testimonial-heading h1 {
    font-size: 24px;
    font-weight: 700;
    color: #db4223;
    margin: 0;
}

.testimonial-heading .rule {
    flex: 1;
    max-width: 160px;
    border-top: 3px solid #f24735;
}

.box-callout {
    width: 100%;
}

.box-callout figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    height: 320px;
}

.box-callout figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .4s ease;
}

.box-callout figure:hover img {
    transform: scale(1.12);
}

.box-callout figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10%;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    background: rgba(23, 72, 74, .88);
    opacity: 0;
    transition: opacity .3s ease;
}

.box-callout figure:hover figcaption {
    opacity: 1;
}

.test-footer {
    text-align: left;
    border-left: 3px solid #db4223;
    padding-left: 16px;
    margin-top: 16px;
}

.test-footer h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.test-footer p {
    font-size: 14px;
    color: #757575;
    margin: 2px 0 0;
}

/* ---------- Glimpse CTA ---------- */
.glimpse-section-wrap {
    background: #fff;
}

.glimpse-block {
    position: relative;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgb(229 232 232 / 78%), rgb(254 255 255 / 78%)), url('../assets/images/careers/index-bottom.webp');
    background-size: cover;
    background-position: center;
    /* Light overlay now (was a dark teal tint) — white text would be
       unreadable against it, so this is dark instead. */
    color: #1b2834;
    text-align: center;
}

.glimpse-block h3 {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-size: 30px;
    font-weight: 700 !important;
    color: #1b2834;
    margin-bottom: 18px;
}

/* Dedicated class instead of the shared .btn-submit — that one's teal
   !important rule kept losing to something else on this page, rendering
   as an unstyled/orange pill instead. This is self-contained so there's
   nothing else for it to lose to. */
.glimpse-btn {
    display: inline-block;
    background: #17484a;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    transition: background .2s ease;
}

.glimpse-btn:hover {
    background: #123638;
    color: #fff;
}

/* ---------- Modals (job details + apply) ---------- */
.job-section h4 {
    color: #db4223;
    font-weight: 600;
}

.job-section ul {
    padding-left: 18px;
    margin: 0;
}

.job-section li {
    font-size: 15px;
    line-height: 1.9;
}

.apply-form .form-control {
    margin-bottom: 14px;
}

.apply-form .field-error {
    margin-top: -10px;
}

.upload-cv {
    background: #f8fafc;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    margin-bottom: 14px;
    transition: background .2s ease;
}

.upload-cv:hover {
    background: #f0eae7;
}

.upload-cv label {
    cursor: pointer;
    font-size: 14px;
    color: #46545c;
}

.find-us-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 10px 0 18px;
}

.find-us-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}