/* ====================================================================
 * Hermes Academy — uses the Hermes design system from the LTD page.
 * Tailwind handles utilities; this file mirrors the LTD tokens
 * + adds long-form prose styles.
 * ==================================================================== */

:root {
  --color-canvas-white: #ffffff;
  --color-cloud-mist:   #e0e0db;
  --color-slate-text:   #353241;
  --color-rich-violet:  #21164c;
  --color-action-violet:#592eff;
  --color-air-blue:     #bcf2ff;
  --color-lush-green:   #dfff9d;
  --color-sunset-pink:  #ffaae6;
  --color-neon-pink:    #f843c2;
  --color-aqua-blue:    #2ed6ff;
  --color-electric-green:#a2ea13;
  --color-soft-gray-fill:#eeeeee;

  --font-polysans:           'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-plus-jakarta-sans:  'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius-buttons: 12px;
  --radius-cards:   26px;
  --radius-badges:  200px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-plus-jakarta-sans);
  color: var(--color-slate-text);
  background: var(--color-canvas-white);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-polysans); letter-spacing: -0.02em; }
.font-body    { font-family: var(--font-plus-jakarta-sans); letter-spacing: -0.02em; }

/* ---- Buttons (Hermes home parity) ---- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--color-action-violet); color: var(--color-canvas-white);
  font-family: var(--font-plus-jakarta-sans); font-weight: 500; font-size: 16px;
  padding: 14px 24px; border-radius: var(--radius-buttons);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  letter-spacing: -0.02em;
  text-decoration: none !important;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(89,46,255,0.45); background: #4a25e6; color: var(--color-canvas-white); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--color-slate-text);
  border: 1px solid var(--color-cloud-mist);
  font-family: var(--font-plus-jakarta-sans); font-weight: 500; font-size: 16px;
  padding: 14px 24px; border-radius: var(--radius-buttons);
  transition: background .2s ease, border-color .2s ease;
  letter-spacing: -0.02em;
  text-decoration: none !important;
}
.btn-ghost:hover { background: var(--color-soft-gray-fill); border-color: var(--color-slate-text); }

/* ---- Badges ---- */
.badge-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-badges);
  border: 1px solid var(--color-cloud-mist);
  font-size: 13px; font-weight: 500; color: var(--color-neon-pink);
  letter-spacing: -0.02em;
}
.badge-violet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-badges);
  background: var(--color-action-violet); color: var(--color-canvas-white);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.badge-green {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-badges);
  background: var(--color-electric-green); color: var(--color-rich-violet);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}

/* ---- Cards ---- */
.card {
  background: var(--color-canvas-white);
  border: 1px solid var(--color-cloud-mist);
  border-radius: var(--radius-cards);
  padding: 40px;
}
.card-flat {
  background: var(--color-canvas-white);
  border-radius: var(--radius-cards);
  padding: 40px;
}
.card-tinted-blue  { background: var(--color-air-blue);    border-radius: 64px; padding: 48px; }
.card-tinted-green { background: var(--color-lush-green);  border-radius: 64px; padding: 48px; }
.card-tinted-pink  { background: var(--color-sunset-pink); border-radius: 64px; padding: 48px; }
.card-soft         { background: var(--color-soft-gray-fill); border-radius: var(--radius-cards); padding: 40px; }

/* ---- Headlines ---- */
.h-display-xl { font-family: var(--font-polysans); font-weight: 700; font-size: 68px; line-height: 1.10; letter-spacing: -0.02em; color: var(--color-rich-violet); }
.h-display-lg { font-family: var(--font-polysans); font-weight: 700; font-size: 58px; line-height: 1.10; letter-spacing: -0.02em; color: var(--color-rich-violet); }
.h-display-md { font-family: var(--font-polysans); font-weight: 700; font-size: 38px; line-height: 1.10; letter-spacing: -0.02em; color: var(--color-rich-violet); }
.h-display-sm { font-family: var(--font-polysans); font-weight: 700; font-size: 28px; line-height: 1.10; letter-spacing: -0.02em; color: var(--color-rich-violet); }
@media (max-width: 768px) {
  .h-display-xl { font-size: 44px; }
  .h-display-lg { font-size: 38px; }
  .h-display-md { font-size: 28px; }
}

/* ---- Misc Hermes utilities ---- */
.deco-blob { position: absolute; pointer-events: none; filter: blur(40px); opacity: 0.6; }
.underline-violet { text-decoration: underline; text-decoration-color: var(--color-action-violet); text-decoration-thickness: 4px; text-underline-offset: 6px; }

