/**
 * ESLS header — nav-c corrective (N1.2)
 * All header presentation lives here. The header template JSON carries
 * structure only; no element-level custom_css remains (X-14 class of
 * failure: Elementor's custom_css emission channel is abandoned).
 * Pixel source: esls-nav-c-raw.html (approved prototype).
 *
 * @package esls-institutional-content
 * @since   0.3.16 (structure) / 0.3.17 (kit-fight hardening: all contested
 *          paint/typography/spacing declarations carry !important — the ESLS
 *          kit ships unbranded EIASM-teal globals that beat plugin-specificity
 *          rules; see N1.2.1 deploy note)
 */

/* ═════════════════════════════════════════════════════════════════════
   §1. Header shell
   ═════════════════════════════════════════════════════════════════════ */
#esls-site-header {
  box-sizing: border-box;
  background:var(--esls-cream-primary, #FBF8F1) !important;
  border-bottom:1px solid var(--esls-border-warm, #D4C9A8) !important;
  z-index: 50;
  max-width: 100vw;
  min-height: 64px;
}
/* Bar locked to the prototype's 64px (mirrors the template's
   min-height 64 / padding 0 controls). */
#esls-site-header > .e-con-boxed {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 64px;
}
#esls-site-header > .e-con-boxed > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 64px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* Bar groups (wordmark | menu+CTA+burger): row, centered — mirrors controls. */
#esls-site-header > .e-con-boxed > .e-con-inner > .e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: auto !important;
  min-height: 0 !important;
}
#esls-site-header > .e-con-boxed > .e-con-inner > .e-con:has(.esls-mburger-w) {
  gap:0 24px !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §2. Wordmark  (prototype .wm)
   ═════════════════════════════════════════════════════════════════════ */
