/* Compact mobile header for The Lazy Pelican preview. Desktop (768px+) layout is unchanged. */

/* Solid white header on mobile and desktop (Vanessa, 12 Nov 2026).
   Overrides bg-sand/95 + backdrop-blur; keeps the existing bottom border. */
header.sticky.top-0.z-40 {
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 767.98px) {
  header a:has(> img[src*="lazy-pelican-logo"]) {
    width: 11rem !important;
    max-width: 11rem !important;
    flex-shrink: 0;
  }

  header a:has(> img[src*="lazy-pelican-logo"]) img {
    width: 100%;
    height: auto;
    display: block;
  }

  header > div {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }

  /* Keep logo, Instagram and Menu on one row */
  header > div > div:first-child {
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.5rem 0.75rem;
  }

  .lp-menu-toggle {
    display: inline-flex;
    height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 9999px;
    border: 1px solid #d9cdb8;
    padding: 0 0.85rem;
    background: transparent;
    color: #1a3148;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .lp-menu-toggle:hover,
  .lp-menu-toggle:focus-visible {
    background: #e5f2ef;
    outline: none;
  }

  header[data-lp-mobile-ready] nav[aria-label="Primary"] {
    display: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  header.lp-nav-open nav[aria-label="Primary"] {
    display: block;
  }

  header.lp-nav-open nav[aria-label="Primary"] ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.15rem 0 0.35rem;
  }

  header.lp-nav-open nav[aria-label="Primary"] li a {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .lp-menu-toggle {
    display: none !important;
  }
}