/**
 * LMIS Government Design System — Layout
 * Header & Footer visual redesign (scoped).
 */

/* ========== Government Header ========== */
.gov-header#header,
#header.gov-header {
  z-index: var(--gov-z-header);
}

.gov-header .gov-header-shell {
  background: linear-gradient(180deg, var(--gov-primary-dark) 0%, var(--gov-primary) 100%);
  box-shadow: var(--gov-shadow-header);
  position: relative;
  z-index: var(--gov-z-header);
}

/* Landing header previously used absolute positioning over hero */
.gov-header .gov-header-shell.gov-header-landing {
  position: relative;
  left: auto;
  right: auto;
  z-index: var(--gov-z-header);
}

.gov-header .bkg-hdr,
.gov-header .bkg-hdr-home,
.gov-header .bkg-hdr-sub,
.gov-header .bkg-job {
  background-image: none !important;
  background-color: transparent !important;
}

.gov-header .gov-brand-bar {
  padding: var(--gov-space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.gov-header .gov-brand-bar .navbar-brand {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.gov-header .gov-brand-bar .navbar-brand img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.gov-header .gov-mosal-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.gov-header .logo-sub,
.gov-header .gov-mosal-brand .logo-sub {
  max-height: 52px;
  max-width: min(280px, 36vw);
  width: auto;
  height: auto;
  margin-bottom: 0 !important;
  margin-inline-end: var(--gov-space-4);
  object-fit: contain;
}

.gov-header .gov-brand-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gov-space-3);
}

.gov-header .hdr-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gov-space-2);
}

.gov-header .hdr-nav a {
  color: var(--gov-on-primary);
  font-size: var(--gov-fs-sm);
  text-decoration: none;
}

/* Language switcher is hidden from the public UI */
.gov-header .lang,
.gov-header a.lang,
.gov-header #locale-form-ar,
.gov-header #locale-form-en,
.gov-header form[action*="set-locale"] {
  display: none !important;
}

.gov-header .hdr-nav .btn-sm {
  padding: 0.4rem 0.9rem;
  border-radius: var(--gov-radius);
  font-size: var(--gov-fs-sm);
  line-height: 1.3;
  white-space: nowrap;
}

.gov-header .user-profile-btn {
  color: var(--gov-on-primary) !important;
  gap: var(--gov-space-2);
}

.gov-header .user-prof-name {
  font-size: var(--gov-fs-sm);
  font-weight: var(--gov-fw-medium);
}

/* Main navigation bar */
.gov-header .gov-main-nav,
.gov-header .navbar.bg-dark {
  background-color: var(--gov-primary-dark) !important;
  --bs-navbar-color: rgba(255, 255, 255, 0.9);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  min-height: var(--gov-nav-h);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gov-header .navbar .navbar-brand img {
  max-height: 40px;
  width: auto;
}

.gov-header .navbar-nav > .nav-item > .nav-link,
.gov-header .navbar-nav > .nav-item > a.nav-link,
.gov-header .gov-main-nav .navbar-nav .nav-link {
  color: #ffffff !important;
  font-size: var(--gov-fs-sm);
  font-weight: var(--gov-fw-medium);
  padding: 0.65rem 0.9rem !important;
  border-radius: var(--gov-radius-sm);
}

.gov-header .navbar-nav > .nav-item > .nav-link .menu-title,
.gov-header .gov-main-nav .navbar-nav > .nav-item > .nav-link {
  color: #ffffff !important;
}

.gov-header .navbar-nav > .nav-item > .nav-link:hover,
.gov-header .navbar-nav > .nav-item > .nav-link:focus,
.gov-header .navbar-nav > .nav-item.active > .nav-link,
.gov-header .navbar-nav > .nav-item > .nav-link.active,
.gov-header .navbar-nav > .nav-item.show > .nav-link {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.14);
}

