/* Poliquicks navigation — replaces the Squarespace "burger everywhere" header.
   Desktop (≥ 960px): the links live in the bar. Smaller screens keep the
   burger, with a compact overlay that fits on one screen. Loaded last, after
   the exported Squarespace stylesheets, so plain selectors win here. */

/* ---------- desktop bar ---------- */
@media screen and (min-width: 1060px) {
  .header-display-desktop { display: flex !important; align-items: center; }
  .header-display-mobile { display: none !important; }
  .header-display-desktop .header-burger { display: none !important; }
  .header-display-desktop .header-title-nav-wrapper { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 1.6rem; max-width: none !important; }
  .header-display-desktop .header-nav { display: flex !important; flex: 1 0 auto; justify-content: flex-end; overflow: visible !important; }
  .header-display-desktop .header-nav-list { display: inline-flex; align-items: center; gap: 1.05rem; flex-wrap: nowrap; }
  .header-display-desktop .header-nav-item { margin: 0 !important; padding: 0 !important; }
  .header-display-desktop .header-nav-item a {
    font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; color: #1f2233;
    text-decoration: none; padding: 0.35rem 0; border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s; white-space: nowrap;
  }
  .header-display-desktop .header-nav-item a:hover { color: #7c3aed; }
  .header-display-desktop .header-nav-item--active a { color: #7c3aed; border-bottom-color: #7c3aed; }
  .header-display-desktop .header-nav-item:has(> a[href="index.html"]) { display: none; }   /* the logo already goes home */
  .header-display-desktop .header-actions--right {
    display: inline-flex !important; position: static !important; transform: none !important;
    align-items: center; gap: 0.9rem; margin-left: 1rem; flex: 0 0 auto;
  }
  .header-display-desktop .header-actions .showOnDesktop,
  .header-display-desktop .header-actions-action--social { display: none !important; }
  .header-display-desktop .header-actions-action { margin: 0 !important; }
  .header-display-desktop .header-actions-action--cta { display: inline-flex !important; align-items: center; gap: 0.9rem; }
  /* Squarespace's .btn rules are heavy-handed; pin the two links down explicitly. */
  .header-display-desktop .header-actions-action--cta a.btn {
    display: inline-block !important; font-size: 0.82rem !important; font-weight: 700 !important; line-height: 1.1 !important;
    padding: 0.45rem 0.9rem !important; margin: 0 !important; border-radius: 999px !important; white-space: nowrap;
    text-decoration: none !important; letter-spacing: 0 !important; text-transform: none !important;
  }
  .header-display-desktop .header-actions-action--cta a.btn[href*="admin/login"] {
    background: #7c3aed !important; border: 2px solid #7c3aed !important; color: #fff !important;
    order: 2;   /* the button closes the bar; Merch sits just before it */
  }
  .header-display-desktop .header-actions-action--cta a.btn[href*="admin/login"]:hover { background: #5b21b6 !important; border-color: #5b21b6 !important; }
  /* Merch lives in the footer pill and the phone menu; the bar keeps one action. */
  .header-display-desktop .header-actions-action--cta a.btn:not([href*="admin/login"]) { display: none !important; }
}

/* ---------- phone / tablet overlay ---------- */
/* Structure (Squarespace): .header-menu-nav > .header-menu-nav-list >
   .header-menu-nav-folder (absolute, full height) > .header-menu-nav-folder-content
   (flex column) > items, then the social icons and the two buttons. The folder
   content is centred vertically by default; start it under the logo instead
   and let everything stack — no scrolling, no huge type. */
.header-menu { text-align: center !important; }
.header-menu-nav-folder-content { justify-content: flex-start !important; padding-top: 5.5rem; }
/* The link list normally fills the whole overlay (an absolutely positioned,
   full-height "folder" — there are no sub-menus here), which pins the icons
   and buttons to the bottom edge. Make it ordinary flow so they follow the links. */
.header-menu-nav-list { flex: 0 0 auto !important; }
.header-menu-nav-folder { position: static !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
.header-menu-nav-wrapper { flex: 0 0 auto !important; }
.header-menu-nav-item { padding: 0 !important; }
.header-menu-nav-item a {
  font-size: 1.4rem !important; font-weight: 500; margin: 0.4rem 0 !important;
  padding: 0.2rem 0.75rem; border-radius: 8px; color: #1f2233;
}
.header-menu-nav-item--active a, .header-menu-nav-item a:hover { color: #7c3aed; }
.header-menu-actions { margin: 1.4rem 0 0.2rem !important; }
.header-menu-cta {
  display: flex !important; justify-content: center !important; flex-wrap: wrap; gap: 0.7rem;
  margin: 1rem auto 0 !important; padding: 0 1.25rem 2rem; width: auto !important;
}
.header-menu-cta a.btn {
  display: inline-block !important; width: auto !important; min-width: 0 !important; font-size: 0.95rem !important;
  padding: 0.7rem 1.4rem !important; margin: 0 !important; border-radius: 999px !important;
}

/* ---------- footer: merch as a small outlined pill under the social icons ---------- */
.site-footer__merch {
  display: inline-block; margin-top: 1.1rem; padding: 0.5rem 1.1rem;
  border: 2px solid rgba(255,255,255,0.75); border-radius: 999px;
  color: #fff !important; font-weight: 700; font-size: 0.9rem; text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.site-footer__merch:hover { background: #fff; color: #7c3aed !important; border-color: #fff; }