/* ===== Interior header -> homepage dark navbar style ===== */
#header-section.header-desktop,
#header-section.header-desktop.header-sticky {
  background: #0d1a40 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.28);
}
/* Swap dark-on-white desktop logo for the existing white wordmark */
#header-section .logo-desktop a img { visibility: hidden !important; }
#header-section .logo-desktop a {
  display: inline-block; height: 40px; width: 200px;
  background: url('https://www.crezly.com/wp-content/uploads/2025/12/Crezly-logo-white.png') left center / contain no-repeat;
}
/* Nav links -> light */
#header-section .main-nav .nav-link,
#header-section .main-nav .nav-link.dropdown-toggle,
#header-section .favorite-link a { color: rgba(255,255,255,0.80) !important; font-weight: 500; }
#header-section .main-nav .nav-link:hover,
#header-section .main-nav .current-menu-item > .nav-link { color: #ffffff !important; }
/* Dropdown panels -> dark */
#header-section .dropdown-menu {
  background: #0d1a40 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}
#header-section .dropdown-menu .dropdown-item { color: rgba(255,255,255,0.82) !important; }
#header-section .dropdown-menu .dropdown-item:hover { background: transparent !important; color: #ff2d6f !important; }
/* Dropdown vertical density. The Crezly Data panel carries 15 items, and at the
   theme's default 15px link padding + 8px li padding each row rendered 70px tall
   — 1045px total, which ran off the bottom of a 900px-tall desktop viewport and
   cut off the last item. Tightened to ~40px per row so the whole menu fits.
   Desktop only: the mobile slideout is separate markup and keeps its larger
   touch targets. Applied to every header dropdown, not just Crezly Data, so the
   two panels stay visually consistent. */
@media (min-width: 992px) {
  #header-section .dropdown-menu { padding-top: 6px !important; padding-bottom: 6px !important; }
  #header-section .dropdown-menu > li { padding-top: 2px !important; padding-bottom: 2px !important; }
  #header-section .dropdown-menu .dropdown-item { padding-top: 7px !important; padding-bottom: 7px !important; }
}
/* Login / Sign up CTA -> teal like homepage "Get Started" (red .register-toggle-wrap button) */
#header-section .login-register .login-link a { color: rgba(255,255,255,0.80) !important; }
#header-section .register-toggle-wrap,
#header-section .login-register .register-link a,
#header-section .login-register-nav .btn {
  background: #0D9488 !important; border-color: #0D9488 !important; color: #fff !important;
  border-radius: 50px !important;
}
#header-section .register-toggle-wrap:hover,
#header-section .login-register .register-link a:hover { background: #0B7A70 !important; }

/* ===== Interior page-title headers -> brand style (DM Serif Display, navy) ===== */
.page-title-wrap h1, .page-title-wrap h2,
.page-title h1, .listing-wrap .page-title h1,
.page-title-wrap .page-title-heading {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif !important;
  color: #0d1a40 !important;
  font-weight: 400 !important;
  font-size: 42px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.3px !important;
}
/* These interior pages have an EMPTY Houzez title bar and put their real title in a
   content <h1> built by Elementor / the theme / custom snippets, so the rule above
   never reaches them. Page titles are always <h1> (section sub-heads are h2/h3), so
   theme the main content h1 to the SAME brand style as .crezly-pkg-header h1
   (packages, the reference). The front page is excluded by the guard at the top. */
#main h1, .page-wrap h1, .page-content-wrap > h1,
.bt-content-wrap h1, .article-page-wrap h1,
.elementor-widget-heading h1.elementor-heading-title {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif !important;
  color: #0d1a40 !important;
  font-weight: 400 !important;
  font-size: 40px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.3px !important;
}
/* ---------------------------------------------------------------------------
   DARK-HERO OPT-OUT (2026-08-26).

   The brand rule above forces `color:#0d1a40 !important` on EVERY interior h1.
   That is right for a title on white, and unreadable for a title sitting on a
   dark hero card — /for-home-owners/ was rendering navy serif on its dark teal
   hero and the owner could not read it.

   !! Specificity: `#main h1` scores (1,0,1) and carries !important, so a plain
   `.fho-hero h1` (0,1,1) loses even with !important of its own. The override
   therefore has to re-enter through #main to score (1,1,1). The bare
   `.fho-hero h1` twin below is for any container that has no #main ancestor,
   where the brand rule never applied in the first place.

   `.cz-dark-hero` is the reusable hook: put it on any future dark hero wrapper
   and its heading keeps its own colour. */
