/* =============================================================
   GLOBAL EXPANSION LAB — COMPREHENSIVE UI FIXES  v2
   Applied directly to page-global-expansion-lab.php
   Scope: Limited to this page template
   ============================================================= */

/* Root variables */
:root {
  --gel-navbar-h: 64px;
  --gel-gap-desktop: 40px;
  --gel-gap-mobile: 20px;
}

/* ═════════════════════════════════════════════════════════════
   0. DESKTOP LAYOUT FIXES
   Insights panel alignment + CTA buttons + btn-outline-white
   ═════════════════════════════════════════════════════════════ */

/* Push insights-panel down on desktop so the Lead Score card
   visually aligns with the first workspace card (after step header) */
@media (min-width: 1101px) {
  .page-template-global-expansion-lab .insights-panel,
  #insights-panel {
    margin-top: 100px;
  }
}

/* CTA buttons: vertical-centre all buttons relative to each other */
.page-template-global-expansion-lab .cta-buttons {
  align-items: center;
}

/* btn-outline-white: lock SVG to consistent size, no text wrap on desktop */
.page-template-global-expansion-lab .btn-outline-white svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor;
  stroke-width: 1.8;
  flex-shrink: 0;
}

/* Unlock Full Report card: prevent any white bleed from ip-card bg */
.page-template-global-expansion-lab .unlock-report-section.ip-card {
  background: var(--navy) !important;
}

/* ═════════════════════════════════════════════════════════════
   1. REMOVE HAMBURGER / MOBILE MENU ICON
   (Never target .nav-toggle — that's the GEL sidebar trigger)
   ═════════════════════════════════════════════════════════════ */

.page-template-global-expansion-lab .nav-hamburger,
.page-template-global-expansion-lab .mobile-menu-toggle,
.page-template-global-expansion-lab .hamburger-menu,
.page-template-global-expansion-lab [class*="hamburger"]:not(.nav-toggle),
.page-template-global-expansion-lab [class*="mobile-nav-toggle"],
nav.site-nav .nav-hamburger {
  display: none !important;
}

/* ─── Always keep the GEL sidebar toggle visible ─── */
#ai-expansion-content .nav-toggle,
.page-template-global-expansion-lab nav .nav-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ═════════════════════════════════════════════════════════════
   2. REMOVE GREEN STATUS DOT FROM PROFILE AVATAR
   ═════════════════════════════════════════════════════════════ */

.page-template-global-expansion-lab .avatar-status,
.page-template-global-expansion-lab .status-dot,
.page-template-global-expansion-lab .online-indicator,
.page-template-global-expansion-lab .user-status,
.page-template-global-expansion-lab [class*="status-dot"],
.page-template-global-expansion-lab [class*="online-dot"],
.page-template-global-expansion-lab [class*="status-badge"],
/* Pseudo-element patterns */
.page-template-global-expansion-lab .user-avatar::after,
.page-template-global-expansion-lab .user-avatar::before,
.page-template-global-expansion-lab .profile-avatar::after,
.page-template-global-expansion-lab .profile-avatar::before,
.page-template-global-expansion-lab .avatar-wrapper::after,
.page-template-global-expansion-lab .avatar-wrapper::before {
  display: none !important;
  content: none !important;
}

/* ═════════════════════════════════════════════════════════════
   3. PROFILE AVATAR — ALWAYS VISIBLE + FUNCTIONAL
   ═════════════════════════════════════════════════════════════ */

