/*
 * PMI Header — header.css v1.0.0
 *
 * Measurements from screenshot:
 *   height:        70px (inner content)
 *   bg:            #ffffff
 *   border-bottom: 1px solid #e8edf4
 *   position:      sticky top:0 (when enabled)
 *
 *   Badge: 32×32px, bg #0f2d58, white "P", font 16px 700
 *   Wordmark line1: "Project Management" 13px 700 #0f2d58
 *   Wordmark line2: "INSTITUTE UGANDA"   9px  700 #0f2d58 ls 0.08em uppercase
 *
 *   Nav links: 10.5px 700 uppercase ls 0.07em #0f2d58 gap 32px
 *   Multi-line links wrap naturally (STANDARDS &\nCERTIFICATIONS)
 *
 *   Outline btn: border 1px #0f2d58 color #0f2d58 bg white 10px 16px radius 4px 12px 600
 *   Solid btn:   bg #0f2d58 white text same sizing
 */

/* ── Scope ─────────────────────────────────────────────────────────────────── */
.pmihead,
.pmihead * {
  box-sizing: border-box;
}

/* ── Elementor isolation ────────────────────────────────────────────────────── */
.elementor-widget-pmi_header_nav .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmihead),
.e-con:has(.pmihead) {
  padding: 0 !important;
  --padding-top: 0 !important; --padding-bottom: 0 !important;
  --padding-left: 0 !important; --padding-right: 0 !important;
}

/* ── Header wrapper ─────────────────────────────────────────────────────────── */
.pmihead {
  background:    #ffffff;
  border-bottom: 1px solid #e8edf4;
  width:         100%;
  z-index:       1000;
}

/* Sticky variant */
.pmihead--sticky {
  position: sticky;
  top:      0;
}

/* ── Inner flex row ─────────────────────────────────────────────────────────── */
.pmihead__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          70px;               /* measured: ~70px */
  max-width:       1400px;
  margin:          0 auto;
  padding:         0 40px;
  gap:             32px;
}

/* ══════════════════════════════════════════════════════════════════
   LOGO BLOCK
   "P" badge + "Project Management / INSTITUTE UGANDA"
══════════════════════════════════════════════════════════════════ */
.pmihead__logo {
  display:         flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
  flex-shrink:     0;
}

/* Square navy badge with "P" */
.pmihead__badge {
  width:           32px;
  height:          32px;
  background:      #0f2d58;
  color:           #ffffff;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       16px;
  font-weight:     700;
  line-height:     32px;
  text-align:      center;
  border-radius:   3px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Wordmark text block */
.pmihead__wordmark {
  display:        flex;
  flex-direction: column;
  line-height:    1;
  gap:            2px;
}
.pmihead__wordmark-line1 {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      13px;
  font-weight:    700;
  color:          #0f2d58;
  letter-spacing: -0.005em;
  line-height:    1.15;
}
.pmihead__wordmark-line2 {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      8.5px;
  font-weight:    700;
  color:          #0f2d58;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height:    1;
}

.pmihead__logo:hover .pmihead__badge {
  background: #1a4a82;
}

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION
   Links are ~10.5px, 700 weight, ALL CAPS, navy color.
   Multi-word links wrap across 2 lines (natural break).
══════════════════════════════════════════════════════════════════ */
.pmihead__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.pmihead__nav-list {
  display:      flex;
  align-items:  center;
  gap:          28px;               /* measured: ~28-32px between items */
  list-style:   none;
  margin:       0;
  padding:      0;
  flex-wrap:    nowrap;
}

.pmihead__nav-item {
  list-style: none;
}

.pmihead__nav-link {
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       10.5px;
  font-weight:     700;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  color:           #0f2d58;
  text-decoration: none;
  line-height:     1.25;
  text-align:      center;
  display:         block;
  white-space:     normal;          /* allow natural 2-line wrap */
  max-width:       90px;            /* forces STANDARDS &\nCERTIFICATIONS wrap */
  transition:      color 0.15s ease, opacity 0.15s ease;
}

/* Single-word links don't need a max-width */
.pmihead__nav-link[data-single] {
  max-width: none;
  white-space: nowrap;
}

.pmihead__nav-link:hover {
  color:           #1a8fe8;
}

.pmihead__nav-link:focus-visible {
  outline:         2px solid #1a8fe8;
  outline-offset:  3px;
  border-radius:   2px;
}

/* Active state */
.pmihead__nav-link.is-active {
  color: #1a8fe8;
}

/* ══════════════════════════════════════════════════════════════════
   CTA BUTTONS
   Right side: [For Organizations (outline)] [Become a Member (solid)]
══════════════════════════════════════════════════════════════════ */
.pmihead__ctas {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

/* Base button */
.pmihead__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         9px 18px;
  border-radius:   4px;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       12px;
  font-weight:     600;
  line-height:     1;
  letter-spacing:  0.01em;
  white-space:     nowrap;
  text-decoration: none;
  cursor:          pointer;
  transition:
    background-color 0.18s ease,
    border-color     0.18s ease,
    color            0.18s ease;
}

/* Outline: white bg, navy border, navy text */
.pmihead__btn--outline {
  background: #ffffff;
  border:     1px solid #0f2d58;
  color:      #0f2d58;
}
.pmihead__btn--outline:hover {
  background: #f0f4f8;
}
.pmihead__btn--outline:focus-visible {
  outline:        2px solid #1a8fe8;
  outline-offset: 2px;
}

/* Solid: navy bg, white text */
.pmihead__btn--solid {
  background: #0f2d58;
  border:     1px solid #0f2d58;
  color:      #ffffff;
}
.pmihead__btn--solid:hover {
  background:   #1a4a82;
  border-color: #1a4a82;
}
.pmihead__btn--solid:focus-visible {
  outline:        2px solid #1a8fe8;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   HAMBURGER (mobile)
══════════════════════════════════════════════════════════════════ */
.pmihead__burger {
  display:     none;
  flex-direction: column;
  gap:         5px;
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     6px;
  flex-shrink: 0;
}
.pmihead__burger span {
  display:      block;
  width:        22px;
  height:       2px;
  background:   #0f2d58;
  border-radius: 2px;
  transition:   transform 0.25s ease, opacity 0.2s ease;
}
.pmihead__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pmihead__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pmihead__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER
══════════════════════════════════════════════════════════════════ */
.pmihead__mobile-nav {
  display:    none;
  background: #ffffff;
  border-top: 1px solid #e8edf4;
  padding:    16px 24px 24px;
}
.pmihead__mobile-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pmihead__mobile-nav li a {
  display:         block;
  padding:         12px 0;
  border-bottom:   1px solid #f0f4f8;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  color:           #0f2d58;
  text-decoration: none;
}
.pmihead__mobile-nav li a:hover { color: #1a8fe8; }
.pmihead__mobile-cta {
  background:    #0f2d58 !important;
  color:         #ffffff !important;
  border-radius: 4px;
  padding:       12px 18px !important;
  margin-top:    12px;
  text-align:    center;
  display:       block;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pmihead__inner        { padding: 0 24px; gap: 20px; }
  .pmihead__nav-list     { gap: 18px; }
  .pmihead__nav-link     { font-size: 9.5px; max-width: 80px; }
}

@media (max-width: 900px) {
  .pmihead__nav          { display: none; }
  .pmihead__ctas         { display: none; }
  .pmihead__burger       { display: flex; }
}

/* Mobile nav open state — toggled by JS */
.pmihead.nav-open .pmihead__mobile-nav { display: block; }

@media (max-width: 480px) {
  .pmihead__inner { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pmihead__burger span, .pmihead__btn { transition: none; }
}