/* public/page-studio-assets/runtimes/menu-runtime.css
   Kind 4 runtime CSS for ui/menu-nav.
   Hamburger lives inside the nav slot and is mutually exclusive
   with the nav list — they swap at the collapseAt breakpoint.
   Logo and CTA slots are unaffected by collapse. */

@layer ps-components {

  /* ── Slot sizing — percentage-driven, not equal-thirds ──────────── */
  [data-ps-slot] {
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  [data-ps-slot]:not([style*="flex"]) {
    flex: 1 1 0%;
  }

  [data-ps-slot][style*="display: none"],
  [data-ps-slot][style*="display:none"] {
    flex: 0 0 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  [data-ps-slot-type="nav"] .ps-nav-list,
  [data-ps-slot-type="nav"] .ps-nav-toggle {
    max-width: 100%;
    min-width: 0;
  }

  [data-ps-slot-type="logo"] .ps-nav-logo,
  [data-ps-slot-type="logo"] .ps-nav-logo img {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  [data-ps-slot-type="cta"] .ps-nav-actions {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  [data-ps-slot-type="cta"] .ps-nav-cta {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Default: list visible, toggle hidden ─────────────────────── */
  [data-ps-slot-type="nav"] .ps-nav-list   { display: flex; }
  [data-ps-slot-type="nav"] .ps-nav-toggle { display: none; }

  /* ── 480px collapse ───────────────────────────────────────────── */
  [data-ps-collapse="480"] [data-ps-slot-type="nav"] .ps-nav-list   { display: flex; }
  [data-ps-collapse="480"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: none; }

  @media (max-width: 480px) {
    [data-ps-collapse="480"] [data-ps-slot-type="nav"] .ps-nav-list   { display: none; }
    [data-ps-collapse="480"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: inline-flex; }
  }

  /* ── 640px collapse ───────────────────────────────────────────── */
  [data-ps-collapse="640"] [data-ps-slot-type="nav"] .ps-nav-list   { display: flex; }
  [data-ps-collapse="640"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: none; }

  @media (max-width: 640px) {
    [data-ps-collapse="640"] [data-ps-slot-type="nav"] .ps-nav-list   { display: none; }
    [data-ps-collapse="640"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: inline-flex; }
  }

  /* ── 768px collapse (default) ─────────────────────────────────── */
  [data-ps-type="ui/menu-nav"] [data-ps-slot-type="nav"] .ps-nav-list,
  [data-ps-collapse="768"] [data-ps-slot-type="nav"] .ps-nav-list   { display: flex; }

  [data-ps-type="ui/menu-nav"] [data-ps-slot-type="nav"] .ps-nav-toggle,
  [data-ps-collapse="768"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: none; }

  @media (max-width: 768px) {
    [data-ps-type="ui/menu-nav"] [data-ps-slot-type="nav"] .ps-nav-list,
    [data-ps-collapse="768"] [data-ps-slot-type="nav"] .ps-nav-list   { display: none; }

    [data-ps-type="ui/menu-nav"] [data-ps-slot-type="nav"] .ps-nav-toggle,
    [data-ps-collapse="768"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: inline-flex; }
  }

  /* ── 1024px collapse ──────────────────────────────────────────── */
  [data-ps-collapse="1024"] [data-ps-slot-type="nav"] .ps-nav-list   { display: flex; }
  [data-ps-collapse="1024"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: none; }

  @media (max-width: 1024px) {
    [data-ps-collapse="1024"] [data-ps-slot-type="nav"] .ps-nav-list   { display: none; }
    [data-ps-collapse="1024"] [data-ps-slot-type="nav"] .ps-nav-toggle { display: inline-flex; }
  }

  /* ── Active indicator: underline ──────────────────────────────── */
  [data-ps-indicator="underline"] .ps-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: var(--ps-nav-indicator-color, currentColor);
    transition: left 0.2s ease, right 0.2s ease;
    border-radius: 2px;
  }
  [data-ps-indicator="underline"] .ps-nav-item--current > .ps-nav-link::after,
  [data-ps-indicator="underline"] .ps-nav-link:hover::after {
    left: 0;
    right: 0;
  }

  /* ── Active indicator: dot ────────────────────────────────────── */
  [data-ps-indicator="dot"] .ps-nav-link::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ps-nav-indicator-color, currentColor);
    transition: transform 0.2s ease;
  }
  [data-ps-indicator="dot"] .ps-nav-item--current > .ps-nav-link::after,
  [data-ps-indicator="dot"] .ps-nav-link:hover::after {
    transform: translateX(-50%) scale(1);
  }

  /* ── Active indicator: pill ───────────────────────────────────── */
  [data-ps-indicator="pill"] .ps-nav-item--current > .ps-nav-link {
    background: var(--ps-nav-indicator-color, rgba(0,0,0,0.08));
  }

  /* ── Hamburger animation when open ───────────────────────────── */
  .ps-nav-toggle[aria-expanded="true"] .ps-nav-toggle-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .ps-nav-toggle[aria-expanded="true"] .ps-nav-toggle-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .ps-nav-toggle[aria-expanded="true"] .ps-nav-toggle-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Mobile sub-link hover ────────────────────────────────────── */
  .ps-nav-mobile-sub-link:hover {
    background: rgba(0,0,0,0.04);
  }
}