/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez child theme — Luxury Lake Country Homes.
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/
@import url("../houzez/style.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
/* =============================================================================
   LUXURY LAKE COUNTRY HOMES — CHILD THEME CSS
   Reconciled Session 21 — July 18, 2026
   Order: 1) Typography  2) Header  3) Mobile drawer
   PRINCIPLE: native controls first (Elementor widget settings, Houzez Theme
   Options). CSS here only where no native control exists.
   ============================================================================= */
/* =============================================================================
   1. GLOBAL TYPOGRAPHY
   ============================================================================= */
body, p, span, a, li, div, input, textarea, select, button {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.v-middle-title, .page-title,
.houzez-page-title {
    font-family: 'Playfair Display', serif !important;
}
/* =============================================================================
   2. HEADER
   ============================================================================= */
/* --- 2.1 Legacy Houzez header selectors (classic header — likely inert with the
   Elementor header in use). Retained pending pre-launch verification. --- */
.site-header, #header-section, #masthead {
    margin-bottom: -80px;
    z-index: 999;
    position: relative;
    transition: background-color 0.3s ease;
}
.houzez-header-sticky.sticky-active,
.header-fixed .navbar-scrolled,
.site-header.sticky-active,
#header-section.sticky-active {
    background: rgba(27,58,92,0.97) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* --- 2.2 Transparent by default (hero shows through on homepage).
   ⚠ NOTE (S21): this list also forces the mobile drawer transparent
   (.offcanvas, .offcanvas-mobile-menu, .offcanvas-header). Drawer colours are
   now owned by Houzez Theme Options → Styling → Mobile Menu, whose inline CSS
   currently out-specifies this. If the drawer ever renders transparent or
   white again, the drawer selectors below are the first place to look. --- */
#header-hz-elementor,
.offcanvas,
.offcanvas-start,
.offcanvas-mobile-menu,
.offcanvas-header,
.main-nav,
.navbar,
.houzez-elementor-mobile-menu,
.nav-mobile,
.houzez-show-menu-tablet,
[class*="houzez-ele-mobile-menu"] {
    background-color: transparent !important;
    background: transparent !important;
    transition: background-color 0.3s ease !important;
}
/* --- 2.3 Interior pages get solid navy (beats 2.2 on specificity) ---
   ⚠⚠ DOES NOT CURRENTLY WORK — DIAGNOSED S26, Aug 11 2026.
   This rule is CORRECT and has been here since S15. It has never taken effect.
   `houzez_child_transparent_header_js` in functions.php sets
   background-color: transparent !important as an INLINE style on this same
   element at scroll position 0. An inline !important declaration outranks an
   !important rule in any stylesheet, so nothing written here can ever win.
   Verified in-browser: getPropertyPriority('background-color') === 'important'.
   DO NOT try to fix the interior-page header from this file. It is not possible.
   The fix belongs in functions.php — the script must not apply transparency
   when the body lacks the .home class. Once that lands, this rule works as
   written and needs no change. --- */
body:not(.home) #header-hz-elementor {
    background-color: #1B3A5C !important;
}
/* --- 2.4 Homepage: lift header out of flow so it floats over the hero.
   Scoped to .home — NEVER a numeric page ID. --- */
.home #header-hz-elementor {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
/* --- 2.5 Nav link colours + no mid-item line breaks.
   Also supplies white/gold to the drawer links, which sit inside the header. --- */
#header-hz-elementor .elementor-nav-menu a,
#header-hz-elementor .elementor-item,
#header-hz-elementor li a {
    color: #FFFFFF;
    white-space: nowrap;
}
#header-hz-elementor .elementor-nav-menu a:hover,
#header-hz-elementor .elementor-item:hover,
#header-hz-elementor li a:hover {
    color: #C9A96E;
}
/* --- 2.6 Header layout — single consolidated block.
   Merges Sessions 15, 17 and 18. --- */
#header-hz-elementor .elementor-58 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px;
    min-height: 85px;
    max-width: 1600px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}
/* Remove the empty top band container */
#header-hz-elementor .elementor-element-c33a3b5 {
    display: none !important;
}
/* Logo / nav / CTA size to content, not full width.
   Container IDs verified in DevTools, S21:
   0846781 = logo · 9a0fb27 = nav · dd53f5e = CTA button.
   (The old f4f7ab7 ID was stale and matched nothing — the nav container was
   never receiving this rule, which is why nav items stretched and wrapped.) */
#header-hz-elementor .elementor-element-0846781,
#header-hz-elementor .elementor-element-9a0fb27,
#header-hz-elementor .elementor-element-dd53f5e {
    width: auto !important;
    flex: 0 0 auto !important;
}
#header-hz-elementor .elementor-element-0846781 {
    margin-right: 0 !important;
}
/* CTA pulled in from the right edge */
#header-hz-elementor .elementor-element-dd53f5e {
    margin-right: 80px !important;
}
/* --- 2.7 CTA button padding (trimmed from Houzez default 30px).
   Selector verified in DevTools S20 — beats Elementor's per-widget rule. --- */
@media (min-width: 1025px) {
    .elementor-58 .elementor-element.elementor-element-e2194b4 .elementor-button {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}
/* --- 2.8 Ultra-wide / 4K only --- */
@media (min-width: 3001px) {
    .home #header-hz-elementor {
        box-sizing: border-box !important;
        padding-right: 140px !important;
    }
}
/* =============================================================================
   3. MOBILE OFF-CANVAS DRAWER
   Drawer colours are set NATIVELY in:
   Houzez → Theme Options → Styling → Mobile Menu
     · Offcanvas menu Background Color         #1B3A5C
     · Offcanvas menu Text Color               #FFFFFF
     · Offcanvas menu header Background Color  #1B3A5C
     · Offcanvas menu header Text Color        #FFFFFF
   Houzez 4.3.5 reset these to default (white), which rendered the drawer
   white-on-white. Do NOT re-add CSS overrides — fix in Theme Options.
   ============================================================================= */
/* Hide the built-in "MENU" title that overlapped the fixed logo (S20) */
.houzez-elementor-mobile-menu .offcanvas-header .offcanvas-title,
.houzez-elementor-mobile-menu .offcanvas-title,
[id^="hz-offcanvas-ele-menu"] .offcanvas-title {
    display: none !important;
}
/* Item dividers — Theme Options' border colour field is left empty, so the
   Houzez default (#dce0e0) applies. This softens it against navy. */
.offcanvas-mobile-menu .nav-item a {
    border-color: rgba(255,255,255,0.12) !important;
}
/* =============================================================================
   NOTE — Desktop nav typography (13px, uppercase, 1.5px letter-spacing) is set
   natively in the Elementor Navigation widget on Template 58, NOT here.
   ============================================================================= */
/* ============================================================================
   4. HOMEPAGE HERO — BANNER TITLE COLOUR                             (S25)
   The hero is a HOUZEZ PAGE HEADER, not an Elementor section. It lives in
   the Page Header Options metabox on page 35 (Header Type: Image), NOT in
   the Elementor structure — which is why searching Elementor for it fails.
   Houzez sets .banner-title to #fff in main.css. The Elementor global kit
   (S24) sets .elementor-kit-10 h1 to #1A1A1A, which is more specific and
   loads later, so it wins — putting near-black text on the lake image.
   Theme Options → Typography has NO colour field for headings, so there is
   no native control to fix this with. CSS is the only route.
   Scoped to .home deliberately: the Elementor H1 #1A1A1A is CORRECT for
   About, Contact, blog and listing pages, which use this same page header.
   ============================================================================ */
.home .top-banner-wrap .banner-title {
    color: #FFFFFF;
}