/**
 * ViViDio Connect — Header component styles
 * Canonical location: common/theme/
 */

.vvc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--header-height, clamp(2.75rem, 5vw + 2.25rem, 4rem));
  height: var(--header-height, clamp(2.75rem, 5vw + 2.25rem, 4rem));
  background: var(--bg-nav, #FFFFFF);
  box-shadow: var(--shadow-nav, 0 2px 4px rgba(0, 0, 0, 0.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw + 0.5rem, 1.5rem);
  padding: 0 var(--main-padding-x, clamp(0.75rem, 2vw + 0.5rem, 1.5rem));
  z-index: var(--z-nav, 100);
  box-sizing: border-box;
}
/* Brand title + subtitle +50% size */
.vvc-header-brand { display: flex; align-items: center; gap: clamp(0.5rem, 1vw + 0.35rem, 0.75rem); color: var(--color-primary, #9C27B0); font-weight: var(--font-weight-bold, 700); font-size: clamp(1.5rem, 1.8vw + 1.125rem, 1.6875rem); flex-shrink: 0; }
.vvc-header-brand img { height: clamp(2.25rem, 6vw + 1.5rem, 3.375rem); width: auto; object-fit: contain; }
.vvc-header-brand-text .vvc-header-title { font-weight: 700; color: var(--color-text, #333333); line-height: 1.2; font-size: inherit; }
.vvc-header-brand-text .vvc-header-subtitle { font-size: clamp(0.975rem, 1.2vw + 0.75rem, 1.125rem); color: var(--color-text-muted, #9E9E9E); font-weight: 400; }
/* Wrapper for nav + actions so they wrap together as one flex unit on narrow viewports */
.vvc-header-right { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw + 0.25rem, 1rem); flex-shrink: 1; min-width: 0; }
.vvc-header .pwa-nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw + 0.25rem, 1rem); flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
.vvc-header-actions { display: flex; align-items: center; gap: clamp(0.35rem, 0.6vw + 0.25rem, 0.6rem); flex-shrink: 0; }
.vvc-header-tutorial { display: flex; align-items: center; gap: clamp(0.35rem, 0.6vw + 0.25rem, 0.6rem); margin-right: 0; }
/* All header nav + actions: same medium font size (Home, About, Pricing, Tutorial, Blog, Contact, Not Ready, हिंदी, English, My Account) */
.vvc-header-tutorial a { font-weight: 500; font-size: 1rem; color: var(--color-text, #333333); text-decoration: none; transition: color 200ms, opacity 200ms; white-space: nowrap; }
.vvc-header-tutorial a:hover { color: var(--color-primary, #9C27B0); opacity: 0.9; }
.vvc-header-btn { display: inline-flex; align-items: center; justify-content: center; width: clamp(2rem, 5vw + 1.25rem, 2.5rem); height: clamp(2rem, 5vw + 1.25rem, 2.5rem); padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--color-text, #333333); cursor: pointer; transition: background 200ms, color 200ms; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.vvc-header-nav a { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.vvc-header .pwa-nav a { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.vvc-header-btn:hover { background: var(--color-gray-100, #F5F5F5); color: var(--color-primary, #9C27B0); }
.vvc-header-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.vvc-header-hamburger { display: none; flex-direction: column; justify-content: center; gap: 3px; width: clamp(2rem, 5vw + 1.25rem, 2.5rem); height: clamp(2rem, 5vw + 1.25rem, 2.5rem); padding: 0.35em; background: none; border: none; cursor: pointer; border-radius: 4px; }

.vvc-header-hamburger span { display: block; width: 100%; height: 2px; background: var(--color-text, #333333); border-radius: 1px; }

/* ≤900px: whole header as flexbox; nav + actions resize small and wrap to 2nd line with smaller gaps; no hamburger */
@media (max-width: 900px) {
  .vvc-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-height, clamp(2.75rem, 5vw + 2.25rem, 4rem));
    padding: clamp(0.35rem, 1.5vw + 0.25rem, 0.75rem) clamp(0.5rem, 2vw + 0.25rem, 1rem);
    gap: clamp(0.35rem, 1.2vw + 0.2rem, 0.65rem);
    align-content: center;
  }
  .vvc-header-right {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.25rem, 1vw + 0.15rem, 0.5rem);
    min-width: 0;
  }
  .vvc-header .pwa-nav {
    gap: clamp(0.2rem, 1vw + 0.1rem, 0.45rem);
    flex-wrap: wrap;
  }
  .vvc-header .pwa-nav a { font-size: 1rem; white-space: nowrap; }
  .vvc-header-actions { gap: clamp(0.25rem, 0.5vw + 0.15rem, 0.5rem); flex-wrap: wrap; }
  .vvc-header-btn { font-size: 1rem; padding: 0 clamp(0.25rem, 0.6vw + 0.15rem, 0.5rem); }
  .vvc-header-brand img { height: clamp(1.65rem, 4.5vw + 0.9rem, 2.4rem); }
  .vvc-header-brand { gap: clamp(0.25rem, 0.6vw + 0.15rem, 0.5rem); font-size: clamp(1.5rem, 1.8vw + 1.125rem, 1.6875rem); }
  .vvc-header-brand-text .vvc-header-subtitle { font-size: clamp(0.975rem, 1.2vw + 0.75rem, 1.125rem); }
  .vvc-header-tutorial { margin-right: 0; gap: clamp(0.25rem, 0.5vw + 0.15rem, 0.5rem); }
  .vvc-header-hamburger { display: none; }
}

@media (min-width: 901px) {
  .vvc-header .pwa-nav { display: flex; flex-wrap: nowrap; }
}

/* Ensure brand text doesn't wrap in header — truncate if needed */
.vvc-header-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }