/**
 * Custom Styles for {{projectName}}
 * ════════════════════════════════════════════════════════════════
 *
 * This file is loaded after all Domma CSS, allowing you to override
 * theme variables and component styles.
 */

/* ────────────────────────────────────────────────────────────────
 * Theme Overrides
 * ────────────────────────────────────────────────────────────────
 * Override any theme variable to customize your brand colors.
 * Full list of variables: https://github.com/dcbw-it/domma
 *
 * Example: Customize primary color
 */
:root {
    /* Uncomment to override:
    --dm-primary: #3b82f6;
    --dm-primary-hover: #2563eb;
    --dm-primary-text: #ffffff;
    */
}

/* ────────────────────────────────────────────────────────────────
 * Component Overrides
 * ────────────────────────────────────────────────────────────────
 * Override component styles after Domma loads.
 */

/* Example: Custom button styles */
/*
.btn-custom {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

.btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
*/

/* ────────────────────────────────────────────────────────────────
 * Layout Customizations
 * ────────────────────────────────────────────────────────────────
 */

/* Footer styling */
.page-footer {
    background-color: var(--dm-surface);
    border-top: 1px solid var(--dm-border);
    padding: var(--dm-space-6) 0;
    margin-top: var(--dm-space-8);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--dm-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dm-space-4);
}

.footer-content p {
    margin: 0;
    color: var(--dm-text-secondary);
}

.footer-nav {
    display: flex;
    gap: var(--dm-space-6);
}

.footer-nav a {
    color: var(--dm-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: var(--dm-primary);
}

/* Code copy button styling */
.code-copy-btn {
    position: absolute;
    top: var(--dm-space-2);
    right: var(--dm-space-2);
    opacity: 0.7;
}

.code-copy-btn:hover {
    opacity: 1;
}

/* ────────────────────────────────────────────────────────────────
 * Responsive Adjustments
 * ────────────────────────────────────────────────────────────────
 */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-nav {
        flex-direction: column;
        gap: var(--dm-space-2);
    }
}

/* ────────────────────────────────────────────────────────────────
 * Your Custom Styles
 * ────────────────────────────────────────────────────────────────
 * Add your project-specific styles below this line.
 */