/* Banner (page header) fix: 70vh was leaving huge empty space on simple content pages. Auto height + vertical centering + slightly bigger title for a cleaner, more confident job-platform look. */
.breadcrumb-cover {
  height: auto !important;
  min-height: 260px;
  display: flex;
  align-items: center;
}
.breadcrumb-cover .container { padding: 36px 0; }
.breadcrumb-cover .row { align-items: center; }
.breadcrumb-cover .breadcrumbs { margin-top: 0 !important; }
.breadcrumb-cover h2 { font-size: 32px; }
@media (max-width: 767px) {
  .breadcrumb-cover { min-height: 200px; }
  .breadcrumb-cover h2 { font-size: 24px; }
}
.section-box + .container .container.my-5 { margin-top: 12px !important; }
/* tighten-more */
.breadcrumb-cover { padding-top: 24px !important; padding-bottom: 24px !important; }
.section-box + .container > .mt-4 { margin-top: 0 !important; }
.section-box + .container .container.my-5 { margin-top: 0 !important; }
.section-box + .container .container.my-5 > .my-4:first-child { margin-top: 0 !important; }
/* fix parent section-box height */
section.section-box:has(.breadcrumb-cover) { height: auto !important; }
/* premium content redesign */
.op-page { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.op-section { margin: 56px 0; text-align: left; }
.op-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.op-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #05264E; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.op-section-title { color: #05264E; font-size: 24px; font-weight: 700; margin: 0; }
.op-section-desc { color: #526489; font-size: 16px; margin: 0 0 28px 46px; max-width: 780px; }
.op-cards { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.op-cards .col-md-4 { padding: 0 12px; margin-bottom: 24px; }
.op-card { height: 100%; background: #fff; border: 1px solid #ECEFF5; border-radius: 14px; padding: 28px 24px; text-align: left; transition: box-shadow .2s ease, transform .2s ease; }
.op-card:hover { box-shadow: 0 12px 28px rgba(5,38,78,0.08); transform: translateY(-2px); }
.op-icon { width: 52px; height: 52px; border-radius: 50%; background: #EAF1FB; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.op-icon img { width: 26px; height: 26px; object-fit: contain; }
.op-card h4 { color: #05264E; font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.op-card p { color: #526489; font-size: 14.5px; line-height: 1.6; margin: 0; }
.op-conclusion { background: #EAF1FB; border-radius: 16px; padding: 32px 36px; margin: 56px 0 24px; text-align: left; }
.op-conclusion h2 { color: #05264E; font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.op-conclusion p { color: #526489; font-size: 15.5px; line-height: 1.6; margin: 0; }
@media (max-width: 767px) {
  .op-section-desc { margin-left: 0; }
  .op-section-title { font-size: 20px; }
}
/* v2: value props, learn more, view all, banner copy */
.breadcrumb-cover .col-lg-6.text-md-end { text-align: left !important; }
.breadcrumb-cover .col-lg-6.text-md-end::before {
  content: "Discover practical strategies and essential resources to optimize your job search. From advanced search tools to networking and industry trends, we provide the guidance you need to find the right opportunities.";
  display: block;
  color: #526489;
  font-size: 15px;
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: 14px;
}
@media (max-width: 991px) {
  .breadcrumb-cover .col-lg-6.text-md-end::before { max-width: 100%; }
}

.op-props {
  max-width: 1120px; margin: -46px auto 48px; padding: 0 16px;
  position: relative; z-index: 2;
}
.op-props-inner, .op-props { display: flex; flex-wrap: wrap; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(5,38,78,0.08); padding: 22px 8px; }
.op-prop { flex: 1 1 220px; display: flex; align-items: flex-start; gap: 12px; padding: 8px 18px; border-right: 1px solid #EEF1F6; }
.op-prop:last-child { border-right: none; }
.op-prop-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #EAF1FB; color: #0B5FFF; display: flex; align-items: center; justify-content: center; }
.op-prop-icon svg { width: 20px; height: 20px; }
.op-prop h5 { margin: 0 0 4px; color: #05264E; font-size: 14.5px; font-weight: 700; }
.op-prop p { margin: 0; color: #526489; font-size: 12.5px; line-height: 1.4; }
@media (max-width: 767px) {
  .op-props { margin-top: 20px; }
  .op-prop { border-right: none; border-bottom: 1px solid #EEF1F6; flex: 1 1 100%; }
  .op-prop:last-child { border-bottom: none; }
}

.op-section-head { justify-content: space-between; }
.op-section-head .op-section-title { flex: none; }
.op-viewall { margin-left: auto; color: #0B5FFF; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.op-viewall:hover { text-decoration: underline; }
.op-viewall span { display: inline-block; transition: transform .15s ease; }
.op-viewall:hover span { transform: translateX(3px); }

.op-card { display: flex; flex-direction: column; }
.op-card p { flex: 1; }
.op-learnmore { display: inline-block; margin-top: 14px; color: #0B5FFF; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.op-learnmore:hover { text-decoration: underline; }

/* ===== Homepage (jobs-ultra) — mobile responsive redesign — 2026-09-04 ===== */
@media (max-width: 767px) {
  .jobs-ultra-page { padding-bottom: 110px !important; }

  /* Topbar: was stacking Alerts/Saved/Post Job full-width on mobile — now a compact single row */
  .jobs-ultra-topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
  }
  .jobs-ultra-brand { font-size: 1rem; }
  .jobs-action-group {
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .jobs-action-group .jobs-btn-ghost,
  .jobs-action-group .jobs-btn-primary {
    width: auto !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 0.78rem !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  .mj-preview-job-card { border-radius: 16px !important; }

  /* Floating AI dock: was a wide multi-label bar overlapping the scroll-to-top arrow — now compact icon-only, repositioned clear of it */
  .mj-dock { bottom: 92px !important; max-width: calc(100vw - 24px); }
  .mj-dock-content { padding: 6px !important; gap: 4px !important; }
  .mj-dock-content .mj-btn {
    width: 38px !important; height: 38px !important; padding: 0 !important;
    border-radius: 50% !important; justify-content: center !important;
    flex: none !important;
  }
  .mj-dock-content .mj-btn span { display: none !important; }

  /* Scroll-to-top arrow: now clearly visible, no longer hidden behind the dock */
  #scrollUp { bottom: 24px !important; right: 16px !important; z-index: 45 !important; }
}

/* ===== Homepage mobile — visual pass v2 (matches mockup styling; real data only) — 2026-09-04 ===== */
@media (max-width: 767px) {
  .mj-search-box { border-radius: 20px !important; box-shadow: 0 10px 30px rgba(15,23,42,0.08) !important; }
  .mj-pill.active { background: #e6f4ff !important; color: #007bc9 !important; border-color: #007bc9 !important; font-weight: 600; }
  .mj-stats { gap: 0 !important; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
  .mj-stat-card { border: none !important; border-radius: 0 !important; box-shadow: none !important; border-right: 1px solid #eef1f6 !important; text-align: center; }
  .mj-stat-card:last-child { border-right: none !important; }
  .mj-stat-value { color: #05264E; }
  .mj-preview-job-card { padding-left: 64px !important; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
  .mj-preview-job-card::before { content: "O"; position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #007bc9, #0060a0); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
  .opered-nl-card { display: none !important; }
  .opered-box-newsletter { background-image: none !important; background: linear-gradient(135deg, #0B5FFF, #05264E) !important; border-radius: 20px; }
}

/* ===== Homepage mobile — stat icons v3 — 2026-09-04 ===== */
@media (max-width: 767px) {
  .mj-stat-card {
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    text-align: left !important;
    padding: 14px 10px !important;
  }
  .mj-stat-card::before {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #e6f4ff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .mj-stats .mj-stat-card:nth-child(1)::before { content: "\1F465"; }
  .mj-stats .mj-stat-card:nth-child(2)::before { content: "\1F3E2"; }
  .mj-stats .mj-stat-card:nth-child(3)::before { content: "\23F1"; }
  .mj-stat-value { grid-column: 2; grid-row: 1; font-size: 17px !important; }
  .mj-stat-label { grid-column: 2; grid-row: 2; }
}

/* ===== Mobile hamburger menu — Indeed-style redesign — 2026-09-04 ===== */
@media (max-width: 767px) {
  .mobile-header-active { width: 86vw !important; max-width: 340px !important; box-shadow: -8px 0 30px rgba(0,0,0,0.15) !important; }
  .mobile-search { background: #f5f6f8 !important; border-radius: 8px !important; padding: 2px !important; }
  .mobile-search input { background: transparent !important; padding: 12px 16px 12px 40px !important; font-size: 15px !important; border-radius: 8px !important; }
  .mobile-search i { left: 16px !important; color: #64748b; }
  .mobile-menu > li { border-bottom: 1px solid #eef1f6 !important; padding: 0 !important; position: relative; }
  .mobile-menu > li > a { display: flex !important; align-items: center; width: 100%; padding: 15px 30px 15px 0 !important; font-size: 15px !important; font-weight: 600 !important; gap: 10px; color: #05264E !important; }
  .mobile-menu > li > .menu-expand { position: absolute !important; right: 0; top: 13px; }
  .mobile-menu .sub-menu li a { padding: 10px 0 10px 30px !important; font-size: 14px !important; font-weight: 400 !important; color: #526489 !important; }
  .mobile-menu-wrap > nav > .mobile-menu > li:nth-child(1) > a::before { content: "\1F3E2"; font-size: 15px; }
  .mobile-menu-wrap > nav > .mobile-menu > li:nth-child(2) > a::before { content: "\1F4BC"; font-size: 15px; }
  .mobile-menu-wrap > nav > .mobile-menu > li:nth-child(3) > a::before { content: "\1F464"; font-size: 15px; }
  .mobile-menu-wrap > nav > .mobile-menu > li:nth-child(4) > a::before { content: "\1F3EC"; font-size: 15px; }
  .mobile-account h6 { text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 0.05em; color: #8a97ab !important; font-weight: 700 !important; margin: 22px 0 6px !important; }
  .mobile-account .mobile-menu > li:last-child > a { color: #c0392b !important; }
  .burger-icon-top, .burger-icon-mid, .burger-icon-bottom { background: #05264E !important; height: 2px !important; border-radius: 2px; }
}

/* ===== Mobile hamburger menu — hide currency/language switcher — 2026-09-04 ===== */
@media (max-width: 767px) {
  .mobile-menu-switcher { display: none !important; }
}

/* ===== Mobile header — notification bell next to hamburger — 2026-09-04 ===== */
@media (max-width: 767px) {
  .header-nav .burger-icon { position: relative !important; }
  .header-nav .burger-icon::before {
    content: "\1F514";
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    line-height: 1;
    filter: grayscale(1) brightness(0.3);
  }
  .header-nav .burger-icon::after {
    content: "";
    position: absolute;
    right: 38px;
    top: calc(50% - 11px);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2f6fed;
    border: 2px solid #fff;
  }
}

/* ===== Mobile hero (mj-hero-employer-enhanced) — fix horizontal overflow: grid item was expanding to ~591px on a 375px viewport (min-content overflow), pushing search fields + filter pills off-screen — 2026-09-04 ===== */
@media (max-width: 767px) {
  .mj-hero-grid, .mj-hero-left, .mj-search-box, .mj-search-fields-grid, .mj-search-pills, .mj-hero-stats, .mj-hero-employer-enhanced .mj-container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .mj-search-fields-grid { grid-template-columns: 1fr !important; }
  .mj-search-pills { flex-wrap: wrap !important; }
}