/* =============================================================
   HEYJON.COM — site styles
   Source of truth: design/HeyJon-Website.dc.html + HeyJon design
   system tokens. Dark theme default; light theme via
   html[data-hj-theme="light"]. Buttons stay gold + black text in
   both themes. Header/footer/editorial cards are always dark.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { background: #101010; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html[data-hj-theme="light"] { background: #F7F9FC; }
body { margin: 0; }

img { max-width: 100%; height: auto; }

/* ---------- theme variables ---------- */
.hjroot {
  --pg:#101010; --pg2:#0C0C0C; --card:#172D3F; --card2:#1E3A4F;
  --tx:#F6F6F6; --tx-hi:#FFFFFF; --tx-mut:#A5A5A5;
  --acc:#CC9E00; --acc-hi:#E6B800;
  --line:rgba(204,158,0,0.16); --line-mid:rgba(204,158,0,0.42);
  --in-bg:rgba(255,255,255,0.045); --in-line:rgba(204,158,0,0.28);
  --glow:rgba(204,158,0,0.30); --hd-bg:rgba(13,13,13,0.96);
  --scheme:dark;
  min-height:100vh; background:var(--pg); color:var(--tx);
  font-family:'Poppins','Segoe UI',system-ui,sans-serif;
  font-size:16px; line-height:1.6;
}
html[data-hj-theme="light"] .hjroot {
  --pg:#F7F9FC; --pg2:#FFFFFF; --card:#FFFFFF; --card2:#F3F0E7;
  --tx:#3A3F44; --tx-hi:#101010; --tx-mut:#6B7075;
  --acc:#8F6E00; --acc-hi:#755A00;
  --line:rgba(143,110,0,0.24); --line-mid:rgba(143,110,0,0.48);
  --in-bg:#FFFFFF; --in-line:rgba(143,110,0,0.38);
  --glow:rgba(204,158,0,0.18); --hd-bg:rgba(255,255,255,0.96);
  --scheme:light;
}

h1, h2, h3 { text-wrap: balance; }

/* ---------- motion ---------- */
@keyframes hjFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
main.hj-enter { animation: hjFadeUp 450ms ease both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- a11y ---------- */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#CC9E00; color:#101010; font-weight:700; padding:12px 20px; border-radius:0 0 8px 0; text-decoration:none;
}
.skip-link:focus { left:0; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.hidden { display:none !important; }

/* theme-conditional imagery */
.only-light { display:none !important; }
html[data-hj-theme="light"] .only-dark { display:none !important; }
html[data-hj-theme="light"] .only-light { display:block !important; }

/* ---------- grids that need a breakpoint ---------- */
.hj-3grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .hj-3grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  position:sticky; top:0; z-index:60;
  background:var(--hd-bg); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(204,158,0,0.22); color:var(--tx);
}
.header-bar {
  max-width:1240px; margin:0 auto; padding:0 clamp(16px,3vw,32px);
  height:100px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo-link { display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.logo-img { width:clamp(180px,24vw,287px); height:auto; display:block; margin-top:5px; }
.logo-img--light { display:none; }
html[data-hj-theme="light"] .logo-img--dark { display:none; }
html[data-hj-theme="light"] .logo-img--light { display:block; }

.desktop-nav { display:flex; align-items:center; gap:clamp(12px,2vw,28px); font-size:14.5px; font-weight:500; }
.nav-link { color:var(--tx); text-decoration:none; padding:10px 2px; transition:color 150ms ease; }
.nav-link:hover { color:var(--acc-hi); }
.nav-link[aria-current="page"], .nav-link.is-active { color:var(--acc-hi); }
html[data-hj-theme="light"] .nav-link[aria-current="page"], html[data-hj-theme="light"] .nav-link.is-active { color:var(--acc); }

/* services dropdown */
.svc { position:relative; }
.svc-btn {
  display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font:inherit; font-weight:500; color:var(--tx); padding:10px 2px; transition:color 150ms ease;
}
.svc-btn:hover { color:var(--acc-hi); }
.svc-btn.is-active { color:var(--acc-hi); }
html[data-hj-theme="light"] .svc-btn.is-active { color:var(--acc); }
.svc-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:6px; min-width:240px; display:none; z-index:61;
}
.svc:hover .svc-menu, .svc.open .svc-menu, .svc:focus-within .svc-menu { display:block; }
.svc-menu-inner {
  background:var(--pg2); border:1px solid var(--line-mid); border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,0.35); padding:10px; display:flex; flex-direction:column; gap:2px;
}
.svc-item { color:var(--tx); text-decoration:none; padding:11px 14px; border-radius:8px; transition:all 150ms ease; }
.svc-item:hover { background:rgba(204,158,0,0.12); color:var(--acc-hi); }
.svc-divider { border-top:1px dotted rgba(204,158,0,0.4); margin:4px 10px; }

