/* ===========================================================================
 * CLH CHROME: nav + footer for the pages the theme still renders
 * ---------------------------------------------------------------------------
 * The 19 rebuilt pages are Elementor canvas pages and carry this CSS inline,
 * inside their own nav and footer blocks. The Listings and Models pages are
 * Houzez page templates, so their chrome comes from header.php / footer.php in
 * this theme and needs the same CSS from somewhere cacheable. This is that copy.
 *
 * SYNC RULE: everything between the two "verbatim" markers below is copied,
 * unedited, from the <style> blocks of
 *     Elementor-Blocks/Home/00-site-nav.html
 *     Elementor-Blocks/Home/09-site-footer.html
 * Change those files, then re-copy. Do not fix anything here first: the 19
 * static pages are the source of truth and a divergence between the theme chrome
 * and the block chrome is the failure this theme exists to prevent. The repo's
 * own blocks are kept byte-identical to each other for the same reason.
 *
 * Two deliberate omissions, neither of which is a rule:
 *   - the Google Fonts <link>: clh-redesign.css self-hosts Archivo and
 *     Newsreader, so the external request is dead weight here.
 *   - nothing else. The rules themselves are untouched.
 * ======================================================================== */


/* --- Fallback theme guard ------------------------------------------------
 * The site-wide guard lives in clh-redesign.css, which clh-perf injects on any
 * page containing class="clh-". These pages get their clh- markup from the
 * theme rather than from post content, so if that sniff ever misses them the
 * nav and footer would inherit the Houzez bare-element rules: #00aeff links
 * with underlines, bulleted lists, capitalised headings. This repeats only the
 * part of the guard the two chrome components need, scoped to them.
 * :where() contributes zero specificity, so it can never beat a rule below.
 * ------------------------------------------------------------------------ */
:where(.clh-nav, .clh-foot) a{color:inherit;text-decoration:none}
:where(.clh-nav, .clh-foot) ul,
:where(.clh-nav, .clh-foot) ol{margin:0;padding:0;list-style:none}
:where(.clh-nav, .clh-foot) img{vertical-align:middle}
:where(.clh-nav, .clh-foot) p{margin:0}


/* ======================= verbatim: 00-site-nav.html ====================== */
.clh-nav{position:sticky;top:0;z-index:9999;font-family:'Archivo',sans-serif;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid #eef1f4}
.clh-nav *{box-sizing:border-box;margin:0}
.clh-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:12px clamp(24px,5vw,56px);max-width:1280px;margin:0 auto;gap:12px}
.clh-nav__logo img{height:clamp(36px,5vw,42px);width:auto;display:block}
/* The drawer/section checkboxes drive the MOBILE menu only. Left in the
   tab order on desktop they are the FIRST thing Tab reaches: an invisible
   0x0 control that does nothing, and which sits outside .clh-nav__item so
   it never opens a dropdown. display:none removes them entirely here;
   the mobile block below restores them as focusable controls. */
