/* VeriChain Brand Colors */
:root {
  --vc-orange: #E8650A;
  --vc-orange-light: #F5883A;
  --vc-dark: #1A1A1A;
  --vc-dark-gray: #2D2D2D;
  --vc-blue-accent: #3A7BD5;
  --vc-blue-light: #5B9BE8;
}

/* Primary color overrides for Material theme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--vc-orange);
  --md-primary-fg-color--light: var(--vc-orange-light);
  --md-primary-fg-color--dark: #C4550A;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--vc-blue-accent);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--vc-orange);
  --md-primary-fg-color--light: var(--vc-orange-light);
  --md-primary-fg-color--dark: #C4550A;
  --md-default-bg-color: var(--vc-dark);
  --md-default-fg-color: #F0F0F0;
  --md-accent-fg-color: var(--vc-blue-light);
}

/* Navigation tabs */
.md-tabs {
  background-color: var(--vc-dark) !important;
}

/* Header */
.md-header {
  background-color: var(--vc-dark) !important;
}

/* Video embed container */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  margin: 1.5rem 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* Self-hosted video (mp4) */
.video-container video {
  object-fit: cover;
}

/* Step callout boxes */
.step-box {
  border-left: 4px solid var(--vc-orange);
  background: rgba(232, 101, 10, 0.06);
  padding: 0.8rem 1.2rem;
  border-radius: 0 6px 6px 0;
  margin: 1rem 0;
}

/* Blue accent text */
.accent-blue {
  color: var(--vc-blue-accent);
  font-weight: 600;
}

/* Warning / compliance note */
.compliance-note {
  border-left: 4px solid var(--vc-blue-accent);
  background: rgba(58, 123, 213, 0.06);
  padding: 0.8rem 1.2rem;
  border-radius: 0 6px 6px 0;
  margin: 1rem 0;
}

.md-content p {
	text-align: justify;
}

.md-content li {
	text-align: justify;
}

.md-copyright {
  width: 100%;
  text-align: center;
}