.esls-wordmark .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing:-0.01em !important;
  color: var(--esls-blue-900, #062B3D) !important;
  position: relative;
  display: inline-block;
  margin: 0 !important;
}
.esls-wordmark .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 36px;
  bottom: -4px;
  width: 40px;
  height: 4px;
  background:var(--esls-orange-400, #E87722) !important;
  border-radius:1px !important;
}
.esls-wordmark a {
  text-decoration: none !important;
  color: inherit !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §3. Desktop mega menu widget  (prototype .nv)
   ═════════════════════════════════════════════════════════════════════ */
.esls-nav-mega .e-n-menu-title-text {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
@media (max-width: 1024px) {
  .esls-nav-mega { display: none !important; }
}

/* Panel sits inside the n-menu content container; strip its chrome. */
.esls-nav-mega .e-n-menu-content > .e-con,
.esls-nav-mega .e-n-menu-content .e-con-inner {
  padding:0 !important;
  background:transparent !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §4. Programmes panel  (prototype .pnl)
   ═════════════════════════════════════════════════════════════════════ */
.esls-nav-panel,
.esls-nav-panel *,
.esls-mdrawer,
.esls-mdrawer * {
  box-sizing: border-box;
}
.esls-nav-panel {
  width: min(920px, calc(100vw - 48px)) !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background:var(--esls-cream-primary, #FBF8F1) !important;
  border:1px solid var(--esls-border-warm, #D4C9A8) !important;
  border-radius:16px !important;
  overflow: hidden;
  box-shadow: var(--shadow-xl, 0 24px 48px rgba(26, 26, 46, .12));
}

/* Left zone — degrees list  (prototype .lz) */
.esls-nav-panel > .esls-nav-degrees {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 26px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Right zone — dark start card  (prototype .rz) */
.esls-nav-panel > .esls-nav-start {
  flex: 0 0 330px !important;
  width: 330px !important;
  max-width: 330px !important;
  margin: 0 !important;
  padding: 24px 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: var(--esls-blue-900, #062B3D) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* §4.1 Eyebrow */
.esls-nav-eyebrow .elementor-heading-title {
  font:600 11px/1 'Source Sans 3', system-ui, sans-serif !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--esls-text-tertiary, #7A6A4A) !important;
  margin:0 0 4px !important;
}

/* §4.2 Degree rows  (prototype .rw)
   Rest state transparent — hover-only fill (X-12). */
.esls-nav-panel .esls-nav-row {
  position: relative;
  align-self: stretch;
  width: auto !important;
  max-width: none !important;
  border-radius:10px !important;
  padding:15px 36px 15px 70px !important;
  margin:0 -12px !important;
  background: transparent !important;
}
.esls-nav-panel .esls-nav-row:hover {
  background: var(--esls-cream-alt, #F2EDE0) !important;
}
.esls-nav-panel .esls-nav-row + .esls-nav-row {
  border-top:1px solid var(--esls-border-warm, #D4C9A8) !important;
}

/* Icon tile + glyph (mask) */
.esls-nav-row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius:10px !important;
  background:var(--esls-orange-50, #FDEAD7) !important;
}
.esls-nav-row::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background:var(--esls-orange-600, #B85B10) !important;
  -webkit-mask: var(--esls-nav-ico) center/22px 22px no-repeat;
  mask: var(--esls-nav-ico) center/22px 22px no-repeat;
}
.esls-nav-row--bba { --esls-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 7v14' /%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /%3E%3C/svg%3E"); }
.esls-nav-row--mba { --esls-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16' /%3E%3Crect width='20' height='14' x='2' y='6' rx='2' /%3E%3C/svg%3E"); }
.esls-nav-row--dba { --esls-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Ccircle cx='12' cy='12' r='6' /%3E%3Ccircle cx='12' cy='12' r='2' /%3E%3C/svg%3E"); }

/* Row text */
.esls-nav-row .elementor-icon-box-title {
  font:600 15px/1.3 'Source Sans 3', system-ui, sans-serif !important;
  color:var(--esls-text-primary, #1A1A2E) !important;
  margin:0 !important;
  text-align:left !important;
}
.esls-nav-row .elementor-icon-box-title a {
  color:inherit !important;
  text-decoration:none !important;
}
/* Full-row click target */
.esls-nav-row .elementor-icon-box-title a::before {
  content: "";
  position: absolute;
  inset: 0;
}
/* Trailing arrow  (prototype .arr) */
.esls-nav-row .elementor-icon-box-title::after {
  content: "\2192";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font:600 16px/1 'Source Sans 3', system-ui, sans-serif !important;
  color:var(--esls-text-tertiary, #7A6A4A) !important;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.esls-nav-row:hover .elementor-icon-box-title::after {
  color:var(--esls-orange-400, #E87722) !important;
  transform: translateY(-50%) translateX(3px);
}
.esls-nav-row .elementor-icon-box-description {
  font:400 13px/1.4 'Source Sans 3', system-ui, sans-serif !important;
  color:var(--esls-text-secondary, #555555) !important;
  margin:2px 0 0 !important;
  text-align:left !important;
}

/* §4.3 Hub bar  (prototype .hub) */
.esls-nav-hub { margin:10px -26px -16px !important; }
.esls-nav-hub .elementor-heading-title {
  font:600 13.5px/1.35 'Source Sans 3', system-ui, sans-serif !important;
  margin:0 !important;
}
.esls-nav-hub .elementor-heading-title a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:12px !important;
  padding:14px 26px !important;
  border-top:1px solid var(--esls-border-warm, #D4C9A8) !important;
  background:var(--esls-cream-alt, #F2EDE0) !important;
  color:var(--esls-text-primary, #1A1A2E) !important;
  text-decoration:none !important;
}
.esls-nav-hub .elementor-heading-title a em {
  font-style:normal !important;
  font-weight:400 !important;
  color:var(--esls-text-secondary, #555555) !important;
}
.esls-nav-hub .elementor-heading-title a::after {
  content: "\2192";
  font-weight:600 !important;
  color:var(--esls-text-tertiary, #7A6A4A) !important;
}
.esls-nav-hub .elementor-heading-title a:hover,
.esls-nav-hub .elementor-heading-title a:hover::after {
  color:var(--esls-orange-400, #E87722) !important;
}

/* §4.4 Start card content  (prototype .rz internals) */
.esls-nav-badge .elementor-heading-title {
  display: inline-block;
  align-self: flex-start;
  font:700 11px/1 'Source Sans 3', system-ui, sans-serif !important;
  letter-spacing:.1em !important;
  color:var(--esls-blue-900, #062B3D) !important;
  background:var(--esls-orange-50, #FDEAD7) !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  margin:0 !important;
}
.esls-nav-start-h .elementor-heading-title {
  font:600 21px/1.25 'Fraunces', Georgia, serif !important;
  color:#FFFFFF !important;
  margin:12px 0 8px !important;
}
.esls-nav-start-p p {
  font:400 13.5px/1.5 'Source Sans 3', system-ui, sans-serif !important;
  color:rgba(250, 248, 243, 0.82) !important;
  margin:0 0 16px !important;
}

/* Orange CTA button (shared: panel card, drawer card, drawer footer) */
.esls-nav-start-cta .elementor-button {
  display: block;
  width: 100%;
  font: 600 14px/1 'Source Sans 3', system-ui, sans-serif !important;
  color: #FFFFFF !important;
  background-color: var(--esls-orange-400, #E87722) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  text-align:center !important;
  box-shadow: none !important;
}
.esls-nav-start-cta .elementor-button:hover,
.esls-nav-start-cta .elementor-button:focus {
  background-color: var(--esls-orange-600, #B85B10) !important;
  color: #FFFFFF !important;
}

/* Certificate ladder  (prototype .lad) */
.esls-nav-lad-b .elementor-heading-title {
  font:600 10.5px/1 'Source Sans 3', system-ui, sans-serif !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(250, 248, 243, 0.55) !important;
  border-top:1px solid rgba(250, 248, 243, 0.18) !important;
  padding-top:14px !important;
  margin:18px 0 8px !important;
}
.esls-nav-chips p {
  margin:0 !important;
  display: flex;
  gap:6px !important;
  flex-wrap: wrap;
  align-items: center;
}
/* Nav-scoped chip; distinct class avoids the pattern-library
   .esls-chip collision (X-10 root cause). */
.esls-nav-chip {
  font:600 11.5px/1 'Source Sans 3', system-ui, sans-serif !important;
  color:var(--esls-text-on-dark, #FAF8F3) !important;
  background:transparent !important;
  border:1px solid rgba(250, 248, 243, 0.3) !important;
  border-radius:999px !important;
  padding:5px 9px !important;
}
.esls-nav-pw .elementor-heading-title {
  font:600 12.5px/1 'Source Sans 3', system-ui, sans-serif !important;
  margin:11px 0 0 !important;
}
.esls-nav-pw .elementor-heading-title a {
  color:var(--esls-orange-400, #E87722) !important;
  text-decoration:none !important;
}
.esls-nav-pw .elementor-heading-title a:hover { color:#FFFFFF !important; }

/* ═════════════════════════════════════════════════════════════════════
   §5. Mobile burger  (prototype .burg) — hard reset beats kit theme-style
   button rules (X-13).
   ═════════════════════════════════════════════════════════════════════ */
button.esls-mburger {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--esls-blue-900, #062B3D) !important;
  cursor: pointer;
  line-height:0 !important;
}
button.esls-mburger svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: none;
}

/* ═════════════════════════════════════════════════════════════════════
   §6. Mobile drawer  (prototype .dw) — reveal rules live here, not in
   Elementor custom_css (X-14). Scroll lock is applied by esls-header.js
   via body inline style.
   ═════════════════════════════════════════════════════════════════════ */
.esls-mdrawer {
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 49;
  background: var(--esls-cream-primary, #FBF8F1) !important;
  overflow-y: auto;
  padding: 0 !important;
  gap: 0 !important;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility .25s;
}
body.esls-nav-open .esls-mdrawer {
  transform: none;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .esls-mdrawer { transition: none; }
}
@media (min-width: 1025px) {
  .esls-mdrawer { display: none !important; }
}

/* §6.1 Top-level drawer rows  (prototype .m-it) */
.esls-mdrawer .esls-mit .elementor-heading-title {
  font:500 17px/1 'Source Sans 3', system-ui, sans-serif !important;
  margin:0 !important;
}
.esls-mdrawer .esls-mit .elementor-heading-title a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:16px 20px !important;
  color:var(--esls-text-primary, #1A1A2E) !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--esls-border-warm, #D4C9A8) !important;
}
.esls-mdrawer .esls-mit .elementor-heading-title a:hover {
  color:var(--esls-orange-400, #E87722) !important;
}

/* §6.2 Programmes group + accordion  (prototype .m-grp) */
.esls-mgrp {
  border-bottom:1px solid var(--esls-border-warm, #D4C9A8) !important;
  padding: 0 !important;
  gap: 0 !important;
}
.esls-mgrp-h {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
}
.esls-mgrp-h .esls-mit {
  flex: 1 1 auto;
  width: auto !important;
}
.esls-mgrp-h .esls-mit .elementor-heading-title a { border-bottom:0 !important; }
.esls-mtgl-w {
  width: auto !important;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}
button.esls-mtgl {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--esls-border-warm, #D4C9A8) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 56px;
  display: grid;
  place-items: center;
  color: var(--esls-blue-900, #062B3D) !important;
  cursor: pointer;
}
.esls-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right:1.5px solid currentColor !important;
  border-bottom:1.5px solid currentColor !important;
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.esls-mgrp.esls-open .esls-mtgl .esls-caret { transform: rotate(225deg); }

/* Accordion body  (prototype .m-acc) — closed until the group opens */
.esls-macc {
  display: none !important;
  background: var(--esls-cream-alt, #F2EDE0) !important;
  border-top:1px solid var(--esls-border-warm, #D4C9A8) !important;
  padding: 6px 20px 18px !important;
  gap: 0 !important;
}
.esls-mgrp.esls-open .esls-macc {
  display: flex !important;
  flex-direction: column;
}

/* §6.3 Accordion content  (prototype .m-drw / .m-hub / .m-card) */
.esls-mrow {
  padding:12px 0 !important;
  border-bottom:1px solid var(--esls-border-warm, #D4C9A8) !important;
  background: transparent !important;
}
.esls-mrow .elementor-icon-box-title {
  font:600 15px/1.3 'Source Sans 3', system-ui, sans-serif !important;
  color:var(--esls-text-primary, #1A1A2E) !important;
  margin:0 !important;
  text-align:left !important;
}
.esls-mrow .elementor-icon-box-title a {
  color:inherit !important;
  text-decoration:none !important;
}
.esls-mrow .elementor-icon-box-description {
  font:400 13px/1.4 'Source Sans 3', system-ui, sans-serif !important;
  color:var(--esls-text-secondary, #555555) !important;
  margin:2px 0 0 !important;
  text-align:left !important;
}
.esls-mhub .elementor-heading-title {
  font:600 13.5px/1.4 'Source Sans 3', system-ui, sans-serif !important;
  margin:0 !important;
  padding:13px 0 2px !important;
}
.esls-mhub .elementor-heading-title a {
  color:var(--esls-text-primary, #1A1A2E) !important;
  text-decoration:none !important;
}
.esls-mhub .elementor-heading-title a::after {
  content: " \2192";
  color:var(--esls-orange-400, #E87722) !important;
}
.esls-mhub .elementor-heading-title a:hover {
  color:var(--esls-orange-400, #E87722) !important;
}
.esls-mcard {
  background: var(--esls-blue-900, #062B3D) !important;
  border-radius:12px !important;
  padding: 18px !important;
  margin: 16px 0 2px !important;
  gap: 0 !important;
  align-items: stretch !important;
}
.esls-mcard .esls-nav-start-h .elementor-heading-title {
  font:600 18px/1.25 'Fraunces', Georgia, serif !important;
  color:#FFFFFF !important;
  margin:10px 0 6px !important;
}
.esls-mcard .esls-nav-start-p p {
  font:400 13px/1.5 'Source Sans 3', system-ui, sans-serif !important;
  color:rgba(250, 248, 243, 0.82) !important;
  margin:0 0 14px !important;
}

/* §6.4 Drawer footer CTA + note  (prototype .m-cta / .m-note) */
.esls-mdrawer .esls-mcta { margin: 18px 20px 6px !important; width: auto !important; }
.esls-mnote .elementor-heading-title {
  font:400 12px/1.4 'Source Sans 3', system-ui, sans-serif !important;
  color:var(--esls-text-tertiary, #7A6A4A) !important;
  text-align:center !important;
  margin:8px 20px 24px !important;
}