/* Final Header Specification (H1-Ready) - Premium Penguin Brand */

/* Header Gradient Token - 10/10 Design Upgrade */
:root {
  --bb-header-gradient: linear-gradient(180deg, #FAF7F2 0%, #F3EEE9 100%);
}

/* CHUNK 102B: Tightened header height to 64px for sleek SaaS look */
/* CHUNK 160: Ensure header sits flush at top with no gap */
.bb-header {
  height: 64px;
  width: 100%;
  background: var(--bb-header-gradient);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(191, 160, 90, 0.15);
}

/* Left Section: Logo + Wordmark */
.bb-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-left: var(--space-lg);
  flex-wrap: nowrap;
  overflow: visible;
}

/* CHUNK 160: Ensure header title is consistently positioned and sized */
.bb-header-left .bb-header-title,
.bb-header .bb-header-left .bb-header-title,
.bb-header .bb-header-title,
h1.bb-header-title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  font-size: var(--font-size-xl, 1.25rem) !important;
  font-weight: var(--weight-semibold, 600) !important;
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif) !important;
  color: var(--bb-text-strong, #2d2926) !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

/* Header Subtitle - Branding reinforcement under builder titles */
/* Desktop: Hide subtitle when wordmark is visible (no duplication) */
.bb-header-subtitle {
  display: none; /* Hidden by default on desktop */
  margin: 0;
  margin-top: 2px;
  font-size: 0.85rem;
  line-height: 1.1;
  color: var(--text-muted, #6b7280);
  font-weight: 400; /* Reduced from 500 for lighter feel */
  letter-spacing: 0.02em; /* Subtle letter spacing for refinement */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
}

/* Mobile: Show subtitle when wordmark is hidden */
@media (max-width: 768px) {
  .bb-header-subtitle {
    display: block; /* Show on mobile */
    font-size: 0.75rem;
    margin-top: 1px;
    flex-shrink: 0;
    width: 100%;
  }
  
  /* Ensure dot separator is visible on mobile */
  .bb-page-title-sep {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* If header is tight, allow title to wrap but keep subtitle on one line */
  .bb-header-logo__text {
    flex-wrap: wrap;
    min-width: 0;
  }
  
  .bb-header-title {
    flex-wrap: wrap;
  }
}

/* Header Mascot Integration: Logo Link Wrapper */
.bb-header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

.bb-header-logo:hover {
  opacity: 0.9;
}

/* Brand wordmark styling - shown on desktop, hidden on mobile */
.bb-brand-wordmark {
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  display: inline; /* Show on desktop by default */
}

/* Mobile: ALWAYS hide wordmark (subtitle provides branding) - use multiple selectors for maximum specificity */
@media (max-width: 768px) {
  .bb-brand-wordmark,
  .bb-header-brand .bb-brand-wordmark,
  .bb-header-logo .bb-brand-wordmark,
  span.bb-brand-wordmark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

.bb-logo-img {
  width: 68px; /* Increased by 30% from 52px (52px * 1.3 = 67.6px ≈ 68px) */
  height: 68px; /* Increased by 30% from 52px */
  object-fit: contain;
  display: block;
}

.bb-logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #2b2b2b;
  line-height: 1;
}

/* Desktop: Larger logo and text */
@media (min-width: 768px) {
  .bb-logo-img {
    width: 68px; /* Increased by 30% from 52px */
    height: 68px; /* Increased by 30% from 52px */
  }

  .bb-logo-text {
    font-size: 22px;
  }
}

/* Dark Mode Support - Multiple methods for compatibility */
body.dark .bb-logo-text,
[data-bar-mode='dark'] .bb-logo-text,
:root[data-bar-mode='dark'] .bb-logo-text {
  color: #ffffff;
}

body.dark .bb-logo-img,
[data-bar-mode='dark'] .bb-logo-img,
:root[data-bar-mode='dark'] .bb-logo-img {
  filter: brightness(1.15);
}

/* Legacy Support: Maintain old class names for backward compatibility */
.bb-logo {
  height: 68px; /* Increased by 30% to match .bb-logo-img (68px) */
  width: auto;
  object-fit: contain;
  display: block;
}

.bb-wordmark {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--bb-gold);
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Right Section: Controls */
.bb-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* AI Bartender Button & Dropdown */
.bb-ai-menu {
  position: relative;
}

.bb-ai-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  border: 1px solid rgba(191, 160, 90, 0.3);
  border-radius: 8px;
  color: var(--bb-deep);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* CHUNK 102B: Enhanced hover state for AI button */
.bb-ai-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.55);
}

.bb-ai-btn[aria-expanded="true"] {
  background: rgba(191, 160, 90, 0.15);
  border-color: var(--bb-gold);
}

.bb-ai-label {
  white-space: nowrap;
}

/* AI Bartender icon size - smaller for header */
.bb-ai-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* CHUNK 102B: Updated caret styling */
.bb-ai-chevron,
.bb-caret {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.bb-ai-btn[aria-expanded="true"] .bb-ai-chevron {
  transform: rotate(180deg);
}

.bb-ai-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bb-white);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(191, 160, 90, 0.2);
  padding: var(--space-xs);
  z-index: 1000;
}

