/*
Theme Name: HydeVerse
Theme URI: https://hydeverse.com
Author: HydeVerse
Description: A bold, honest storefront for courses and eBooks. Works with the HydeVerse Products plugin. Buy buttons go to CourseClaw AI, Gumroad, Amazon, or Stripe. No outside fonts, no tracking.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.2
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hydeverse
*/
/* HydeVerse site styles. Colors live at the top so they're easy to change. */
:root {
  --bg: #0b0a12;
  --bg-2: #12111d;
  --card: #171626;
  --card-2: #1f1d33;
  --line: rgba(255,255,255,.09);
  --text: #f5f3ff;
  --muted: #a8a4c8;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --lime: #bef264;
  --pink: #f472b6;
  --bad: #fb7185;
  --ok: #4ade80;
  --warn: #fbbf24;
  --grad: linear-gradient(115deg, var(--violet), var(--cyan) 55%, var(--lime));
  --radius: 20px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f5ff; --bg-2: #efebff; --card: #ffffff; --card-2: #f3f0ff;
    --line: rgba(20,10,60,.1); --text: #14102b; --muted: #5d587d;
    --violet: #7c3aed; --cyan: #0891b2; --lime: #65a30d;
    --shadow: 0 14px 40px rgba(40,20,120,.12);
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--cyan); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.1; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.section { padding: 56px 20px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 10px; z-index: 99; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.logo-dot { width: 26px; height: 26px; border-radius: 9px; background: var(--grad); box-shadow: 0 0 24px color-mix(in srgb, var(--violet) 60%, transparent); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
.nav-links a:hover { color: var(--text); background: var(--card); }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--card-2); }
.menu-btn { display: none; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: 700 15px var(--font); cursor: pointer; }
@media (max-width: 760px) {
  .menu-btn { display: inline-block; }
  .nav-links { display: none; position: absolute; left: 12px; right: 12px; top: 64px; flex-direction: column; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; font-size: 17px; }
}

/* ---------- buttons ---------- */
.hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; font: 800 15px var(--font); color: #0b0a12; background: var(--grad); background-size: 140% 100%; padding: 12px 20px; border-radius: 999px; transition: transform .15s ease, background-position .3s ease, box-shadow .2s; box-shadow: 0 8px 24px color-mix(in srgb, var(--violet) 35%, transparent); }
.hv-btn:hover { transform: translateY(-2px); background-position: 100% 0; }
.hv-btn:active { transform: translateY(0); }
.hv-btn-big { padding: 15px 26px; font-size: 17px; }
.hv-btn-small { padding: 8px 14px; font-size: 14px; box-shadow: none; }
.hv-btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); box-shadow: none; }
.hv-btn-ghost:hover { border-color: var(--cyan); }
.hv-btn-danger { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); box-shadow: none; }
.linkish { background: none; border: 0; color: var(--muted); font: 600 15px var(--font); padding: 8px 14px; cursor: pointer; border-radius: 999px; }
.linkish:hover { color: var(--text); background: var(--card); }
.inline { display: inline; margin: 0; }
.link-arrow { color: var(--muted); text-decoration: none; font-weight: 700; }
.link-arrow:hover { color: var(--text); }
.back { display: inline-block; margin-bottom: 22px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; }
.hero::before { width: 520px; height: 520px; background: var(--violet); top: -220px; left: -120px; }
.hero::after { width: 460px; height: 460px; background: var(--cyan); bottom: -260px; right: -100px; opacity: .35; }
.hero-in { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 88px; max-width: 920px; margin-left: max(20px, calc((100vw - 1180px) / 2 + 20px)); }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 18px; }
.hero-title { font-size: clamp(42px, 8vw, 92px); font-weight: 900; letter-spacing: -.045em; background: linear-gradient(100deg, var(--text) 35%, var(--cyan) 70%, var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-text { margin-top: 22px; font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 640px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.counts { list-style: none; padding: 0; margin: 34px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.counts li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: 15px; color: var(--muted); }
.counts b { color: var(--text); }

/* ---------- headings ---------- */
.page-title { font-size: clamp(36px, 6vw, 60px); font-weight: 900; letter-spacing: -.04em; margin-bottom: 14px; }
.sub-title { font-size: 28px; margin: 48px 0 16px; }
.lead { font-size: 19px; max-width: 640px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sec-head h2, .section > h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.03em; }

/* ---------- cards ---------- */
.hv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.hv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s, box-shadow .2s; }
.hv-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--violet) 55%, transparent); box-shadow: var(--shadow); }
.hv-card-img { aspect-ratio: 16 / 10; background: var(--card-2); display: block; overflow: hidden; }
.hv-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hv-card:hover .hv-card-img img { transform: scale(1.04); }
.hv-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 900; color: #0b0a12; background: var(--grad); }
.hv-ph.big { font-size: 140px; }
.hv-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hv-card-body h3 { font-size: 20px; font-weight: 800; }
.hv-card-body h3 a { color: var(--text); text-decoration: none; }
.hv-card-body h3 a:hover { text-decoration: underline; }
.hv-clamp { color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.hv-card .hv-btn { align-self: flex-start; margin-top: 6px; }
.hv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hv-chip { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.hv-chip-course { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.hv-chip-ebook { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 40%, transparent); }
.hv-chip-price { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 40%, transparent); text-transform: none; }
.empty { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 40px 24px; text-align: center; color: var(--muted); }

/* ---------- shop bar ---------- */
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 28px 0 26px; }
.tabs { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.shop-bar .tabs { margin-bottom: 0; }
.tab { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 15px; padding: 9px 18px; border-radius: 999px; }
.tab:hover { color: var(--text); }
.tab.is-on { background: var(--grad); color: #0b0a12; }
.search input { width: min(340px, 82vw); background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 12px 18px; font: 500 16px var(--font); }
.search input::placeholder { color: var(--muted); }

/* ---------- steps + promise ---------- */
.steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.steps h3 { font-size: 21px; margin: 14px 0 8px; }
.steps p { color: var(--muted); }
.step-n { display: inline-flex; width: 42px; height: 42px; border-radius: 14px; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; color: #0b0a12; background: var(--grad); }
.promise { border-radius: 28px; padding: clamp(28px, 5vw, 52px); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--violet) 30%, var(--card)) 0%, var(--card) 60%); border: 1px solid var(--line); }
.promise h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 900; }
.promise ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.promise li { padding-left: 34px; position: relative; font-size: 18px; }
.promise li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 8px; background: var(--lime); color: #0b0a12; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }

