/* SITE HEADER — the single definition, loaded by every page.
 *
 * There used to be three. The static pages carried this one (from
 * styles.css); the sixteen server-rendered pages carried a `.bar` that was
 * brand-left / nav-right with four plain links and no About menu, so on
 * Collections the menu sat hard against the right edge and looked like a
 * different site. Nothing was wrong with either stylesheet — the server
 * pages simply never loaded styles.css, so they could not have had this.
 *
 * Hence a third file rather than a copy in each: property.css and styles.css
 * both load it, and a change here reaches all 25 pages at once.
 *
 * Self-contained by design. property.css does not define --wrap, --ease or
 * --gold-deep, so every custom property below carries a fallback and this
 * file works against either stylesheet.
 */

/* ── Brand lockup ── */
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand-mark {
  display: block; width: 46px; height: 35px; flex: 0 0 auto;
  background-color: var(--gold, #c9a875);
  -webkit-mask: url("oce-monogram.webp") center / contain no-repeat;
  mask: url("oce-monogram.webp") center / contain no-repeat;
  transition: background-color 0.4s var(--ease, ease);
}
.brand-mark.gold { background-color: var(--gold, #c9a875); }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.bw-1 {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.12rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  transition: color 0.4s var(--ease, ease);
}
.bw-2 {
  font-size: 0.56rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold, #c9a875); margin-top: 3px;
}

/* ── Bar ── */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  transition: background 0.5s var(--ease, ease), box-shadow 0.5s var(--ease, ease);
}
/* Over a photograph or a film the white type needs something behind it.
   A scrim rather than a panel: it darkens the top of the frame and is gone
   by the time it reaches the hero's own headline, so the image still reads
   as full-bleed. Removed once the header goes solid, where it would only
   be a grey smear across white. */
.hdr::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(12,10,8,0.55), rgba(12,10,8,0));
  transition: opacity 0.5s var(--ease, ease);
}
.hdr.solid::before { opacity: 0; }
/* The header sets its own line-height rather than inheriting the page's.
   styles.css (the static pages) says 1.7 and property.css (the pages the
   server renders) says 1.6, and the enquire button grew with it: the header
   measured 72.77px on For Sale and Holiday Rental and 71.63px on the
   Collection and location pages, so it moved by a pixel as you navigated. */
.hdr, .hdr-row { line-height: 1.6; }

.hdr-row {
  position: relative; z-index: 1;
  width: var(--wrap, min(1180px, 90vw)); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.7rem 0; transition: padding 0.5s var(--ease, ease);
}
.nav { display: flex; gap: 2.3rem; }
.nav-item {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); font-weight: 400; padding: 0.4rem 0;
  position: relative; transition: color 0.3s; text-decoration: none;
  /* property.css still carries a bare `nav a{margin-left:26px}` for the
     footer columns. It applied here too and added 26px on top of the flex
     gap, so three links sat 63px apart and About - inside .msub, which the
     selector does not reach - sat 36px apart. Stated rather than left to
     specificity, because the footer rule is legitimate and stays. */
  margin: 0;
}
.nav-item::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--gold, #c9a875); transition: width 0.35s var(--ease, ease);
}
.nav-item:hover::after, .nav-item.active::after { width: 100%; }
.nav-item:hover { color: #fff; }
.hdr-actions { display: flex; align-items: center; gap: 1.4rem; }
.hdr-acct {
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.3s;
}
.hdr-acct:hover { color: #fff; }
.hdr-enquire {
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold, #c9a875); border: 1px solid rgba(201,168,117,0.5);
  padding: 0.6rem 1.2rem; border-radius: 1px; transition: all 0.3s;
  text-decoration: none; white-space: nowrap;
}
.hdr-enquire:hover { background: var(--gold, #c9a875); color: var(--ink, #1c1914); }

/* ── Scrolled / static-light variant ── */
.hdr.solid { background: rgba(255,255,255,0.96); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line, rgba(28,25,20,.12)); }
.hdr.solid .hdr-row { padding: 1rem 0; }
.hdr.solid .bw-1 { color: var(--ink, #1c1914); }
.hdr.solid .nav-item { color: var(--muted, #6b6459); }
.hdr.solid .nav-item:hover, .hdr.solid .nav-item.active { color: var(--ink, #1c1914); }
.hdr.solid .brand-mark { background-color: var(--ink, #1c1914); }
.hdr.solid .hdr-acct { color: var(--muted, #6b6459); }
.hdr.solid .hdr-acct:hover { color: var(--ink, #1c1914); }
.hdr.solid .hdr-enquire { color: var(--gold-deep, #9c7c4a); border-color: var(--gold, #c9a875); }
.hdr.solid .hdr-enquire:hover { background: var(--gold, #c9a875); color: #fff; }
.hdr.solid .hdr-burger span { background: var(--ink, #1c1914); }

.hdr-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hdr-burger span { width: 24px; height: 1.5px; background: #fff; transition: background 0.3s; }

/* ── About submenu ── hover and focus-within, no JavaScript. Hidden below
   900px, where mobile-nav.js takes over. */
.msub { position: relative; display: inline-block; }
.msub-t { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.msub-p { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  display: grid; gap: 2px; min-width: 11rem; padding: 10px 0; background: #fff;
  border: 1px solid rgba(28,25,20,.10);
  box-shadow: 0 18px 44px -22px rgba(28,25,20,.45);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease;
  z-index: 60; text-align: left; }
.msub:hover .msub-p, .msub:focus-within .msub-p { opacity: 1; visibility: visible; pointer-events: auto; }
.msub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.msub-p a { display: block; margin: 0; padding: 8px 18px; white-space: nowrap; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; color: #3a352c; text-decoration: none; }
.msub-p a:hover, .msub-p a:focus { background: #f6f3ee; color: #1c1914; }
@media (max-width: 900px) { .msub { display: none; } }

/* `.msub-t{font:inherit}` resets the shorthand, which wipes .nav-item's size
   and family — "About" came out in the body serif with its chevron wrapped
   to a second line. Two classes to win it back. */
.msub-t.nav-item {
  font-family: inherit; font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap;
}
/* A real element, not ::after — .nav-item already owns its ::after for the
   hover underline, positioned at bottom:-2px, so a pseudo-element chevron
   inherited that and rendered as a diamond under the word. */
.msub-c { display: inline-block; width: .32em; height: .32em; margin-left: .5em;
  vertical-align: .15em; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .55; }

@media (max-width: 720px) {
  .nav, .hdr-enquire { display: none; }
  .hdr-burger { display: flex; }
}

/* In-flow variant. `.hdr` is position:fixed, which is correct over a hero
   but would float across the top of a page that starts with text. The
   sixteen server-rendered pages were an in-flow bar before this, and most
   of them (location, property, guides) have no hero to overlay, so they
   keep their flow and only gain the proper nav. */
/* relative, not static. `.hdr` sets z-index:80 and z-index is ignored on a
   static element — so on the sixteen server-rendered pages the header had no
   place in the stacking order at all, and the Collections hero (whose scrim
   is z-index 2 and whose copy is 3) painted straight over the open About
   menu. Relative keeps the header in the flow, which is the point of this
   class, while letting it sit above the page it belongs to. */
.hdr-static { position: relative; z-index: 90; }
.hdr-static .hdr-row { padding: 1.1rem 0; }
/* For Sale and Holiday Villas are links that also open a dropdown
   (8 Oct 2026), so the trigger can be an <a> as well as a <button>. */
a.msub-t { text-decoration: none; cursor: pointer; }