/* ===== HexiumX Overrides ===== */

/* Sticky footer layout */
html, body { height: 100%; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-nav { flex: 0 0 auto; }
.site-content { flex: 1 0 auto; min-height: 60vh; }
.footer { flex: 0 0 auto; margin-top: auto; }

:root {
  --hx-radius: 14px;
  --hx-bg: rgba(12, 12, 16, 0.6);
  --hx-bg-strong: rgba(18, 18, 26, 0.92);
  --hx-border: rgba(229, 231, 235, 0.20);
  --hx-border-focus: #00ffff;
  --hx-text: #f2f2f7;
  --hx-muted: #a6a8ad;
  --hx-btn-bg: linear-gradient(135deg, #00ffff 0%, #6c5ce7 100%);
}

/* Contact-style inputs (global baseline) */
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], input[type="tel"], select, textarea {
  -webkit-appearance: none; appearance: none; width: 100%;
  padding: 1rem 1.5rem;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid var(--hx-border);
  color: var(--hx-text);
  font: inherit;
  transition: all .3s ease;
  clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--hx-muted); opacity: .85; }
input:focus, select:focus, textarea:focus {
  border-color: var(--hx-border-focus);
  background: rgba(0, 255, 255, 0.08);
  box-shadow: 0 0 20px rgba(0,255,255,0.3);
}

/* Primary button polygon style */
button, input[type="submit"], input[type="button"], a.cyber-button {
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--hx-btn-bg); color: #0a0c12 !important;
  padding: 1.0rem 2.2rem; border: none; text-decoration:none;
  font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  position: relative; overflow: hidden; transition: all .3s ease;
  clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, a.cyber-button:hover {
  transform: translateY(-2px);
}

/* Header user menu: remove pill/outline/glow completely */
.user-menu-toggle{ display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:0; padding:0; box-shadow:none; }
.hexiumx-avatar, .hexiumx-avatar img, .user-avatar-img img{ width:36px; height:36px; border-radius:999px; object-fit:cover; display:block; border:0; box-shadow:none; }
.hexiumx-avatar.placeholder{ width:36px; height:36px; border-radius:999px; background: rgba(255,255,255,.08); display:inline-block; border:0; box-shadow:none; }

/* User dropdown */
.user-menu { position: relative; display:flex; align-items:center; margin-left:1rem; }
.user-menu-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; min-width: 180px;
  background: rgba(12,12,16,.9); border:1px solid var(--hx-border);
  border-radius: 12px; padding:.5rem; display:none; z-index:1000;
}
.user-menu-dropdown a{ display:block; padding:.6rem .7rem; border-radius:10px; color:var(--hx-text); text-decoration:none; }
.user-menu-dropdown a:hover{ background: rgba(255,255,255,.06); }
.user-menu.open .user-menu-dropdown{ display:block; }

/* --- Header avatar pill (neutral) & nav layout fix --- */
.site-nav{ overflow: visible; }
.site-nav .nav-container{ display:flex; align-items:center; padding:10px 0; overflow: visible; }
.user-menu-toggle{ 
  display:inline-flex; align-items:center; gap:.4rem; 
  background: rgba(255,255,255,.06); 
  border:1px solid var(--hx-border); 
  border-radius: 999px; 
  padding:.2rem .55rem; 
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.user-menu .user-avatar-img img,
.user-menu .hexiumx-avatar,
.user-menu .hexiumx-avatar img{
  width:32px; height:32px; border-radius:999px; object-fit:cover; display:block;
  border:0; box-shadow:none;
}


/* --- Header avatar pill anti-cropping fix --- */
.site-nav, .site-nav .nav-container, .user-menu{ overflow: visible !important; }
.site-nav{ padding-top: 10px !important; padding-bottom: 10px !important; position: relative; z-index: 40; }
.site-nav .nav-container{ align-items: center !important; }
.user-menu{ padding-right: 8px; position: relative; z-index: 41; }
.user-menu-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--hx-border);
  border-radius: 999px;
  padding: .2rem .55rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.user-menu .user-avatar-img img,
.user-menu .hexiumx-avatar,
.user-menu .hexiumx-avatar img{
  width: 32px; height: 32px; border-radius: 999px; object-fit: cover; display: block; border: 0; box-shadow: none;
}


/* === FORCE NO CLIP FOR HEADER AVATAR PILL === */
/* Buttons on the site use polygon clip-path; exclude the user-menu toggle explicitly. */
.user-menu .user-menu-toggle{
  -webkit-clip-path: none !important;
  clip-path: none !important;
  border-radius: 9999px !important;
  overflow: visible !important;
  line-height: 1 !important;
}
/* Make sure no ancestor crops it */
.site-nav, .site-nav .nav-container, .user-menu{ overflow: visible !important; }

/* === User menu panel (dropdown header card) === */
.user-menu-dropdown .user-menu-panel{
  padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.user-menu-dropdown .user-avatar-lg img{
  width: 72px; height: 72px;
  border-radius: 999px; object-fit: cover; display: block;
}

.user-menu-dropdown .user-display-name{
  margin-top: .6rem; font-weight: 800; text-align: center;
  color: var(--hx-cyan, #00ffff);
  text-shadow: 0 0 20px rgba(0,255,255,.5);
}

.user-menu-dropdown .user-menu-divider{
  width: 100%; height: 1px; background: rgba(255,255,255,.35);
  margin: 10px 0;
}