.container-x { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1024px) { .container-x { padding-left: 40px; padding-right: 40px; } }
.container-narrow { max-width: 880px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

section.s { padding-top: 80px; padding-bottom: 80px; }
@media (min-width: 1024px) { section.s { padding-top: 120px; padding-bottom: 120px; } }

/* details/summary */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.chev-icon { transition: transform .2s ease; }
details[open] .chev-icon { transform: rotate(180deg); }

/* ---- Course-cover gradient variants ---- */
.cover-grad-v1 { background: linear-gradient(135deg, var(--color-action-violet) 0%, var(--color-rich-violet) 100%); }
.cover-grad-v2 { background: linear-gradient(135deg, var(--color-action-violet) 0%, var(--color-aqua-blue) 100%); }
.cover-grad-v3 { background: linear-gradient(135deg, var(--color-sunset-pink) 0%, var(--color-action-violet) 100%); }
.cover-grad-v4 { background: linear-gradient(135deg, var(--color-rich-violet) 0%, var(--color-action-violet) 100%); }
.cover-grad-v5 { background: linear-gradient(135deg, var(--color-rich-violet) 0%, var(--color-electric-green) 100%); }
.cover-grad-v6 { background: linear-gradient(135deg, var(--color-action-violet) 0%, var(--color-air-blue) 100%); }
.cover-grad-v7 { background: linear-gradient(135deg, var(--color-neon-pink) 0%, var(--color-action-violet) 100%); }
.cover-grad-v8 { background: linear-gradient(135deg, var(--color-rich-violet) 0%, var(--color-neon-pink) 100%); }

/* Ambient circles inside course cover */
.cover-deco { position: relative; overflow: hidden; }
.cover-deco::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.cover-deco::after {
  content: ''; position: absolute; left: -40px; bottom: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* ---- Course-card hover ---- */
.lp-row { transition: transform .2s ease, box-shadow .2s ease; }
.lp-row:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(33,22,76,0.16); }

/* ---- Long-form prose (course pages) ---- */
.prose-academy {
  font-family: var(--font-plus-jakarta-sans);
  font-size: 16px; line-height: 1.7; color: var(--color-slate-text);
  max-width: 820px;
}
.prose-academy h2 { font-family: var(--font-polysans); font-size: 28px; font-weight: 700; color: var(--color-rich-violet); margin: 48px 0 14px; line-height: 1.2; letter-spacing: -0.02em; scroll-margin-top: 96px; }
.prose-academy h2:first-child { margin-top: 0; }
.prose-academy h3 { font-family: var(--font-polysans); font-size: 20px; font-weight: 700; color: var(--color-rich-violet); margin: 28px 0 8px; letter-spacing: -0.02em; }
.prose-academy h4 { font-size: 16px; font-weight: 700; color: var(--color-rich-violet); margin: 18px 0 6px; }
.prose-academy p  { margin: 10px 0; }
.prose-academy ul, .prose-academy ol { padding-left: 1.25rem; margin: 10px 0; }
.prose-academy ul { list-style: disc; }
.prose-academy ol { list-style: decimal; }
.prose-academy li { margin: 4px 0; }
.prose-academy a  { color: var(--color-action-violet); text-decoration: underline; text-underline-offset: 3px; }
.prose-academy strong { color: var(--color-rich-violet); }
.prose-academy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--color-soft-gray-fill); border: 1px solid var(--color-cloud-mist);
  padding: 1px 6px; border-radius: 6px; font-size: 0.92em; color: var(--color-rich-violet);
}
.prose-academy pre {
  background: var(--color-rich-violet); color: #f3eeff; border-radius: 18px;
  padding: 22px 24px; overflow-x: auto;
  font-size: 13px; line-height: 1.55; margin: 14px 0;
}
.prose-academy pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.prose-academy table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.prose-academy th, .prose-academy td { border: 1px solid var(--color-cloud-mist); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose-academy th { background: var(--color-soft-gray-fill); color: var(--color-rich-violet); font-weight: 700; }
.prose-academy blockquote {
  margin: 16px 0; padding: 14px 20px; border-left: 4px solid var(--color-action-violet);
  background: #f3f0ff; border-radius: 0 var(--radius-cards) var(--radius-cards) 0; color: var(--color-rich-violet);
}

.callout { background: var(--color-soft-gray-fill); border: 1px solid var(--color-cloud-mist); border-radius: var(--radius-cards); padding: 18px 22px; margin: 18px 0; }
.callout-violet { background: #f3f0ff; border-color: rgba(89,46,255,0.18); }
.callout-green  { background: #f6ffe2; border-color: rgba(162,234,19,0.32); }
.callout-pink   { background: #fff0fa; border-color: rgba(248,67,194,0.22); }
.callout-warn   { background: #fff8e1; border-color: rgba(248,67,194,0.18); }
.callout strong { color: var(--color-rich-violet); }

.lesson-list { counter-reset: lesson; padding: 0; margin: 12px 0; list-style: none; }
.lesson-list > li {
  counter-increment: lesson;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px; border: 1px solid var(--color-cloud-mist); border-radius: 14px;
  margin-bottom: 8px; background: var(--color-canvas-white);
}
.lesson-list > li::before {
  content: counter(lesson, decimal-leading-zero);
  font-family: var(--font-polysans); font-weight: 700; color: var(--color-action-violet);
  min-width: 28px; font-size: 14px; padding-top: 1px;
}
.lesson-list .lesson-title   { font-weight: 700; color: var(--color-rich-violet); }
.lesson-list .lesson-summary { font-size: 14px; color: var(--color-slate-text); opacity: .8; margin-top: 2px; }

/* Hero arc decoration (re-used on course pages) */
.hero-arc-bg::before {
  content: ''; position: absolute; right: -120px; top: -80px;
  width: 720px; height: 720px;
  background: radial-gradient(circle at center,
    rgba(89,46,255,0) 220px,
    rgba(89,46,255,0.10) 230px,
    rgba(89,46,255,0.10) 320px,
    rgba(89,46,255,0) 330px,
    rgba(89,46,255,0.06) 350px,
    rgba(89,46,255,0.06) 410px,
    rgba(89,46,255,0) 420px);
  pointer-events: none;
}