.page-template-global-expansion-lab .user-avatar,
.page-template-global-expansion-lab .profile-avatar,
.page-template-global-expansion-lab .avatar-wrapper,
.page-template-global-expansion-lab .user-menu-trigger {
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

/* Desktop dropdown */
.page-template-global-expansion-lab .user-dropdown,
.page-template-global-expansion-lab .profile-dropdown,
.page-template-global-expansion-lab .user-menu-dropdown {
  display: none;
  position: absolute;
  right: 16px;
  top: calc(100% + 8px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  min-width: 260px;
  z-index: 10000;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.page-template-global-expansion-lab .user-dropdown.is-open,
.page-template-global-expansion-lab .profile-dropdown.is-open,
.page-template-global-expansion-lab .user-menu-dropdown.is-open {
  display: block;
}

/* Mobile: bottom-sheet */
@media (max-width: 768px) {
  .page-template-global-expansion-lab .user-dropdown,
  .page-template-global-expansion-lab .profile-dropdown,
  .page-template-global-expansion-lab .user-menu-dropdown {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    right: auto;
    width: 92%;
    max-width: 440px;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px 36px;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    animation: gel-sheet-in 0.22s ease-out both;
  }

  @keyframes gel-sheet-in {
    from { transform: translateX(-50%) translateY(40px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
  }
}

/* Backdrop */
.page-template-global-expansion-lab.profile-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 10000;
}

/* ═════════════════════════════════════════════════════════════
   4 & 5. FIX TOP SPACING — CONTENT MUST CLEAR NAVBAR
   ═════════════════════════════════════════════════════════════ */

.page-template-global-expansion-lab .app-wrapper,
.page-template-global-expansion-lab .content-grid,
.page-template-global-expansion-lab .workspace,
.page-template-global-expansion-lab .lab-main,
.page-template-global-expansion-lab main,
.page-template-global-expansion-lab .page-wrapper {
  padding-top: calc(var(--gel-navbar-h) + var(--gel-gap-desktop)) !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .page-template-global-expansion-lab .app-wrapper,
  .page-template-global-expansion-lab .content-grid,
  .page-template-global-expansion-lab .workspace,
  .page-template-global-expansion-lab .lab-main,
  .page-template-global-expansion-lab main,
  .page-template-global-expansion-lab .page-wrapper {
    padding-top: calc(var(--gel-navbar-h) + var(--gel-gap-mobile)) !important;
  }
}

/* Scroll anchor */
.page-template-global-expansion-lab {
  scroll-padding-top: var(--gel-navbar-h);
}

/* Step view inner spacing */
.page-template-global-expansion-lab .step-view {
  overflow: visible;
  padding-top: 0;
}

.page-template-global-expansion-lab .step-header {
  padding-top: 8px;
  margin-top: 0;
}

.page-template-global-expansion-lab .step-title {
  margin-top: 0;
  line-height: 1.3;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
}

.page-template-global-expansion-lab .step-description,
.page-template-global-expansion-lab .step-desc {
  margin-top: 8px;
}

@media (max-width: 480px) {
  .page-template-global-expansion-lab .step-title {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    word-break: break-word;
  }
}

/* ═════════════════════════════════════════════════════════════
   6. GENERAL RESPONSIVE CLEAN-UP
   ═════════════════════════════════════════════════════════════ */

.page-template-global-expansion-lab .card {
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 768px) {
  .page-template-global-expansion-lab input,
  .page-template-global-expansion-lab textarea,
  .page-template-global-expansion-lab select {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Mobile: single-column layout */
@media (max-width: 768px) {
  .page-template-global-expansion-lab .right-panel,
  .page-template-global-expansion-lab .insight-panel,
  .page-template-global-expansion-lab .lead-score-panel,
  .page-template-global-expansion-lab [class*="right-panel"],
  .page-template-global-expansion-lab [class*="insight-panel"] {
    display: none;
  }

  .page-template-global-expansion-lab .left-nav,
  .page-template-global-expansion-lab .step-nav,
  .page-template-global-expansion-lab [class*="left-nav"],
  .page-template-global-expansion-lab [class*="step-nav"] {
    display: none;
  }

  .page-template-global-expansion-lab .workspace {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-template-global-expansion-lab .content-grid {
    display: block !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Reset desktop margin-top so panel flows naturally below workspace */
  .page-template-global-expansion-lab .insights-panel,
  #insights-panel {
    margin-top: 0 !important;
  }

  /* CTA buttons: stack full-width on mobile, handle btn-outline-white */
  .page-template-global-expansion-lab .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .page-template-global-expansion-lab .cta-buttons .btn-primary,
  .page-template-global-expansion-lab .cta-buttons .btn-outline,
  .page-template-global-expansion-lab .cta-buttons .btn-outline-white {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   7. STABILITY — PREVENT DUPLICATE ELEMENTS
   ═════════════════════════════════════════════════════════════ */

.page-template-global-expansion-lab header:not(:first-of-type),
.page-template-global-expansion-lab .site-header:not(:first-of-type) {
  display: none !important;
}

/* ═════════════════════════════════════════════════════════════
   8. UNLOCK REPORT / EXPECTED MARGINS — SECTION SPACING
   ═════════════════════════════════════════════════════════════ */

/*
 * Base styles use .ip-card:last-child { margin-bottom: 0 }
 * and the ≤1100px breakpoint adds another margin-bottom: 0.
 * Both !important overrides below are intentional.
 */
.unlock-report-section {
  margin-top: 40px;
  margin-bottom: 40px !important;
  padding-bottom: 24px;
}

.expected-margin-section {
  margin-top: 40px;
}

.unlock-report-section .cta-button {
  margin-top: 16px;
}

@media (max-width: 1100px) {
  /* At this breakpoint content-grid becomes single-column and
     insights-panel drops below the workspace. Keep spacing. */
  .unlock-report-section {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px;
  }
  .expected-margin-section {
    margin-top: 24px;
  }
  /* Reset desktop margin-top — panel is now stacked below workspace */
  .page-template-global-expansion-lab .insights-panel,
  #insights-panel {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .unlock-report-section {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px;
  }
  .expected-margin-section {
    margin-top: 16px;
  }
}

/* ═════════════════════════════════════════════════════════════
   9. LEAD SCORE — SMOOTH TRANSITIONS FOR BAR + NUMBER
   ═════════════════════════════════════════════════════════════ */

.progress-bar-fill,
#lead-score-bar {
  transition: width 0.6s ease-out !important;
}

.lead-score-num,
#lead-score-number {
  transition: color 0.5s ease-out;
}