/* ============================================================
   RWC Images - shared pill navigation
   Used by: home, about, contact, privacy, and print_header
   (portfolio.pl / seren_galleryview.pl inherit this via print_header)
   ============================================================ */

.pillnav{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:10px 0 16px;list-style:none;margin:0}
.pillnav li{margin:0;list-style:none;position:relative}

.pillnav a, .pillnav button.pillnav-trigger{
  display:inline-flex;align-items:center;gap:4px;
  padding:8px 16px;border-radius:999px;border:1px solid #d3d1c7;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:#5f5e5a;text-decoration:none;transition:all .15s;
  white-space:nowrap;background:none;cursor:pointer;font-family:inherit;
}
.pillnav a:hover, .pillnav button.pillnav-trigger:hover{border-color:#888780;color:#2c2c2a}
.pillnav a.active{background:#2c2c2a;color:#fff;border-color:#2c2c2a}

.pillnav-trigger .chevron{font-size:9px;transition:transform .15s}
.pillnav li.has-dropdown.is-open > .pillnav-trigger .chevron{transform:rotate(180deg)}

/* dropdown panel (e.g. Cards -> All Cards / Christmas Cards / Postcards) */
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid #d3d1c7;border-radius:10px;padding:6px;
  min-width:170px;display:none;flex-direction:column;gap:2px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);z-index:50;list-style:none;margin:0;
}
.pillnav li.has-dropdown.is-open .dropdown-menu{display:flex}
.dropdown-menu li{margin:0}
.dropdown-menu a{border:none;border-radius:6px;padding:8px 12px;justify-content:flex-start;font-size:12px;color:#5f5e5a;width:100%}
.dropdown-menu a:hover{background:#f1efe8;color:#2c2c2a;border-color:transparent}

/* mobile hamburger toggle */
.nav-toggle{
  display:none;background:none;border:1px solid #d3d1c7;border-radius:8px;
  width:42px;height:38px;font-size:18px;color:#2c2c2a;cursor:pointer;
  margin:0 auto 4px;align-items:center;justify-content:center;
}

@media (max-width: 600px) {
  .nav-toggle{display:flex}
  .pillnav{display:none;flex-direction:column;align-items:stretch;gap:6px;padding:0 0 14px}
  .pillnav.nav-open{display:flex}
  .pillnav a, .pillnav button.pillnav-trigger{justify-content:center;width:100%}

  /* dropdown becomes an inline expandable section on mobile, not a popover */
  .dropdown-menu{position:static;transform:none;box-shadow:none;border:none;padding:0 0 0 16px;min-width:0;margin-top:4px}
}