/* Dropdown panels: light surface + dark text (never white-on-white) */
.gov-header .dropdown-menu,
.gov-header .navbar .dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: var(--gov-text);
  --bs-dropdown-link-color: var(--gov-primary-dark);
  --bs-dropdown-link-hover-color: var(--gov-primary-dark);
  --bs-dropdown-link-hover-bg: var(--lighter-blue-color);
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: var(--gov-primary);
  background-color: #ffffff !important;
  color: var(--gov-text) !important;
  border: 1px solid var(--gov-border);
  box-shadow: var(--gov-shadow);
}

.gov-header .dropdown-menu .dropdown-item,
.gov-header .dropdown-menu .nav-link,
.gov-header .dropdown-menu a,
.gov-header .dropdown-menu .menu-title,
.gov-header .dropdown-menu h4,
.gov-header .dropdown-menu li,
.gov-header .dropdown-menu span {
  color: var(--gov-primary-dark) !important;
}

.gov-header .dropdown-menu .dropdown-item:hover,
.gov-header .dropdown-menu .dropdown-item:focus,
.gov-header .dropdown-menu .nav-link:hover,
.gov-header .dropdown-menu a:hover {
  background-color: var(--lighter-blue-color) !important;
  color: var(--gov-primary-dark) !important;
}

.gov-header .dropdown-menu .dropdown-item.active,
.gov-header .dropdown-menu .nav-link.active {
  background-color: var(--gov-primary) !important;
  color: #ffffff !important;
}

.gov-header .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.4rem 0.55rem;
}

.gov-header .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(196, 163, 90, 0.35);
}

.gov-header .navbar-toggler-icon {
  filter: invert(1) grayscale(100%);
}

/* Sticky state */
.gov-header.bg-sticky .gov-header-shell,
#header.bg-sticky .gov-header-shell {
  box-shadow: var(--gov-shadow-md);
}

/* Mobile off-canvas nav: overlays content, does not push the page */
.gov-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(8, 63, 42, 0.45);
}

body.gov-nav-open {
  overflow: hidden;
}

.gov-nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gov-space-4);
  padding-bottom: var(--gov-space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.gov-nav-panel-title {
  color: #ffffff;
  font-weight: var(--gov-fw-semibold);
}

@media (max-width: 1199.98px) {
  .gov-header .navbar-collapse.gov-nav-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1050;
    width: min(20rem, 88vw);
    height: 100vh !important;
    max-height: 100vh;
    margin: 0 !important;
    padding: var(--gov-space-4);
    overflow-y: auto;
    background-color: var(--gov-primary-dark) !important;
    border: 0;
    border-radius: 0;
    box-shadow: var(--gov-shadow-md);
  }

  html[dir="rtl"] .gov-header .navbar-collapse.gov-nav-panel,
  .rtl .gov-header .navbar-collapse.gov-nav-panel {
    right: 0;
    left: auto;
  }

  html[dir="ltr"] .gov-header .navbar-collapse.gov-nav-panel,
  .ltr .gov-header .navbar-collapse.gov-nav-panel {
    left: 0;
    right: auto;
  }

  .gov-header .navbar-nav > .nav-item > .nav-link {
    padding: 0.85rem 0.9rem !important;
    color: #ffffff !important;
  }

  .gov-header .hdr-nav.border-top {
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  .gov-header .gov-nav-panel .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin-top: 0.35rem;
    box-shadow: none;
  }
}

/*
 * Landing header is no longer position:absolute over the hero.
 * Legacy .masthead used padding-top:130px to clear the overlay — reduce it.
 */
.gov-header + .masthead,
.gov-header + .masthead-jobs {
  padding-top: var(--gov-space-10);
}

/*
 * Legacy .home-search .form { margin-top: -90px } pulls the bar up over a hero.
 * With the sticky government header that overlaps the bar on pages without a
 * masthead (training, research). Invert the default; keep the pull-up only
 * when a masthead precedes the search.
 */
.home-search .form,
.home-search.gov-search-static .form,
.home-search.bkg-none .form {
  margin-top: 0 !important;
}

.home-search.bkg-none,
.home-search.gov-search-static,
.gov-header + .home-search {
  padding-top: var(--gov-space-8);
  padding-bottom: var(--gov-space-4);
}

