/* ==========================================================================
   FGC UNIFIED NAVIGATION — v107 (single contract for all pages)
   --------------------------------------------------------------------------
   One breakpoint: 1500px. Desktop (>=1500px): inline links. Below 1500px:
   Menu button + dropdown anchored directly beneath the button.
   Toggle / contact button: approved teal #104b61, gold #b99a60 border,
   white italic Georgia. Dropdown: dark teal #104b61, white links, active
   ocean blue #24b3d0. Desktop links: per-page --fgc-nav-ink
   (white on photo heroes, navy #103a5b on light headers), active ocean
   blue #168ead. Header overlays the hero at >=768px (body-direct headers
   only); in-flow below 768px. Per-page <style> nav rules were neutralized
   in v107 so this file is the only nav styling. Do not re-add per-page
   nav overrides — change this file instead.
   v110 (2026-10-29): nav font +2px (desktop clamp 13–16px, dropdown 16px);
   active-page link bold + underlined for visibility. Logo offset unchanged.
   v111 (2026-10-29): phones only (<=480px) — logo +15% (150px -> 173px,
   John's pick). Desktop sizes and the offset rule above are untouched.
   v112 (2026-10-29): logo +15% scoped to the HOMEPAGE ONLY (#home); all
   v111 phone hero-brightening blocks reverted (hero gradients unchanged);
   slight feathered lightening behind the logo only (::before on
   .fgc-global-logo, no layout change, no hard edge).
   ========================================================================== */

/* ---- Header shell: flex row, logo | links | contact + toggle. No absolute
        positioning anywhere, so nothing can overlap the logo or the button. */
