/*
Theme Name: 0xLimited
Theme URI: https://0xlimited.local
Author: 0xLimited
Description: Neo-brutalist theme for 0xLimited — the creator platform for authenticated physical products (toluTag). Homepage ported from the Claude Design handoff (Homepage.dc.html). WooCommerce/Dokan-ready.
Version: 0.9.65
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 0xlimited
*/

/* ---- Design tokens (from Homepage.dc.html) ---- */
:root {
  --oxl-bg:        #F4F4F4;
  --oxl-surface:   #F8F8F8;
  --oxl-card:      #FBFBFB;
  --oxl-ink:       #0A0A0A;
  --oxl-blue:      #63B3FF;
  --oxl-blue-soft: #8CC8FF;
  --oxl-blue-deep: #3AA0FF;
  --oxl-muted:     #3A3A3A;
  --oxl-muted-2:   #6A6A6A;
}

/* ---- Globals (ported from the design's <style> block) ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--oxl-ink);
  background: var(--oxl-bg);
  font-family: Poppins, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--oxl-ink); text-decoration: none; }
a:hover { color: #1E90FF; }
input, textarea, button, select { font-family: inherit; }
::placeholder { color: #8A8A8A; }

/* The [hidden] attribute must win over inline display:flex/grid used on panels
   (wizard steps, sale fields, deploy states) — otherwise toggling .hidden does nothing. */
[hidden] { display: none !important; }

/* ---- Interactive hover/active states (replaces the design's style-hover / style-active attrs) ---- */

