/* =============================================
   EDMAGO - Base Styles
   ============================================= */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Body defaults */
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titles);
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Topbar ── */
#site-topbar {
    background-color: var(--color-footer);
    color: var(--color-accent);
}
#site-topbar a {
    color: var(--color-accent);
}
#site-topbar a:hover {
    opacity: 0.75;
}
#site-topbar svg,
#site-topbar i {
    color: var(--color-accent);
}

/* ── Footer ── */
footer .footer-muted {
    color: var(--color-accent);
    opacity: 0.65;
}
footer .border-t {
    border-color: rgba(var(--color-accent-rgb), 0.2);
}

/* ── Navbar transparente ── */
#main-nav {
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
    background-color: transparent;
}
#main-nav .nav-link {
    color: var(--color-accent);
    transition: color 0.2s, opacity 0.2s;
}
#main-nav .nav-link:hover {
    opacity: 0.75;
}

/* Inner container: expandido (inicio) */
#main-nav .nav-inner {
    height: 6.875rem; /* 70px logo + 8px pb + ~32px top = 110px */
    align-items: flex-end;
    padding-bottom: 0.5rem;
    transition: height 0.35s ease, padding-bottom 0.35s ease, align-items 0s;
}

/* Logo expandido */
#main-nav .nav-logo {
    height: 70px;
    transition: height 0.35s ease;
}

/* Fallback texto cuando no hay logo */
#main-nav .nav-logo-text {
    font-size: 1.5rem;
    transition: font-size 0.35s ease;
}

/* Estado: scrolled → fondo primario + nav compacta */
#main-nav.nav-scrolled {
    background-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
#main-nav.nav-scrolled .nav-inner {
    height: 4rem;
    align-items: center;
    padding-bottom: 0;
}
#main-nav.nav-scrolled .nav-logo {
    height: 2.5rem;
}
#main-nav.nav-scrolled .nav-logo-text {
    font-size: 1.25rem;
}
#main-nav.nav-scrolled .nav-link {
    color: white;
}
#main-nav.nav-scrolled .nav-link:hover {
    opacity: 0.85;
}

/* Mobile: nav siempre compacta (igual que sticky) — al final para ganar en cascada */
@media (max-width: 1023px) {
    #main-nav .nav-inner {
        height: 4rem;
        align-items: center;
        padding-bottom: 0;
    }
    #main-nav .nav-logo {
        height: 2.5rem;
    }
    #main-nav .nav-logo-text {
        font-size: 1.25rem;
    }

    /* Menú mobile abierto sin scroll: barra superior = fondo primario */
    #main-nav:has(#mobile-menu:not(.hidden)) {
        background-color: var(--color-primary);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
}

/* Páginas sin hero: nav siempre con fondo primario (ej: login, registro) */
.nav-force-primary #main-nav {
    background-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Dropdown: siempre fondo blanco con texto normal */
#main-nav .nav-dropdown {
    background-color: white;
}
#main-nav .nav-dropdown a {
    color: var(--color-text) !important;
}
#main-nav .nav-dropdown a:hover {
    color: var(--color-primary) !important;
    background-color: #f9fafb;
}

/* Botón Ingresar */
#main-nav .btn-nav-login {
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    background-color: transparent;
    border-radius: 0.5rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}
#main-nav .btn-nav-login:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
}
#main-nav.nav-scrolled .btn-nav-login {
    border-color: white;
    color: white;
}
#main-nav.nav-scrolled .btn-nav-login:hover {
    background-color: white;
    color: var(--color-primary);
}

/* Menú móvil: siempre fondo primario */
#mobile-menu {
    background-color: var(--color-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
#mobile-menu a {
    color: var(--color-accent);
}
#mobile-menu a:hover {
    opacity: 0.8;
}

/* ── Page hero banner (secciones) ── */
/* Se extiende detrás del navbar expandido (6.875rem = 110px) */
.page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    margin-top: -6.875rem;
    padding: calc(6.875rem + 3rem) 0 3rem;
}

/* Slider y hero del home: compensan el mismo alto del nav expandido */
#hero-slider,
.home-hero-classic {
    margin-top: -6.875rem;
}

/* Cuando tiene imagen de fondo configurada */
.page-hero.page-hero-img {
    background: none;
    background-color: var(--color-primary);
}

.page-hero h1 {
    font-size: 2.5rem;
    /* font-weight lo controlan las clases Tailwind del template (font-bold / font-normal) */
}

/* Breadcrumbs dentro del hero: color de acento */
.page-hero nav       { color: var(--color-accent); }
.page-hero nav a     { color: var(--color-accent); opacity: 0.75; }
.page-hero nav a:hover { opacity: 1; }
.page-hero nav span  { color: var(--color-accent); }
.page-hero nav i     { color: var(--color-accent); opacity: 0.5; }

/* ── Search bar flotante (pisa borde inferior del hero/slider) ── */
.search-bar-hero-float {
    position: relative;
    z-index: 20;
    margin-top: -4.5rem;
    padding: 0 1rem 0;
}

.search-bar-hero-float .search-card {
    max-width: 48rem;
    margin: 0 auto;
    background: var(--color-secondary);
    border-radius: 1rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    padding: 1.75rem 2rem;
}

.search-bar-hero-float .search-card h2 {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-accent);
    text-align: center;
    margin-bottom: 1rem;
}

/* Compensar el espacio robado por el margin negativo del buscador */
.search-bar-hero-float + div {
    padding-top: 5rem;
}

/* Background pattern (waves) */
.bg-wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,224C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
}

/* Selection color */
::selection {
    background-color: var(--color-primary);
    color: white;
}