/* Nexaris logo -- one place for every page's top nav, the access-gate pop-up and the disclaimer pop-up.

   TWO ARTWORKS, SWAPPED BY THEME. The neon logo is for the dark theme; a separate colour logo is for the light theme
   (html[data-theme="light"]). Every slot holds two <img>s (…--dark and …--light) and CSS shows the one that matches.
   Both are transparent WebPs, so they blend into the bar behind them (no boxes, no plates).

   HEADER: /assets/nexaris-logo-header.webp (dark) and /assets/nexaris-logo-header-light.webp (light) are the same
   artwork re-proportioned as a wide lockup (the wordmark is ~80% of the pepper's height instead of under half), so NEXARIS
   and RESEARCH stay readable inside a short bar. Sized to fit each page's existing bar WITHOUT changing the bar's height:
   tool/account/order/admin bars are 54px, landing + membership + the two review pages 60px; both shrink on phones.
   POP-UPS: the original tall logos (/assets/nexaris-logo.webp, /assets/nexaris-logo-light.webp). */

/* ---- header ---- */
.gp-logo-img {
  display: block;
  height: 46px;
  width: auto;          /* keeps the logo shape; the width/height attributes in the markup stop layout shift */
  max-width: 100%;
  object-fit: contain;  /* if a narrow bar ever squeezes the box, scale the art down instead of squashing it */
}
.gp-logo { min-width: 0; }
.landing-nav .gp-logo-img { height: 50px; }

/* ---- access gate (/shop, /tool) -- replaces the old circular GrayPeppers badge ---- */
/* The gate's older `.gate-logo img` rule (120px, colour filter, green glow) is overridden here. */
.gate-logo .gate-logo-img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  filter: none;
  box-shadow: none;     /* the old badge rule's glow would draw a rectangle around a transparent logo */
}

/* ---- disclaimer pop-up (landing) ---- */
.compliance-gate-logo-img { display: block; }

/* ---- theme swap: dark artwork by default, light artwork when the light theme is on ---- */
.gp-logo-img--light,
.gate-logo .gate-logo-img--light,
.compliance-gate-logo-img--light { display: none; }

html[data-theme="light"] .gp-logo-img--dark,
html[data-theme="light"] .gate-logo .gate-logo-img--dark,
html[data-theme="light"] .compliance-gate-logo-img--dark { display: none; }

html[data-theme="light"] .gp-logo-img--light,
html[data-theme="light"] .gate-logo .gate-logo-img--light,
html[data-theme="light"] .compliance-gate-logo-img--light { display: block; }

/* Keeps a heading for screen readers where the logo image already shows the name. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The landing-style nav drops from 60px to 50px at 640px, so its logo steps down with it. */
@media (max-width: 640px) {
  .landing-nav .gp-logo-img { height: 38px; }
  /* Landing, membership and the two checkout-review pages kept 32px side padding on phones, which leaves too
     little width beside the logo; the shop pages already use 16px here. */
  nav.landing-nav, .landing-nav { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 480px) {
  .gp-logo-img { height: 34px; }
  .landing-nav .gp-logo-img { height: 33px; }
}

/* ---- typeset wordmark (redesign 2026-11): replaces the raster logos in every header and pop-up ---- */
.nx-wordmark {
  display: inline-block; font-family: 'Sora', 'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
  color: var(--text-main, #1f0f2b);
}
.nx-wordmark > span {
  font-family: 'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif; font-weight: 400;
  font-size: 0.64em; letter-spacing: 0.18em; margin-left: 0.5em; color: var(--text-sub, #50455a);
}
.nx-wordmark--lg { font-size: 30px; }
.thanks-header .nx-wordmark { display: block; font-size: 34px; margin: 0 auto 1.1rem; text-align: center; }
@media (max-width: 480px) {
  .nx-wordmark { font-size: 19px; }
  .nx-wordmark > span { display: none; }
  .nx-wordmark--lg { font-size: 26px; }
  .nx-wordmark--lg > span { display: inline; font-size: 0.5em; }
}

/* ---- theme toggle: a line icon instead of the sun / moon emoji the page scripts put in the button (landing draws its own) ---- */
.theme-toggle-icon:not(:has(svg)) { font-size: 0; line-height: 0; display: inline-flex; width: 18px; height: 18px; }
.theme-toggle-icon:not(:has(svg))::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme="light"] .theme-toggle-icon:not(:has(svg))::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z'/%3E%3C/svg%3E");
}

/* Page wash: a soft white-to-lavender gradient instead of one flat colour (light and dark). */
:root { --wash: linear-gradient(160deg, #ffffff 0%, #f1edf6 40%, #ddd2ea 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wash: linear-gradient(160deg, #0f0a16 0%, #170f22 45%, #2a1a3f 100%); } }
:root[data-theme="dark"] { --wash: linear-gradient(160deg, #0f0a16 0%, #170f22 45%, #2a1a3f 100%); }
body { background-image: var(--wash); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%; }