/* ============================================================================
 *  Forum Inmobiliaria — navbar dropdown + map call to action
 *
 *  Kept out of forum-2.css on purpose: that stylesheet ships as a separate
 *  minified build, so every rule would have to be written twice and kept in
 *  sync by hand.
 * ========================================================================== */

/* A wrapped nav item breaks the row alignment of every other one. */
.nav__links > li > a, .nav__droptop > a { white-space: nowrap; }

/* ---- "Propiedades" with a property-type submenu --------------------------- */
.nav__drop { position: relative; }

.nav__droptop { display: flex; align-items: center; }

/* Above the collapse breakpoint the label opens the menu instead of following
   its href (see forum.js). The href is kept for the collapsed navbar and for
   the no-JS case, where there is no menu to open. */
.nav__droptop > a { padding-right: .45rem; cursor: pointer; }

.nav__caret {
    display: grid; place-items: center;
    width: 26px; height: 26px; padding: 0; margin-left: -.15rem;
    background: none; border: 0; border-radius: 50%;
    color: var(--ink-soft); cursor: pointer;
    transition: color .15s, background .15s, transform .18s ease;
}
.nav__caret svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav__caret:hover { color: var(--brand-dark); background: var(--brand-light); }
.nav__caret:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav__drop.is-open .nav__caret { transform: rotate(180deg); color: var(--brand-dark); }

.nav__sub {
    position: absolute; top: calc(100% + .5rem); left: 0; z-index: 1100;
    min-width: 218px; margin: 0; padding: .35rem;
    list-style: none; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.nav__drop.is-open .nav__sub { opacity: 1; transform: translateY(0); pointer-events: auto; }

.nav__sub a {
    display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
    font-size: .94rem; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--brand-light); color: var(--brand-dark); }
.nav__sub li + li { margin-top: 1px; }

/* ---- "Buscá en el mapa" ---------------------------------------------------- */
.nav__map {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1rem; border-radius: var(--radius-pill);
    background: var(--brand); color: #fff !important;
    font-weight: 600; font-size: .93rem; white-space: nowrap;
    transition: background .15s, transform .15s;
}
.nav__map:hover { background: var(--brand-dark); transform: translateY(-1px); }
.nav__map svg { width: 17px; height: 17px; flex: none; }

/* ---- Collapsed navbar ------------------------------------------------------
 * No type submenu here: in the hamburger panel it would add five more rows to a
 * list the user has to scroll, for a filter they can apply on the listing page
 * itself. "Propiedades" stays a plain link straight to the full listing.
 * -------------------------------------------------------------------------- */
/* forum-2.css collapses the navbar at 720px. The map button widened the row,
   so between ~720px and ~1050px "Vendé tu propiedad" wrapped onto two lines and
   the items lost their alignment. The breakpoint is raised here instead of in
   forum-2.css, which ships as a separate minified build. */
@media (max-width: 1024px) {
    .nav__links { display: none; }
    .nav__toggle { display: block; }
    .nav.is-open .nav__links {
        display: flex; flex-direction: column;
        position: absolute; top: var(--nav-h); left: 0; right: 0;
        background: var(--surface); padding: 1rem; gap: .25rem;
        border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    }

    .nav__drop { width: 100%; }
    .nav__caret,
    .nav__sub { display: none; }
    .nav__droptop { justify-content: center; }
    .nav__droptop > a { padding-right: .9rem; }
    /* Last in the stacked panel: between "Propiedades" and "Loteos" the solid
       green pill cut the list of links in half. The DOM order is kept so the
       desktop row still reads Inicio · Propiedades · Mapa · Loteos. */
    .nav__mapli { order: 1; margin-top: .6rem; }
    .nav__map { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .nav__sub, .nav__caret, .nav__map { transition: none; }
}