/* ===========================
   Importar fuente Lato
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* ===========================
   Paleta de colores
   f0e5d0 - fondo (más claro)
   eebd9c - acento secundario (libre para usar en detalles)
   db9b8f - acento principal (links, bordes, hover)
   5b3630 - texto (más oscuro)
   =========================== */

body {
    font-family: 'Lato', sans-serif;
    background-color: #f0e5d0;
    color: #5b3630;
}
}
/* ===========================
   Header
   =========================== */
#header, .header, header {
    background-color: #f0e5d0;
    color: #5b3630;
    border-bottom: 2px solid #db9b8f;
}

/* ===========================
   Links
   =========================== */
a {
    color: #db9b8f;
}

a:hover {
    color: #5b3630;
}

/* ===========================
   Navbar
   =========================== */
.navbar {
    background-color: #f0e5d0;
}

.navbar a,
.navbar .navbar-brand,
.navbar-nav a {
    color: #5b3630;
}

#topnav,
#nav,
.top-bar,
.site-header,
header.navbar {
    background-color: #f0e5d0;
}

/* ===========================
   Botón de búsqueda (banner superior)
   =========================== */
.search-toggle {
    color: #5b3630;
    background-color: transparent;
    border: none;
    outline: none;
}

.search-toggle:focus,
.search-toggle:active,
.search-toggle:hover {
    color: #db9b8f;
    outline: 2px solid #db9b8f;
    box-shadow: none;
}

.search-toggle svg,
.search-toggle svg path {
    fill: #5b3630;
    stroke: #5b3630;
}

/* ===========================
   Contenido principal
   =========================== */
#content, .content, main {
    background-color: #f0e5d0;
    color: #5b3630;
}

/* ===========================
   Footer
   =========================== */
#footer, .footer, footer {
    background-color: #f0e5d0;
    color: #5b3630;
    border-top: 2px solid #db9b8f;
}
/* ===========================
   Botones de navegación superior (nav-header)
   =========================== */
.nav-header {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 4px;
    background-color: #db9b8f;
    color: #f0e5d0;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-header:hover,
.nav-header:focus {
    background-color: #5b3630;
    color: #f0e5d0;
}

/* Página activa (si el tema agrega alguna clase tipo .active o aria-current) */
.nav-header[aria-current="page"],
li.active > .nav-header {
    background-color: #5b3630;
    color: #f0e5d0;
}

/* El span vacío dentro del link (suele ser un ícono de submenú) */
.nav-header span {
    display: inline-block;
}
/* ===========================
   Contenedor del menú (Foundation dropdown menu)
   =========================== */
ul.dropdown.menu {
    background-color: transparent;
}

ul.dropdown.menu > li {
    background-color: transparent;
    margin: 0 4px;
}

/* Por si Foundation aplica fondo también en :hover/:focus del <li> */
ul.dropdown.menu > li:hover,
ul.dropdown.menu > li:focus,
ul.dropdown.menu > li.is-active {
    background-color: transparent;
}
/* ===========================
   Menú mobile (off-canvas)
   =========================== */

/* Panel off-canvas completo */
#offCanvas.off-canvas {
    background-color: #f0e5d0;
}

/* Lista vertical dentro del off-canvas */
#offcanvas-nav ul.vertical.menu.accordion-menu,
#offcanvas-nav ul.vertical.menu.accordion-menu > li {
    background-color: #f0e5d0;
}

/* Botones dentro del off-canvas: mismo estilo que los de desktop */
#offcanvas-nav .nav-header {
    display: block;
    padding: 10px 20px;
    margin: 4px 0;
    background-color: #db9b8f;
    color: #f0e5d0;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}

#offcanvas-nav .nav-header:hover,
#offcanvas-nav .nav-header:focus {
    background-color: #5b3630;
    color: #f0e5d0;
}

/* Item activo dentro del off-canvas */
#offcanvas-nav li.active > .nav-header {
    background-color: #5b3630;
    color: #f0e5d0;
}

/* Overlay oscuro detrás del panel (opcional: podés dejarlo como está,
   pero si querés que combine con la paleta) */
.js-off-canvas-overlay {
    background-color: rgba(91, 54, 48, 0.5); /* #5b3630 con transparencia */
}

/* ===========================
   Title bar (franja con el botón hamburguesa)
   =========================== */
.title-bar,
#dropdown-bar,
.top-bar-left,
.top-bar-right {
    background-color: #f0e5d0;
}

/* Botón hamburguesa */
.menu-toggle {
    background-color: transparent;
    color: #5b3630;
    border: none;
}

.menu-toggle .fa-bars {
    color: #5b3630;
}

.menu-toggle:hover,
.menu-toggle:focus {
    color: #db9b8f;
}