/* header controls */
.header-controls { display:flex; align-items:center; gap:10px; flex:none; }
.theme-toggle {
  width:44px; height:44px; border-radius:9999px; background:none;
  border:1px solid var(--line-mid); color:var(--acc);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 150ms ease;
}
.theme-toggle:hover { border-color:var(--acc); background:rgba(204,158,0,0.1); }
.icon-moon { display:none; }
html[data-hj-theme="light"] .icon-sun { display:none; }
html[data-hj-theme="light"] .icon-moon { display:block; }

.menu-btn {
  width:44px; height:44px; border-radius:8px; background:none;
  border:1px solid var(--line-mid); color:var(--acc);
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
.menu-btn .icon-close { display:none; }
.menu-btn[aria-expanded="true"] .icon-burger { display:none; }
.menu-btn[aria-expanded="true"] .icon-close { display:block; }

/* mobile nav */
.mobile-nav {
  display:none; background:var(--pg2); border-top:1px solid rgba(204,158,0,0.2);
  padding:12px clamp(16px,3vw,32px) 24px; flex-direction:column; gap:2px; font-size:17px;
}
.mobile-nav.open { display:flex; }
.mnav-link { color:var(--tx); text-decoration:none; padding:13px 8px; border-bottom:1px dotted rgba(204,158,0,0.25); }
.mnav-link--sub { color:var(--tx-mut); padding-left:24px; }
.mnav-link:last-of-type { border-bottom:none; }

@media (max-width: 940px) {
  .desktop-nav, a.header-cta.btn-pill { display:none; }
  .menu-btn { display:flex; }
}
@media (min-width: 941px) {
  .mobile-nav { display:none !important; }
}

/* =============================================================
   BUTTONS + LINKS
   ============================================================= */
.btn {
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14px; letter-spacing:0.05em; text-transform:uppercase;
  border-radius:8px; border:none; transition:all 150ms ease;
}
.btn-gold { background:#CC9E00; color:#101010; padding:16px 30px; }
.btn-gold:hover { background:#E6B800; transform:translateY(-1px); }
.btn-gold--lg { padding:17px 34px; }
.btn-gold--md { padding:15px 28px; }
.btn-gold--sm { padding:14px 24px; font-size:13px; }
.btn-outline { background:none; color:var(--acc); border:1.5px solid #CC9E00; padding:15px 28px; }
.btn-outline:hover { background:rgba(204,158,0,0.1); transform:translateY(-1px); }
.btn-outline--sm { padding:13px 22px; font-size:13px; }
.btn-outline--xs { padding:13px 24px; font-size:13px; }
.btn-outline--md { padding:14px 26px; }
.btn-outline--stage { background:rgba(16,16,16,0.4); backdrop-filter:blur(4px); color:#E6B800; }
.btn-outline--stage:hover { background:rgba(204,158,0,0.16); }

.btn-pill {
  display:inline-flex; align-items:center; gap:8px; background:#CC9E00; color:#101010;
  text-decoration:none; font-weight:700; font-size:14px; padding:12px 22px;
  border-radius:9999px; min-height:44px; transition:all 150ms ease;
}
.btn-pill:hover { background:#E6B800; transform:translateY(-1px); }

.link-gold { color:var(--acc); text-decoration:none; font-weight:600; transition:color 150ms ease; }
.link-gold:hover { color:var(--acc-hi); }
.link-muted { color:var(--tx-mut); text-decoration:none; transition:color 150ms ease; }
.link-muted:hover { color:var(--acc); }

/* podcast platform chips */
.chip-link {
  font-size:13px; font-weight:500; color:var(--tx); border:1px solid var(--line-mid);
  border-radius:9999px; padding:8px 16px; text-decoration:none; transition:all 150ms ease;
}
.chip-link:hover { border-color:#CC9E00; color:var(--tx-hi); }

/* =============================================================
   CARDS
   ============================================================= */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; }
.lift { transition:all 250ms ease; }
.lift:hover { border-color:var(--line-mid); box-shadow:0 4px 20px rgba(204,158,0,0.12); transform:translateY(-2px); }
.lift-flat { transition:all 250ms ease; }
.lift-flat:hover { border-color:var(--line-mid); box-shadow:0 4px 20px rgba(204,158,0,0.1); }
.featured-card { transition:all 250ms ease; }
.featured-card:hover { box-shadow:0 4px 24px rgba(204,158,0,0.16); transform:translateY(-2px); }

/* =============================================================
   FORMS
   ============================================================= */
.field-label {
  font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--acc);
}
.field-label .optional { color:var(--tx-mut); text-transform:none; letter-spacing:0; font-weight:500; }
.input {
  min-height:50px; box-sizing:border-box; background:var(--in-bg); border:1px solid var(--in-line);
  border-radius:8px; padding:13px 16px; font:inherit; font-size:15px; color:var(--tx-hi);
  outline:none; width:100%; transition:border-color 150ms ease, box-shadow 150ms ease;
  color-scheme:var(--scheme);
}
.input:focus { border-color:#CC9E00; box-shadow:0 0 0 3px rgba(204,158,0,0.18); }
.input::placeholder { color:var(--tx-mut); opacity:1; }
textarea.input { resize:vertical; min-height:130px; line-height:1.6; padding:14px 16px; }
select.input { padding:13px 14px; }
.field-error { margin:0; font-size:13px; color:#E06B5D; }
.btn-submit { min-height:52px; }
.btn-submit[disabled] { opacity:0.6; cursor:wait; transform:none; }

/* newsletter input sizing */
.nl-input { flex:1 1 280px; max-width:380px; min-height:52px; padding:14px 18px; }
.nl-btn { min-height:52px; font-size:13.5px; padding:14px 28px; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { background:#0B0B0B; border-top:2px dotted rgba(204,158,0,0.55); color:#F6F6F6; }
.footer-link { color:#DDDDDD; text-decoration:none; width:fit-content; transition:color 150ms ease; }
.footer-link:hover { color:#E6B800; }
.social-circle {
  width:44px; height:44px; border-radius:9999px; border:1.5px solid rgba(204,158,0,0.5); color:#CC9E00;
  display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all 150ms ease;
}
.social-circle:hover { background:rgba(204,158,0,0.14); border-color:#CC9E00; }
.footer-tim { color:#B9962B; text-decoration:none; }
.footer-tim:hover { color:#E6B800; }

/* =============================================================
   MISC COMPONENT STATES
   ============================================================= */
.share-circle {
  width:38px; height:38px; border-radius:9999px; border:1px solid var(--line-mid); color:var(--acc);
  display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background 150ms ease;
}
.share-circle:hover { background:rgba(204,158,0,0.12); }
.stage-link { color:#E6B800; text-decoration:none; font-weight:600; transition:color 150ms ease; }
.stage-link:hover { color:#FFD54A; }

/* song embed facade */
.song-facade { position:relative; display:block; width:100%; aspect-ratio:16/9; cursor:pointer; background:#000; border:none; padding:0; }