/* v2/core/header.css
   Minimal scaffold for the shared V2 header component.
   This provides basic structure only — no final branding or styling yet.
*/

.v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* restore left/back and right/cart */

  padding: 8px 16px;
  box-sizing: border-box;

  background: var(--v2-color-primary);
  border-bottom: none;
  box-shadow: 0 1px 2px var(--v2-color-header-shadow);

  width: 100%;
  min-height: 56px; /* consistent touch-friendly header height */
}

/* Left side: Back button + title + subtitle */
.v2-header__left {
  display: flex;
  align-items: center;
  gap: 12px; /* clearer separation between back button and text */
  min-width: 0; /* allow text to shrink instead of forcing layout overflow */
}

/* Mobile: center the brand text while keeping back & cart at edges */
@media (max-width: 991px) {
  .v2-header {
    position: relative;
  }
  .v2-header__text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

/* Back button (temporary minimal style) */
.v2-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  font-size: 18px;
  padding: 4px 8px;
  min-width: 40px;
  min-height: 40px; /* touch-friendly area */

  color: var(--v2-color-header-icon);
  cursor: pointer;
}

/* Title + subtitle block */
.v2-header__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;

  min-width: 0; /* allow text to truncate gracefully on small screens */
}

.v2-header__title {
  font-size: 24px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--v2-color-header-text);
}

.v2-header__subtitle {
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--v2-color-header-text);
  margin-top: 2px;
}

/* Mobile: hide tagline */
@media (max-width: 991px) {
  .v2-header__subtitle {
    display: none;
  }
}

/* Right side (reserved for cart icon later) */
.v2-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 40px;  /* reserved slot for cart icon/widget */
  height: 40px;
  flex-shrink: 0; /* never shrink the cart area */
  background-color: #ffffff;
}

.v2-header__right .ec-cart-widget {
  width: 100% !important;
  height: 100% !important;
  background: var(--v2-color-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0;
}


/* ----------------------------------------------------- */
/* Desktop Tab Bar (Navigation between modules) */
/* ----------------------------------------------------- */

/* Hidden by default (mobile-first) */
.v2-header__tabs {
  display: none;
}

/* Desktop layout */
@media (min-width: 992px) {
  .v2-header__tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-color-header-shadow);
  }

  .v2-header__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 15px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600; /* fixed weight to avoid width changes on active */
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    color: #222222;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  /* Keyboard focus styles for header nav tabs */
  .v2-header__tab:focus {
    outline: none; /* remove default outline on mouse click */
  }

  .v2-header__tab:focus-visible {
    outline: 2px solid #004C93; /* industrial blue focus ring */
    outline-offset: 2px;
    border-radius: 8px; /* match tab shape */
  }

  .v2-header__tab-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
  }

  .v2-header__tab-label {
    white-space: nowrap;
  }

  .v2-header__tab:not(.v2-header__tab--active):hover {
    background: rgba(0, 0, 0, 0.04);
  }

  /* Active tab */
  .v2-header__tab--active {
    background: #004C93;
    color: #ffffff;
    border: 1px solid #004C93;
  }
}

@media (min-width: 992px) {
  .v2-header {
    justify-content: space-between; /* brand left, cart right */
    position: relative;
  }

  .v2-header__left {
    flex: 0 0 auto;
  }

  .v2-header__back {
    display: none;
  }

  .v2-header__text {
    flex-direction: row;
    gap: 24px;
  }

  /* Tagline centered in header */
  .v2-header__subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
  }
}


/* ----------------------------------------------------- */
/* Mobile module tab bar (shown only on module screens)  */
/* ----------------------------------------------------- */

@media (max-width: 991px) {
  /* Show tabs only when the app is in a module view */
  body.v2-page--module .v2-header__tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-color-header-shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* prevent page from being dragged horizontally */
    scrollbar-width: none; /* hide scrollbar on Firefox */
  }

  /* hide scrollbar on WebKit */
  body.v2-page--module .v2-header__tabs::-webkit-scrollbar {
    display: none;
  }

  body.v2-page--module .v2-header__tab {
    flex: 0 0 auto; /* do not stretch; allow horizontal scroll */
    padding: 6px 12px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    color: #222222;
    -webkit-tap-highlight-color: transparent;
  }

  /* Active (selected) mobile tab */
  body.v2-page--module .v2-header__tab.v2-header__tab--active {
    background: #004C93;
    color: #ffffff;
    border: 1px solid #004C93;
  }


  /* Hide icons on mobile tabs; we only show text labels */
  body.v2-page--module .v2-header__tab-icon {
    display: none;
  }

  /* Ensure tabs remain hidden on home/main menu even if classes change elsewhere */
  body.v2-page--home .v2-header__tabs {
    display: none;
  }
  /* On mobile home/main menu, hide the back button */
  body.v2-page--home .v2-header__back {
    display: none;
  }

  /* Prevent page-level horizontal shifts caused by focus on wide inputs */
  body.v2-page--module {
    overflow-x: hidden;
  }
}