/**
 * Header Styles for Playas Fluviales Theme
 */

/* Variables de color (opcional, pero útil para consistencia) */
:root {
    --header-bg-color: #f2f2f2;
    --header-text-color: #333333;
    --header-link-hover-color: #0073aa; /* Un azul típico de WordPress */
    --header-border-color: #e0e0e0;
    --mobile-menu-bg-color: #f8f8f8;
}

 

.site-header {
    background-color: var(--header-bg-color);
    /* padding horizontal se gestiona en .site-header-inner */
    border-bottom: 1px solid var(--header-border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1010; /* Asegurar que esté por encima del contenido, incluyendo Leaflet */
    min-height: 60px; /* Altura mínima de la cabecera */
    display: flex; /* Para ayudar a centrar .site-header-inner verticalmente */
    align-items: center; /* Centra .site-header-inner verticalmente */
}

.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Ajusta al ancho máximo de tu contenido si lo tienes */
    margin: 0 auto;
    padding: 0 20px; /* Espaciado lateral, igual que tu contenido principal */
}

/* Branding (Logo y Título/Descripción) */
.pf-header-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Evita que el logo se encoja demasiado */
}

.custom-logo-link img {
    max-height: 60px; /* Ajusta la altura máxima de tu logo */
    width: auto;
    margin-right: 15px;
}

.site-title {
    margin: 0;
    font-size: 1.8em; /* Ajusta según tu diseño */
}

.site-title a {
    text-decoration: none;
    color: var(--header-text-color);
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}

.site-title a:hover {
    color: var(--header-link-hover-color);
}

.site-description {
    margin: 0 0 0 15px; /* Si hay logo, añade espacio a la izquierda */
    font-size: 0.9em;
    color: #757575;
    display: none; /* Ocultar por defecto, quizás mostrar en pantallas más grandes si hay espacio */
}

/* Si no hay logo personalizado, el título podría necesitar menos margen */
/* .no-custom-logo .pf-header-branding .site-title {
    Estilos específicos si no hay logo
} */
.no-custom-logo .pf-header-branding .site-description {
    margin-left: 0;
}


/* Navegación Principal (Escritorio) */
/* .pf-header-nav {
    Los estilos para el menú en sí irán aquí
} */

/* Estilos para los elementos del menú principal */
#primary-menu ul { /* Este es el ul principal de wp_nav_menu */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Para escritorio */
}

#primary-menu li {
    position: relative; /* Para submenús si los hubiera */
    margin-left: 0.5em; /* Espaciado entre elementos del menú */
}

#primary-menu li:first-child {
    margin-left: 0;
}

#primary-menu a {
    display: block;
    padding: 0.75em 1em; /* Ajustar padding según diseño */
    text-decoration: none;
    color: var(--header-text-color);
    font-weight: 500; /* Un poco más de peso para los enlaces del menú */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: 4px; /* Bordes redondeados sutiles */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

#primary-menu a:hover,
#primary-menu li.current-menu-item > a,
#primary-menu li.current_page_ancestor > a {
    color: var(--header-link-hover-color, #0056b3); /* Color de hover/activo más oscuro o contrastante */
    background-color: rgba(0,0,0,0.03); /* Ligero fondo al pasar el ratón/activo */
}

/* Submenús (estilos básicos si se usan en el futuro) */
#primary-menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--header-bg-color);
    border: 1px solid var(--header-border-color);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    z-index: 1011; /* Por encima de la cabecera */
    min-width: 200px; /* Ancho mínimo para submenús */
    padding: 0.5em 0; /* Padding interno para el contenedor del submenú */
}

#primary-menu ul li:hover > ul,
#primary-menu ul li.focus > ul { /* 'focus' class for keyboard navigation */
    display: block;
}

#primary-menu ul ul li {
    margin-left: 0;
    width: 100%;
}

#primary-menu ul ul a {
    padding: 0.5em 1.25em;
    white-space: nowrap;
    font-weight: normal; /* Peso normal para submenús */
    border-radius: 0; /* Sin bordes redondeados en submenús */
}

#primary-menu ul ul a:hover {
    background-color: rgba(0,0,0,0.05);
}

#primary-menu {
    display: flex; /* Por defecto para escritorio */
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-menu li {
    margin-left: 20px; /* Espacio entre elementos del menú */
}

#primary-menu li:first-child {
    margin-left: 0;
}

#primary-menu a {
    text-decoration: none;
    color: var(--header-text-color);
    padding: 10px 5px;
    display: block;
    font-weight: 500;
    transition: color 0.3s ease;
}

#primary-menu a:hover,
#primary-menu .current-menu-item > a,
#primary-menu .current-menu-ancestor > a {
    color: var(--header-link-hover-color);
}

