/*
Theme Name: Hyarnantir
Author: Jon Lipner
Description: Tema prototipo
Version: 1.0
*/

/* Agregá tu CSS básico aquí para empezar */
/* --- Reseteo básico y contenedores --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

/* TÍTULOS (Identidad visual) */
h1, h2, h3, .site-title {
    font-family: 'Uncial Antiqua', serif;
    font-weight: 400; /* Esta fuente suele tener un solo peso */
    letter-spacing: 1px;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: justify;
    margin-bottom: 1em;
}

/* --- Estilos del Header --- */
.site-header {
    position: relative; /* CRÍTICO para el truco de opacidad */
    width: 100%;
    z-index: 100; /* Asegura que esté por encima del contenido */
    /* Podés definir un padding vertical aquí si querés más aire */
    padding: 15px 0;
}

/* El pseudo-elemento que lleva el fondo translúcido */
.site-header.gradient-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* TU ESPECIFICACIÓN: Linear gradient (Dorado -> Blanco -> Gris Plata Azulado) */
    /* Ajustá los colores hexadecimales según tu visión exacta */
    background: linear-gradient(135deg, 
        #D4AF37 0%,   /* Dorado metálico */
        #FFFFFF 50%,  /* Blanco puro */
        #A7C7E7 100%  /* Gris Plata Azulado claro */
    );
    
    /* TU ESPECIFICACIÓN: Opacidad reducida solo para el fondo */
    opacity: 0.7; /* 0.0 (transparente) a 1.0 (opaco). Ajustalo a gusto */
    
    z-index: -1; /* Lo pone detrás del logo y el menú */
}

/* Contenedor Flexbox para alinear Logo e/ Izquierda y Menú a/ Derecha */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Necesario para estar encima del ::before */
}

/* --- Estilos del Logo --- */
.logo-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.logo-container img {
    width: 100px;
}

.site-logo img {
    max-height: 80px; /* Limitamos la altura del logo subido */
    width: auto;      /* Mantiene la proporción */
    display: block;
    opacity: 1; /* Aseguramos opacidad total por si acaso */
}

/* Fallback si es texto */
.site-logo h1 a {
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
}

/* --- Estilos del Menú --- */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 20px; /* Espaciado entre links */
}

.nav-menu a {
    text-decoration: none;
    color: #333; /* Color de los links */
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #D4AF37; /* Color dorado al pasar el mouse */
}

/* FOOTER: Estilos base */
.site-footer {
    padding: 40px 0;
    text-align: center;
    font-size: 0.9rem;
    color: #7f8c8d;
    border-top: 1px solid #eee;
    /* Aquí podés aplicar el mismo gradiente si querés consistencia */
}