/* Custom CSS for phpSPA Documentation */

/* Hero Section Styling */
.hero-section {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 3rem 2rem;
   border-radius: 1rem;
   margin: 2rem 0;
   text-align: center;
}

.hero-section h1 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-section p {
   font-size: 1.2rem;
   margin-bottom: 2rem;
   opacity: 0.9;
}

/* Button styling */
.buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 2rem;
}

.md-button--large {
   padding: 1rem 2rem !important;
   font-size: 1.1rem !important;
   font-weight: 600 !important;
}

/* Grid Cards */
.grid.cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.grid.cards > * {
   background: var(--md-default-bg-color);
   border: 1px solid var(--md-default-fg-color--lightest);
   border-radius: 0.5rem;
   padding: 1.5rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid.cards > *:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Feature Grid */
.feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
   margin: 2rem 0;
}

.feature-grid h3 {
   margin-top: 0;
   color: var(--md-primary-fg-color);
   border-bottom: 2px solid var(--md-primary-fg-color);
   padding-bottom: 0.5rem;
}

/* Comparison Table */
.feature-comparison table {
   width: 100%;
   margin: 2rem 0;
   border-collapse: collapse;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   border-radius: 0.5rem;
   overflow: hidden;
}

.feature-comparison th {
   background: var(--md-primary-fg-color);
   color: white;
   padding: 1rem;
   text-align: left;
   font-weight: 600;
}

.feature-comparison td {
   padding: 1rem;
   border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.feature-comparison td:nth-child(3) {
   color: var(--md-primary-fg-color);
   font-weight: 500;
}

/* Architecture Flow */
.architecture-flow {
   background: var(--md-code-bg-color);
   padding: 2rem;
   border-radius: 0.5rem;
   margin: 2rem 0;
}

/* Learning Path */
.learning-path {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   padding: 2rem;
   border-radius: 1rem;
   margin: 2rem 0;
}

[data-md-color-scheme="slate"] .learning-path {
   background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

.learning-path ol {
   counter-reset: step-counter;
   list-style: none;
   padding: 0;
}

.learning-path li {
   counter-increment: step-counter;
   margin: 1rem 0;
   padding: 1rem;
   background: white;
   border-radius: 0.5rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: relative;
   padding-left: 4rem;
}

[data-md-color-scheme="slate"] .learning-path li {
   background: var(--md-default-bg-color);
}

.learning-path li::before {
   content: counter(step-counter);
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   background: var(--md-primary-fg-color);
   color: white;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 0.9rem;
}

/* Community Grid */
.community-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1.5rem;
   margin: 2rem 0;
}

.community-grid > * {
   text-align: center;
   padding: 1.5rem;
   background: var(--md-default-bg-color);
   border: 1px solid var(--md-default-fg-color--lightest);
   border-radius: 0.5rem;
   transition: all 0.2s ease;
}

.community-grid > *:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Creator Section */
.creator-section {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 3rem;
   border-radius: 1rem;
   text-align: center;
   margin: 3rem 0;
}

.creator-section h2 {
   color: white;
   margin-top: 0;
}

.creator-links {
   display: flex;
   gap: 1rem;
   justify-content: center;
   margin-top: 2rem;
   flex-wrap: wrap;
}

/* CTA Section */
.cta-section {
   text-align: center;
   padding: 3rem 2rem;
   background: var(--md-default-bg-color);
   border: 2px solid var(--md-primary-fg-color);
   border-radius: 1rem;
   margin: 3rem 0;
}

/* Code highlighting improvements */
.highlight .filename {
   background: var(--md-primary-fg-color);
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem 0.25rem 0 0;
   font-size: 0.85rem;
   font-weight: 500;
}

/* Responsive design */
@media (max-width: 768px) {
   .hero-section {
      padding: 2rem 1rem;
   }

   .hero-section h1 {
      font-size: 2rem;
   }

   .buttons {
      flex-direction: column;
      align-items: center;
   }

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

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

   .creator-links {
      flex-direction: column;
      align-items: center;
   }
}

/* Admonition enhancements */
.md-typeset .admonition {
   border-radius: 0.5rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.md-typeset .admonition.success {
   border-left: 4px solid #4caf50;
}

.md-typeset .admonition.info {
   border-left: 4px solid #2196f3;
}

.md-typeset .admonition.tip {
   border-left: 4px solid #ff9800;
}

.md-typeset .admonition.note {
   border-left: 4px solid #9c27b0;
}

/* Table enhancements */
.md-typeset table:not([class]) {
   border-radius: 0.5rem;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.md-typeset table:not([class]) th {
   background: var(--md-primary-fg-color);
   color: white;
}

/* Navigation improvements */
.md-nav__item--active > .md-nav__link {
   font-weight: 600;
   color: var(--md-primary-fg-color);
}

/* Search enhancements */
.md-search__form {
   border-radius: 2rem;
}

.md-search__input {
   border-radius: 2rem;
}

/* Footer improvements */
.md-footer {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
