/* =====================================================================
 * NEON CABINET — main.css
 * The theme's own chrome: topbar + slide-out menu, page shell, blog /
 * archive / single, comments, pagination, sidebar, footer, 404.
 *
 * style.css holds the reset, the --nc-* palette and the CRT overlay.
 * This file holds everything the GeekPress companion kit needs to sit on
 * (topbar search slot, .page wrapper, footer columns) plus the light mode.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * LIGHT MODE — re-bind the --nc-* chrome palette. The plugin surfaces
 * flip via --geekui-* in geekui-vars.css; this flips the theme chrome so
 * the two halves of the page stay in the same mode.
 * ------------------------------------------------------------------- */
body[data-theme="light"] {
  --nc-bg: #f7f1fb;
  --nc-bg-2: #efe4f5;
  --nc-surface: #ffffff;
  --nc-text: #26102e;
  --nc-text-dim: #4c3a55;
  --nc-mute: #7d6b88;
  --nc-accent: #c11f9a;
  --nc-accent-2: #7b3fd4;
  --nc-accent-d: #8e0f73;
  --nc-ink: #ffffff;
  --nc-border: rgba(193, 31, 154, 0.42);
  --nc-cyan: #0090ad;
  --nc-yellow: #a07800;
}
body[data-theme="light"] {
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(123, 63, 212, 0.10), transparent 60%),
    linear-gradient(rgba(193, 31, 154, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 31, 154, 0.06) 1px, transparent 1px);
}
/* The scanline overlay must not muddy a light canvas. */
body[data-theme="light"]::after { mix-blend-mode: normal; opacity: 0.35; }

/* ---------------------------------------------------------------------
 * TOPBAR
 * ------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  /* Above the CRT overlay (body::after, z-index 9999). The scanlines are the
     theme's signature over content, but across small bright UI they shred the
     label — the filled buttons read as striped rather than lit. */
  z-index: 10000;
  border-bottom: 2px solid var(--nc-border);
  background: color-mix(in srgb, var(--nc-bg) 90%, transparent);
  backdrop-filter: blur(8px);
}
.admin-bar .topbar { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .topbar { top: 46px; } }

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 22px;
  /* The menu overlay is a child of .topbar (header.php), so inside this
     stacking context it would paint over the bar itself and dim it while the
     menu is open. Lift the bar above it (overlay is z-index 48). */
  position: relative;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nc-title);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--nc-accent);
  text-shadow: 0 0 16px rgba(255, 46, 196, 0.45);
  white-space: nowrap;
}
.brand:hover { color: var(--nc-accent); }
.brand-mark { display: inline-flex; width: 26px; height: 26px; color: var(--nc-cyan); }
.brand-mark svg { width: 26px; height: 26px; }
.brand small,
.brand em {
  display: block;
  font-style: normal;
  font-family: var(--nc-pixel);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--nc-accent-2);
}

/* search slot — chrome lives in kit.css */
.topbar-search { margin-left: auto; min-width: 0; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }

.signin,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 2px solid var(--nc-border);
  background: transparent;
  color: var(--nc-text-dim);
  font-family: var(--nc-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, color 0.15s, border-color 0.15s;
}
.signin:hover,
.theme-toggle:hover {
  color: var(--nc-accent);
  border-color: var(--nc-accent);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--nc-accent-d);
}
.signin-prim {
  background: var(--nc-accent);
  border-color: #000;
  color: var(--nc-ink);
  box-shadow: 3px 3px 0 var(--nc-accent-d);
}
.signin-prim:hover { color: var(--nc-ink); }
.theme-toggle { width: 36px; padding: 0; }
.topbar-avatar {
  width: 30px;
  height: 30px;
  border: 2px solid var(--nc-border);
  border-radius: 0;
}

/* ---------------------------------------------------------------------
 * HAMBURGER + SLIDE-OUT MENU (driven by assets/js/main.js)
 * ------------------------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--nc-border);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.menu-toggle:hover { border-color: var(--nc-accent); }
.menu-toggle-lines { display: grid; gap: 4px; }
.menu-toggle-lines span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--nc-accent);
  transition: transform 0.18s, opacity 0.18s;
}
.menu-toggle.open .menu-toggle-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open .menu-toggle-lines span:nth-child(2) { opacity: 0; }
.menu-toggle.open .menu-toggle-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The slide-out panel, the overlay and the nav chips are owned by
   header-extras.css (the kit's dropdown-under-the-topbar design). It lives
   inside .topbar, so it inherits that stacking context and clears the CRT
   overlay for free. Cabinet re-dress: kit.css. */

/* ---------------------------------------------------------------------
 * PAGE SHELL — the kit's front-page.php renders `.page.gpg-home`
 * ------------------------------------------------------------------- */
/* Scoped to the shell on purpose: WordPress also puts `page` on <body> for any
   static page, so a bare `.page` rule capped the whole document at 1180px and
   pulled the topbar in with it. */
.nc-main .page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 22px 70px;
}
.gpg-home { --gpg-home-gap: 20px; }
.gpg-home-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gpg-home-gap);
  align-items: flex-start;
}
.gpg-home-widget { min-width: 0; }
.gpg-home-placeholder {
  border: 2px dashed var(--nc-border);
  padding: 26px;
  text-align: center;
  font-family: var(--nc-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--nc-mute);
}

.hero-title { font-size: clamp(26px, 4vw, 40px); }
.hero-rule {
  height: 4px;
  width: 120px;
  margin: 0 0 22px;
  background: linear-gradient(90deg, var(--nc-accent), var(--nc-accent-2), transparent);
}

