/* TILT Autonomy Custom Styles */

/* Enable smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Import Google Fonts - Barlow */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Custom Font - SofaChroma */
@font-face {
  font-family: 'SofaChroma';
  src: url('../fonts/sofachroma.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  --md-primary-fg-color: #101010;
  --md-primary-fg-color--light: #424242;
  --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: #848484;
  --md-accent-fg-color--transparent: #84848420;

  /* Link colors - professional blue instead of purple */
  --md-text-link-color: #0066cc;
  --md-typeset-a-color: #0066cc;

  /* Typography - Barlow as primary font */
  --md-text-font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --md-code-font: "IBM Plex Mono", "Courier New", monospace;
}

/* Dark mode colors */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #101010;
  --md-primary-fg-color--light: #424242;
  --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: #848484;
  --md-default-bg-color: #1a1a1a;
  --md-default-bg-color--light: #2a2a2a;
  --md-default-bg-color--lighter: #3a3a3a;

  /* Link colors for dark mode */
  --md-text-link-color: #4da3ff;
  --md-typeset-a-color: #4da3ff;
}

/* Header styling to match WordPress */
.md-header {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background-color: #ffffff;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #1a1a1a;
}

/* Logo adjustments - 2x larger */
.md-header__button.md-logo img,
.md-logo img {
  height: 4rem;
  width: auto;
}

/* Removed divider - will use updated logo instead */

/* Adjust header height to accommodate larger logo */
.md-header {
  min-height: 5rem;
}

.md-header__inner {
  padding: 0.5rem 0;
}

/* Typography matching WordPress style but with default MkDocs sizes */
.md-typeset {
  font-size: 0.8rem;  /* Default MkDocs size */
  line-height: 1.6;   /* Default MkDocs line-height */
  font-family: var(--md-text-font);
}

.md-typeset h1 {
  font-size: 2em;     /* Default MkDocs h1 size */
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: #101010;
}

.md-typeset h2 {
  font-size: 1.5625em;  /* Default MkDocs h2 size */
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.4;
  color: #101010;
}

.md-typeset h3 {
  font-size: 1.25em;   /* Default MkDocs h3 size */
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.5;
  color: #101010;
}

.md-typeset h4 {
  font-size: 1em;      /* Default MkDocs h4 size */
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.5;
  color: #101010;
}

.md-typeset h5 {
  font-size: 0.8em;    /* Default MkDocs h5 size */
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.5;
  color: #101010;
}

.md-typeset h6 {
  font-size: 0.8em;    /* Default MkDocs h6 size */
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.5;
  color: #101010;
}

/* Dark mode heading colors */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: #f5f5f5;
}

/* Navigation styling */
.md-nav__item--active > .md-nav__link {
  font-weight: 600;
}

/* Footer styling */
.md-footer {
  background-color: #101010;
}

.md-footer-meta {
  background-color: #000000;
}

/* Code block styling */
.md-typeset code {
  font-family: var(--md-code-font);
  background-color: #f5f5f5;
  border-radius: 0.2rem;
  padding: 0.1rem 0.3rem;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #2a2a2a;
}

/* Button styling to match WordPress */
.md-typeset .md-button {
  font-family: var(--md-text-font);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.01em;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}

.md-typeset .md-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Search styling */
.md-search__form {
  border-radius: 0.25rem;
}

.md-search__input {
  font-family: var(--md-text-font);
}

/* Table of contents */
.md-nav--secondary .md-nav__title {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Link styling - professional blue */
.md-typeset a {
  color: #0066cc;
  text-decoration: none;
}

.md-typeset a:hover {
  color: #0052a3;
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #4da3ff;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #66b3ff;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 767px) {
  .md-typeset h2 {
    font-size: 1.25em;   /* Smaller on mobile */
  }

  .md-typeset h3 {
    font-size: 1.125em;  /* Smaller on mobile */
  }

  .md-typeset h4 {
    font-size: 1em;      /* Same as desktop */
  }

  /* Stack layout vertically on mobile */
  div[style*="display: flex"][style*="gap: 20px"] {
    flex-direction: column !important;
  }

  /* Make left column full width on mobile */
  div[style*="flex: 0 0 30%"] {
    flex: 1 1 100% !important;
  }

  /* Hide QR code container on mobile devices - they don't need to scan */
  .ar-qr-container {
    display: none !important;
  }
}

/* Hide the generator notice completely */
.md-footer-meta__inner .md-footer-meta__link {
  display: none;
}

/* Optional: Add custom footer text */
.md-footer-copyright {
  margin: 0 auto;
  text-align: center;
}

/* 3D Model Viewer Styles */
.model-viewer-container {
  width: 100%;
  margin: 30px 0;
}

.model-viewer-container > div {
  position: relative;
  width: 100%;
  height: 500px;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

[data-md-color-scheme="slate"] .model-viewer-container > div {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Model viewer element styling */
model-viewer {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/* Progress bar styling */
.progress-bar {
  display: block;
  width: 33%;
  height: 4px;
  max-height: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(66, 66, 66, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.update-bar {
  background-color: #424242;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Hide progress bar when model is loaded */
model-viewer[loaded] .progress-bar,
model-viewer[model-visibility="visible"] .progress-bar {
  display: none;
}

/* AR button styling */
model-viewer button[slot="ar-button"] {
  background-color: #424242 !important;
  color: white !important;
  border-radius: 4px !important;
  border: none !important;
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* AR button hover effect */
model-viewer button[slot="ar-button"]:hover {
  background-color: #848484 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* AR button active/pressed */
model-viewer button[slot="ar-button"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* Placeholder styling for dark mode */
[data-md-color-scheme="slate"] .model-viewer-container h4 {
  color: #f5f5f5 !important;
}

[data-md-color-scheme="slate"] .model-viewer-container p {
  color: #b0b0b0 !important;
}

[data-md-color-scheme="slate"] .model-viewer-container svg {
  fill: #b0b0b0 !important;
}

/* Responsive design for mobile */
@media screen and (max-width: 767px) {
  .model-viewer-container > div {
    height: 350px;
  }
}

/* Download button with icon - dark grey styling */
.md-button.md-button--primary {
  background-color: #424242;
  color: #ffffff;
  border-color: #424242;
}

.md-button.md-button--primary:hover,
.md-button.md-button--primary:focus,
.md-button.md-button--primary:active {
  background-color: #848484;
  color: #ffffff;
  border-color: #848484;
}

[data-md-color-scheme="slate"] .md-button.md-button--primary {
  background-color: #424242;
  color: #ffffff;
  border-color: #424242;
}

[data-md-color-scheme="slate"] .md-button.md-button--primary:hover,
[data-md-color-scheme="slate"] .md-button.md-button--primary:focus,
[data-md-color-scheme="slate"] .md-button.md-button--primary:active {
  background-color: #848484;
  color: #ffffff;
  border-color: #848484;
}

.md-button svg {
  transition: transform 0.3s ease;
}

.md-button:hover svg {
  transform: translateY(2px);
}