.clh-nav__checkbox,.clh-nav__seccb{display:none}
.clh-nav__toggle,.clh-nav__close,.clh-nav__secbtn,.clh-nav__scrim,.clh-nav__drawerhead,.clh-nav__call{display:none}
.clh-nav__menu{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.clh-nav__item{position:static}
.clh-nav__link{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 15px;border-radius:8px;font-size:14.5px;font-weight:500;color:#33434f;background:transparent;cursor:pointer;text-decoration:none;transition:background .18s,color .18s}
.clh-nav__item:hover>.clh-nav__link{background:#f1f5f8;color:#0C3A5C}
.clh-nav__item--active>.clh-nav__link{font-weight:700;color:#0C3A5C;background:#eef4f8}
.clh-nav__caret{font-size:9px;opacity:.5;margin-top:2px}
/* NO pointer-events here, deliberately. It was added so a panel still fading out
   could not intercept clicks meant for the one just opened, but z-index:1 on the open
   rule already settles that: the live panel paints and hits above its siblings.

   Kept out because `pointer-events:none` cannot be delayed. It has a DISCRETE
   animation type, so a transition is ignored unless transition-behavior:allow-discrete
   is set. Measured in Chrome 146: with `transition:pointer-events 0s .40s` the value
   still reads `none` 120ms in, while visibility correctly still reads `visible`. So
   the property flipped the moment :hover was lost, ::before inherited it, and the
   hover bridge went inert exactly when it was needed. Worse, it left the panel
   visible but click-through for the rest of the grace period.

   The cost of leaving it out is that a closing panel stays clickable over the page
   beneath it for up to .46s. It is fully visible for most of that, so being
   interactive is the defensible half of the trade. */
.clh-nav__panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #eef1f4;box-shadow:0 24px 40px -24px rgba(12,58,92,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s .28s,transform .18s .28s,visibility 0s .46s}
/* visibility keeps a 0s DURATION in both directions: if it animated, the panel
   would still compute as hidden while doing so, and a fast Tab would land before
   the links became focusable and skip the whole submenu. It does carry a delay
   when closing (.46s above), which is not the same thing: it flips instantly,
   just later, so the panel stays fully interactive for the whole grace period. */
/* :focus-within is load-bearing, not a nicety. visibility:hidden takes the
   panel's links OUT of the tab order, so with hover alone 19 of the 28 nav
   links (every listings, model, financing and services child) were unreachable
   by keyboard. WCAG 2.1.1. */
/* CLOSE DELAY, and it is the actual fix rather than a flourish. The panel opens
   instantly on hover or focus, but takes 280ms to start closing when the cursor
   leaves. Moving diagonally from a top-level item down to a child crosses a few
   pixels of .clh-nav__bar that belong to neither the item nor the panel, and
   without the delay the menu closed before the cursor arrived, which made every
   submenu link unreachable by mouse. The delay lives on the BASE rule so it applies
   while closing; the open rule below overrides it to 0 so opening stays immediate.
   visibility keeps its 0s duration in both directions, so the panel's links never
   sit in a half-hidden state that a fast Tab would skip. */
.clh-nav__item:hover>.clh-nav__panel,
.clh-nav__item:focus-within>.clh-nav__panel{opacity:1;visibility:visible;z-index:1;transform:translateY(0);transition:opacity .18s,transform .18s,visibility 0s}
/* HOVER BRIDGE. The cursor crosses a dead band between the item and the panel on its
   way to a submenu: it is over neither, :hover drops, and the menu closes before any
   child can be reached. This transparent strip extends the panel's hit area up to meet
   the item. It is a child of the panel, so hovering it keeps .clh-nav__item:hover
   true, and it inherits the panel's visibility so it cannot intercept anything once
   the panel is really gone.

   14px, and measure it OPEN before changing it. The closed panel carries
   translateY(-6px), so measuring while forcing visibility without hover reports an
   8px gap and an 8px bridge looks exact. Under a real hover the panel drops those 6px
   to translateY(0) and the gap is 14px, which left 6px uncovered and the submenus
   still unreachable by an ordinary mouse move. Measured on the live site: item bottom
   54, open panel top 68. */
.clh-nav__panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px}

/* Visible keyboard focus. Every control here is either a link or a label
   driving an off-screen checkbox, so without this a keyboard user gets no
   indication of where they are. */
.clh-nav a:focus-visible,
.clh-nav label:focus-visible,
.clh-nav__checkbox:focus-visible+.clh-nav__toggle,
.clh-nav__seccb:focus-visible~.clh-nav__link{outline:3px solid #1487C4;outline-offset:2px;border-radius:6px}
.clh-nav__panel-inner{max-width:1100px;margin:0 auto;padding:24px 40px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 44px}
.clh-nav__sub{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;text-decoration:none;transition:background .18s}
.clh-nav__sub:hover{background:#f6f8fa}
.clh-nav__sub b{font-size:15px;font-weight:600;color:#0C3A5C}
.clh-nav__sub span{font-size:12.5px;color:#8592a0}
.clh-nav__actions{display:flex;align-items:center;gap:16px}
.clh-nav__book{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:40px;background:#1487C4;color:#fff;font-weight:600;font-size:14.5px;text-decoration:none;transition:background .2s;white-space:nowrap}
.clh-nav__book:hover{background:#0F6FA6}

/* =========================================================================
 * MOBILE (<=1024px): a real slide-in drawer.
 *
 * The previous version forced the desktop hover panels permanently visible
 * (position:static; opacity:1), so every dropdown was open at once and the
 * menu ran to 1,405px of unscannable wall. Here each section collapses, and
 * the whole thing is a fixed drawer over a scrim instead of pushing the page
 * down. Still no JavaScript: one checkbox opens the drawer, one per section
 * expands it.
 *
 * Every interactive row is >= 48px tall to clear the 44px tap-target
 * guideline; the hamburger and close button are 44x44.
 * ====================================================================== */
@media(max-width:1024px){
  /* TWO traps on this one element, both fixed here.

     1. backdrop-filter makes an element a CONTAINING BLOCK for position:fixed
        descendants, exactly like transform does, so the drawer and scrim
        resolved against the 63px bar instead of the viewport.

     2. The nav's stacking context has to OUTRANK the sections after it.
        position:sticky creates a stacking context unconditionally, whatever
        the z-index, so the drawer's own z-index:100001 only ever orders it
        against its siblings inside this nav. Against the rest of the page the
        whole nav subtree is a single unit ranked by THIS z-index.
        An earlier attempt set z-index:auto here on the theory that sticky only
        forms a context when z-index is not auto. That is not how sticky works:
        it demoted the nav from 50 to 0, and .clh-hero (position:relative,
        z-index:auto, later in DOM) then painted over the whole open drawer.
        Every link and section expander in it became untappable.
        9999 clears Houzez's back-to-top (999) while staying under the
        WordPress admin bar (99999). */
  /* real controls again on mobile: visually hidden but focusable, so the
     drawer and its sections stay keyboard-operable */
  .clh-nav__checkbox,.clh-nav__seccb{display:block;position:absolute;opacity:0;width:1px;height:1px;margin:0;overflow:hidden}
  .clh-nav{backdrop-filter:none;background:#fff}
  .clh-nav__bar{padding:10px 20px;position:relative;z-index:50}

  /* hamburger: was 27x38, now a proper 44x44 target */
  .clh-nav__toggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-8px;
    font-size:24px;line-height:1;color:#0C3A5C;cursor:pointer;
    border-radius:10px;transition:background .18s;
  }
  .clh-nav__toggle:active{background:#eef4f8}

  /* scrim behind the drawer, tap to close */
  .clh-nav__scrim{
    display:block;position:fixed;inset:0;background:rgba(8,32,52,.5);
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:100000;
  }
  .clh-nav__checkbox:checked ~ .clh-nav__scrim{opacity:1;visibility:visible}

  /* the drawer itself */
  .clh-nav__menu{
    position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;z-index:100001;padding:0 0 180px;margin:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;
    box-shadow:-24px 0 60px -30px rgba(8,32,52,.6);
    /* transform alone only moves it off-screen; its 25 links stay focusable.
       visibility:hidden removes them from the tab order. */
    visibility:hidden;
  }
  .clh-nav__checkbox:checked ~ .clh-nav__menu{transform:translateX(0);visibility:visible}

  /* drawer header with the close button */
  .clh-nav__drawerhead{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 8px 14px 20px;border-bottom:1px solid #eef1f4;
    position:sticky;top:0;background:#fff;z-index:2;
  }
  .clh-nav__drawerhead span{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9aa7b0}
  .clh-nav__close{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;font-size:26px;line-height:1;color:#0C3A5C;
    cursor:pointer;border-radius:10px;transition:background .18s;
  }
  .clh-nav__close:active{background:#eef4f8}

  .clh-nav__item{position:relative;border-bottom:1px solid #f2f5f7}

  /* top-level row. The <a> stays for desktop; on mobile the label sits over
     the whole row so a tap expands the section rather than navigating. Each
     panel carries its own "View All" link, so nothing becomes unreachable. */
  .clh-nav__link{
    height:56px;width:100%;font-size:16.5px;font-weight:600;color:#0C3A5C;
    border-radius:0;justify-content:space-between;padding:0 20px;
  }
  .clh-nav__caret{font-size:11px;opacity:.55;transition:transform .22s}
  .clh-nav__secbtn{display:block;position:absolute;inset:0 0 auto 0;height:56px;cursor:pointer;z-index:1}
  .clh-nav__seccb:checked ~ .clh-nav__link .clh-nav__caret{transform:rotate(180deg)}

  /* collapsed by default, expands only when its own checkbox is checked */
  .clh-nav__panel{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:#f7fafc;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;
  }
  /* Kill the desktop hover bridge here. It is only meaningful against the desktop
     dropdown, and on mobile the geometry inverts under it: the panel goes static
     while .clh-nav__item goes relative, so the absolutely positioned strip resolves
     against the ITEM and `bottom:100%` parks it directly ABOVE each row. The mobile
     panel is visible even while collapsed, so those strips stay pointer-active: they
     ate the bottom 8px of every plain row and clipped the last submenu link to 40px,
     under the 44px floor this file holds everywhere else. */
  .clh-nav__panel::before{display:none}
  .clh-nav__seccb:checked ~ .clh-nav__panel{grid-template-rows:1fr}
  .clh-nav__panel-inner{
    grid-template-columns:1fr;max-width:none;padding:0;gap:0;
    overflow:hidden;min-height:0;
    /* a clipped 0fr row still leaves its links focusable */
    visibility:hidden;
  }
  .clh-nav__seccb:checked ~ .clh-nav__panel .clh-nav__panel-inner{padding:6px 0 10px;visibility:visible}
  /* full-width rows: the whole line should be tappable, not just the text */
  .clh-nav__sub{padding:11px 20px 11px 32px;border-radius:0;min-height:48px;justify-content:center;width:100%}
  .clh-nav__sub b{font-size:15.5px}
  .clh-nav__sub span{font-size:12.5px}

  /* phone + CTA pinned to the bottom of the drawer */
  .clh-nav__actions{
    display:flex;flex-direction:column;gap:10px;
    position:fixed;bottom:0;right:0;width:min(88vw,380px);
    padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid #eef1f4;z-index:100002;
    transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;
    visibility:hidden;
  }
  .clh-nav__checkbox:checked ~ .clh-nav__actions{transform:translateX(0);visibility:visible}
  .clh-nav__book{width:100%;justify-content:center;height:52px;font-size:16px}
  .clh-nav__call{
    display:flex;align-items:center;justify-content:center;gap:8px;
    height:52px;border-radius:40px;border:1px solid #d7e2ea;
    color:#0C3A5C;font-weight:600;font-size:16px;text-decoration:none;
    width:100%;
  }
  .clh-nav__call:active{background:#eef4f8}
}

/* Lock the page behind the drawer. :has() is widely supported; if a browser
   lacks it the drawer still works, the page just scrolls behind the scrim. */
@media(max-width:1024px){
  html:has(.clh-nav__checkbox:checked){overflow:hidden}
}

@media(prefers-reduced-motion:reduce){
  .clh-nav__menu,.clh-nav__actions,.clh-nav__scrim,.clh-nav__caret{transition:none}
  /* .clh-nav__panel is deliberately NOT in that list. `transition:none` there also
     cancelled the close DELAY, and the delay is not decoration: without it the panel
     closes the instant the cursor enters the gap below the item, and every submenu
     link becomes unreachable by mouse. That would have left exactly this cohort with
     the bug the delay was added to fix. Motion is removed by zeroing the durations
     instead, so the panel appears and disappears instantly but still waits before
     it goes. */
  .clh-nav__panel{transition:opacity 0s .28s,transform 0s .28s,visibility 0s .46s}
  .clh-nav__item:hover>.clh-nav__panel,
  .clh-nav__item:focus-within>.clh-nav__panel{transition:opacity 0s,transform 0s,visibility 0s}
}


/* ===================== verbatim: 09-site-footer.html ===================== */
.clh-foot{padding:clamp(44px,6vw,64px) 0 40px;background:#0C3A5C;color:rgba(255,255,255,.72);font-family:'Archivo',sans-serif}
.clh-foot *{box-sizing:border-box;margin:0}
.clh-foot__grid{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,56px) 40px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.clh-foot__logo{height:42px;margin-bottom:20px}
.clh-foot__blurb{font-size:14.5px;line-height:1.6;max-width:300px;margin:0 0 20px}
.clh-foot__social{display:flex;gap:12px}
.clh-foot__social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;text-decoration:none;transition:background .2s}
.clh-foot__social a:hover{background:#1487C4}
.clh-foot__ttl{color:#fff;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.clh-foot__col{display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.clh-foot__col a,.clh-foot__col span{color:rgba(255,255,255,.72);text-decoration:none;transition:color .18s}
.clh-foot__col a:hover{color:#fff}
.clh-foot__bottom{max-width:1280px;margin:0 auto;padding:26px clamp(24px,5vw,56px) 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.5)}
.clh-foot__bottom a{color:rgba(255,255,255,.5);text-decoration:none}
.clh-foot__bottom a:hover{color:#fff}
.clh-foot__legal{display:flex;gap:20px}
@media(max-width:900px){.clh-foot{padding:48px 0 32px}.clh-foot__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.clh-foot__grid{grid-template-columns:1fr}}

/* ===================== end verbatim ====================== */


/* --- Child-theme only: admin bar offset ----------------------------------
 * Not in the blocks, and it cannot be: only a theme-rendered page knows whether
 * the WordPress admin bar is present. .clh-nav sticks at top:0, which parks it
 * underneath the 32px admin bar for every logged-in editor. Visitors never see
 * a difference, so this does not count as a divergence from the 19 pages.
 * The admin bar is fixed above 600px and scrolls away below it, hence the reset.
 * ------------------------------------------------------------------------ */
body.admin-bar .clh-nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .clh-nav{top:46px}}
@media screen and (max-width:600px){body.admin-bar .clh-nav{top:0}}