/* ============================================================================
   Grewal RE Group — unified site chrome (header + footer + nav)
   ONE source of truth, applied identically to every page (no build step).
   Self-contained; accessible (skip link, ARIA, focus, keyboard); fast (no CLS).
   Transparent over the hero -> solid white on scroll. Brand gold #B8963E.
   Namespaced .gh-* so it never collides with legacy styles.
   ============================================================================ */

:root {
  --gh-gold: #B8963E;
  --gh-gold-dk: #9a7c33;
  --gh-ink: #171717;
  --gh-ink-soft: #4f4a42;
  --gh-line: #e8e3d8;
  --gh-dark: #0a0a0a;
  --gh-h: 82px;
}

/* ---- Skip link ---- */
.gh-skip {
  position: fixed; left: 8px; top: -56px; z-index: 100000;
  background: var(--gh-dark); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 6px 6px; font: 600 .9rem/1 Inter, system-ui, sans-serif;
  text-decoration: none; transition: top .15s ease;
}
.gh-skip:focus { top: 0; outline: 3px solid var(--gh-gold); outline-offset: 2px; }

/* ---- Header: fixed + transparent over hero ---- */
.gh-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9500;
  /* translucent frosted glass over the hero — you can see through it */
  background: rgba(10, 10, 12, 0.34);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
/* stays frosted, but lightens to translucent white once scrolled */
.gh-header.gh-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .08);
  border-bottom-color: var(--gh-line);
}
/* graceful fallback if a browser lacks backdrop-filter: use a bit more tint */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gh-header { background: rgba(10, 10, 12, 0.6); }
  .gh-header.gh-scrolled { background: rgba(255, 255, 255, 0.95); }
}

.gh-bar {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto; min-height: var(--gh-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem; gap: 1rem;
}

/* ---- Logo (previous white wordmark; swaps to dark mark on scroll). Links home. ---- */
.gh-logo { display: inline-flex; align-items: center; flex-shrink: 0; transition: transform .18s ease; }
.gh-logo:hover { transform: translateY(-2px); }
/* height on the <img>; display toggled ONLY on the .w/.b classes so the
   element-level rule can't override it (this was showing both logos at top) */
.gh-logo img { height: 56px; width: auto; }
.gh-logo-w { display: block; }
.gh-logo-b { display: none; }
.gh-scrolled .gh-logo-w { display: none; }
.gh-scrolled .gh-logo-b { display: block; }

/* ---- Primary nav ---- */
.gh-nav { display: flex; }
.gh-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.gh-menu a, .gh-sub-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  font: 500 .92rem/1 Inter, sans-serif; color: #fff;
  text-decoration: none; padding: .6rem .85rem; border-radius: 6px;
  background: none; border: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, color .2s ease;
}
.gh-scrolled .gh-menu a, .gh-scrolled .gh-sub-toggle { color: var(--gh-ink); }
.gh-sub-toggle svg { width: 11px; height: 11px; transition: transform .2s; }

/* hover: pop up a hair + go bold (like the "How can we help" tiles) */
.gh-menu > li > a:hover, .gh-sub-toggle:hover { font-weight: 700; transform: translateY(-2px); }
.gh-scrolled .gh-menu > li > a:hover, .gh-scrolled .gh-sub-toggle:hover { color: var(--gh-gold-dk); }

