/**
 * Julia Notch Nav — expanding Dynamic Island-style sticky nav.
 *
 * Block markup lives in patterns/notch-nav.php. This stylesheet handles the
 * collapsed → expanded transition, the parent-hover-driven child reveal, and
 * the typography overrides on wp:navigation links inside .julia-notch__content.
 *
 * Tokens: paper, paper-dark, ink, ink-faded, accent — all from theme.json.
 */

/* Outer hover zone — full-width fixed strip, the trigger area */
.julia-notch-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 20px;            /* invisible buffer keeps the menu open if mouse drifts down */
  z-index: 100;
  pointer-events: none;            /* lets clicks pass through the buffer; .julia-notch re-enables */
}

/* The notch itself — collapsed dark pill */
.julia-notch {
  position: relative;
  width: 120px;
  height: 32px;
  background-color: var(--wp--preset--color--ink);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  pointer-events: auto;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Expanded state — translucent paper-dark glass bar.
   Triggered by hover on the zone OR the .is-pinned class set by JS after 20% scroll. */
.julia-notch-zone:hover .julia-notch,
.julia-notch-zone.is-pinned .julia-notch {
  width: 820px;
  max-width: calc(100vw - 48px);   /* shrink on small viewports */
  height: 56px;
  background-color: rgba(237, 230, 220, 0.88);    /* paper-dark @ 88% */
  border-radius: 0 0 24px 24px;
  border: 1px solid rgba(20, 18, 16, 0.07);
  border-top: none;
  box-shadow:
    0 4px 16px rgba(20, 18, 16, 0.08),
    0 1px 0 rgba(20, 18, 16, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Nav content also shrinks with the notch on smaller viewports */
.julia-notch > .julia-notch__content {
  max-width: calc(100vw - 48px);
}

/* Centered brand mark — absolutely positioned so it stays put when the notch expands.
   Higher specificity (.julia-notch > .julia-notch__logo) to beat WP's is-layout-constrained autogenerated rules. */
.julia-notch > .julia-notch__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  margin: 0 !important;        /* defeat is-layout-constrained auto margins on direct children */
}
.julia-notch__brand {
  margin: 0;
  font-family: var(--wp--preset--font-family--display-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--paper) !important;
  transition: color 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
}
.julia-notch-zone:hover .julia-notch__brand,
.julia-notch-zone.is-pinned .julia-notch__brand {
  color: var(--wp--preset--color--ink) !important;
}

/* Nav content — hidden by default, fades in 100ms after the notch expands.
   Higher specificity to beat WP autogenerated container rules. */
.julia-notch > .julia-notch__content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 820px;
  padding-left: 48px;
  padding-right: 48px;
  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 !important;        /* defeat is-layout-constrained auto margins on direct children */
}
.julia-notch-zone:hover .julia-notch__content,
.julia-notch-zone.is-pinned .julia-notch__content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Override wp:navigation typography defaults to match the spec */
.julia-notch__links .wp-block-navigation__container {
  gap: 32px;
}
.julia-notch__links a,
.julia-notch__links a.wp-block-navigation-item__content,
.julia-notch__links .wp-block-navigation-item__label {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--ink) !important;
  transition: opacity 0.2s;
}
.julia-notch__links a:hover {
  opacity: 0.65;
}

/* ── Mobile (≤ 600px): stack into two rows when expanded ── */
@media (max-width: 600px) {
  /* Collapsed: small ink pill, just the brand mark — no expansion on hover */
  .julia-notch-zone:hover .julia-notch {
    width: 148px;
    max-width: 148px;
    height: 36px;
    background-color: var(--wp--preset--color--ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0 0 18px 18px;
    box-shadow: none;
    border: 1px solid transparent;
    border-top: none;
  }
  .julia-notch-zone:hover .julia-notch__brand {
    color: var(--wp--preset--color--paper);
  }
  .julia-notch-zone:hover .julia-notch__content {
    opacity: 0;
    pointer-events: none;
  }

  /* Pinned (scrolled): full-width two-row layout. Override the desktop expanded
     cream background — on a full-screen mobile bar the dark ink reads cleaner.
     Cover :hover and :hover.is-pinned tap-states too. */
  .julia-notch-zone.is-pinned .julia-notch,
  .julia-notch-zone:hover.is-pinned .julia-notch {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 12px;
    border-radius: 0;
    overflow: visible;
    background-color: var(--wp--preset--color--ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
  }

  /* Logo flows on row 1 */
  .julia-notch-zone.is-pinned .julia-notch > .julia-notch__logo {
    position: static;
    transform: none;
    margin: 0 0 8px !important;
  }

  /* Nav content flows on row 2 */
  .julia-notch-zone.is-pinned .julia-notch > .julia-notch__content {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    justify-content: center;
    gap: 16px;
    transition-delay: 0s;
    margin: 0 !important;
  }

  /* On mobile: background is always dark (collapsed pill OR pinned bar), so
     text must stay light. Cover all states — hover, pinned, and the
     combined :hover.is-pinned tap-state. !important needed to beat
     desktop hover/pinned rules + wp:navigation's autogenerated link color. */
  .julia-notch-zone .julia-notch__brand,
  .julia-notch-zone:hover .julia-notch__brand,
  .julia-notch-zone.is-pinned .julia-notch__brand,
  .julia-notch-zone:hover.is-pinned .julia-notch__brand {
    color: var(--wp--preset--color--paper) !important;
  }
  .julia-notch-zone .julia-notch__links a,
  .julia-notch-zone:hover .julia-notch__links a,
  .julia-notch-zone.is-pinned .julia-notch__links a,
  .julia-notch-zone:hover.is-pinned .julia-notch__links a,
  .julia-notch-zone .julia-notch__links .wp-block-navigation-item__label,
  .julia-notch-zone:hover .julia-notch__links .wp-block-navigation-item__label,
  .julia-notch-zone.is-pinned .julia-notch__links .wp-block-navigation-item__label,
  .julia-notch-zone:hover.is-pinned .julia-notch__links .wp-block-navigation-item__label {
    color: var(--wp--preset--color--paper) !important;
  }
}

/* Reduce motion: drop animations, keep the layout but skip the springs */
@media (prefers-reduced-motion: reduce) {
  .julia-notch,
  .julia-notch__content,
  .julia-notch__brand {
    transition: none;
  }
}