#main .fho-hero h1, #main .cz-dark-hero h1,
.fho-hero h1, .cz-dark-hero h1 { color: #fff !important; }

.page-title-wrap .breadcrumb a, .breadcrumb-wrap a, .page-title-wrap .breadcrumbs a,
.page-title-wrap .breadcrumb span a { color: #0D9488 !important; }
.page-title-wrap .breadcrumb, .breadcrumb-wrap, .page-title-wrap .breadcrumbs {
  color: #64748B !important; font-weight: 500; font-family: 'Inter', system-ui, sans-serif;
}

/* ===== Fix page titles clipped behind the fixed 60px mobile header ===== */
html { scroll-padding-top: 72px; }
h1, h2, h3 { scroll-margin-top: 72px; }
@media (max-width: 769px) {
  /* Custom full-bleed pages (e.g. Packages) start at top:0 under the fixed header */
  .packages-page-wrap, .crezly-pkg-header { padding-top: 78px !important; }
  /* Smaller brand title on mobile */
  .page-title-wrap h1, .page-title-wrap h2, .page-title h1,
  #main h1, .page-wrap h1, .page-content-wrap > h1, .bt-content-wrap h1,
  .article-page-wrap h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 30px !important; }
  /* Packages page: hide the long intro paragraph under the header on mobile */
  .crezly-pkg-header p { display: none !important; }
  /* Remove ALL sidebars on mobile (they take up too much space). These are
     Market-Intelligence content sidebars; none contain site navigation.
     The Houzez child theme forces .mobile-sidebar{display:block!important}
     at max-width:769px (additional Css.css:1391), so the `body ` prefix raises
     specificity to override it. The real mobile nav (#nav-mobile) is untouched. */
  body .crezly-intel-sidebar,    /* Crezly Intelligence sidebar (#58084) */
  body .mobile-sidebar,          /* market-intel content sidebar (theme mobile-swap) */
  body .left-sidebar-properties, /* Houzez properties listing left sidebar column */
  body .page-sidebar-wrap,
  body aside.sidebar,
  body .sidebar-area { display: none !important; }
}

/* ===== Remove ALL sidebars on EVERY interior page (all widths), and expand the main
   content column to full width so no empty gutter is left. The single-property page
   (/property/) puts its sidebar in `.bt-sidebar-wrap` beside `.bt-content-wrap`
   (Bootstrap col-lg-4 / col-lg-8); listing/blog pages use the other selectors. The
   market-data sidebar override (theme functions.php) injects link cards into
   `.sidebar`/`.widget-area`/`.bt-sidebar-wrap` — all hidden here too. CSS-only. ===== */
body .bt-sidebar-wrap,
body .page-sidebar-wrap,
body .left-sidebar-properties,
body .right-sidebar-properties,
body aside.sidebar,
body .sidebar-area,
body .widget-area,
body .crezly-intel-sidebar,
body .mobile-sidebar,
body #mi-sidebar,
body #md-sidebar-widget { display: none !important; }
/* Content fills the row once its sidebar sibling is gone (overrides col-lg-8 66%). */
body .bt-content-wrap,
body .bt-content-wrap.wrap-order-first {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}

/* ===== Account (person-icon) slideout: compact navy card, not a full-height
   white column. Scoped to the OPEN right-hand slideout (`.slideout-menu-right.open`)
   — the SAME hook the theme itself uses to reveal the panel
   (`.slideout-menu-right.open{display:block}` in houzez all-css.css). We do NOT
   also require the `.slideout-open` ancestor (which Slideout.js puts on <html>):
   the theme shows the panel on the `.open` class alone, so requiring the extra
   ancestor was leaving the panel visible-but-unstyled (full-height + white,
   white coming from the mobile snippet's `.slideout-menu{background:#fff}`) in
   any case where that ancestor wasn't matched. This is still desktop-safe: the
   desktop avatar menu is a separate Bootstrap `.dropdown-menu`; this slideout
   only ever gets `.open` via `.toggle-button-right`, which is mobile-only. The
   account menu now holds just Membership Portal + Log out (rewritten in JS below). ===== */
.slideout-menu-right.open {
  position: fixed !important;
  top: 60px !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  height: auto !important;
  max-height: calc(100vh - 70px) !important;
  width: 250px !important;
  margin-bottom: 0 !important;
  background: #0d1a40 !important;
  border-radius: 0 0 0 14px !important;
  box-shadow: -10px 12px 40px rgba(0,0,0,0.28) !important;
  overflow-y: auto !important;
  padding: 6px 0 !important;
}
.slideout-menu-right.open .login-register-nav,
.slideout-menu-right.open .navbar-logged-in-wrap > a.dropdown-toggle {
  display: none !important;            /* hide the Create-a-Listing row + avatar img inside the panel */
}
.slideout-menu-right.open ul.logged-in-nav,
.slideout-menu-right.open ul.navbar-nav {
  display: block !important; position: static !important; float: none !important;
  width: 100% !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  transform: none !important; opacity: 1 !important;
}
.slideout-menu-right.open ul li { list-style: none !important; border: 0 !important; }
.slideout-menu-right.open ul li a {
  display: block !important; padding: 13px 22px !important;
  background: transparent !important;   /* theme gives these anchors a white bg; with white text that = invisible. Let the navy card show through. */
  color: rgba(255,255,255,0.85) !important; font-weight: 500 !important; font-size: 15px !important;
}
.slideout-menu-right.open ul li a:hover {
  background: rgba(13,148,136,0.16) !important; color: #14B8A6 !important;
}

/* Remove on ALL widths (desktop + mobile), interior pages:
   - the Houzez listing search bar below the navbar (Enter Keyword / Type / States / Search)
     — serves no function (results are outside the form, so hiding it is safe);
   - the fixed Market-Data tab strip on the right edge (CRE Sales / ACRIS / Top Buyers /
     All Market — #md-sidebar-widget, snippet #58105). */
body .advanced-search-v1,
body form.houzez-search-form-js,
body .houzez-search-form-js .advanced-search-v1,
body #md-sidebar-widget { display: none !important; }

/* Interior custom footer: the "Add Market Data Column" snippet (#58492) forces a
   5-column grid that stays multi-column (and gets cut off) on small screens.
   Stack it responsively instead. */
@media (max-width: 1024px) { body .crezly-footer-inner { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 768px)  { body .crezly-footer-inner { grid-template-columns: 1fr !important; } }