/*
 * Nav header layout (landing doc root.props.headerLayout === 'nav').
 * Runtime-linked by <Header> ONLY for projects whose doc selects it, so every
 * other project fetches zero bytes and nothing here can leak.
 *
 * Geometry is the COMPUTED layout of estrentals.com.au (read off the live site
 * at 1440 and 390 wide, 2026-08-27), written in px: strip 48px (20px/500 text on
 * 10px padding), bar 98px (38px padding), logo and actions absolutely positioned
 * so the nav is centred in the page, nav 16px/400 −.04em, pills 16px/500 40px
 * tall; mobile (≤1023px) bar 90px, 73px logo, 60×44 hamburger, overlay rows
 * 16px with 22px/32px padding and the action row pinned at the bottom.
 *
 * Every colour reads a `--nh-*` var that NavHeader.tsx emits inline only when
 * the author set it, so an unset colour falls back to the Est value here.
 * Specificity: element resets are `.nh a` / `.nh button` (0,1,1); component
 * rules are `.nh .nh-*` (0,2,0) so they out-rank them and globals.css.
 */
.nh { position: fixed; top: var(--nu-preview-banner-height, 0px); left: 0; width: 100%; z-index: 100; transition: transform .4s; color: var(--nh-text, #fff); font-family: var(--ls-body-font, inherit); font-size: 20px; font-weight: 300; line-height: 1.4; letter-spacing: -.02em; }
/* Est resets font smoothing to the platform default (`* { -webkit-font-smoothing: initial }`), so its header text renders with subpixel AA — noticeably heavier on macOS than the site body's `antialiased`. Match it, or the same font file draws visibly thinner. */
.nh, .nh * { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.nh--hidden { transform: translateY(-100%); }
/* While the mobile menu is open the header must out-rank the page's sticky
   chrome (globals' `.fixed` listing bar is z-index 1000) or the bar paints
   through the overlay. */
.nh.nh--open { z-index: 10000; }

/* Sticky page chrome that sits under the header (globals.css: `.fixed` top 125px,
   `.unit-gap`/`.top-filter` ~90px, `#root .sticky-postion-div` 150px — all sized
   for the standard bar). This header is measured live (--nu-header-height) and
   can hide on scroll, so pin them to the VISIBLE header height instead:
   `height × (1 − --nu-header-hidden)` is the full height while shown and 0 while
   hidden, animated over the same .4s the header slides. #root out-ranks globals'
   class rules and the :where()-scoped delta rules in layout-offsets-newui.css.
   This sheet loads only for the nav layout, so no other project sees this. */
/* `--nu-header-height` already includes the draft-preview banner (headerChromeVars),
   but the banner does NOT hide on scroll the way this header does — so the hidden
   multiplier has to apply to the header's own height only, leaving the banner in
   place. Without the banner both terms collapse and this is byte-identical to
   `calc(var(--nu-header-height, 146px) * (1 - var(--nu-header-hidden, 0)))`. */
#root .fixed, #root .top-filter, #root .unit-gap { top: calc(var(--nu-preview-banner-height, 0px) + (var(--nu-header-height, 146px) - var(--nu-preview-banner-height, 0px)) * (1 - var(--nu-header-hidden, 0))); transition: top .4s; }
/* Moving the breadcrumb bar's `top` is only half of it: the bar is sticky, so it
   also needs its flow slot to start that far down. The unit page (Selling) clears
   the header with globals' `.top-gap` (103px; the bar's 89px plus a little), which
   out-ranks `.inner-gap` at ≥1400px and ≤400px. Under this header the bar is
   pushed from 103px to 146px and its white background covers the top of the
   gallery and the unit panel (27px on desktop; the photo's top row on a phone).
   Start the page at the header's height instead: in flow the header is always
   shown, so no hidden multiplier. The preview banner is subtracted because
   `main#middle` already pads by it (globals.css) while `--nu-header-height`
   includes it; without a banner both are 0px. `#root` out-ranks `.inner-gap`'s
   breakpoint rules too, so every width gets the same 15px gap under the bar. */
#root .top-gap { padding-top: calc(var(--nu-header-height, 146px) - var(--nu-preview-banner-height, 0px)); }
@media (min-width: 1200px) {
  #root .sticky-postion-div { top: calc(var(--nu-preview-banner-height, 0px) + (var(--nu-header-height, 146px) - var(--nu-preview-banner-height, 0px)) * (1 - var(--nu-header-hidden, 0)) + 60px); transition: top .4s; }
}
.nh a, .nh button { color: inherit; text-decoration: none; }
.nh button { background: none; border: 0; font: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.nh ul { list-style: none; margin: 0; padding: 0; }
.nh p { margin: 0; }
.nh .nh-shell { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* Announcement strip — .bar-banner */
/* Weight-500 elements (strip, pills, card titles) use the HEADING face: custom fonts are one file per name, so the medium cut lives under the heading token while the body token carries the light/regular cut. */
.nh .nh-announce { background: var(--nh-announce-bg, #e56bde); color: var(--nh-announce-text, #350305); text-align: center; text-transform: uppercase; font-family: var(--ls-heading-font, var(--ls-body-font, inherit)); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -.56px; padding: 10px 24px; position: relative; z-index: 3; }
.nh .nh-announce a { position: relative; text-decoration: none; }
.nh .nh-announce a::before { content: ''; width: 100%; border-bottom: 1px solid; position: absolute; bottom: -2px; left: 0; transition: width .4s linear; }
.nh .nh-announce a:hover::before { width: 0; }

/* Bar — .header / .header__inner */
.nh .nh-bar { background: var(--nh-bar, #350305); position: relative; z-index: 2; }
.nh .nh-bar .nh-shell { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 38px 324px; }
/* Est: a block anchor (20px/28px line box) holding an inline-block, vertical-align:middle image — the image lands ~2px below the anchor top, and the anchor is centred with translateY(-50%). Reproduced literally so the logo sits on the same pixel row. */
.nh .nh-logo { position: absolute; top: 50%; left: 24px; transform: translateY(-50%); display: block; font-size: 20px; line-height: 28px; z-index: 2; }
/* Est renders the SVG at its intrinsic 75px; an author logoHeight/logoMaxWidth applies inline. */
.nh .nh-logo img { width: 75px; height: auto; display: inline-block; vertical-align: middle; }
.nh .nh-logo-text { font-weight: 700; font-size: 24px; line-height: 1; }

/* Nav — .nav */
.nh .nh-nav { flex: 1; display: flex; justify-content: center; align-items: center; min-width: 0; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -.04em; }
.nh .nh-menu { display: flex; align-items: center; justify-content: center; margin: 0 -20px; }
.nh .nh-item { position: relative; padding: 0 20px; }
.nh .nh-link { display: inline-block; position: relative; font: inherit; letter-spacing: inherit; line-height: inherit; white-space: nowrap; transition: color .4s; text-align: left; }
.nh .nh-item--parent > .nh-link { padding-right: 18px; }
/* Glyph points up; rest = rotated 180° (down), hover/expanded = 0° — exactly Est's .nav svg. */
.nh .nh-chevron { position: absolute; top: 50%; right: 0; width: 10px; height: 7px; transform: translateY(-50%) rotate(180deg); transform-origin: center; transition: transform .4s; }
/* Hover/focus states are DESKTOP-only, as on Est (`@media (min-width:1023.02px)`):
   on touch a tap would otherwise leave the item lit. Mobile uses .nh-item--expanded. */
@media (min-width: 1024px) {
  .nh .nh-item--parent:hover > .nh-link, .nh .nh-item--parent:focus-within > .nh-link { color: var(--nh-hover, #e56bde); }
  .nh .nh-item--parent:hover > .nh-link .nh-chevron, .nh .nh-item--parent:focus-within > .nh-link .nh-chevron { transform: translateY(-50%) rotate(0deg); }
  .nh .nh-item--parent:hover > .nh-panel, .nh .nh-item--parent:focus-within > .nh-panel { opacity: 1; visibility: visible; pointer-events: auto; }
    }
/* Hover bridge (Est: 40px tall at 95%) so the panel stays open across the gap. */
.nh .nh-item--parent::after { content: ''; position: absolute; left: 0; width: 100%; height: 40px; top: 95%; }

/* Dropdown panels — .sub-menu / .sub-menu--alt */
.nh .nh-panel { position: absolute; top: calc(100% + 15px); left: 25px; min-width: 221px; padding: 34px 24px; border-radius: 8px; background: var(--nh-panel-bg, rgba(243,242,240,.9)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: var(--nh-panel-text, #350305); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility .4s; z-index: 2; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -.025em; }
.nh .nh-panel-item { margin-bottom: 17px; }
.nh .nh-panel-item:last-child { margin-bottom: 0; }
.nh .nh-panel-item--disabled { opacity: .5; pointer-events: none; }
/* Est's panel links have NO hover state (only the parent item and the chevron recolour). */
.nh .nh-panel-link { display: flex; align-items: flex-start; text-align: left; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.nh .nh-panel--cards { display: flex; flex-wrap: wrap; max-width: 541px; width: 70vw; padding: 18px 15px; margin: 0 -8px; letter-spacing: -.02em; }
.nh .nh-panel--cards .nh-panel-item { flex: 0 0 50%; max-width: 50%; padding: 14px 8px; margin: 0; }
.nh .nh-card-img { flex: 0 0 39%; max-width: 94px; height: 62px; margin: 0; position: relative; overflow: hidden; }
.nh .nh-card-img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: 100%; height: auto; object-fit: cover; }
.nh .nh-card-text { flex: 1; padding-left: 11px; padding-top: 2px; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.02em; display: flex; flex-direction: column; white-space: normal; }
.nh .nh-panel--cards .nh-card-text strong { font-family: var(--ls-heading-font, var(--ls-body-font, inherit)); font-size: 22px; font-weight: 700; letter-spacing: -.035em; line-height: 1.45; }
.nh .nh-card-note { color: #998f85; }

/* Actions — .header .actions */
.nh .nh-actions { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); display: flex; align-items: center; gap: 18px; }
.nh .nh-pill { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; text-align: center; padding: 11px 20px; border-radius: 65px; font-family: var(--ls-heading-font, var(--ls-body-font, inherit)); font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -.04em; white-space: nowrap; background: var(--nh-pill-bg, #f3f2f0); color: var(--nh-pill-text, #1e1f21); border: 1px solid var(--nh-pill-bg, #f3f2f0); transition: background-color .4s, color .4s, border-color .4s; }
.nh .nh-pill:hover { background: #d7d4cd; border-color: #d7d4cd; color: var(--nh-pill-text, #1e1f21); }
.nh .nh-pill--outline { background: transparent; color: var(--nh-pill-bg, #f3f2f0); }
.nh .nh-pill .nh-chevron { position: static; margin-left: 8px; transform: rotate(180deg); transition: transform .4s; }
/* Account pill: caret points down at rest and flips up while the menu is open (same glyph/rotation as the nav items). */
.nh .nh-account--open > .nh-pill .nh-chevron { transform: rotate(0deg); }
.nh .nh-account { position: relative; }
.nh .nh-panel--account { left: auto; right: 0; min-width: 180px; padding: 16px 20px; }
.nh .nh-account--open > .nh-panel { opacity: 1; visibility: visible; pointer-events: auto; }

/* Hamburger — .nav-btn (mobile only) */
.nh .nh-burger { display: none; width: 60px; height: 44px; border-radius: 68px; background: var(--nh-pill-bg, #f3f2f0); position: relative; flex: 0 0 auto; z-index: 3; transition: width .2s, height .2s, background-color .2s, border-radius .2s; }
.nh .nh-burger span { position: absolute; left: 50%; width: 18px; height: 2px; border-radius: 10px; background: var(--nh-bar, #350305); transform: translateX(-50%); transition: top .2s .25s, background-color .2s, transform .2s 0s, width .2s; }
.nh .nh-burger span:first-child { top: 17px; }
.nh .nh-burger span:last-child { top: 23px; }
/* Open: Est's .nav-btn.is-active — a bare 24px white × */
.nh--open .nh-burger { width: 24px; height: 24px; background: transparent; border-radius: 2px; }
.nh--open .nh-burger span { width: 24px; background: var(--nh-text, #fff); transition: background-color .2s, top .2s, transform .2s .25s, width .2s; }
.nh--open .nh-burger span:first-child { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.nh--open .nh-burger span:last-child { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
.nh .nh-overlay { display: none; }

@media (max-width: 1199px) {
  .nh .nh-bar .nh-shell { padding: 38px 324px 38px 124px; }
}

@media (max-width: 1023px) {
  /* Content-sized like Est: 90px with the 44px hamburger, 76px once it collapses to the 24px × (the logo rises with it; the overlay's top is frozen by NavHeader). */
  .nh .nh-bar .nh-shell { position: static; padding: 23px 32px; }
  .nh .nh-logo { position: relative; top: auto; left: auto; transform: none; display: inline-block; }
  /* Est: 73×27 on phones. The authored logoHeight lands as an inline style, so this must out-rank it. */
  .nh .nh-logo img { width: 73px !important; height: auto !important; }
  .nh .nh-nav, .nh .nh-bar .nh-actions { display: none; }
  .nh .nh-burger { display: inline-block; }
  /* Full-screen menu behind the strip and bar (both z-indexed above it), padded
     by the measured header height (--nu-header-height from <Header>; NavHeader
     freezes it inline at open time) so its content starts under the bar and its
     own background fills the strip the collapsing bar vacates. Slides down from
     under the bar; hidden via visibility too so it never peeks out. */
  .nh .nh-overlay { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: var(--nh-bar, #350305); color: var(--nh-text, #fff); padding: var(--nu-header-height, 90px) 0 120px; box-sizing: border-box; transform: translateY(-100%); visibility: hidden; transition: transform .4s, visibility 0s .4s; z-index: 1; overflow-y: auto; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -.04em; }
  .nh--open .nh-overlay { transform: translateY(0); visibility: visible; transition: transform .4s, visibility 0s; }
  .nh .nh-overlay .nh-menu { display: block; margin: 0; }
  .nh .nh-overlay .nh-item { padding: 0; border-top: 1px solid #5c5650; }
  .nh .nh-overlay .nh-item:last-child { border-bottom: 1px solid #5c5650; }
  .nh .nh-overlay .nh-item::after { display: none; }
  .nh .nh-overlay .nh-link { display: block; width: 100%; padding: 22px 18px 22px 32px; }
  .nh .nh-overlay .nh-item--parent > .nh-link { padding-right: 18px; }
  .nh .nh-overlay .nh-chevron { right: 32px; width: 24px; height: 24px; }
  .nh .nh-overlay .nh-panel { position: static; opacity: 1; visibility: visible; pointer-events: auto; width: 100%; max-width: 100%; border-radius: 0; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height .4s; }
  .nh .nh-overlay .nh-item--expanded > .nh-panel { max-height: 1000px; }
  .nh .nh-overlay .nh-item--expanded > .nh-link { color: var(--nh-hover, #e56bde); }
  .nh .nh-overlay .nh-item--expanded > .nh-link .nh-chevron { transform: translateY(-50%) rotate(0deg); }
  .nh .nh-overlay .nh-panel-item { border-bottom: 1px solid #d6d2ce; padding: 16px 24px; margin: 0; flex: 0 0 100%; max-width: 100%; }
  .nh .nh-overlay .nh-panel-item:last-child { border-bottom: 0; }
  .nh .nh-overlay .nh-panel--cards { width: 100%; padding: 0; margin: 0; }
  .nh .nh-overlay .nh-card-img { flex: 0 0 80px; max-width: 80px; height: 53px; }
  .nh .nh-overlay .nh-card-text { font-size: 14px; padding-top: 3px; }
  .nh .nh-overlay .nh-panel--cards .nh-card-text strong { font-size: 16px; }
  .nh .nh-overlay-actions { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 16px; border-top: 1px solid #5c5650; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; background: var(--nh-bar, #350305); }
  .nh .nh-overlay .nh-account { position: relative; }
  .nh .nh-overlay .nh-panel--account { position: absolute; bottom: calc(100% + 8px); top: auto; left: 0; right: auto; max-height: none; overflow: visible; border-radius: 8px; padding: 16px 20px; opacity: 0; visibility: hidden; pointer-events: none; }
  .nh .nh-overlay .nh-account--open > .nh-panel { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Est's strip below 768px: 16px text; tracking is inherited from the 14px
   .bar-banner (−.56px), and from its 10px size at ≤420px (−.4px). */
@media (max-width: 767px) {
  .nh .nh-announce { font-size: 16px; line-height: 22.4px; letter-spacing: -.56px; }
}
@media (max-width: 420px) {
  .nh .nh-announce { letter-spacing: -.4px; }
}
/* Est's .shell narrows to 20px gutters at ≤375px. */
@media (max-width: 375px) {
  .nh .nh-announce { padding-left: 20px; padding-right: 20px; }
  .nh .nh-bar .nh-shell { padding-left: 28px; padding-right: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .nh, .nh .nh-overlay, .nh .nh-panel, .nh .nh-chevron, .nh .nh-pill, .nh .nh-burger, .nh .nh-burger span, #root .fixed, #root .top-filter, #root .unit-gap, #root .sticky-postion-div { transition: none; }
}