/* ==========================================================================
 * StartLike Theme - Layout: Header
 * ========================================================================== */

.l-header {
  position: relative;
  width: 100%;
  height: var(--sl-header-height-sm);
  background-color: var(--sl-bg-color);
  z-index: var(--sl-z-header);
}

@media (min-width: 1024px) {
  .l-header {
    height: var(--sl-header-height);
  }
}

/* ----------------------------------------------------------------
 * Header Inner
 * ---------------------------------------------------------------- */
.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--sl-container-max-width);
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

@media (min-width: 1024px) {
  .l-header__inner {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

/* ----------------------------------------------------------------
 * Header Logo
 * ---------------------------------------------------------------- */
.l-header__logo {
  flex-shrink: 0;
}

.l-header__logo img {
  height: 36px;
  width: auto;
}

@media (min-width: 1024px) {
  .l-header__logo img {
    height: 44px;
  }
}

/* ----------------------------------------------------------------
 * Header Nav Area
 * ---------------------------------------------------------------- */
.l-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .l-header__nav {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

/* ----------------------------------------------------------------
 * Header Actions (CTA, search, etc.)
 * ---------------------------------------------------------------- */
.l-header__actions {
  display: none;
}

@media (min-width: 1024px) {
  .l-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1.5rem;
  }
}

/* ----------------------------------------------------------------
 * Hamburger Button (SP only)
 * ---------------------------------------------------------------- */
.l-header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .l-header__hamburger {
    display: none;
  }
}

/* ----------------------------------------------------------------
 * Modifier: Sticky Header
 * ---------------------------------------------------------------- */
.l-header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--sl-z-header);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ----------------------------------------------------------------
 * Modifier: Overlay Header
 * ---------------------------------------------------------------- */
.l-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  color: #fff;
}

.l-header--overlay a {
  color: #fff;
}

/* ----------------------------------------------------------------
 * Modifier: Full Width Header
 * ---------------------------------------------------------------- */
.l-header--full-width .l-header__inner {
  max-width: none;
}

/* ----------------------------------------------------------------
 * Layout Type 1: Logo Left + Nav Right (Default)
 * ---------------------------------------------------------------- */
.l-header--layout1 .l-header__inner {
  justify-content: space-between;
}

/* ----------------------------------------------------------------
 * Layout Type 2: Logo Center + Nav Below
 * ---------------------------------------------------------------- */
.l-header--layout2 {
  height: auto;
}

.l-header--layout2 .l-header__inner {
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 0;
}

.l-header--layout2 .l-header__logo {
  margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
  .l-header--layout2 .l-header__nav {
    width: 100%;
    justify-content: center;
    border-top: 1px solid var(--sl-border-color);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* ----------------------------------------------------------------
 * Layout Type 3: Logo Left + Nav Center + Actions Right
 * ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  .l-header--layout3 .l-header__nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------------------
 * Layout Type 4: Logo Center (Nav in Drawer only)
 * ---------------------------------------------------------------- */
.l-header--layout4 .l-header__inner {
  justify-content: center;
}

.l-header--layout4 .l-header__nav {
  display: none;
}

.l-header--layout4 .l-header__hamburger {
  position: absolute;
  right: 1.25rem;
}

@media (min-width: 1024px) {
  .l-header--layout4 .l-header__hamburger {
    display: flex;
    right: 2rem;
  }
}

/* ----------------------------------------------------------------
 * Layout Type 5: Logo Left + Nav Left
 * ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  .l-header--layout5 .l-header__inner {
    justify-content: flex-start;
    gap: 2rem;
  }
}