.fgc-global-header {
  position: relative !important;
  z-index: 11000 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(12px, 1.1vw, 24px) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px clamp(14px, 2.5vw, 30px) !important;
  background: transparent !important;
  min-height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- Logo: flexible width, shifted right from the corner (approved
        2026-10-28, aligned with hero content). The offset is visual only
        (relative positioning): the logo's flex footprint is unchanged, so
        the nav links and buttons do not move. Tapers on small screens so
        the logo never crowds the Menu button. No feather/scrim here —
        legibility on dark heroes is handled by the hero gradients. */
.fgc-global-logo {
  flex: 0 0 clamp(150px, 15vw, 210px) !important;
  min-width: 0 !important;
  position: relative !important;
  left: clamp(20px, 5.3vw, 100px) !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.fgc-global-logo img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ---- v113: fully feathered lightening directly behind the logo only
        (John 2026-10-29: NO obvious gradient, feathered to complete
        dissolution, no shapes, no visible oval edge, no banding). The v112
        glow (peak .28, fading at 70% of a box-hugging ellipse) read as a
        visible oval. This version dissolves completely INSIDE a much
        larger box: low peak, long linear fade to fully transparent well
        before the box boundary in every direction, so no edge exists to
        see. It moves with the logo, affects no layout, intercepts no
        clicks. Hero gradients unchanged. */
.fgc-global-logo::before {
  content: "" !important;
  position: absolute !important;
  inset: -120px -240px !important;
  background: radial-gradient(ellipse 160px 120px at 50% 50%, rgba(255, 255, 255, .23) 0%, rgba(255, 255, 255, 0) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ---- v114: Property Management ONLY — same feathering geometry and same
        peak (.23) as the shared rule above, but the glow tint is sampled
        from this page's own sunset hero photo instead of plain white, so
        the lightening blends with the warm photo behind it (John
        2026-10-29). Sampled 2026-10-29 from the rendered logo area:
        median #907c5c / mean #7f7056 (photo + navy overlay); raw photo
        top-left mean #d2a988 (warm peach-tan sunset). Tint (255,233,208)
        is that photo tone lightened to a warm cream; composited at .23
        over the rendered background it stays golden rather than pulling
        gray-blue like white does. Complete dissolution, no edge, no
        shape, no banding — identical standard. Scoped by the
        fgc-page-property-management body hook on the Property Management
        document only; the shared white rule above is untouched for all
        other pages. */
body.fgc-page-property-management .fgc-global-logo::before {
  background: radial-gradient(ellipse 160px 120px at 50% 50%, rgba(255, 233, 208, .23) 0%, rgba(255, 233, 208, 0) 100%) !important;
}

/* ---- Desktop links: centered row, per-page ink, active ocean blue. */
.fgc-global-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(9px, .85vw, 19px) !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.fgc-global-links a {
  white-space: nowrap !important;
  font: 600 clamp(13px, .95vw, 16px)/24px Arial, Helvetica, sans-serif !important;
  color: var(--fgc-nav-ink, #103a5b) !important;
  -webkit-text-fill-color: var(--fgc-nav-ink, #103a5b) !important;
  text-decoration: none !important;
  text-shadow: var(--fgc-nav-shadow, none) !important;
  padding: 9px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.fgc-global-links a:hover,
.fgc-global-links a:focus-visible {
  text-decoration: underline !important;
}
.fgc-global-links a[aria-current="page"] {
  color: #168ead !important;
  -webkit-text-fill-color: #168ead !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ---- Contact button + Menu toggle: approved teal/gold/Georgia look. */
/* v117 (2026-10-29): margin-top:0 — the Contact and About pages carry a
   bare top-level `button{...margin-top:23px}` rule that survived here
   (no margin was set on the toggle) and pushed the Menu toggle ~10px
   below the Get in Touch button in the centered flex header. Sales has
   no such rule, so it stayed level. Neutralized here, in the shared
   stylesheet, so it holds on every page at every width. */
.fgc-global-contact,
.fgc-menu-toggle {
  margin-top: 0 !important;
  background: #104b61 !important;
  background-color: #104b61 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid #b99a60 !important;
  border-radius: 6px !important;
  font: italic 600 15px/1.2 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.fgc-global-contact {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 15px !important;
  min-height: 0 !important;
}
.fgc-menu-toggle {
  display: none !important;
}

/* ---- Below 1500px: hide inline links, show Menu button, dropdown anchored
        to the header's right padding (directly beneath the button). */
@media (max-width: 1499px) {
  .fgc-global-links {
    display: none !important;
    position: absolute !important;
    top: calc(100% - 1px) !important;
    right: clamp(14px, 2.5vw, 30px) !important;
    left: auto !important;
    width: min(310px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: min(75vh, 610px) !important;
    overflow-y: auto !important;
    z-index: 11010 !important;
    padding: 10px !important;
    background: #104b61 !important;
    border: 1px solid #c4a76e !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(0, 25, 42, .26) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  .fgc-global-header.menu-open .fgc-global-links {
    display: flex !important;
  }
  .fgc-global-links a {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font: 600 16px/1.4 Arial, Helvetica, sans-serif !important;
    padding: 11px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    text-align: center !important;
    white-space: normal !important;
    background: transparent !important;
    text-shadow: none !important;
    text-decoration: none !important;
  }
  .fgc-global-links a:last-child {
    border-bottom: 0 !important;
  }
  .fgc-global-links a[aria-current="page"] {
    color: #24b3d0 !important;
    -webkit-text-fill-color: #24b3d0 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
  .fgc-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 5 !important;
    margin-left: auto !important;
    padding: 11px 18px !important;
  }
}

/* The contact button sits left of Menu only while it is visible (>=768px).
   Below 768px the contact button is display:none but still matches the
   adjacent-sibling selector, so this rule must NOT apply there or the
   Menu button loses its right alignment. */
@media (min-width: 768px) and (max-width: 1499px) {
  .fgc-global-contact + .fgc-menu-toggle {
    margin-left: 0 !important;
  }
}

/* ---- Header overlays the hero at >=768px (interior body-direct headers).
        The homepage header lives inside .hero and stays in-flow. */
@media (min-width: 768px) {
  body > .fgc-global-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* ---- Narrow: contact button hides, Menu takes its place at the right. */
@media (max-width: 767px) {
  .fgc-global-contact {
    display: none !important;
  }
}

/* ---- Desktop: the menu-open class must never hide the inline links. */
@media (min-width: 1500px) {
  .fgc-global-header.menu-open .fgc-global-links {
    display: flex !important;
  }
}

/* ---- v111/v112: phones only (<=480px) — logo +15% (John's pick) on the
        HOMEPAGE ONLY, scoped to #home (the homepage hero section id, which
        exists on no other page): 150px -> 173px. Other pages keep the base
        150px phone size so their top bars do not grow. Desktop untouched
        everywhere. */
@media (max-width: 480px) {
  #home .fgc-global-logo {
    flex-basis: 173px !important;
  }
}

/* ---- v112: homepage phone hero crop (John 2026-10-29) — shift the phone
        crop from 80% to 40% so the eyebrow, headline, and subtext sit over
        the calm sky/water instead of tangling with palm fronds. Phones only
        (<=480px), homepage only (#home). Desktop position, framing, and all
        other pages untouched. Six positions evaluated (80/100/60/40/20/0);
        40% is calmest across the full text block. */
@media (max-width: 480px) {
  section#home.hero {
    background-position: 40% center !important;
  }
}