:root {
  --bg-main: #262626;
  --bg-content: #3f3f3f;
  --text-main: #ffffff;
  --text-dim: #aaaaaa;
  --accent: #956565;
  --accent-hover: #ff0000;
  --sidebar-width: 18rem;
  --content-max-width: 45rem;
  --header-height: 170px;
  --item-spacing: 1.2rem;
}
/* Root variables will be injected here by Makefile */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

#layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, var(--content-max-width));
    justify-content: center;
    min-height: 100vh;
}

#sidebar {
    background-color: var(--bg-main);
    padding: 2rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}

#sidebar header {
    margin-bottom: 2rem;
    text-align: center;
}

.logo {
    max-width: 120px;
    height: auto;
}

#content {
    background-color: var(--bg-content);
    padding: 3rem;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    margin-bottom: 0.5rem;
}

nav a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.nav-label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.nav-sublabel {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-left: 0.5rem;
    margin-bottom: 0.25rem;
    opacity: 0.7;
}

nav ul ul {
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 1.5rem 0;
}

/* Active states based on Body ID */
#page-general .nav-general,
#page-paleolitico .nav-paleolitico,
#page-neolitico .nav-neolitico,
#page-bronce .nav-bronce,
#page-hierro .nav-hierro,
#page-romano .nav-romano,
#page-visigodo .nav-visigodo,
#page-moderna .nav-moderna,
#page-gestion .nav-gestion,
#page-divulgativas .nav-divulgativas,
#page-historia .nav-historia,
#page-literarias .nav-literarias,
#page-prensa .nav-prensa,
#page-contacto .nav-contacto,
#page-general-en .nav-general-en,
#page-paleolitico-en .nav-paleolitico-en,
#page-neolitico-en .nav-neolitico-en,
#page-bronce-en .nav-bronce-en,
#page-hierro-en .nav-hierro-en,
#page-romano-en .nav-romano-en,
#page-visigodo-en .nav-visigodo-en,
#page-moderna-en .nav-moderna-en,
#page-gestion-en .nav-gestion-en,
#page-divulgativas-en .nav-divulgativas-en,
#page-historia-en .nav-historia-en,
#page-literarias-en .nav-literarias-en,
#page-prensa-en .nav-prensa-en,
#page-contacto-en .nav-contacto-en {
    font-weight: bold;
    color: var(--accent);
}

/* Mobile Nav (Hidden by default) */
#mobile-header {
    display: none;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.back-arrow {
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--accent);
    line-height: 1;
}

.mobile-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-dim);
}

/* Content styling */
h1 { color: var(--text-dim); margin-top: 0; }
h2 { color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; }
#content li {
    margin-bottom: var(--item-spacing);
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* Responsive */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }
    
    #layout {
        grid-template-columns: 1fr;
        width: 100%;
        justify-content: stretch;
    }

    #sidebar {
        border-right: none;
        padding: 1.5rem;
        width: 100%;
    }

    #content {
        padding: 1.5rem;
        width: 100%;
    }

    /* Hide sidebar on subpages on mobile */
    body:not(#page-index):not(#page-index-en) #sidebar {
        display: none;
    }

    /* Show back button on subpages on mobile */
    body:not(#page-index):not(#page-index-en) #mobile-header {
        display: flex;
    }
    
    /* Hide the redundant h1 on subpages on mobile */
    body:not(#page-index):not(#page-index-en) #content h1 {
        display: none;
    }
}