/* Nav links */
.oxl-nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 14px;
  border: 2.5px solid transparent;
  color: #3A3A3A;
}
.oxl-nav-link:hover { border-color: #0A0A0A; background: #fff; color: #0A0A0A; }
/* The section currently under the header (set by the homepage's scroll spy). */
.oxl-nav-link.is-active { border-color: #0A0A0A; background: #8CC8FF; color: #0A0A0A; font-weight: 700; }

/* Connect Wallet pill */
.oxl-connect {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 2.5px solid #0A0A0A;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 3px 3px 0 #0A0A0A;
}
.oxl-connect:hover { background: #63B3FF; }

/* Shadow-lift buttons — shadow colour comes from inline --sh (default black) */
.oxl-lift {
  box-shadow: 6px 6px 0 var(--sh, #0A0A0A);
  transition: transform 0.12s, box-shadow 0.12s;
}
.oxl-lift:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--sh, #0A0A0A); }
.oxl-lift:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--sh, #0A0A0A); }

/* Cards that lift on hover (steps, use-cases, collections) */
.oxl-card {
  box-shadow: 7px 7px 0 #0A0A0A;
  transition: transform 0.12s, box-shadow 0.12s;
}
.oxl-card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #0A0A0A; }

/* Small "Explore" button — background change only (keeps its static inline shadow) */
.oxl-explore:hover { background: #63B3FF; }

/* Use-case carousel prev/next arrows */
.oxl-ucnav:hover { background: #8CC8FF; }

/* Manage button on collection cards (bg change on hover) */
.oxl-manage:hover { background: #63B3FF; color: #0A0A0A; }

/* Ghost / secondary buttons */
.oxl-ghost:hover { background: #EDEDED; }

/* Upload dropzone hover */
.oxl-upload:hover { background-color: #DCEDFF; }

/* Form inputs — focus ring from the design */
input:focus, textarea:focus, select:focus { outline: none; box-shadow: 5px 5px 0 #1E90FF; }

/* Collection-type choice cards (selected state driven by JS) */
.oxl-choice { background: #fff; box-shadow: 0 0 0 #0A0A0A; }
.oxl-choice.is-selected { background: #8CC8FF; box-shadow: 6px 6px 0 #0A0A0A; }
.oxl-choice .oxl-choice-dot { background: #fff; }
.oxl-choice.is-selected .oxl-choice-dot { background: #3AA0FF; }

/* Network picker buttons (selected state driven by JS) */
.oxl-net { background: #fff; box-shadow: 0 0 0 #0A0A0A; }
.oxl-net.is-selected { background: #8CC8FF; box-shadow: 5px 5px 0 #0A0A0A; }
.oxl-net .oxl-net-dot { background: #fff; }
.oxl-net.is-selected .oxl-net-dot { background: #3AA0FF; }

/* Wizard progress bars */
.oxl-stepbar { background: #fff; }
.oxl-stepbar.is-done { background: #3AA0FF; }

/* Deploy spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.oxl-spin { animation: spin 1s linear infinite; }

/* Collection Management tabs (active state driven by JS) */
.oxl-tab { background: #fff; color: #6A6A6A; }
.oxl-tab.is-active { background: #8CC8FF; color: #0A0A0A; }
.oxc-product-row:hover { background: #DCEDFF; }

/* ---- Anchor navigation ---- */
/* The header is sticky, so leave room for it above whatever section is scrolled to. */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

/* ---- Waitlist / partnership popup ---- */
.oxl-modal { opacity: 0; transition: opacity 0.22s ease; }
.oxl-modal.is-open { opacity: 1; }
.oxl-modal .oxl-modal-card { transform: translateY(10px) scale(0.99); transition: transform 0.22s ease; }
.oxl-modal.is-open .oxl-modal-card { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oxl-modal, .oxl-modal .oxl-modal-card { transition: none; }
}

/* ---- Collection page: 3D viewer + dark sidebar (stats + attributes) ---- */
/* The viewer sets the height of the row; the sidebar matches it and scrolls its
   attribute list rather than stretching the card. */
.oxc-viewer { min-height: 460px; }
.oxc-side { background: #0A0A0A; display: flex; flex-direction: column; min-width: 0; max-height: 460px; }
/* Blocks keep their natural height. Without this the stats block shrinks to make
   room for a long attribute list and its last row gets clipped behind the
   attributes header — only the attributes block should give, and it scrolls. */
.oxc-side-block { display: flex; flex-direction: column; min-height: 0; flex-shrink: 0; }
.oxc-side-head { flex-shrink: 0; }
.oxc-stat { flex-shrink: 0; }
.oxc-side-block + .oxc-side-block { border-top: 1px solid #262626; }
.oxc-side-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 20px; background: #151515; border-bottom: 1px solid #262626;
}
.oxc-side-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #7E7E7E;
}
.oxc-side-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #8CC8FF; }

/* stat rows */
.oxc-stat { padding: 14px 20px; display: flex; flex-direction: column; gap: 9px; border-bottom: 1px solid #1C1C1C; }
.oxc-stat:last-child { border-bottom: 0; }
.oxc-stat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.oxc-stat-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: #7E7E7E;
}
.oxc-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.oxc-stat-track { height: 5px; background: #242424; }
.oxc-stat-track > div { height: 100%; width: 0%; transition: width 0.3s; }

/* attribute rows */
.oxc-attrs { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.oxc-attrs::-webkit-scrollbar { width: 8px; }
.oxc-attrs::-webkit-scrollbar-thumb { background: #2E2E2E; }
.oxc-attrs::-webkit-scrollbar-track { background: #131313; }
.oxc-attr {
  padding: 11px 20px; display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; border-bottom: 1px solid #1C1C1C;
}
.oxc-attr:last-child { border-bottom: 0; }
.oxc-attr-name {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: #7E7E7E;
  flex: 0 0 auto; white-space: nowrap;
}
.oxc-attr-value {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700; color: #fff;
  text-align: right; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.oxc-attr-note {
  padding: 16px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #7E7E7E; line-height: 1.6; overflow-wrap: anywhere;
}

/* ---- Header menu + mobile burger ----
   Desktop: nav links and the Connect Wallet pill sit inline on the right.
   Mobile (<= 900px): both collapse behind a burger that drops a panel down. */
.oxl-menu { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.oxl-connect-wrap { display: flex; align-items: center; }
.oxl-burger { display: none; }

@media (max-width: 900px) {
  /* Burger sits where the nav used to, on the right of the bar. */
  .oxl-burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    border: 2.5px solid #0A0A0A;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 3px 3px 0 #0A0A0A;
  }
  .oxl-burger span {
    display: block;
    width: 20px;
    height: 2.5px;
    background: #0A0A0A;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  /* Burger morphs into an "×" while the panel is open. */
  .oxl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .oxl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .oxl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* The menu drops out of the flow into a full-width panel under the header. */
  .oxl-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 16px 26px 20px;
    background: #F8F8F8;
    border-bottom: 3px solid #0A0A0A;
    box-shadow: 0 10px 24px rgba(10, 10, 10, 0.12);
  }
  .oxl-header.is-open .oxl-menu { display: flex; }

  .oxl-menu nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    width: 100%;
  }
  .oxl-menu nav a { display: block; }
  .oxl-connect-wrap { margin-top: 4px; }
  .oxl-connect-wrap [data-ox-connect] { width: 100%; justify-content: center; }
}

/* ---- Responsive niceties (most grids use auto-fit and collapse on their own) ---- */
@media (max-width: 640px) {
  .oxl-h1 { font-size: 48px !important; }
  .oxl-cta-h2 { font-size: 40px !important; }
}