/* ===== Chen Digital — global site header polish ===== */
/* Applies site-wide (every page). Same exact system as the rest of the site. */

@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Demibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --cd-gold-dark: #a7855a;
  --cd-gold: #c9ae7b;
  --cd-gold-light: #d7c4a3;
  --cd-cream: #f6f2ea;
  --cd-paper: #fbf9f5;
  --cd-ink: #1b1815;
  --cd-ink-soft: #4a443c;
  --cd-line: #e6dfd2;
  --cd-ease: cubic-bezier(.22,1,.36,1);
}

header.elementor-location-header {
  background: rgba(251,249,245,.9) !important;
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 var(--cd-line);
}
header.elementor-location-header .site-header-root { padding: 16px 0 !important; }

/* ---------- Nav links ---------- */
header.elementor-location-header .elementor-nav-menu {
  display: flex;
  gap: 32px;
}
header.elementor-location-header .elementor-item {
  font-family: "Talent FS", "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cd-ink-soft) !important;
  position: relative;
  padding: 4px 0 !important;
  transition: color .3s var(--cd-ease);
}
header.elementor-location-header .elementor-item::after {
  content: "";
  position: absolute;
  right: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--cd-ink);
  transition: width .3s var(--cd-ease);
}
header.elementor-location-header .elementor-item:hover,
header.elementor-location-header .elementor-item-active {
  color: var(--cd-ink) !important;
  background: transparent !important;
}
header.elementor-location-header .elementor-item:hover::after,
header.elementor-location-header .elementor-item-active::after { width: 100%; }

/* ---------- Header CTA buttons ---------- */
header.elementor-location-header .header-cta-wrap { flex: none; }
header.elementor-location-header .elementor-button {
  border-radius: 100px !important;
  padding: 12px 24px !important;
  font-family: "Talent FS", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: transform .35s var(--cd-ease), box-shadow .35s, background .35s, color .35s;
}
header.elementor-location-header .header-btn-primary .elementor-button,
header.elementor-location-header a.header-btn-primary {
  background: var(--cd-ink) !important;
  color: var(--cd-paper) !important;
}
header.elementor-location-header .header-btn-outline .elementor-button,
header.elementor-location-header a.header-btn-outline {
  background: transparent !important;
  color: var(--cd-ink) !important;
  border: 1.5px solid var(--cd-ink) !important;
}
header.elementor-location-header .elementor-button:hover { transform: translateY(-2px); }

/* ---------- Logo ---------- */
header.elementor-location-header .header-logo-wrap img { max-height: 34px; width: auto; }

/* ---------- Mobile menu toggle ---------- */
header.elementor-location-header .elementor-menu-toggle { color: var(--cd-ink) !important; }

@media (max-width: 1024px) {
  header.elementor-location-header .header-cta-wrap .header-btn-outline { display: none; }
}

/* ---------- Mobile dropdown nav panel ---------- */
/* Elementor sets `will-change: transform, opacity` on the nav-menu toggle
   widget wrapper. Per spec, that makes it the CSS "containing block" for any
   `position:fixed` descendant (nearer than the header, which is what the
   width below is actually meant to be relative to) — and this wrapper is
   only ~50px wide (sized to the hamburger icon), so the dropdown's
   `width:100%` was resolving to 50px instead of the viewport width. Removing
   will-change here lets the fixed dropdown fall through to the header (which
   has backdrop-filter, so IT becomes the containing block, and it's
   full-width) as originally intended. */
header.elementor-location-header .elementor-widget-nav-menu { will-change: auto !important; }

/* Never styled for mobile before, so it fell back to Elementor's default
   horizontal flex row (inherited from the desktop .elementor-nav-menu rule
   above), cramming all links into one narrow scrollable strip. */
header.elementor-location-header .elementor-nav-menu--dropdown {
  /* Elementor positions this panel absolutely, relative to whichever
     ancestor establishes the nearest positioning context — in this header
     that's a narrow inner wrapper around the toggle button, not the
     full-width header itself, so width:100% only ever meant "100% of that
     narrow box". `fixed` makes it relative to the viewport instead,
     independent of any ancestor's width. Its top edge sits behind the
     sticky header (lower z-index) so it visually starts right where the
     header ends, without needing to hardcode the header's height. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: 90 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: none !important;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--cd-paper) !important;
  padding: 90px 24px 24px !important;
  box-shadow: 0 20px 40px -20px rgba(27,24,21,.25);
}
/* The inner <ul class="elementor-nav-menu"> shares its class with the desktop
   nav (styled as a row with gap:32px above), so without this override the
   dropdown's own items inherited that horizontal layout and were pushed off
   to the side instead of stacking. */
header.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
}
header.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
  display: block !important;
  width: 100%;
  padding: 14px 4px !important;
  font-size: 17px !important;
  border-bottom: 1px solid var(--cd-line);
}
header.elementor-location-header .elementor-nav-menu--dropdown .elementor-item::after { display: none; }

/* ---------- Footer copyright line ---------- */
/* Dynamic-tag heading rendered as a <span>; without this it inherits the
   sitewide bold/gold "eyebrow" span-heading look used elsewhere, which reads
   badly as a copyright line (especially on mobile). Plain, regular black text. */
.footer-copyright.elementor-widget-heading .elementor-heading-title {
  font-weight: 400 !important;
  color: #1b1815 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}