/* ===========================================================================
   No1 Princess — Header / Nav  (paired with header.php, loaded on every page)
   Overlaid on the hero. Uses the design tokens (--c-*, --font-*) from home.css.

   Two variants, chosen in header.php:
     .np-header           → default light nav (cream) for dark-hero pages
     .np-header--ink      → dark nav for light-background pages (gallery, map,
                            contact, what's on) so it stays readable.
   =========================================================================== */

/* Cart + hamburger icons: the two SVG states are stacked and CROSS-FADED on
   hover for a smooth swap. (The old version toggled display:none/block, which
   can't transition — so the swap snapped instantly.) */
.headCart,
.headHam {
  position: relative;          /* also the anchor for the cart count badge */
  display: inline-flex;
  width: 52px;
  height: 52px;
  cursor: pointer;
  line-height: 0;
}
.headCartHam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s ease;
}
/* default icon visible, hover icon hidden … */
#headCart1, #ham1 { opacity: 1; }
#headCart2, #ham2 { opacity: 0; }
/* … cross-fade to the hover icon on hover or keyboard focus */
.headCart:hover  #headCart1, .headCart:focus-visible #headCart1,
.headHam:hover   #ham1,      .headHam:focus-visible  #ham1 { opacity: 0; }
.headCart:hover  #headCart2, .headCart:focus-visible #headCart2,
.headHam:hover   #ham2,      .headHam:focus-visible  #ham2 { opacity: 1; }

.np-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-top: 20px;
  padding-bottom: 20px;
}
 .np-header {
  background-color: transparent;
  transition: background-color 0.3s ease;}
  
.np-header.is-scrolled {
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent white */
  backdrop-filter: blur(10px);}  




.np-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.np-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.np-nav__brand-mark {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 30px);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-cream);
  transition: color 0.2s ease;
}

.np-nav__brand-mark:hover {

  color: var(--c-cream);
  
}
/* ---- Dark ("ink") variant for light-background pages --------------------
   Contact, Map (locations) and Gallery have a light background, so the white
   cart + hamburger SVG icons would disappear. Darken the wordmark and invert
   the icons (all four share .headCartHam) so the header reads on a light page. */
.np-header--ink .np-nav__brand-mark { color: var(--c-dark); }
.np-header--ink .headCartHam { filter: invert(1); }           /* white icons → dark */


/* ---- Mobile: shrink the brand + icons so the cart AND hamburger both fit
        (previously the 52px icons + brand overflowed and the hamburger was
        clipped off the right edge). --------------------------------------- */
@media (max-width: 700px) {
  .np-header { padding-block: 20px; 
  position: fixed;
  
  }
.np-hero__headline{
  font-size: 200px;
}

.np-hero__line{
  font-size: 80px;
}

  .np-header {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.np-header.is-scrolled {
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent white */
  backdrop-filter: blur(10px);  

}
  .np-nav { gap: 10px; }
  .np-nav__actions { gap: 8px; flex: none; }
  .np-nav__brand-mark { font-size: 22px }
  
  /* size the wrappers; the stacked icons fill them via inset:0 (crossfade kept) */
  .headCart, .headHam { width: 50px; height: 50px; }
}