/* ---------------------------------------------------------------------
 * BLOG / ARCHIVE / SINGLE
 * ------------------------------------------------------------------- */
.entry-content { color: var(--nc-text-dim); }
.entry-content a { border-bottom: 1px solid var(--nc-border); }
.entry-content h2,
.entry-content h3 { color: var(--nc-text); margin-top: 1.4em; }
.entry-content blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--nc-accent);
  background: var(--nc-surface);
  font-style: italic;
}
.entry-content pre,
.entry-content code {
  font-family: var(--nc-mono);
  background: var(--nc-bg-2);
  border: 1px solid var(--nc-border);
}
.entry-content pre { padding: 14px; overflow-x: auto; }
.entry-content img { border: 2px solid var(--nc-border); }

.post-thumb { margin-bottom: 16px; border: 2px solid var(--nc-border); }

/* ---------------------------------------------------------------------
 * COMMENTS
 * ------------------------------------------------------------------- */
.comments-area {
  margin-top: 44px;
  border: 2px solid var(--nc-border);
  background: var(--nc-surface);
  box-shadow: 5px 5px 0 var(--nc-accent-d);
  padding: 24px;
}
.comments-area h3,
.comments-area .comments-title,
.comment-reply-title { font-family: var(--nc-title); text-transform: uppercase; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.comment-list .children { list-style: none; margin: 14px 0 0 22px; padding: 0; display: grid; gap: 14px; }
.comment-body {
  border: 2px solid var(--nc-border);
  background: var(--nc-bg-2);
  padding: 16px;
}
.comment-meta,
.comment-metadata { font-family: var(--nc-mono); font-size: 11px; text-transform: uppercase; color: var(--nc-mute); }
.comment-author .fn { font-family: var(--nc-title); color: var(--nc-text); }
.comment-form label { display: block; font-family: var(--nc-mono); font-size: 11px; text-transform: uppercase; color: var(--nc-mute); margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-field,
input[type="search"].search-field {
  width: 100%;
  padding: 11px 14px;
  background: var(--nc-bg-2);
  color: var(--nc-text);
  border: 2px solid var(--nc-border);
  border-radius: 0;
  font-family: var(--nc-mono);
}
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--nc-cyan); }
.comment-form .submit,
.filter-btn,
button[type="submit"].filter-btn {
  font-family: var(--nc-title);
  text-transform: uppercase;
  font-size: 12px;
  padding: 12px 20px;
  background: var(--nc-accent);
  color: var(--nc-ink);
  border: 2px solid #000;
  box-shadow: 4px 4px 0 var(--nc-accent-d);
  cursor: pointer;
}
.comment-form .submit:hover { transform: translate(-1px, -1px); }

/* ---------------------------------------------------------------------
 * SEARCH FORM BLOCK (searchform.php) + SIDEBAR
 * ------------------------------------------------------------------- */
.search-form-block { display: flex; gap: 8px; margin-bottom: 26px; }
.search-form-block input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  background: var(--nc-bg-2);
  color: var(--nc-text);
  border: 2px solid var(--nc-border);
  font-family: var(--nc-mono);
}
.search-form-block input[type="search"]:focus { outline: none; border-color: var(--nc-cyan); }

.sidebar { display: grid; gap: 18px; }
.info-card,
.nc-widget,
.widget-area .widget {
  border: 2px solid var(--nc-border);
  background: var(--nc-surface);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  padding: 18px;
}
.info-card h3,
.widget-area .widget h3 { font-family: var(--nc-title); font-size: 14px; text-transform: uppercase; }
.widget-area ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.widget-area li a { font-family: var(--nc-mono); font-size: 13px; color: var(--nc-text-dim); }
.widget-area li a:hover { color: var(--nc-accent); }

/* ---------------------------------------------------------------------
 * PAGINATION
 * ------------------------------------------------------------------- */
.nav-links,
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.nav-links .page-numbers,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 2px solid var(--nc-border);
  background: var(--nc-surface);
  color: var(--nc-text-dim);
  font-family: var(--nc-mono);
  font-size: 12px;
}
.nav-links .page-numbers:hover,
.pagination .page-numbers:hover { color: var(--nc-accent); border-color: var(--nc-accent); }
.nav-links .page-numbers.current,
.pagination .page-numbers.current {
  background: var(--nc-accent);
  border-color: #000;
  color: var(--nc-ink);
  box-shadow: 3px 3px 0 var(--nc-accent-d);
}

/* ---------------------------------------------------------------------
 * FOOTER — three widget columns above the marquee
 * ------------------------------------------------------------------- */
.nc-footer { border-top: 2px solid var(--nc-border); padding: 34px 22px; }
.nc-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto 26px;
  text-align: left;
}
.footer-widget h4 {
  font-family: var(--nc-title);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--nc-accent);
}
.footer-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-widget a { font-family: var(--nc-mono); font-size: 13px; color: var(--nc-text-dim); }
.footer-widget a:hover { color: var(--nc-accent); }
.nc-footer__note { text-align: center; }

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .topbar-inner { gap: 10px; padding: 10px 14px; }
  .brand { font-size: 15px; }
  .signin { display: none; }
  .signin-prim { display: inline-flex; }
  .page { padding: 24px 14px 60px; }
}
@media (max-width: 620px) {
  .brand small, .brand em { display: none; }
  .gpg-home-widget {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel { transition: none; }
}