/* Botón de Menú Móvil (Hamburguesa) */
.pf-header-menu-toggle {
    display: none; /* Oculto por defecto, se mostrará en móviles */
    background-color: transparent;
    border: none; /* Sin borde, las barras harán de icono */
    padding: 10px; /* Área de toque */
    cursor: pointer;
    z-index: 1001; /* Por si se superpone con otros elementos */
    position: relative; /* Para las barras si se usaran pseudo-elementos, aunque aquí usamos spans */
    width: 40px; /* Ancho fijo */
    height: 40px; /* Alto fijo */
    /* margin-left: auto; Se gestionará en la media query para .pf-header-nav */
}

.pf-header-menu-toggle .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Nuevo icono de hamburguesa usando un span y pseudo-elementos */
.hamburger-icon-bars {
    display: block;
    position: relative;
    width: 22px; /* Ancho de las barras */
    height: 2px; /* Grosor de las barras */
    background-color: var(--header-text-color);
    transition: all 0.2s ease-in-out;
}

.hamburger-icon-bars::before,
.hamburger-icon-bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--header-text-color);
    transition: all 0.2s ease-in-out;
}

.hamburger-icon-bars::before {
    top: -6px; /* Espaciado de la barra superior */
}

.hamburger-icon-bars::after {
    bottom: -6px; /* Espaciado de la barra inferior */
}

/* Animación a X cuando el menú está activo */
.pf-header-menu-toggle[aria-expanded="true"] .hamburger-icon-bars {
    background-color: transparent; /* La barra del medio se oculta */
}

.pf-header-menu-toggle[aria-expanded="true"] .hamburger-icon-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.pf-header-menu-toggle[aria-expanded="true"] .hamburger-icon-bars::after {
    bottom: 0;
    transform: rotate(-45deg);
}


/* Media Queries para Responsive */
@media (max-width: 768px) { /* Punto de ruptura común para tablets/móviles, ajústalo si es necesario */
    body {
      
    }
    .site-header-inner {
        padding: 0 15px; /* Este es el --site-padding para móviles */
        width: 100%; /* Asegurar que ocupe todo el ancho para centrar contenido */
    }

    .pf-header-nav-search-group {
        display: contents; /* Allows children to be direct flex items of .site-header-inner on mobile */
    }
    .custom-logo-link img {
        max-height: 50px;
    }
    .site-title {
        font-size: 1.5em;
    }
    .site-description {
        display: none; /* Asegurar que esté oculto en móviles si no lo estaba ya */
    }

    .pf-header-branding {
        /* margin-right: 10px; */ /* Eliminado, space-between lo gestionará */
        flex-shrink: 1; /* Permitir que el branding se encoja si es necesario en móviles */
        min-width: 0; /* Ayuda a flex-shrink a funcionar correctamente con contenido interno largo */
    }

    .pf-header-nav {
        margin-left: auto; /* Empuja el contenedor de navegación (y el botón) a la derecha */
        display: flex; /* Para que el botón de menú (que es hijo directo) se alinee bien */
        align-items: center; /* Centra verticalmente el botón de menú si tiene diferente altura */
    }

    .pf-header-menu-toggle {
        display: flex; /* Para centrar el span interno */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px; 
        height: 40px;
        padding: 0; /* Resetear padding si no es necesario por el tamaño fijo */
        /* background-color: transparent; Ya es transparente por defecto */
        /* border: none; Ya es none por defecto */
    }

    #primary-menu {
        display: none; /* Ocultar el menú de escritorio */
        position: absolute;
        top: 100%; /* Justo debajo de la cabecera */
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        z-index: 1009; /* Ligeramente por debajo de la cabecera principal, pero encima del contenido */
        border-top: 1px solid var(--header-border-color);
        padding-top: 0.5em; /* Espacio superior */
        padding-bottom: 0.5em; /* Espacio inferior */
    }

    /* Cuando el menú está abierto (tu JS de Underscores añade la clase 'toggled' a .pf-header-nav) */
    .pf-header-nav.toggled #primary-menu {
        display: flex;
        flex-direction: column; /* Asegurar que los items se apilen verticalmente */
    }

    #primary-menu ul { /* El ul principal dentro del menú desplegable */
        flex-direction: column; /* Apilar verticalmente en móvil */
        width: 100%;
    }

    #primary-menu li {
        margin-left: 0; /* Sin margen lateral en móvil */
        width: 100%;
        border-bottom: 1px solid var(--header-border-color-light, #e9ecef); /* Separador entre ítems */
    }

    #primary-menu li:last-child {
        border-bottom: none; /* El último ítem no necesita borde inferior */
    }

    #primary-menu a {
        display: block; /* Asegurar que el enlace ocupe todo el espacio del li */
        padding: 0.9em 1.5em; /* Padding generoso para el tacto */
        text-align: left; /* Alinear texto a la izquierda */
        width: 100%;
        color: var(--header-text-color);
        text-decoration: none;
        border-radius: 0; /* Sin bordes redondeados en móvil */
        font-weight: 500;
    }

    #primary-menu a:hover {
        background-color: rgba(0,0,0,0.05);
        color: var(--header-link-hover-color, #0056b3);
    }

    #primary-menu li.current-menu-item > a,
    #primary-menu li.current_page_ancestor > a {
        background-color: rgba(0,0,0,0.07);
        font-weight: 600;
    }

    /* Submenús en móvil (se comportarían como parte del flujo principal) */
    #primary-menu ul ul {
        position: static; /* No flotante, se integra en el flujo */
        box-shadow: none;
        border: none;
        border-top: 1px dashed var(--header-border-color-light, #e0e0e0); /* Separador para submenú */
        padding-left: 1em; /* Indentación para submenú */
        background-color: rgba(0,0,0,0.02); /* Fondo ligeramente distinto para submenús */
        width: 100%; /* Ocupar todo el ancho disponible */
        z-index: auto; /* Resetear z-index para submenús en móvil */
    }

    #primary-menu ul ul li {
        border-bottom: 1px solid var(--header-border-color-light, #f1f1f1); /* Borde más sutil para sub-ítems */
    }

    #primary-menu ul ul li:last-child {
        border-bottom: none;
    }

    #primary-menu ul ul a {
        padding-top: 0.7em;
        padding-bottom: 0.7em;
        padding-left: 2em; /* Mayor indentación para enlaces de submenú */
        font-weight: normal; /* Peso normal para submenús */
        font-size: 0.95em; /* Ligeramente más pequeño */
    }
    #primary-menu li:last-child a {
        border-bottom: none;
    }
}


