/* The site header and footer, the same on every page (markup: scripts/site-header.mjs and site-footer.mjs).
   Loaded after each page's own stylesheets, none of which style .topbar or .site-footer (validate-analytics.mjs
   checks), so the chrome can't drift between page types. It sets its own colors and fonts for the same reason.
   Wider screens show Browse, Guides, About and Suggest in the header; up to 800px the header is one row of logo
   and ☰ (site-header.js opens the menu), with search below. */
.topbar,
.site-footer {
  --night: #11111a;
  --cream: #fff7e8;
  --ink: #1d1d2b;
  --muted-cream: #b9b6c7;
  --pink: #f36b9b;
  --yellow: #f4d35e;
  --mint: #a7e8d4;
  --lavender: #a993ff;
  --soft-mint: #9fc8bc;
  --hairline: rgba(255, 247, 232, .16);
  --display: "Fredoka", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --ui: "Inter", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  font-family: var(--ui);
}

.topbar {
  animation: fadeUp 360ms ease both;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
  padding: 12px 0 24px;
  color: var(--ink);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.header-search {
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  margin: 0;
}

.header-search-field {
  display: grid;
  grid-template-columns: 18px minmax(90px, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 0 0 13px;
  border: 1px solid rgba(255, 247, 232, .24);
  border-radius: 22px;
  background: rgba(255, 247, 232, .055);
  color: inherit;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.header-search-field:focus-within {
  border-color: var(--pink, #f36b9b);
  background: rgba(255, 247, 232, .08);
  box-shadow: 0 0 0 3px rgba(243, 107, 155, .13);
}

.header-search-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  color: var(--muted-cream, rgba(255, 247, 232, .65));
}

.header-search input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cream, #fff7e8);
  caret-color: var(--pink, #f36b9b);
  -webkit-text-fill-color: var(--cream, #fff7e8);
  font-size: .84rem;
}

.header-search input:focus,
.header-search input:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.header-search input::selection {
  background: var(--pink, #f36b9b);
  color: #17121b;
  -webkit-text-fill-color: #17121b;
}

.header-search input::-webkit-search-cancel-button {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.header-search input:-webkit-autofill,
.header-search input:-webkit-autofill:hover,
.header-search input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a1924 inset;
  -webkit-text-fill-color: var(--cream, #fff7e8);
  caret-color: var(--pink, #f36b9b);
  transition: background-color 9999s ease-out 0s;
}

.header-search input::placeholder {
  color: var(--muted-cream, rgba(255, 247, 232, .58));
  opacity: 1;
}

@media (max-width: 800px) {
  .header-search input {
    font-size: 1rem;
  }
}

.header-search button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--yellow, #f4d35e);
  font-size: 1rem;
}

.header-search button:hover,
.header-search button:focus-visible {
  background: rgba(244, 211, 94, .14);
  outline: 0;
}

.site-footer {
  padding: 18px clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--hairline, rgba(255, 247, 232, 0.16));
  background: #0e0e17;
  color: var(--muted-cream, #b9b6c7);
}

.site-footer-inner {
  display: block;
  width: min(100%, 1680px);
  margin: 0 auto;
}

.site-footer p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.site-footer strong,
.footer-studio-link {
  color: var(--cream, #fff7e8);
  font-weight: 700;
}

.footer-brand {
  font-size: 0.82rem;
}

.footer-studio-link {
  text-decoration-color: rgba(255, 247, 232, 0.38);
  text-underline-offset: 3px;
}

.footer-studio-link:hover,
.footer-studio-link:focus-visible {
  color: var(--mint, #a7e8d4);
  text-decoration-color: currentColor;
}

.site-footer-signoff {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline, rgba(255, 247, 232, 0.16));
}

.footer-divider {
  color: var(--muted-cream, #b9b6c7);
}

.site-footer p.site-footer-disclaimer {
  padding-top: 12px;
  font-size: 0.74rem;
  line-height: 1.5;
}

.footer-heart {
  color: var(--pink, #f36b9b);
}

@media (max-width: 640px) {
  .site-footer-signoff {
    gap: 8px;
  }
}

.topbar .brand-title {
  margin: 0;
  color: var(--ink);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.46), 0 0 36px rgba(111, 202, 148, 0.18);
}

@media (max-width: 980px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .header-search {
    flex: 1 1 240px;
    width: min(100%, 320px);
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .topbar-actions {
    width: 100%;
  }

  .header-search {
    order: 10;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .topbar {
    min-height: auto;
    padding: 10px 0 20px;
  }

  .brand-lockup {
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }

  .topbar .brand-title {
    max-width: 10ch;
    font-size: 3rem;
    line-height: 0.98;
  }
}

@media (max-width: 380px) {
  .topbar .brand-title {
    font-size: 2.55rem;
  }
}

.topbar {
  min-height: 80px;
  padding: 22px 24px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--night);
}

.brand-lockup {
  color: var(--cream);
  text-decoration: none;
}

.brand-lockup:hover,
.brand-lockup:focus-visible {
  color: var(--cream);
  text-decoration: none;
}

.brand-lockup .brand-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
}

.topbar .brand-title {
  color: var(--cream);
}

.sparkle-mark {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  color: var(--cream);
}

.brand-lockup .brand-title {
  font-family: var(--display);
  letter-spacing: 0;
}

.brand-byline {
  margin: 7px 0 0;
  color: var(--muted-cream);
  font-size: .82rem;
}

.topbar-actions {
  gap: 22px;
}

.site-menu > a:not(.header-cta) {
  color: var(--muted-cream);
  font-size: .92rem;
  text-decoration: none;
}

.site-menu > a:not(.header-cta):hover {
  color: var(--cream);
}

.site-menu {
  display: contents;
}

.site-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(255, 247, 232, .22);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.site-menu-toggle > span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.site-menu-toggle:hover,
.site-menu-toggle:focus-visible,
.site-menu-toggle[aria-expanded="true"] {
  border-color: var(--pink);
}

.topbar-actions .header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--mint);
  border-radius: 22px;
  background: rgba(167,232,212,.1);
  color: var(--cream);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.topbar-actions .header-cta-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-actions .header-cta:hover,
.topbar-actions .header-cta:focus-visible {
  background: var(--mint);
  color: #17121b;
}

.topbar-actions .header-cta:hover .header-cta-icon,
.topbar-actions .header-cta:focus-visible .header-cta-icon {
  stroke: #17121b;
}

.header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--mint);
  border-radius: 24px;
  background: rgba(167, 232, 212, .08);
  color: var(--cream);
  font-size: .88rem;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(167, 232, 212, .26);
}

.header-cta::after {
  content: "";
  position: absolute;
  inset: -4px -5px;
  border: 2px solid rgba(167, 232, 212, .65);
  border-radius: 49% 51% 48% 52%;
  transform: rotate(-2deg);
  pointer-events: none;
}

/* "Suggest a card" is mint: pink belongs to wishing (#119). */
.header-cta:hover,
.header-cta:focus-visible {
  border-color: var(--mint);
  background: var(--mint);
  color: #17121b;
}

/* The collection, guides, sets and About keep the header in view on wider screens. */

.collection-page-shell .topbar,
.guides-shell .topbar,
.guide-page-shell .topbar,
.about-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(17, 17, 26, .96);
  backdrop-filter: blur(14px);
}

@media (max-width: 800px) {
  .topbar,
  .collection-page-shell .topbar,
  .guides-shell .topbar,
  .guide-page-shell .topbar,
  .about-shell .topbar {
    position: relative;
    z-index: 20;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 12px;
    border-radius: 0;
    padding: 16px 18px;
  }

  .topbar-actions {
    display: contents;
  }

  .brand-lockup {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    gap: 10px;
  }

  .brand-lockup .brand-title {
    font-size: 1.35rem;
    white-space: nowrap;
  }

  .sparkle-mark {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .brand-byline {
    margin-top: 4px;
    font-size: .72rem;
  }

  .site-menu-toggle {
    display: grid;
    grid-column: 2;
    grid-row: 1;
  }

  .topbar-actions .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  .site-menu {
    position: absolute;
    top: 68px;
    right: 14px;
    z-index: 30;
    display: none;
    min-width: 220px;
    padding: 8px;
    border: 1px solid rgba(169, 147, 255, .28);
    border-radius: 16px;
    background: #1d1d35;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
  }

  .site-menu-toggle[aria-expanded="true"] + .site-menu {
    display: grid;
  }

  .site-menu > a:not(.header-cta) {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    color: var(--cream);
    font-size: 1.02rem;
  }

  .site-menu > a[aria-current="page"] {
    background: rgba(243, 107, 155, .14);
  }

  .site-menu > .header-cta {
    margin-top: 6px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    box-shadow: none;
    font-size: 1.02rem;
  }

  .site-menu > .header-cta::after {
    display: none;
  }
}

/* Wishlist (#119): pink belongs to wishing. Wider screens show "★ Wishlist 6" with the other links; phones keep
   a ★ with a count badge beside ☰, outside the menu, so it's always one tap away. */
.menu-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.menu-wishlist svg,
.header-wishlist svg {
  flex: 0 0 auto;
  fill: var(--pink, #f36b9b);
}

.menu-wishlist svg {
  width: 15px;
  height: 15px;
}

.menu-wishlist .wishlist-count {
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(243, 107, 155, .22);
  color: var(--cream, #fff7e8);
  font-size: .78em;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.header-wishlist {
  display: none;
}

@media (max-width: 800px) {
  .topbar,
  .collection-page-shell .topbar,
  .guides-shell .topbar,
  .guide-page-shell .topbar,
  .about-shell .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .site-menu-toggle {
    grid-column: 3;
  }

  .header-wishlist {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 247, 232, .18);
    border-radius: 14px;
    background: rgba(10, 10, 20, .4);
  }

  .header-wishlist svg {
    width: 20px;
    height: 20px;
  }

  .header-wishlist .wishlist-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pink, #f36b9b);
    color: #17121b;
    font: 700 .72rem/20px Inter, system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 0 0 2px #10111a;
  }

  /* The ★ beside ☰ stands in for it on phones. */
  .site-menu > a.menu-wishlist {
    display: none;
  }
}

/* The narrowest phones: keep "Sleepy Pokemon" clear of the wishlist and menu buttons. */
@media (max-width: 359px) {
  .brand-lockup .brand-title {
    font-size: 1.1rem;
  }

  .sparkle-mark {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }
}