/* Luxuria Properties Estates brand overrides */

.site-logo img {
    height: 120px;
    width: auto;
    max-width: none;
}

.ltn__header-5 .ltn__header-middle-area.sticky-active {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ltn__header-5 .ltn__header-middle-area.sticky-active .site-logo img {
    height: 88px;
}

.footer-logo .site-logo img {
    height: 100px;
}

/* Mobile menu panel logo */
.ltn__utilize-menu-head .site-logo img {
    height: 72px;
}

@media (max-width: 991px) {
    .site-logo img {
        height: 88px;
    }
}

@media (max-width: 575px) {
    .site-logo img {
        height: 72px;
    }
}

/* ============================================================
   Sitewide header / nav / button / footer restyle
   Applies on every page so navigation stays visually consistent.
   ============================================================ */

:root {
    --lx-accent: #FFCA3A;   /* golden amber, matches homepage */
    --lx-on-accent: #171B2A;
    --lx-dark: #171B2A;
    --lx-line: #E7EBEE;
}

/* ---------- Main nav ---------- */
.ltn__main-menu > ul > li > a {
    font-family: var(--ltn__heading-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 20px 16px;
    transition: color .25s ease;
}

/* replace the "+" dropdown indicator with a subtle chevron */
.menu-icon > a { padding-right: 26px !important; }
.menu-icon > a::before {
    content: "\f107";           /* chevron-down */
    font-size: 12px;
    right: 8px;
    opacity: .75;
    transition: transform .25s ease;
}
.menu-icon:hover > a::before { transform: translateY(-50%) rotate(-180deg); }

/* dropdown panels */
.ltn__main-menu li > ul,
.ltn__main-menu .sub-menu {
    border-radius: 6px;
    box-shadow: 0 18px 45px rgba(23, 27, 42, .14);
    border: 1px solid var(--lx-line);
    padding: 10px 0;
}
.ltn__main-menu li > ul li > a { font-size: 14px; padding: 9px 22px; }

/* ---------- "Add Listing" — outlined pill ---------- */
.header-top-btn a {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 4px;
    padding: 0 22px;
    line-height: 36px;
    font-family: var(--ltn__heading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: all .3s ease;
}
.header-top-btn a:hover {
    background-color: var(--lx-accent);
    border-color: var(--lx-accent);
    color: var(--lx-on-accent);
}

/* ---------- Shared button styling ---------- */
.theme-btn-1.btn,
.theme-btn-2.btn,
.btn-white,
.btn-transparent {
    border-radius: 4px;
    font-family: var(--ltn__heading-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: all .3s ease;
}

/* ---------- Footer ---------- */
.ltn__footer-area .footer-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 26px;
}
.ltn__footer-area .footer-menu ul li a {
    font-size: 15px;
    transition: color .25s ease, padding .25s ease;
}
.ltn__footer-area .footer-menu ul li a:hover { color: var(--lx-accent); }
.ltn__footer-area .ltn__social-media ul li a:hover { color: var(--lx-accent); }
.footer-address .footer-address-info p,
.footer-about-widget p { font-size: 15px; line-height: 1.8; }

.ltn__copyright-area { padding: 22px 0; }
.ltn__copyright-area p,
.ltn__copyright-menu ul li a { font-size: 14px; }
.ltn__copyright-menu ul li a:hover { color: var(--lx-accent); }

/* ---------- Homepage-only: transparent header over the hero ---------- */
body.lx-home .ltn__header-middle-area:not(.sticky-active) {
    position: absolute;
    left: 0; right: 0; top: auto;
    background: transparent;
    z-index: 20;
}
body.lx-home .ltn__header-middle-area:not(.sticky-active) .ltn__main-menu > ul > li > a { color: #fff; }
body.lx-home .ltn__header-middle-area:not(.sticky-active) .ltn__main-menu > ul > li > a:hover { color: var(--lx-accent); }
/* the theme gives this button a solid white background — make it a
   transparent outlined circle so a white icon stays visible over the hero */
body.lx-home .ltn__header-middle-area:not(.sticky-active) .ltn__header-options-2 .header-search-1 {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    box-shadow: none;
    transition: all .3s ease;
}
body.lx-home .ltn__header-middle-area:not(.sticky-active) .ltn__header-options-2 .header-search-1:hover {
    background: var(--lx-accent);
    border-color: var(--lx-accent);
    color: var(--lx-on-accent);
}
body.lx-home .ltn__header-middle-area:not(.sticky-active) .ltn__header-options-2 .header-search-1:hover .search-icon i { color: var(--lx-on-accent); }
body.lx-home .ltn__header-middle-area:not(.sticky-active) .header-search-wrap .search-icon i { color: #fff; }
body.lx-home .ltn__header-middle-area:not(.sticky-active) .mobile-menu-toggle svg path { stroke: #fff; }

@media (max-width: 1199px) {
    body.lx-home .ltn__header-middle-area:not(.sticky-active) { position: static; background: #fff; }
    body.lx-home .ltn__header-middle-area:not(.sticky-active) .ltn__main-menu > ul > li > a { color: var(--lx-dark); }
    body.lx-home .ltn__header-middle-area:not(.sticky-active) .header-search-wrap .search-icon i { color: var(--lx-dark); }
    body.lx-home .ltn__header-middle-area:not(.sticky-active) .mobile-menu-toggle svg path { stroke: var(--lx-dark); }
}

/* ============================================================
   Accent discipline (matches the reference):
   amber is used ONLY for buttons / active states / filled chips.
   Small icon+text accents stay dark so they remain readable —
   pale amber text on white would fail contrast.
   ============================================================ */

/* primary buttons -> amber with dark text */
.theme-btn-1,
.theme-btn-1.btn,
.btn.theme-btn-1,
button.theme-btn-1,
.ltn__search-widget button,
.ltn__newsletter-widget form button,
.footer-newsletter button,
.search-widget button[type="submit"] {
    background-color: var(--lx-accent) !important;
    color: var(--lx-on-accent) !important;
    border-color: var(--lx-accent) !important;
}
.theme-btn-1:hover,
.theme-btn-1.btn:hover,
.btn.theme-btn-1:hover,
button.theme-btn-1:hover,
.ltn__search-widget button:hover,
.ltn__newsletter-widget form button:hover,
.footer-newsletter button:hover,
.search-widget button[type="submit"]:hover {
    background-color: var(--lx-dark) !important;
    color: #fff !important;
    border-color: var(--lx-dark) !important;
}

/* filled state chips (checked boxes, active view toggles) */
.checkbox-item input:checked ~ .checkmark,
.ltn__shop-options .ltn__grid-list-tab-menu a.active {
    background-color: var(--lx-accent) !important;
    color: var(--lx-on-accent) !important;
    border-color: var(--lx-accent) !important;
}

/* small icon accents -> dark instead of orange, so the palette stays coherent */
.ltn__breadcrumb-list li a i,
.ltn__breadcrumb-list li i,
.ltn__shop-options .ltn__grid-list-tab-menu a {
    color: var(--lx-dark) !important;
}

/* Footer: align the logo's visual top with the Company / Newsletter headings.
   The logo box is taller than a heading line, so without this the whole
   left column reads as sitting lower than the other two. Negative margin
   (not `top`) so the text beneath it moves up with the logo. */
.ltn__footer-area .footer-about-widget .footer-logo {
    margin-top: -40px;
}
@media (max-width: 991px) {
    /* stacked layout — no columns to align against */
    .ltn__footer-area .footer-about-widget .footer-logo { margin-top: 0; }
}

/* CTA band on inner pages — match the homepage's amber band
   (the homepage uses .hz-cta; this is the theme equivalent). */
.call-to-action-inner-6.ltn__secondary-bg {
    background-color: var(--lx-accent) !important;
    border-radius: 8px;
}
.call-to-action-inner-6.ltn__secondary-bg .coll-to-info h1,
.call-to-action-inner-6.ltn__secondary-bg .coll-to-info h2,
.call-to-action-inner-6.ltn__secondary-bg .coll-to-info p {
    color: var(--lx-on-accent) !important;
}
.call-to-action-inner-6.ltn__secondary-bg .btn-white {
    background-color: var(--lx-dark) !important;
    color: #fff !important;
}
.call-to-action-inner-6.ltn__secondary-bg .btn-white:hover {
    background-color: #fff !important;
    color: var(--lx-dark) !important;
}

/* ============================================================
   Empty-state block — shown on the Properties page while no
   listings are published. The page layout/filters are kept
   intact so listings can be added back at any time.
   ============================================================ */
.lx-empty-state {
    text-align: center;
    background: #fff;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    padding: 72px 34px;
}
.lx-empty-state p {
    font-size: 17px;
    line-height: 1.95;
    color: #5C727D;
    max-width: 760px;
    margin: 0 auto 30px;
}
@media (max-width: 767px) {
    .lx-empty-state { padding: 46px 22px; }
    .lx-empty-state p { font-size: 15.5px; line-height: 1.85; }
}