/**
 * Core CSS - Base styles used by all sites
 * Site-specific themes override via CSS variables in theme.css
 */

/* CSS Variables - defaults (can be overridden in site theme.css) */
:root {
    --site-primary: #0d6efd;
    --site-secondary: #6c757d;
    --site-bg: #ffffff;
    --site-text: #212529;
}

/* Base body styles */
body {
    background-color: var(--site-bg);
    color: var(--site-text);
}

/* Links */
a {
    color: var(--site-primary);
}

a:hover {
    color: var(--site-secondary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--site-primary);
}

/* Buttons - override Bootstrap */
.btn-primary {
    background-color: var(--site-primary);
    border-color: var(--site-primary);
}

.btn-primary:hover {
    background-color: var(--site-secondary);
    border-color: var(--site-secondary);
}

/* Navigation/Menu */
.navbar,
.module.menu {
    background-color: var(--site-primary) !important;
}

.menu a {
    color: white !important;
}

.menu a:hover {
    color: var(--site-secondary) !important;
}

/* Folder/File links */
.folder-link {
    margin-bottom: 10px;
    display: block;
}

.folder-icon {
    margin-right: 5px;
}

/* Cards */
.card-img img {
    max-width: 100%;
    height: auto;
}

/* Debug output */
.debug-output {
    background-color: #f8f9fa;
    padding: 15px;
    margin-top: 20px;
    border-left: 4px solid var(--site-primary);
}

/* Editor */
#editor {
    min-height: 150px;
    border: 1px solid var(--site-primary);
    padding: 10px;
    background-color: #ffffff;
}

/* Site Badge */
.site-badge {
    position: fixed;
    top: 10px;
    right: 10px;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 1040;
    pointer-events: none;
}

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, transparent 63%, #f0f0f0 75%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.skeleton-menu {
    height: 200px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-content {
    height: 150px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* HTMX indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}