/* backend/src/main/resources/static/modules_styles/starter_standard/components/header.css */

/* ==============================================
   HEADER COMPONENT — starter-standard

   Fixed header, flat design.
   Desktop/mobile switch at lg (1024px).
   ============================================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--gb-header-height);
  background: var(--gb-bg-elevated);
  border-bottom: 1px solid var(--gb-border-default);
  z-index: var(--gb-z-header);
  transition:
    background var(--gb-transition-normal),
    border-color var(--gb-transition-normal);
}

/* Where this header is drawn, a mobile browser's toolbar continues its
   surface: the header is fixed to the top edge, so the frame takes the
   header's background rather than the page's. Stated here, beside that
   background, so the two cannot drift apart. Only where the header is
   drawn — a layout without it (the sign-in pages) keeps the contract's
   value, the page background, which is what sits at its top edge. */
:root:has(body > header) {
  --gb-browser-frame: var(--gb-bg-elevated);
}

.header {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

/* ==============================================
   MOBILE (< 1024px)
   ============================================== */

@media screen and (max-width: 1023px) {
  /* The brand stays in the compact header, a step smaller: a visitor
     on a phone sees whose site this is without opening the menu. */
  .header > .logotype .brand-logo {
    height: 40px;
  }

  .nav--desktop {
    display: none;
  }
}

/* ==============================================
   DESKTOP (1024px+)
   ============================================== */

@media screen and (min-width: 1024px) {
  .header > .logotype {
    display: flex;
    margin-left: var(--gb-spacing-sm);
  }
}

/* ==============================================
   HEADER ACTIONS (auth + theme toggle)
   ============================================== */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--gb-spacing-md);
  margin-left: auto;
}

/* ==============================================
   USER MENU — dropdown for authenticated users
   ============================================== */

.user-menu {
  position: relative;
}

.user-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--gb-accent-subtle);
  border: 1px solid var(--gb-border-default);
  border-radius: var(--gb-radius-full);
  cursor: pointer;
  transition:
    border-color var(--gb-transition-fast),
    background var(--gb-transition-fast);
}

.user-menu__trigger:hover {
  border-color: var(--gb-border-strong);
  background: var(--gb-accent-primary);
}

.user-menu__trigger:hover .user-menu__avatar {
  color: var(--gb-text-on-accent);
}

.user-menu__trigger:focus-visible {
  outline: 2px solid var(--gb-accent-primary);
  outline-offset: 2px;
}

.user-menu__avatar {
  font-size: var(--gb-type-secondary-size);
  font-weight: var(--gb-font-weight-semibold);
  color: var(--gb-accent-primary);
  line-height: 1;
  transition: color var(--gb-transition-fast);
}

/* --- Dropdown panel --- */

.user-menu__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--gb-spacing-sm));
  right: 0;
  min-width: 220px;
  background: var(--gb-bg-elevated);
  border: 1px solid var(--gb-border-default);
  border-radius: var(--gb-radius-md);
  box-shadow: var(--gb-shadow-md);
  z-index: calc(var(--gb-z-header) + 10);
  padding: var(--gb-spacing-sm) 0;
}

.user-menu--open .user-menu__dropdown {
  display: block;
}

/* --- User info section --- */

.user-menu__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gb-spacing-md) var(--gb-spacing-md);
}

.user-menu__name {
  font-size: var(--gb-type-secondary-size);
  font-weight: var(--gb-font-weight-semibold);
  color: var(--gb-text-primary);
}

.user-menu__email {
  font-size: var(--gb-type-caption-size);
  color: var(--gb-text-tertiary);
}

/* --- Divider --- */

.user-menu__divider {
  height: 1px;
  background: var(--gb-border-subtle);
  margin: var(--gb-spacing-sm) 0;
}

/* --- Menu items --- */

.user-menu__item {
  display: block;
  width: 100%;
  padding: var(--gb-spacing-sm) var(--gb-spacing-md);
  font-size: var(--gb-type-secondary-size);
  font-family: inherit;
  color: var(--gb-text-secondary);
  text-decoration: none;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background var(--gb-transition-fast),
    color var(--gb-transition-fast);
}

.user-menu__item:hover {
  background: var(--gb-accent-subtle);
  color: var(--gb-text-primary);
}

.user-menu__item:focus-visible {
  outline: 2px solid var(--gb-accent-primary);
  outline-offset: -2px;
}

.user-menu__item--danger:hover {
  color: var(--gb-color-error-text);
}

.user-menu__logout-form {
  display: contents;
}

/* ==============================================
   MOBILE COMPACT HEADER
   ============================================== */

@media screen and (max-width: 1023px) {
  /* Compact, but still painted: the header stays position:fixed on
     mobile, and a transparent fixed bar lets page text show through
     the strip it occupies while scrolling. Height compacts; the
     surface and its bottom edge remain those of the desktop header. */
  header {
    height: auto;
  }

  .header {
    padding-block: var(--gb-spacing-sm);
  }

  .header__actions {
    gap: var(--gb-spacing-sm);
    margin-right: var(--gb-spacing-sm);
  }
}