/* ---- Dropdown submenus ---- */
.gh-has-sub { position: relative; }
.gh-sub {
  list-style: none; margin: 0; padding: .4rem;
  position: absolute; top: calc(100% - 2px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--gh-line); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.gh-sub li { margin: 0; }
.gh-sub a {
  display: block; padding: .6rem .8rem; border-radius: 6px;
  font-size: .9rem; color: var(--gh-ink-soft) !important; font-weight: 500;
}
.gh-sub a:hover { background: #faf8f3; color: var(--gh-gold-dk) !important; font-weight: 700; transform: translateY(-2px); }
.gh-has-sub:hover > .gh-sub,
.gh-has-sub .gh-sub-toggle[aria-expanded="true"] + .gh-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.gh-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- Contact CTA (gold + near-black text = WCAG AA; pops on hover) ---- */
.gh-cta {
  background: var(--gh-gold) !important; color: #1a1a1a !important;
  font-weight: 700 !important; padding: .6rem 1.25rem !important;
  border-radius: 6px; margin-left: .4rem;
}
.gh-cta:hover { background: var(--gh-gold-dk) !important; color: #fff !important; transform: translateY(-2px); }

/* ---- Visible keyboard focus ---- */
.gh-header a:focus-visible, .gh-header button:focus-visible,
.gh-footer a:focus-visible, .gh-footer button:focus-visible, .gh-skip:focus-visible {
  outline: 3px solid var(--gh-gold); outline-offset: 3px; border-radius: 4px;
}

/* ---- Hamburger (mobile) ---- */
.gh-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; position: relative; z-index: 1; }
.gh-toggle span { width: 24px; height: 2px; background: #fff; transition: .25s; }
.gh-scrolled .gh-toggle span { background: var(--gh-ink); }
.gh-toggle[aria-expanded="true"] span { background: var(--gh-ink); }
.gh-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gh-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gh-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Clear the fixed header on subpage heroes (not the full-height homepage hero) ---- */
.article-hero, .cm-detail-hero, .faq-hero, .ct-hero, .search-hero,
.blog-index-hero, .cm-hub-hero, .lp-hero, .tool-hero, .rg-hero, .faq-wrap {
  padding-top: calc(var(--gh-h) + 1.75rem);
}

/* ============================ MOBILE ============================ */
@media (max-width: 900px) {
  .gh-toggle { display: flex; }
  .gh-nav {
    position: fixed; top: var(--gh-h); left: 0; right: 0; bottom: 0;
    background: #fff; transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto; padding: 1rem 1.25rem 2.5rem; display: block;
  }
  .gh-nav.gh-open { transform: translateX(0); }
  .gh-menu { flex-direction: column; align-items: stretch; gap: .15rem; }
  /* inside the white panel, links are always dark */
  .gh-menu a, .gh-sub-toggle { color: var(--gh-ink) !important; padding: .9rem .5rem; font-size: 1rem; width: 100%; justify-content: space-between; border-radius: 8px; transform: none !important; }
  .gh-menu a:hover, .gh-sub-toggle:hover { font-weight: 700; color: var(--gh-gold-dk) !important; }
  .gh-menu > li { border-bottom: 1px solid var(--gh-line); }
  .gh-cta-li { border-bottom: none !important; margin-top: 1rem; }
  .gh-cta { display: block; text-align: center; margin-left: 0; }
  .gh-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0; padding: 0 0 .4rem .6rem;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .gh-has-sub:hover > .gh-sub { max-height: 0; }
  .gh-has-sub .gh-sub-toggle[aria-expanded="true"] + .gh-sub { max-height: 340px; }
}

/* ============================ FOOTER ============================ */
.gh-footer {
  background: var(--gh-dark); color: rgba(255,255,255,.72);
  font-family: Inter, system-ui, sans-serif; padding: 3.25rem 1.5rem 1.75rem;
}
.gh-foot-inner { max-width: 1240px; margin: 0 auto; }
.gh-foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.gh-foot-brand img { height: 34px; width: auto; margin-bottom: .9rem; }
.gh-foot-brand p { margin: .25rem 0; line-height: 1.6; font-size: .9rem; }
.gh-foot-tag { color: var(--gh-gold); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; }
.gh-foot-brand a { color: rgba(255,255,255,.8); text-decoration: none; }
.gh-foot-brand a:hover { color: #fff; }
.gh-footer nav h2 { font: 600 .78rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 1rem; }
.gh-footer nav ul { list-style: none; margin: 0; padding: 0; }
.gh-footer nav li { margin-bottom: .6rem; }
.gh-footer nav a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .9rem; transition: color .2s, transform .18s; display: inline-block; }
.gh-footer nav a:hover { color: var(--gh-gold); transform: translateY(-2px); }
.gh-foot-legal { padding-top: 1.5rem; font-size: .78rem; color: rgba(255,255,255,.5); }
.gh-foot-legal p { margin: .35rem 0; line-height: 1.6; }
.gh-foot-legal a, .gh-link-btn { color: rgba(255,255,255,.62); text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.gh-foot-legal a:hover, .gh-link-btn:hover { color: var(--gh-gold); }
@media (max-width: 760px) { .gh-foot-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 460px) { .gh-foot-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .gh-nav, .gh-sub, .gh-toggle span, .gh-skip, .gh-menu a, .gh-sub-toggle, .gh-logo, .gh-cta, .gh-footer nav a { transition: none; }
  .gh-menu > li > a:hover, .gh-sub-toggle:hover, .gh-cta:hover, .gh-logo:hover, .gh-footer nav a:hover { transform: none; }
}