.bb-ai-item {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  color: var(--bb-deep);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bb-ai-item:hover {
  background: rgba(191, 160, 90, 0.1);
}

/* CHUNK 113 QA Fix: Disabled state polish for header dropdown items */
.bb-ai-item--disabled,
.bb-ai-item:disabled,
.header-dropdown-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.bb-ai-item--disabled:hover,
.bb-ai-item:disabled:hover,
.header-dropdown-item.disabled:hover {
  background: transparent;
  color: var(--bb-deep);
}

/* Ensure enabled hover state still applies */
.bb-ai-item:hover:not(.bb-ai-item--disabled):not(:disabled),
.header-dropdown-item:hover:not(.disabled) {
  background: #f7f3ef;
}

/* Subscription Indicator */
.bb-subscription-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  font-weight: 500;
  color: var(--bb-deep);
  opacity: 0.7;
}

.bb-subscription-indicator.pro {
  color: var(--bb-gold);
  opacity: 1;
}

.bb-subscription-indicator .bb-icon {
  width: 16px;
  height: 16px;
}

/* User Avatar Button & Dropdown */
.bb-user-menu {
  position: relative;
}

.bb-user-btn {
  width: 32px;
  height: 32px;
  background: var(--bb-deep);
  color: var(--bb-cream);
  border-radius: 50%;
  border: none;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CHUNK 102B: Premium hover microinteraction for profile bubble */
.bb-user-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.bb-user-avatar {
  display: block;
  line-height: 1;
}

.bb-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bb-white);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(191, 160, 90, 0.2);
  padding: var(--space-xs);
  z-index: 1000;
}

.bb-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  color: var(--bb-deep);
  font-family: var(--font-ui);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bb-dropdown-item:hover {
  background: rgba(191, 160, 90, 0.1);
}

.bb-dropdown-item--danger {
  color: var(--bb-rose);
}

.bb-dropdown-item--danger:hover {
  background: rgba(232, 93, 117, 0.1);
}

.bb-dropdown-divider {
  height: 1px;
  background: rgba(191, 160, 90, 0.2);
  margin: var(--space-xs) 0;
}

/* CHUNK 102B: Updated header offset variable to 64px */
:root {
  --bb-header-offset: 64px;
}

/* Body padding for fixed header */
body:has(.bb-header) {
  padding-top: var(--bb-header-offset, 64px);
}

/* Main content area padding adjustment for 64px header */
body:has(.bb-header) .bb-main,
body:has(.bb-header) main.bb-main {
  padding-top: calc(var(--bb-header-offset, 64px) + var(--space-sm, 0.75rem)) !important; /* Reduced from 1.5rem */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .bb-header {
    padding: 0 var(--space-md);
  }
  
  .bb-wordmark {
    font-size: 20px;
  }
  
  /* ALWAYS hide brand wordmark on mobile (subtitle provides branding) - use multiple selectors for maximum specificity */
  .bb-brand-wordmark,
  .bb-header-brand .bb-brand-wordmark,
  .bb-header-logo .bb-brand-wordmark,
  span.bb-brand-wordmark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Ensure dot separator is visible on mobile */
  .bb-page-title-sep {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure subtitle is visible on mobile */
  .bb-header-subtitle,
  .bb-header-logo__text .bb-header-subtitle,
  p.bb-header-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure logo size is increased on mobile (52px = 30% larger than original 40px) */
  .bb-header-logo img,
  .bb-logo,
  .bb-logo-img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }
  
  .bb-ai-label {
    display: none;
  }
  
  .bb-ai-btn {
    padding: var(--space-xs);
    min-width: 36px;
  }
}