/* ==========================================================================
   academy.lhupi.com: theme overrides.
   main.css is shared VERBATIM with the parent site (lhupi.com) and stays
   theme-agnostic through tokens. This file holds the few rules that were
   hard-coded for the dark theme, plus Academy's contrast-safe purple usage:

   - Electric violet #A855F7: fills, highlights, large display text only.
   - Deep violet #6D28D9: links, eyebrows, small labels (text on light).
   ========================================================================== */

/* Light sticky header (main.css hard-codes the dark header). */
.site-header {
  background: var(--color-header-bg);
}

/* Button hover: darker violet, not lime. */
.btn-primary:hover {
  background: var(--color-accent-hover);
}

/* Links and small accent text: deep violet for contrast on light. */
a {
  color: var(--color-link);
}

.eyebrow {
  color: var(--color-accent-strong);
}

.unit-card .unit-tag,
.unit-card .unit-link,
.cap-block .unit-tag {
  color: var(--color-accent-strong);
}

.journey-step::before,
.journey-step .owner {
  color: var(--color-accent-strong);
}

/* Tinted band sections use pale lavender on the light theme. */
.band {
  background: var(--color-tint);
}

/* Form fields sit on white cards here, so inputs get the raised tint. */
.field input,
.field select,
.field textarea {
  background: var(--color-bg-raised);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-accent-strong);
}

/* Proof note rail: deep violet reads better on light. */
.proof-note {
  border-left-color: var(--color-accent-strong);
}

.founder-note {
  border-left-color: var(--color-accent-strong);
}

/* Door cards: the big two-door hero on the Academy home page. */
.door-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.door-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.door-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(109, 40, 217, 0.10);
}

.door-card .door-tag {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.door-card h2 {
  font-size: var(--text-h2);
  margin: 0;
}

.door-card p {
  font-size: var(--text-body);
  flex: 1;
}

.door-card ul {
  margin: var(--space-xs) 0;
  padding: 0;
  list-style: none;
}

.door-card li {
  font-size: var(--text-small);
  color: var(--color-muted);
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.35rem;
}

.door-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 2px;
  background: var(--color-accent);
}

/* Feature blocks (Academia product page). */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.feature-card h3 {
  margin-bottom: 0.35rem;
}

.feature-card p {
  font-size: var(--text-small);
  margin: 0;
}

/* Steps strip (how it works). */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
  counter-reset: step;
}

.step-card {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-sm);
}

.step-card::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: var(--text-small);
  letter-spacing: 0.2em;
  color: var(--color-accent-strong);
  display: block;
  margin-bottom: var(--space-xs);
}

.step-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.step-card p {
  font-size: var(--text-small);
  margin: 0;
}

/* Course areas (courses page). */
.course-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.course-card .course-tag {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.course-card h3 {
  margin: 0.3rem 0 0.35rem;
}

.course-card p {
  font-size: var(--text-small);
  margin: 0;
}

/* Distinction banner (services page: software vs services). */
.notice-card {
  background: var(--color-tint);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-top: var(--space-md);
}

.notice-card strong {
  color: var(--color-text);
}

/* Two enquiry forms side by side (contact page). */
.forms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-md);
}

.forms-grid .form-card {
  max-width: none;
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .door-grid,
  .feature-grid,
  .steps-grid,
  .course-grid,
  .forms-grid {
    grid-template-columns: 1fr;
  }
}

/* Real brand mark: circular crop of the logo file */
.brand-logo { border-radius: 50%; display: block; }