/* Constrata Custom Header – responsive, simple, fits canvas UI */
:root{
  --cch-bg: #ffffff;
  --cch-font-size: 16px;
  --cch-height: 60px;
  --cch-border: #e6e7eb;
  --cch-text: #1f2937;
  --cch-muted: #6b7280;
  --cch-accent: #2b6cb0; /* close to WP/admin blue */
  --cch-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  --cch-radius: 14px;
  --cch-padY: 10px;
  --cch-padX: 18px;
}

.cch-header{
  background: var(--cch-bg);
  border-bottom: 1px solid var(--cch-border);
  box-shadow: var(--cch-shadow);
  padding: var(--cch-padY) var(--cch-padX) !important;
  margin: 10px 16px;
  border-radius: var(--cch-radius);
  position: relative;
  z-index: 1000;
}

.cch-sticky{
  position: sticky;
  top: 8px;
}

.cch-inner{
  height: auto !important;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cch-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.cch-brand img{ height: min(28px, calc(var(--cch-height) - 12px)); display:block; }
.cch-brand-text{
  font-size: calc(var(--cch-font-size) + 2px);
  font-weight: 800;
  font-size: 18px;
  color: var(--cch-text);
  letter-spacing: .3px;
}

.cch-burger{
  display:none;
  width: clamp(28px, calc(var(--cch-height) - 6px), 40px); height: clamp(24px, calc(var(--cch-height) - 8px), 36px);
  align-items:center;justify-content:center;
  border:1px dashed #d5d7de;border-radius:12px;background:#fff;
}
.cch-burger span{display:block;width:18px;height:2px;background:#374151;margin:2px 0;border-radius:1px;}

.cch-nav{margin-left: auto;margin-right: auto;}
.cch-menu-list{
  list-style:none;margin:0;padding:0;display:flex;gap:22px;align-items:center;
}
.cch-menu-list a{
  font-size: var(--cch-font-size);
  text-decoration:none;
  color: var(--cch-text);
  font-weight:600;
  padding:8px 10px;
  border-radius:10px;

  padding-block: clamp(2px, (var(--cch-height) - 24px)/2, 10px) !important;
  line-height: 1 !important;
}
.cch-menu-list a:hover{
  background: #f4f6fb;
}

.cch-user{display:flex;align-items:center;gap:12px;margin-left:auto;}
.cch-login-btn{
  padding:8px 14px;border-radius:12px;border:1px dashed #d5d7de;background:#fff;text-decoration:none;font-weight:600;color:#374151;
}
.cch-login-btn:hover{ background:#f9fafb; }

.cch-user-dropdown{ position: relative; }
.cch-user-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font-weight:700;color:#111827;
}
.cch-user-menu{
  position:absolute;right:0;top:110%;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:var(--cch-shadow);
  min-width:140px;padding:8px 6px;display:none;
}
.cch-user-menu a{
  display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:#111827;
}
.cch-user-menu a:hover{background:#f4f6fb;}
.cch-user-separator{
  margin:6px 0;border:none;border-top:1px solid #e5e7eb;
}

/* Main menu submenus */
.cch-has-submenu{ position: relative; }
.cch-submenu-trigger svg{
  margin-left:4px;transition:transform 0.2s ease;
}
.cch-submenu-trigger[aria-expanded="true"] svg{
  transform:rotate(180deg);
}
.cch-submenu{
  position:absolute;top:100%;left:0;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:var(--cch-shadow);
  min-width:160px;padding:8px 6px;display:none;list-style:none;margin:0;
  z-index:1001;
}
.cch-submenu.open{display:block;}
.cch-submenu a{
  display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:#111827;
  font-weight:500 !important;
}
.cch-submenu a:hover{background:#f4f6fb;}

/* Spacer to prevent content jump when sticky */
.cch-spacer{height:8px}

/* Mobile */
@media (max-width: 900px){
  /* Mobile vertical burger */
  .cch-burger{display:inline-flex;gap:4px;}
  .cch-burger span{width:2px;height:18px;margin:0 1px;display:inline-block;}
  .cch-burger{display:inline-flex;}
  .cch-nav{display:none;position:absolute;left:16px;right:16px;top:100%;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:var(--cch-shadow);padding:10px;}
  .cch-nav.open{display:block;}
  .cch-menu-list{flex-direction:column;align-items:stretch;gap:6px;}
  .cch-user{margin-left:0;}
  .cch-header{margin:8px;}
  
  /* Mobile submenu adjustments */
  .cch-submenu{
    position:static;box-shadow:none;border:none;background:transparent;
    padding:0 0 0 16px;margin-top:6px;
  }
  .cch-submenu a{
    background:#f9fafb;margin-bottom:4px;
  }
}

.cch-header .cch-menu-list a{margin:0 !important;}

/* Compact mode tweaks */
.cch-compact{ --cch-font-size: calc(var(--cch-font-size) - 2px); }
.cch-compact .cch-menu-list{ gap: 12px; }
.cch-compact .cch-menu-list a{ padding-inline: 8px !important; }
.cch-compact .cch-brand img{ height: clamp(12px, calc(var(--cch-height) - 16px), 24px); }
.cch-compact .cch-user-btn{ padding:6px 10px !important; }
.cch-compact .cch-login-btn{ padding:6px 10px !important; }
@media (max-width:900px){
  .cch-compact .cch-nav{ padding:6px 8px; }
  .cch-compact .cch-burger{ border-radius:10px; }
}