/*
==============================================
TEMA PERSONALIZADO DE BOOTSTRAP 5
- Propósito: Página de menús para restaurantes
- Tono: Moderno y minimalista
==============================================
*/

/*
----------------------------------------------
-- 1. DEFINICIÓN DE VARIABLES CSS (ROOT)
----------------------------------------------
Sobrescribimos las variables raíz de Bootstrap para
personalizar colores, tipografía y valores base.
*/
:root {
    /* Paleta de Colores */
    --bs-primary: #cd1411;
    --bs-primary-rgb: 205, 20, 17;
    --bs-secondary: #495057;
    --bs-secondary-rgb: 73, 80, 87;
    --bs-success: #218838;
    --bs-success-rgb: 33, 136, 56;
    --bs-info: #138496;
    --bs-info-rgb: 19, 132, 150;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    /* Para $danger, usamos un rojo más oscuro para diferenciarlo del primario */
    --bs-danger: #B00020;
    --bs-danger-rgb: 176, 0, 32;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;

    /* Tipografía */
    --bs-font-sans-serif: 'Noto Sans', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-headings-font-family: 'Raleway', sans-serif;
    --bs-headings-font-weight: 800;

    /* Variables de Componentes */
    --bs-btn-border-radius: 4px;
    --bs-card-border-width: 0;
    --bs-card-border-radius: 8px;
}

/*
----------------------------------------------
-- 2. ESTILOS GENERALES Y DE ETIQUETAS
----------------------------------------------
*/
body {
    background-color: var(--bs-light);
    color: var(--bs-secondary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-headings-font-family);
    /*font-weight: var(--bs-headings-font-weight);*/
}

/* Estilo para enlaces: sin subrayado y hover con color primario */
a {
    color: var(--bs-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--bs-primary);
    filter: brightness(90%); /* Ligeramente más oscuro en hover */
}


/*
----------------------------------------------
-- 3. ESTILOS DE COMPONENTES PERSONALIZADOS
----------------------------------------------
*/

/* ----- Hero Section ----- */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=1974&auto=format&fit=crop') no-repeat center center;
    background-size: cover;
}

/* ----- Barra de Navegación ----- */
.navbar {
    transition: background-color 0.4s ease-out, padding 0.4s ease-out;
}

.navbar-brand {
    font-family: var(--bs-headings-font-family);
    font-weight: 900;
    font-size: 1.5rem;
}

/* Clase que se añade con JS al hacer scroll */
.navbar.scrolled {
    background-color: var(--bs-primary);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* ----- Botones ----- */
.btn {
    box-shadow: none !important; /* Forzar la eliminación de la sombra */
    transition: transform 0.2s ease-in-out;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #b5120f; /* Un poco más oscuro que el primario */
  --bs-btn-hover-border-color: #a3100e;
  --bs-btn-active-bg: #a3100e;
  --bs-btn-active-border-color: #a3100e;
}

.btn:hover {
    transform: scale(1.05); /* Efecto de crecimiento */
}

/* ----- Cards ----- */
.card {
    background-color: #ffffff;
    /* Sombra más pronunciada que una sutil, pero sigue siendo elegante */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.card-img-top {
    height: 200px;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
}

/* ----- Formularios ----- */
.form-control {
    border-color: #e0e0e0; /* Borde gris claro y sutil */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control::placeholder {
    color: #aab0b6;
}

.form-control:focus {
    /* Usamos un tono más oscuro del primario para el borde y el resplandor */
    border-color: #a7110f; /* Un tono abajo de #cd1411 */
    box-shadow: 0 0 0 0.25rem rgba(167, 17, 15, 0.25);
}

/*
----------------------------------------------
-- 4. ESPACIADO Y LAYOUT
----------------------------------------------
Utilizamos las utilidades de Bootstrap para un
espaciado limpio y consistente.
*/
section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}