/* Group for Navigation and Search Form for desktop layout */
.pf-header-nav-search-group {
    display: flex;
    align-items: center;
}
/* End of new desktop styles */

/* ==========================================================================
   Search Form Styles (ASAP Theme Inspired)
   ========================================================================== */

.search-header-playas {
    position: relative;
    margin-left: 20px; /* Space between nav menu and search form */
    display: flex;
    align-items: center;
}

.search-form-playas {
    display: flex;
    align-items: center; /* Vertically align label and button */
    border: 1px solid #dcdcdc; /* Slightly more visible border */
    border-radius: 999px; /* Robust pill shape */
    background-color: #fff;
    overflow: hidden; /* Essential for pill shape with child elements */
    height: 40px;
    padding: 0; /* Remove padding from form, children will handle it */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Even more subtle shadow */
    box-sizing: border-box;
    /* min-width: 220px; /* Optional: ensure a minimum width */
}

/* Style the label as a flex item that grows */
.search-form-playas > label {
    display: block; /* Make label a block container */
    flex-grow: 1;   /* Allow label to take up available space */
    height: 100%;   /* Make label take full height of the form */
    margin: 0;      /* Reset any default margin */
    padding: 0;     /* Reset any default padding */
}

.search-field-playas {
    border: none;
    background: transparent;
    /* Padding: Top, Right, Bottom, Left */
    padding: 0 5px 0 18px; /* Symmetrical start for text (18px), 5px before button */
    font-size: 14px;
    color: #333;
    outline: none;
    height: 100%; /* Fill the label */
    width: 100%;  /* Fill the label */
    box-sizing: border-box;
}

.search-field-playas::placeholder {
    color: #888;
    opacity: 1;
}

.search-submit-playas {
    background-color: transparent;
    border: none;
    color: #555; /* Icon color */
    cursor: pointer;
    /* Padding: Top, Right, Bottom, Left */
    padding: 0 15px 0 5px; /* Icon shifted left: 15px right padding, 5px after input */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: color 0.2s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
    box-sizing: border-box;
}

.search-submit-playas:hover,
.search-submit-playas:focus {
    background-color: transparent;
    color: #000; /* Darker icon on hover/focus */
}

.search-icon-playas {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Responsive adjustments for the search form and header layout */
@media (max-width: 768px) {
    /* Allow header items to wrap and re-order */
    .site-header-inner {
        flex-wrap: wrap;
        justify-content: space-between; /* Ensure space is still managed */
    }

    
    .search-header-playas {
        order: 2; /* Search form below branding in mobile view if wrapping */
        width: 100%; /* Search form takes full width */
        margin-left: 0; /* Reset desktop margin */
        margin-top: 10px; /* Add space if it wraps below branding */
        margin-bottom: 10px; /* Space below search form before nav */
    }

    .search-form-playas {
        width: 100%; /* Make the form itself take full width of its container */
    }

    .search-field-playas {
        flex-grow: 1; /* Allow input field to expand and fill available space */
        width: auto; /* Override fixed width */
    }
    
    /* Adjust navigation to be last and full width if needed */
    .pf-header-nav {
        order: 3; /* Navigation menu/toggle last */
        width: 100%; /* Ensure nav takes full width if it wraps */
        margin-left: 0; /* Reset desktop margin */
        margin-top: 0; /* Reset top margin if search is above */
    }
}

@media (max-width: 480px) {
    .search-form-playas {
        height: 36px; /* Slightly smaller on very small screens */
    }
    .search-field-playas {
        font-size: 13px;
        padding: 8px 12px; /* Adjust padding */
    }
    .search-submit-playas {
        padding: 0 12px; /* Adjust padding */
    }
    .search-icon-playas {
        width: 16px;
        height: 16px; /* Adjust icon size */
    }
}