.masthead + .home-search .form,
.masthead-jobs + .home-search .form {
  margin-top: -90px !important;
}

.masthead + .home-search,
.masthead-jobs + .home-search {
  padding-top: 0;
  padding-bottom: 0;
}

.gov-header + .masthead .hero,
.gov-header + .masthead-jobs .hero {
  min-height: 360px;
  height: 42vh;
}

@media (min-width: 1200px) {
  .gov-header + .masthead .hero,
  .gov-header + .masthead-jobs .hero {
    height: 48vh;
  }
}

/*
 * Job-platform hero: government-green asset + soft green wash
 * (replaces the legacy blue-tinted skyline).
 */
.masthead-jobs {
  position: relative;
  padding-top: var(--gov-space-10);
  background-color: var(--gov-primary-dark) !important;
  background-image: url("../../images/hero-jobs-gov.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

.masthead-jobs::before,
.gov-header + .masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(8, 63, 42, 0.55) 0%,
    rgba(11, 92, 59, 0.35) 55%,
    rgba(26, 122, 86, 0.2) 100%
  );
}

.masthead-jobs .container,
.masthead-jobs .hero,
.masthead-jobs .hero-text {
  position: relative;
  z-index: 2;
}

.masthead-jobs .hero-text,
.masthead .hero-text {
  color: var(--gov-on-primary);
}

/* ========== Government Footer ========== */
.gov-footer.footer,
footer.gov-footer {
  background-color: var(--gov-primary-dark) !important;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
  color: rgba(255, 255, 255, 0.92);
  padding-top: var(--gov-space-12);
  padding-bottom: var(--gov-space-8);
  margin-top: 0;
}

.gov-footer,
.gov-footer h5,
.gov-footer a,
.gov-footer p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.gov-footer h5 {
  font-size: var(--gov-fs-md);
  font-weight: var(--gov-fw-semibold) !important;
  margin-bottom: var(--gov-space-4);
  color: #ffffff !important;
  position: relative;
  padding-bottom: var(--gov-space-2);
}

.gov-footer h5::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--gov-accent);
  margin-top: var(--gov-space-2);
}

.gov-footer a:hover {
  color: var(--gov-accent) !important;
}

.gov-footer a.gov-mosal-copy {
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gov-footer a.gov-mosal-copy:hover {
  color: var(--gov-accent) !important;
}

/* MoSAL crest in footer brand block (CMS HTML rewritten at render time) */
.gov-footer img[src*="mosal-logo"] {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.gov-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gov-footer ul li {
  margin-bottom: var(--gov-space-2);
}

.gov-footer .form-control {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.gov-footer .form-control::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.gov-footer .btn-secondary {
  background-color: var(--gov-accent) !important;
  border-color: var(--gov-accent) !important;
  color: var(--gov-on-accent) !important;
  font-weight: var(--gov-fw-semibold);
  border-radius: var(--gov-radius);
}

.gov-footer .gov-footer-links,
.gov-footer .v-f-link,
.gov-footer .v-f-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gov-space-3) var(--gov-space-5);
  align-items: center;
}

.gov-footer .gov-footer-meta,
.gov-footer .border-top.border-bottom {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.gov-footer .gov-footer-bottom {
  margin-top: var(--gov-space-6);
  padding-top: var(--gov-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.gov-footer .gov-footer-bottom p {
  margin-bottom: 0;
  font-size: var(--gov-fs-sm);
  color: rgba(255, 255, 255, 0.8) !important;
}

.gov-footer img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

/* Public page title strip foundation */
.gov-page-head {
  background: var(--gov-primary);
  color: var(--gov-on-primary);
  padding: var(--gov-space-6) 0;
}

.gov-page-head h1 {
  color: var(--gov-on-primary);
  margin-bottom: var(--gov-space-2);
  font-size: var(--gov-fs-2xl);
}

.gov-content {
  padding-top: var(--gov-space-8);
  padding-bottom: var(--gov-space-12);
}