/*
Theme Name: El Farol Inn
Theme URI: https://elfarolcasma.com/
Author: El Farol Inn
Description: Tema WordPress multipágina para el hospedaje El Farol Inn en Casma, Perú. Incluye plantillas para Inicio, Habitaciones, Servicios, Casma y Ubicación.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: el-farol-inn
*/

/* ============================================================
   Este archivo es la hoja de estilos OBLIGATORIA de WordPress
   (el bloque de arriba es lo que WP lee para identificar el tema).
   El diseño visual principal viene de Tailwind CSS (cargado vía
   CDN desde functions.php); aquí solo van los estilos que Tailwind
   no cubre: la firma visual del sitio y el acordeón de FAQ.
   ============================================================ */

/* "Arco de Sol" — luz cálida detrás del hero y divisores orgánicos
   entre secciones, evocando el sol de Casma. */
.sun-glow {
	background: radial-gradient(circle at 50% 0%, rgba(242,230,26,0.35) 0%, rgba(242,230,26,0.08) 35%, rgba(242,230,26,0) 60%);
}
.wave-divider { display: block; width: 100%; line-height: 0; }
.wave-divider svg { width: 100%; height: auto; display: block; }

::selection { background: #f9f8f6; color: #142b2d; }

/* Acordeón FAQ */
.faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-item.open .faq-panel { max-height: 400px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s ease; }

/* Foco visible accesible */
a:focus-visible, button:focus-visible {
	outline: 3px solid #f2e61a;
	outline-offset: 2px;
	border-radius: 6px;
}

/* Resalta el ítem de navegación de la página actual
   (WordPress añade "current-menu-item" automáticamente al <li> activo) */
.menu-item.current-menu-item > a,
.current_page_item > a,
.nav-link.active {
	color: #822a3f;
	font-weight: 700;
}

/* Estilos básicos para page.php y single.php (contenido estándar de WP) */
.entry-content { max-width: 48rem; margin: 0 auto; }
.entry-content img { border-radius: 1.25rem; }
.entry-content a { color: #196c76; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}