/* ─────────────────────────────
   HEADER.CSS — Lo Castro header
   wp-content/themes/twentytwentyfive-child/styles/header.css

   Replicates the Next.js storefront's Header.tsx, rendered via the
   [lc_header] shortcode in the Header template part. Loaded site-wide
   (functions.php) since the header appears on every page. Reuses the
   --lc-* tokens defined in styles/tokens.css.
   ───────────────────────────── */

.lc-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #f4f4f2;
  color: var(--lc-text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  font-family: var(--lc-font-serif);
  letter-spacing: 0.08em;
  padding: 0.1rem 0;
  transition: transform 0.25s ease;
}

.lc-header.lc-header--hidden {
  transform: translateY(-100%);
}

.lc-header-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.lc-header-inner {
  position: relative;
  height: 6rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.lc-header-left {
  grid-column: 1;
}

.lc-header-right {
  grid-column: 3;
}

.lc-header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border-radius: 2px;
}

.lc-header-logo:focus-visible {
  outline: var(--lc-focus-width) solid var(--lc-focus-color);
  outline-offset: 4px;
}

.lc-header-logo img {
  height: 42px;
  width: auto;
}

.lc-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lc-header-menu-btn {
  appearance: none;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  outline: none;
  border-radius: 4px;
}

.lc-header-menu-btn:hover {
  opacity: 1;
}

.lc-header-menu-btn:focus-visible {
  outline: var(--lc-focus-width) solid var(--lc-focus-color);
  outline-offset: var(--lc-focus-offset);
}

.lc-header-desktop-nav {
  display: flex;
  gap: 24px;
}

@media (max-width: 900px) { /* System breakpoint: mobile */
  .lc-header-desktop-nav {
    display: none;
  }
}

.lc-header-navlink {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-family: var(--lc-font-serif);
  font-weight: 300;
  letter-spacing: 0.08em;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  outline: none;
  border-radius: 2px;
}

.lc-header-navlink:hover {
  opacity: 1;
}

.lc-header-navlink:focus-visible {
  outline: var(--lc-focus-width) solid var(--lc-focus-color);
  outline-offset: var(--lc-focus-offset);
}

.lc-header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 900px) { /* System breakpoint: mobile */
  .lc-header-right {
    gap: 0;
  }
}

.lc-header-desktop-only {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 900px) { /* System breakpoint: mobile */
  .lc-header-desktop-only {
    display: none;
  }
}

.lc-header-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.9;
  text-decoration: none;
  transition: opacity 0.2s ease;
  outline: none;
}

.lc-header-iconbtn:hover {
  opacity: 1;
}

.lc-header-iconbtn:focus-visible {
  outline: var(--lc-focus-width) solid var(--lc-focus-color);
  outline-offset: var(--lc-focus-offset);
}

.lc-header-iconbtn img {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) { /* System breakpoint: mobile */
  .lc-header-iconbtn {
    width: 28px;
    height: 28px;
  }
}

.lc-header-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  background: #C2A46D;
  color: var(--lc-text);
  font-size: 10px;
  font-weight: 400;
  font-family: var(--lc-font-display);
  text-align: center;
}

/* WordPress's block-template rendering occasionally wraps parts of the
   [lc_header] shortcode's output in stray <p> tags on certain
   WooCommerce-owned templates (e.g. Product Search Results) — same
   wpautop-mangling pattern as gotcha #4 elsewhere in the project.
   display: contents removes the <p> from the layout/box model entirely
   while keeping its child rendering exactly as if unwrapped. */
.lc-header-inner p,
.lc-header-search-bar p {
  display: contents;
}
/* Language switcher "IT / EN" — same type as .lc-header-navlink; the
   inactive language is dimmed, matching the drawer version
   (.lc-mobile-menu-lang in mobile-menu.css). */
.lc-header-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-family: var(--lc-font-serif);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lc-header-lang a {
  color: inherit;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  outline: none;
  border-radius: 2px;
}

.lc-header-lang a:hover {
  opacity: 1;
}

.lc-header-lang a:focus-visible {
  outline: var(--lc-focus-width) solid var(--lc-focus-color);
  outline-offset: var(--lc-focus-offset);
}

.lc-header-lang-sep {
  opacity: 0.4;
}