/* Nulshock font */
@font-face {
  font-family: 'Nulshock';
  src: url('fonts/nulshock.woff2') format('woff2'),
       url('fonts/nulshock.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-primary: #0052CC;
  --brand-accent: #00B8D9;
  --metify-green: #AFD335;
}

/* Hero Section */
.hero {
  background: var(--metify-green);
  color: #fff; padding: 2.5rem 1.25rem; 
  border-radius: 12px; margin: 0 0 1.5rem 0;
}

.hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero__title {
  margin: 0 0 .5rem 0;
  font-size: 2.5rem;
  font-weight: 900;
  font-family: 'Nulshock', sans-serif;  /* Add this line */
}

.hero__tagline {
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  opacity: .95;
  line-height: 1.6;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.hero__ctas .md-button {
  margin: 0;
}

.hero__art img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Quick Start Cards */
.quick {
  margin: 2rem 0 1rem 0;
}

.quick h2 {
  margin-bottom: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.card {
  display: block;
  background: var(--md-typeset-bg-color, #fff);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .06s ease;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
  text-decoration: none;
}

.card h3 {
  margin: 0 0 .5rem 0;
  font-size: 1.1rem;
  color: var(--brand-primary);
}

.card p {
  margin: 0;
  font-size: .9rem;
  opacity: .8;
}

/* Video Section */
.video {
  margin: 2rem 0;
}

.video h2 {
  margin-bottom: 1rem;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Button Styling */
.md-typeset .md-button,
.md-button {
  display: inline-block;
  padding: .6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  background: #fff;
  color: var(--brand-primary);
  border: 2px solid rgba(255, 255, 255, .5);
  transition: all .2s ease;
}

.md-typeset .md-button:hover,
.md-button:hover {
  background: rgba(255, 255, 255, .9);
  color: var(--brand-primary);
  transform: translateY(-1px);
  text-decoration: none;
}

.md-typeset .md-button--primary,
.md-button--primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

.md-typeset .md-button--primary:hover,
.md-button--primary:hover {
  background: #000;
  border-color: #000;
  color: var(--metify-green);
}

/* Content Sections */
.content-section {
  margin: 2.5rem 0;
}

.content-section h2 {
  border-bottom: 2px solid var(--brand-primary);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

/* Footer Enhancements */
.md-footer-meta__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s ease;
}

.footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 800px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__art {
    order: -1;
  }

  .hero__title {
    font-size: 2rem;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}

/* Dark Mode Support */
[data-md-color-scheme="slate"] .card {
  background: var(--md-code-bg-color);
  border-color: rgba(255, 255, 255, .1);
}

[data-md-color-scheme="slate"] .card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

[data-md-color-scheme="slate"] .card h3 {
  color: #fff;
}

[data-md-color-scheme="slate"] .card p {
  color: rgba(255, 255, 255, .8);
}

[data-md-color-scheme="slate"] .content-section h2 {
  border-bottom-color: var(--brand-accent);
}

/* Dark mode h1 styling */
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #fff;
}

/* Installing MOJO page styling */
.md-typeset h1 {
  color: #000;
  font-weight: 700;
}

.mojo-brand {
  font-family: 'Nulshock', sans-serif;
}

/* MOJO headers - use Nulshock font for h1 and h2 containing MOJO */
.md-typeset h1 .mojo-brand,
.md-typeset h2 .mojo-brand {
  font-family: 'Nulshock', sans-serif;
  font-weight: normal;
}

/* Section dividers - dark blue theme color */
.md-typeset hr {
  border: none;
  border-top: 3px solid var(--brand-primary);
  margin: 2rem 0;
}

[data-md-color-scheme="slate"] .md-typeset hr {
  border-top-color: var(--brand-accent);
}

/* Code block styling - wrap text to prevent copy icon overlap */
.md-typeset pre > code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Copy button styling - dark blue with hover animation and tooltip */
.md-clipboard {
  color: var(--brand-primary) !important;
  transition: transform 0.2s ease, color 0.2s ease;
  position: relative;
}

.md-clipboard::before {
  content: "COPY";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  margin-bottom: 4px;
}

.md-clipboard:hover::before {
  opacity: 1;
  visibility: visible;
}

.md-clipboard:hover {
  color: var(--brand-accent) !important;
  transform: scale(1.2);
}

[data-md-color-scheme="slate"] .md-clipboard {
  color: var(--brand-accent) !important;
}

[data-md-color-scheme="slate"] .md-clipboard::before {
  background: var(--brand-accent);
  color: #000;
}

[data-md-color-scheme="slate"] .md-clipboard:hover {
  color: #fff !important;
  transform: scale(1.2);
}