/* ---------- product page ---------- */
.detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; } }
.detail-img { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--card-2); position: sticky; top: 90px; }
@media (max-width: 860px) { .detail-img { position: static; } }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-body { display: flex; flex-direction: column; gap: 18px; }
.detail-title { font-size: clamp(30px, 4.5vw, 48px); font-weight: 900; letter-spacing: -.035em; }
.detail-body .hv-btn { align-self: flex-start; }

/* ---------- text pages ---------- */
.prose { display: grid; gap: 14px; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.prose.big { font-size: 19px; margin: 10px 0 30px; }
.narrow h2 { font-size: 26px; margin: 40px 0 12px; scroll-margin-top: 90px; }
.toc { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 8px; }
.toc a { color: var(--text); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 15px; }
.toc a:hover { border-color: var(--cyan); }
.callout { margin-top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 40px 0 28px; background: var(--bg-2); }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-in .muted { margin-top: 8px; font-size: 15px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { color: var(--muted); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--text); }
.foot-small { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-color-scheme: light) {
  .hv-btn, .tab.is-on, .step-n, .hv-ph { color: #fff; }
  .hv-btn-ghost { color: var(--text); }
  .hv-btn-danger { color: var(--bad); }
  .promise li::before { color: #fff; }
}

/* ---------- WordPress content (pages you write in the editor) ---------- */
.empty, .hv-empty { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 40px 24px; text-align: center; color: var(--muted); }
.logo-img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.entry > * + * { margin-top: 0; }
.entry h2 { font-size: 26px; margin: 28px 0 0; scroll-margin-top: 90px; }
.entry h3 { font-size: 21px; margin: 18px 0 0; }
.entry ul, .entry ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.entry img { border-radius: 14px; height: auto; }
.entry figure { margin: 0; }
.entry blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--violet); color: var(--muted); }
.entry .wp-block-button__link { background: var(--grad); color: #0b0a12; border-radius: 999px; font-weight: 800; padding: 12px 22px; text-decoration: none; }
.entry .hv-btn { color: #0b0a12; }
.prose p { margin: 0; }
.alignwide { max-width: 1100px; }
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.post-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.post-item h2 a { color: var(--text); text-decoration: none; }
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }
@media (prefers-color-scheme: light) { .entry .wp-block-button__link, .entry .hv-btn { color: #fff; } }